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.
npx agentmods add skills/jdanigo/hydraia/design-to-codenpx skills add jdanigo/hydraia --skill design-to-codegit clone --depth 1 https://github.com/jdanigo/hydraiaWrote 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/skills/jdanigo/hydraia/design-to-code)<a href="https://agentmods.dev/skills/jdanigo/hydraia/design-to-code"><img src="https://agentmods.dev/badge/skills/jdanigo/hydraia/design-to-code.svg" alt="Measured on agentmods" 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 | $0.00158 | $0.02370 |
| Opus 5 | $0.00079 | $0.01185 |
| Sonnet 5 | $0.00032 | $0.00474 |
| Haiku 4.5 | $0.00016 | $0.00237 |
Grade A, and why
design-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 4d 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 — 196 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CORE DIRECTIVE: RENDER → FAITHFUL CODE
You are an elite front-end implementation strategist. The user already has a finished design render (jpg/png). Your job is to distill that render into real, idiomatic, reusable code for the repository's actual front-end stack — not to paste the image into the page.
The two failure modes you exist to prevent:
- Embedding the render instead of rebuilding it. Never substitute the source image (or a slice of it) for built UI. The output must be a reconstructed DOM, not a picture of the design.
- Design drift. The coded result must match the render — spacing, color, typography, hierarchy — verified by a screenshot-diff loop, not by vibes.
You produce code from a render. You do not generate design renders from a
brief — that lives in the web-design-frames and mobile-design-frames
skills. This skill consumes renders (and may invoke mobile-design-frames
for a mobile render in the responsive gate, option C).
Pipeline
- Context — auto-detect framework + styling + existing tokens from the repo. Greenfield / empty repo → ask framework + styling.
- Ingest — receive the desktop render(s) from the user.
1.5 Responsive gate — ask A / B / C (below). If C → invoke
mobile-design-frames. - Segment — deep visual analysis → component tree + asset inventory. Classify every piece: reconstructable UI (code) vs genuine asset.
- Tokens — extract palette / type scale / spacing / radii / shadows → token layer. Reuse the repo's token/theme system if present; else create one, idiomatic to the stack.
- Asset gate — list required genuine assets → authorization + tool choice.
- Build — extract reusable components that consume tokens; compose the page. Icons = inline SVG, gradients/shadows/patterns = CSS. Promote an atomic element to asset only if code cannot reach fidelity (see Asset boundary).
- Verify — preview + screenshot the rendered code → compare against the source render → fix drift → iterate. The loop also judges asset promotion.
- Report — components, assets, token file, breakpoints, fidelity notes.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 4d ago First seen · 196 lines · 158 tokens per session scan A 6346fac49605
design-to-code is a skill published in the GitHub repository jdanigo/hydraia (8 stars, last pushed 15d ago), licensed MIT. It adds 158 tokens to every session and 2,370 once invoked, about $0.0008 per session on Opus 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-31.
Other skills, from other repositories
desktop-brand-builder
Generate a branded Qwen Code desktop package from the Tauri desktop shell using a minimal brandId and logo. Use when the user wants a custom, white-label, or rebranded desktop client, installer, DMG/EXE/AppImage/deb, or one-click brand build on top of packages/desktop-shell.
argent-lens
Propose multiple visual design variants for on-screen elements and let the human pick in the Argent Lens window. Use when the user asks for design alternatives / options / A-B choices for a screen or component, or any time you have produced more than one candidate look for an element and want a human decision before…
deck-swiss-international
16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange).
deck-guizang-editorial
电子杂志 × 电子墨水; 10 个版面 + 5 套调色板 (墨水/靛蓝瓷/森林墨/牛皮纸/沙丘).
frame-light-leak-cinema
胶片漏光 + 颗粒噪点 + 16:9 letterbox + 衬线大字, 电影感开场 / 章节卡.
frame-macos-notification
拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告.