Understanding DesignSaver Output Files
When you paste a URL into DesignSaver, you get more than a single file. The output is a complete design context package with 8 files covering different aspects of the extracted design. Here is what each file does and how to use it.
DESIGN.md — Visual language rules
Purpose: Human-readable description of the design system. This is what you (and your AI agent) read first to understand the visual intent.
DESIGN.md covers colors by role, typography hierarchy, spacing system, border radius, shadows, component patterns, density, and visual constraints. It answers "why" and "when" — not just "what value."
Use with: All AI agents. Reference it in your prompt as the primary design context file.
tokens.json — Machine-readable values
Purpose: Structured JSON of exact design token values. AI agents parse this more reliably than natural language.
tokens.json contains the same information as DESIGN.md but in a format the agent can consume programmatically. Each token includes a value, type, and category.
Use with: All AI agents. Pair with DESIGN.md — the agent reads DESIGN.md for understanding and tokens.json for exact values.
style.css — CSS custom properties
Purpose: Drop-in CSS variables that define the design tokens. The most direct way to influence AI-generated CSS output.
:root {
--color-primary: #6c5ce7;
--color-surface: #0c0e14;
--color-text: #e6e8ee;
--spacing-section: 80px;
--radius-card: 12px;
--font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}Use with: CSS-based projects. Import into your main stylesheet and reference the variables in component code.
tailwind.config.json — Tailwind theme
Purpose: Tailwind CSS theme extension values extracted from the reference site. Merge these into your project's Tailwind config.
Includes custom colors, font families, spacing scale, border radius, and shadow
values that match the reference design. After merging, your agent can use Tailwind
utilities like bg-primary or font-display.
Use with: Tailwind CSS projects. Merge the values into
tailwind.config.js using theme.extend.
sample-page.html — Live preview
Purpose: A working HTML page that demonstrates the extracted design system in action. Shows buttons, cards, forms, typography, and layout using the extracted tokens.
Open this file in a browser to preview the design before building with it. It is also useful as a reference for your AI agent — ask it to match the sample page's look and feel.
Use with: Visual verification. Open in browser or share with your agent as a reference.
codex-prompt.md — Agent-ready prompt
Purpose: A copy-ready prompt for your AI coding agent. Drop this into your conversation with Codex, Claude Code, or Cursor.
The prompt includes instructions to read DESIGN.md and tokens.json, apply the design system, and avoid common mistakes. It is a time-saver that eliminates the need to write the same setup instructions every session.
Use with: Copy and paste into your AI agent conversation before asking for UI generation.
screenshots/ — Visual reference
Purpose: Desktop and mobile screenshots of the reference website, captured at extraction time.
Screenshots help you verify that the generated output matches the reference. They are also useful for agents that support image input (Claude Code, ChatGPT).
Use with: Visual verification. Compare AI-generated output against screenshots to catch style drift.
Putting it all together
The package is designed so each file serves a specific purpose in your AI workflow. Here is a typical order of operations:
- Open DESIGN.md to understand the design intent.
- Import style.css or merge tailwind.config.json into your project.
- Drop codex-prompt.md into your AI agent conversation.
- Reference screenshots/ and sample-page.html for verification.