How to Use DesignSaver with Your AI Coding Workflow
DesignSaver produces a complete design context package from any URL. But the real value is how you use that package with your AI coding tools. Here is a practical workflow for integrating DesignSaver output into Codex, Claude Code, and Cursor.
The basic workflow
- Extract — Paste a reference URL into DesignSaver and generate the design context package.
- Review — Open DESIGN.md and tokens.json. Adjust any values that need tuning.
- Import — Add the package files (or their values) to your project.
- Prompt — Reference the design context when asking your AI agent to generate UI.
- Verify — Compare the generated output against the reference screenshots.
With Codex
Place DESIGN.md and tokens.json in your project root. Use the codex-prompt.md from your DesignSaver export as a starting point:
Read DESIGN.md and tokens.json first. These files define the
visual design system for this project. Build UI using the
colors, typography, spacing, and component patterns defined there.
Do not guess styles — always reference the design context.With Claude Code
Claude Code reads CLAUDE.md for project context. Reference your DesignSaver package in CLAUDE.md:
# CLAUDE.md
Always read DESIGN.md before generating UI.
Key tokens are in tokens.json — reference exact values from there.
Use screenshots/ as visual reference for layout and density.With Cursor
Cursor uses .cursorrules for project-level context. Drop DESIGN.md and tokens.json into your project, then reference them in your chat prompt:
@DESIGN.md @tokens.json
Build a settings page following this design system.
Use the spacing, colors, and component patterns defined here.Tailwind projects
If you use Tailwind, DesignSaver generates a tailwind.config.json with the extracted theme values. Merge it into your tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: "#6c5ce7",
surface: "#0c0e14"
},
fontFamily: {
sans: ["Plus Jakarta Sans", "system-ui"]
}
}
}
}Once merged, your agent can use Tailwind utility classes that match the reference design.
Best practices
- Keep DESIGN.md in version control — it is the source of truth for your agent's visual output.
- Reference the design context first — put it at the top of your prompt, before the actual request.
- Include negative constraints — tell the agent what to avoid (e.g., "do not use decorative fonts").
- Iterate — update DESIGN.md when you want the agent's output to change. The file is your control surface.