Spec Driven Design — From Logic to Style
1. Turning direction into a style spec
Transform mood boards and reference materials into explicit rules that AI can execute.
- Collect images and design patterns, and leave comments explaining why they were chosen and the intended use.
- Shift from references that only convey a mood to interpretable design decisions
- Establish criteria for AI agents to judge what to keep and what to change
- Organize the refined direction in a `DESIGN.md` or `StyleGuide.md`.
- Define visual rules such as color, typography, spacing, and mood
- Use it as a single basis shared by design and implementation
2. Maintaining control while implementing gradually
Rather than applying a natural-language style guide all at once, implement and check it in small units.
- Based on the spec, AI agents progressively apply visual style to a function-focused prototype.
- Compare results at each stage to quickly spot deviations and interpretation gaps
- Separate structure and style to keep the scope of revisions and the impact clear
- Designers accept a margin of error in the generated results but retain decision-making authority over details.
- Provide specific feedback on what differs from expectations
- Improve the spec as part of the iteration process to increase consistency in the next result
3. Three paths for refining the result
Choose the most efficient method of revision according to the state of the deliverable and the level of precision needed.
- Prompt improvement
- Refine by talking with the AI agent and describing visual issues in precise language
- Using Figma
- Move the code into Figma layers via MCP or direct copy, then adjust at the pixel level
- Direct code editing
- Edit the necessary parts such as CSS directly to finish quickly and cost-effectively
