Codex Figma design briefs and screen acceptance
Translate a product request into goals, flows, screens, reusable components, and observable edge-state requirements.
中文Install in Codex
Codex with an excerpt from the product requirements, the target platform, and existing component notes.
- Review `.agents/skills/figma-design-brief/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.agents/skills/figma-design-brief/` in your project and save the reviewed file as `.agents/skills/figma-design-brief/SKILL.md`.
- Start Codex from that project's root, then type `$figma-design-brief` and select the matching skill.
Example task
Draft a brief for web catalog search.
feature=`catalog-search`; platform=`web`; entry=`home`; resultCount=0; component=`SearchInput`What to check
The flow starts at `home` and reuses `SearchInput`. When `resultCount=0`, show a no-match state and keep the input available for another query.
Original SKILL.md on GitHub · Updated
Frequently asked question
How should a Figma brief cover an empty state?
Name the screen, feedback, and next action in the flow so the designer can verify the behavior.