Design a personal site with Codex CLI and a Markdown spec
The author gave Codex CLI a project-local design brief before generating the UI, then refined the result. Task: The author extracted a frontend design prompt from Anthropic's Claude plugin and saved it as a local Markdown file. He instructed Codex CLI to read this file as the design specification before generating any UI code. After the initial generation, he reviewed the output and performed iterative refinements to align the result with his vision.; tools: Codex. Human role: The original post does not say how a person stayed involved.; limitations: This is a self-reported case from a single personal website project, so scalability and team adoption are unverified. The workflow relies on manually extracting prompts from external repositories, which may have licensing or maintenance implications. Design quality outcomes depend heavily on the author's specific taste and review process..
Tools
Published on Agent Work Atlas:
Overview
The author gave Codex CLI a project-local design brief before generating the UI, then refined the result.
Workflow
The author extracted a frontend design prompt from Anthropic's Claude plugin and saved it as a local Markdown file. He instructed Codex CLI to read this file as the design specification before generating any UI code. After the initial generation, he reviewed the output and performed iterative refinements to align the result with his vision.
Reported result
The author reported satisfaction with the final shipped design, noting it met his criteria for clean typography and spacing. He observed that Codex handled subsequent iterations quickly and accurately once the spec was established. No quantitative metrics such as time savings or error rates were provided in the source.
Human role
The original post does not say how a person stayed involved.
Limitations
This is a self-reported case from a single personal website project, so scalability and team adoption are unverified. The workflow relies on manually extracting prompts from external repositories, which may have licensing or maintenance implications. Design quality outcomes depend heavily on the author's specific taste and review process.
Try it
I want to replicate this design workflow for a new low-risk page, such as an 'About' section. First, locate a high-quality frontend design prompt from a reputable source like Anthropic's public plugins and save it as `design-spec.md` in my project root. Next, instruct Codex CLI to read `design-spec.md` and confirm it understands the typography, spacing, and layout constraints before writing any code. Ask Codex to generate the initial HTML/CSS based on this spec. Once generated, I will review the output against the spec. If deviations exist, I will provide specific feedback for iteration. Please start by showing me the content of `design-spec.md` and the first code draft for my approval before proceeding to further iterations.
Source reports are not independently verified. Publication date is the catalog publication date, not the original article date.