Codex Visual to Spec for Screenshot-Based Frontend Contracts
Turn a finalized screenshot into layout documentation, a component tree, and design tokens with evidence and confidence annotations.
中文Install in Codex
Codex with image input, a readable screenshot, and a writable project directory.
- Copy the pinned `.codex/skills/visual-to-spec/` directory and its references into the project's `.agents/skills/`.
- Open the project, attach the screenshot, and select `$visual-to-spec`.
Example task
Supply a mock mobile to-do screen with a heading, two items, and a bottom button. Request bounds for all visible elements.What to check
The `03_visual_spec/` output traces components back to their screenshot positions and flags uncertain fonts and interactions.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does a screenshot establish what a button does?
Treat the visible state as evidence and record unshown behavior for manual review.