Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
git clone --depth 1 https://github.com/Laith0003/ux-skillWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/commands/laith0003/ux-skill/ux-image-to-code)<a href="https://agentmods.dev/commands/laith0003/ux-skill/ux-image-to-code"><img src="https://agentmods.dev/badge/commands/laith0003/ux-skill/ux-image-to-code/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/commands/laith0003/ux-skill/ux-image-to-code"><img src="https://agentmods.dev/badge/commands/laith0003/ux-skill/ux-image-to-code.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00076 | $0.02000 |
| Opus 5.5 | $0.00030 | $0.00800 |
| Sonnet 5.5 | $0.00015 | $0.00400 |
| Haiku 4.5 | $0.00008 | $0.00200 |
Grade A, and why
ux-image-to-code scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 169 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/ux-image-to-code — turn a design image into a generated system
Pure CV. No multimodal LLM.
Hand the engine a screenshot or a design reference; it returns a Brief, a closest-match palette, a closest-match style, and a full Recommendation. No vision model is called. Every signal is computed deterministically from pixels via Pillow.
When to use
- You have a reference design (a competitor screenshot, a Dribbble shot, a Figma export) and you want the engine to build something in that direction.
- You want to "anchor"
/ux-recommendon a real image instead of a typed brief. - You want to verify the engine's read on a design before generating code.
When to skip
- The reference is text (a written brief, a PRD) → use
/ux-discover+/ux-recommend. - You already have a saved discovery → just run
/ux-recommend. - You want pixel-perfect cloning → this is a HINT generator, not a copy-paste tool.
How it runs
python3 -m engine.cli.main image-extract path/to/reference.png
What happens, step by step:
- Decode + downsample — Pillow opens the image and resizes the long edge to 512px to keep quantization fast.
- Quantize to 5 colors —
Image.quantize(colors=5, method=MAXCOVERAGE)finds the dominant tones. (This is a deterministic palette reduction, equivalent in shape to a small k-means but without sklearn.) - Canvas polarity — average luminance under the sRGB curve. Above 0.5 is light; below is dark.
- Type polarity — ratio of
EDGE_ENHANCE_MOREvariance toEMBOSSvariance. High ratio leans serif, low leans sans, between isunknown. (Heuristic — see Limitations.) - Aspect + density —
FIND_EDGESfollowed by binarization gives a coarse "edge fraction." Lots of edges → dense layout (dashboard, dense editorial). Few edges → airy hero. - Match against manifests — for each palette in
data/palettes.json, sum the nearest-neighbour distances between the extracted 5 colors and the palette's canvas/surface/ink/primary anchors. Lowest sum wins. - Style fit — bias styles whose id/category contains "dark"/"cinema"/"luxe" for dark canvas, "swiss"/"editorial"/"minimal" for light canvas. Boost styles that appear in the matched palette's
compatible_styles. - Synthetic Brief → recommend — pack the hints into a
Briefand run the 5-parallel-search recommender to produce a complete system.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 169 lines · 76 tokens per session scan A ec552f133761
ux-image-to-code is a command published in the GitHub repository Laith0003/ux-skill (86 stars, last pushed 19d ago), licensed MIT. It adds 76 tokens to every session and 2,000 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other commands, from other repositories
design-screen
Design a complete screen layout from a description or requirements.
add-library
Kullanıcı "kütüphane ekle", "library ekle", "tasarım sistemi ekle", "design system ekle" dediğinde bu komutu uygula.
color-specialist
Use when colour is failing. Contrast below AA, a palette with no system behind it, dark mode that is only inverted light mode, or semantic colours that carry no meaning.
motion-designer
Use when animation feels wrong. Transitions too slow or too bouncy, motion with no purpose, blanket transitions on every property, no reduced-motion support, or animation that drops frames.
spacing-layout-specialist
Use when spacing looks arbitrary. Padding and margins off any scale, inconsistent gaps between the same components, no grid underneath, or a layout that needs a denser mode.
responsive-design-specialist
Use when a layout breaks between sizes. Arbitrary breakpoints, type that does not scale, images that blow out the grid, or a desktop design retrofitted onto mobile.