Laith0003

UX Image To Code — Design skill for Claude Code

Design community

Take a design reference image (PNG/JPG/WebP), extract its dominant palette + canvas polarity + type signal via pure Pillow CV, match the result against the v2 palettes/styles manifests, and run the re.

How to install UX Image To Code

Installs to ~/.claude/skills/laith0003-ux-skill-ux-image-to-code/SKILL.md

Terminal

mkdir -p ~/.claude/skills/laith0003-ux-skill-ux-image-to-code && curl -fsSL https://raw.githubusercontent.com/Laith0003/ux-skill/HEAD/commands/ux-image-to-code.md -o ~/.claude/skills/laith0003-ux-skill-ux-image-to-code/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What UX Image To Code does

name: ux-image-to-code description: Take a design reference image (PNG/JPG/WebP), extract its dominant palette + canvas polarity + type signal via pure Pillow CV, match the result against the v2 palettes/styles manifests, and run the recommender on the synthetic brief. Returns the closest palette, the closest style, and a full recommended design system grounded in what the image actually shows. allowed-tools: Bash, Read, Write disable-model-invocation: false

/ux-image-to-code — turn a

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Grade — Generate a shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence (palette, type, rhythm) 3.6k ★