Turn websites and screenshots into AI-ready design systems.
Extract colors, typography, spacing, radii, shadows, and component styles, then export them as DESIGN.md, CSS Variables, Tailwind CSS themes, JSON Design Tokens, and traceable Design Evidence.
简体中文 · Download · Features · Development
Imprint is an open-source desktop application that transforms websites and UI screenshots into reusable design systems.
It analyzes visual rules such as colors, typography, spacing, border radii, shadows, layout patterns, and component styles, then generates structured outputs that can be used directly by AI coding agents and frontend projects.
Instead of asking AI to invent another generic interface, give it a real design system to follow.
Website or Screenshot
↓
Imprint
↓
Design System
↓
Claude Code / Codex / Other AI Agents
↓
Consistent, production-ready interfaces
AI coding tools can generate interfaces quickly, but they often produce generic and inconsistent visual styles.
Prompts alone are not enough to describe a complete design language. Imprint extracts that language from real websites and screenshots and converts it into structured specifications that AI agents can follow.
| Feature | Description |
|---|---|
| Website analysis | Analyze visual styles directly from a URL |
| Diverse page discovery | Combine navigation links and sitemaps, then sample representative same-site routes |
| Traceable evidence | Record page topology, section geometry, component instances, viewport coverage, and limitations |
| Token confidence | Preserve per-token provenance, source-page coverage, and deterministic confidence |
| Screenshot analysis | Extract design patterns from UI screenshots |
| Design system generation | Generate colors, typography, spacing, radii, shadows, and component guidance |
| AI-ready documentation | Export Google DESIGN.md alpha with traceable Imprint extensions |
| Code export | Export CSS Variables, Tailwind CSS v4 themes, and JSON Design Tokens |
| Local AI agents | Work with Claude Code, Codex, Kimi, Gemini CLI, OpenCode, and x-code-cli |
| Local-first storage | Store project data locally with SQLite |
| Saved website themes | Save analysis snapshots and preview their tokens inside scoped, fixed validation scenarios |
| Built-in themes | Chinese ink painting, cyberpunk, Nordic minimalism, glassmorphism, and more |
| Validation scenarios | Test theme hierarchy, density, and legibility across workflows and interaction states |
- Analyze a website or screenshot with Imprint.
- Export the generated
DESIGN.md. - Copy
DESIGN.mdinto your project. - Give your AI coding agent the following instruction:
Read DESIGN.md and use it as the visual source of truth for all UI implementation. Preserve the existing product requirements and do not copy copyrighted text or branding from the source website.
| Goal | Recommended output | Include with it |
|---|---|---|
| Ask AI to revise an existing UI | DESIGN.md | Current UI screenshot or source code |
| Implement directly in a CSS project | CSS Variables | The existing style entry file |
| Implement directly in a Tailwind v4 project | Tailwind @theme |
The project's theme stylesheet |
| Use a toolchain or an agent that needs structured data | Tokens JSON | A precise automation task |
| Audit how the source pages were observed | Design Evidence JSON | The related screenshots |
If you give AI only one exported file, choose DESIGN.md.
Imprint's generated DESIGN.md follows the Google Labs DESIGN.md alpha specification: a typed document model is rendered into the normative YAML groups and canonical section order. The summarized x-imprint extension keeps source, coverage, analysis summaries, responsive metadata, and token groups not covered by the alpha schema; complete token provenance remains in Tokens JSON and design-evidence.json.
Every analysis first produces deterministic DesignEvidence: multi-viewport screenshots, page topology, normalized
section and component geometry, responsive differences, safe interaction observations, media layers, coverage, and
limitations. This result works without AI and is stored separately from Tokens JSON.
When an API provider or Agent CLI is configured, Imprint interprets that bounded evidence package as a validated,
versioned DesignProfile. The desktop Overview shows its thesis, signature moves, transfer rules, confidence, and
clickable evidence references. AI-suggested token names remain aliases; they never replace extracted token keys.
Screenshot input is opt-in. It requires a vision-capable API model and explicit consent in Settings, only uses a limited selection from anonymous public pages, and is never sent for signed-in analyses. Signed-in evidence is not sent to any configured AI until the user explicitly requests structural interpretation. Agent CLI interpretation is structural-only. If interpretation fails, tokens, evidence, screenshots, and implementation exports remain available, and the AI step can be retried independently.
CLI extraction never calls an AI provider unless --intelligence is explicitly set. API keys are read from process
environment variables only — IMPRINT_AI_API_KEY (generic override, checked first) or the provider's standard
variable:
| Provider | Environment variable |
|---|---|
openai |
OPENAI_API_KEY |
anthropic |
ANTHROPIC_API_KEY |
google |
GOOGLE_GENERATIVE_AI_API_KEY |
deepseek |
DEEPSEEK_API_KEY |
moonshotai |
MOONSHOT_API_KEY |
alibaba |
ALIBABA_API_KEY |
zhipu |
ZHIPU_API_KEY |
xai |
XAI_API_KEY |
custom |
IMPRINT_AI_API_KEY (with --base-url / baseUrl) |
pnpm build:cli
export DEEPSEEK_API_KEY=sk-... # PowerShell: $env:DEEPSEEK_API_KEY='sk-...'
imprint extract https://example.com --viewport all --format evidence
imprint extract https://example.com --pages 5 --discovery auto --format json
imprint extract https://example.com --viewport all --intelligence structural --provider deepseek --format profile
imprint extract https://example.com --intelligence structural --provider deepseek --format reconstruction
imprint extract https://example.com --intelligence vision --provider openai --allow-screenshotsThe MCP server keeps imprint_extract deterministic. Use imprint_interpret for an explicit provider call, or set
depth: "language" on imprint_compare to compare two validated structural profiles. Set includeBrief: true on
imprint_interpret only when the complete eligible Reconstruction Brief is needed; it is omitted by default. Pass the
API key through your MCP client's server configuration, for example:
{
"mcpServers": {
"imprint": {
"command": "imprint-mcp",
"env": { "DEEPSEEK_API_KEY": "sk-..." }
}
}
}AI keys configured here are independent of the desktop app's Settings — each entry point reads only its own source.
Download the latest version from GitHub Releases.
| Platform | Architecture |
|---|---|
| Windows | x64 |
| macOS | Apple Silicon (arm64) |
| macOS | Intel (x64) |
| Layer | Technology |
|---|---|
| Desktop Framework | Electron + Electron Forge |
| Frontend | React 19 + TypeScript + Vite |
| UI | Tailwind CSS v4 |
| State Management | Zustand |
| Storage | SQLite (better-sqlite3) |
| Web Analysis | Playwright |
| Internationalization | i18next + react-i18next |
| AI | OpenAI / Claude / DeepSeek / Kimi API, Local Agent CLI |
# Install dependencies
pnpm install
# Start development mode
pnpm dev
# Package the app
pnpm build
# Build distributable (zip on Windows, DMG on macOS)
pnpm make
# Run E2E tests (no LLM required)
pnpm test:e2eFor build signing, notarization, GitHub Actions configuration, and release procedures, see:
src/
├── main/ # Electron main process
│ ├── analyzer/ # Web analysis engine (Electron wrapper)
│ ├── export.ts # Design system export
│ ├── database.ts # SQLite database
│ └── agent-detect.ts # AI agent detection
│
├── core/ # Shared extraction engine (CLI + MCP + Desktop)
│ ├── analyzer/ # Style extraction, color clustering, token building
│ ├── design-evidence/ # Stable observed evidence and coverage
│ ├── design-intelligence/ # Validated profiles, briefs, context, validation
│ └── export/ # CSS / Tailwind / JSON / Markdown / SCSS generators
│
├── cli/ # CLI entry point (imprint bin)
├── mcp/ # MCP stdio server (imprint-mcp bin)
│
└── renderer/ # React frontend
├── components/
├── pages/
├── stores/
└── i18n/
MIT