UI Design Handoff Fidelity

中文说明

A Codex skill for turning visual references into implementation-ready UI handoffs. It prevents a screenshot from being mistaken for a complete design deliverable.

The workflow requires a frozen visual source, independent assets, documented design tokens, a static fidelity mock, and screenshot QA before real-data integration or refactoring.

Copy this directory into your Codex skills directory:

git clone https://github.com/jidarin9383/ui-design-handoff-fidelity.git
cp -R ui-design-handoff-fidelity ~/.codex/skills/

Codex can then invoke ui-design-handoff-fidelity for design-reference, Figma/Open Design/Stitch, pixel-fidelity, asset, token, or handoff tasks.

1. Confirm the PRD, technical constraints, information architecture, and data states.
2. Freeze one visual source of truth.
3. Require a real handoff package: preview, assets, tokens, manifest, and editable static source.
4. Build a fixed-data static mock before connecting state, APIs, auth, or other business logic.
5. Run screenshot QA in a defined order.
6. Integrate real data only after the static mock passes; refactor last.

SKILL.md                    Main skill instructions
references/checklists.md    Detailed handoff and QA checklists
agents/openai.yaml          Codex display metadata

Use ui-design-handoff-fidelity to implement this Figma screen. Treat the Figma file as the visual source of truth, request the original assets and tokens, build the static screen first, and run screenshot QA before wiring real data.

preview.png is for visual acceptance, not an engineering asset source. Engineering should receive independently named assets, documented tokens, editable source, and acceptance states.

MIT