visual-to-spec
Installation
SKILL.md
Version: 2.0.0
visual-to-spec
Convert a finalized UI screenshot into a complete frontend implementation contract.
Trigger Conditions
- User provides a UI screenshot and asks to extract visual specs
- User asks to generate design tokens from a screenshot
- User asks to build a component tree or frontend implementation contract from a screenshot
- User asks to analyze screenshot layout, color, typography, spacing, overlay controls, or panorama/3D scene UI
- Keywords: "extract spec from screenshot", "image to design spec", "screenshot to spec"
Required Inputs
| Item | Description |
|---|---|
| reference.png | Finalized UI screenshot (the only required input) |
| Project token standards | Optional, adapt to existing standards if available |