How to use DESIGN.md with Codex
Codex works best when it can inspect the project and follow explicit constraints. A DESIGN.md file gives it a stable visual brief: tokens, component rules, density, motion, typography, and examples of what the UI should feel like.
A simple workflow
- Save the reference website's visual rules into DESIGN.md.
- Add structured tokens in JSON or CSS variables.
- Ask Codex to read the design context before editing UI files.
- Tell Codex which parts are inspiration and which parts must not be copied.
- Verify the rendered page against screenshots or a sample page.
Example prompt
"Read DESIGN.md and tokens.json first. Build the page using the same typography rhythm, spacing density, radius, and component hierarchy. Do not copy logos, text, proprietary imagery, or exact page layout."
Where DesignSaver helps
DesignSaver packages the design context, CSS variables, Tailwind values, sample preview, and Codex-ready prompt so the handoff takes minutes instead of a long manual brief.