Quick start: use your own design reference
Use an existing DESIGN.md, or generate one from a public webpage and bring it into your current project. A design reference complements your feature requirements and visual checks.
Start in your existing repository
Place DESIGN.md beside the frontend code it describes. Keep a copy before editing. You can use a guide you already have; the worked example below is optional.
Connect the reference through AGENTS.md
Add a short instruction to the AGENTS.md that governs your frontend. Keep the existing engineering instructions. DESIGN.md describes appearance; AGENTS.md tells Codex when to read it and how to verify the work.
Before UI work, read DESIGN.md and the existing source. Use the documented design rules. Run the project checks and inspect the changed page at desktop and phone widths.Send the product requirement
Read DESIGN.md and inspect the existing UI before editing. Add a settings page using the documented design rules. Explain any missing design decisions. Build and check the page on desktop and mobile.
Codex: Shiftline
Starting with the Atlas Tailwind project and its DESIGN.md, Codex built Shiftline with a dashboard and a separate Schedule page. You can add shifts, combine day and team filters, and keep changes in this browser after a reload. Both pages support light and dark themes on phone and desktop.
Codex CLI 0.153.4 ·
Optional worked example: dashboard to scheduling app
A dense dispatch dashboard with status cards, an operational table, restrained color roles, and compact responsive navigation.
Steps
Start with one working download
Open Atlas Dispatch in Gallery and compare its source, clone, and DESIGN.md. Create your own clone of that public source, download the starter project, and extract it into a new folder. Use Node.js 24 to install and preview the unmodified files before asking the tool to make changes.
Put the brief in the download
In Download starter project, enter the scheduling brief before downloading. Open the extracted folder in Codex and read AGENT_PROMPT.md to confirm the brief was included. Keep the project instructions in AGENTS.md and the captured visual facts in DESIGN.md.
Let Codex follow the handoff
Send “Read AGENT_PROMPT.md and complete the project.” The handoff asks the agent to preserve the captured guide as REFERENCE_DESIGN.md, change the source, rebuild dist, and update the final DESIGN.md. Check the reference before accepting the result.
Run the result and test the change
Run the build and preview again. Add a shift, change both filters, and use the keyboard to reach and close controls. Check 390px, 768px, and 1440px widths. If the input has working themes, switch them and reload. Compare the preserved reference with the download and read the final DESIGN.md against the actual page.
Files and commands
Initial Codex message
Read AGENT_PROMPT.md and complete the project.The same project brief
Build Shiftline, a weekly scheduling dashboard for teams of 8–20 people. Rebrand the existing Atlas Dispatch dashboard with team availability and coverage summaries, and add a separate Schedule page linked from the navigation with a weekly shift view. The primary action is Add shift: let people add a shift locally and filter by day and team. Keep the captured layout density, typography, spacing, table behavior, and any working themes. Do not add a backend or copy claims from the source. Preserve the captured DESIGN.md byte for byte as REFERENCE_DESIGN.md, then update DESIGN.md to describe Shiftline. Rebuild the project and verify both pages, keyboard operation, no horizontal page overflow at 390px, 768px, and 1440px, and any theme switch after reload.Run the downloaded project
npm ci
npm run build
npm run previewIf the brief or result is incomplete
If AGENT_PROMPT.md does not contain your brief, check the downloaded folder before starting a second task. A successful build alone is not acceptance: open the preview, exercise Add shift and the filters, and inspect the final DESIGN.md.
If Codex edits only dist, ask it to apply the change to index.html or src and rebuild. The source must reproduce the page you reviewed.
Official tool documentation
Bring the reference into your project
Start with a public webpage, get its frontend project and design guide, then continue with your own requirements.
Generate a design reference