Image To Code
Turn a reference image, screenshot, or mockup into token-driven, accessible code.
Install
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code -g -a claude-code -y- Repository
- plugin87/ux-ui-agent-skills3.1k
- Category
- Design
- Updated
- 8d ago
- License
- MIT
- Context cost
- Lightabout 741 tokens
- Runs scripts
- No, instructions only
What it does
Turn a reference image, screenshot, or mockup into token-driven, accessible code. Infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.
Skill: Image to Code
Step 0: is the kit here? This skill reads files from the kit. Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGOnKIT_MISSINGonly the skill folders were installed, which is whatnpx skills adddoes. Say so plainly, point the user atnpx ux-ui-agent-skills initor the plugin install, and stop. Do not guess the contents of a file you could not open.
Reconstruct a design from a visual reference as a real design system, not a one-off copy. Match the system (color/type/spacing language), never lift copyrighted imagery or brand assets.
