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 skills add lukedj78/dev-flow --skill url-to-design-mdgit clone --depth 1 https://github.com/lukedj78/dev-flowWrote 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/lukedj78/dev-flow/url-to-design-md)<a href="https://agentmods.dev/skills/lukedj78/dev-flow/url-to-design-md"><img src="https://agentmods.dev/badge/skills/lukedj78/dev-flow/url-to-design-md/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/skills/lukedj78/dev-flow/url-to-design-md"><img src="https://agentmods.dev/badge/skills/lukedj78/dev-flow/url-to-design-md.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.00227 | $0.03541 |
| Opus 5.5 | $0.00091 | $0.01416 |
| Sonnet 5.5 | $0.00045 | $0.00708 |
| Haiku 4.5 | $0.00023 | $0.00354 |
Grade A, and why
url-to-design-md 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 5d 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 — 256 lines — stays where its author put it; the contents beside it link to each section on GitHub.
URL → DESIGN.md
Take a live site or a signed-in app, measure what it actually paints, and come back with a design system the user can argue with before any of it enters the project.
The third entrance to DESIGN.md, beside figma-to-design-md and image-to-design-md. The exit is
identical, so nothing downstream changes: wireframe-canvas → design-md-to-app.
Why this exists, in one measurement
image-to-design-md says it of itself, at line 79: "This is the highest-confidence-loss step.
Vision LLMs cannot read fontFamily metadata that doesn't exist in raster pixels", and at 163:
"everything is a guess". That is the honest cost of starting from a screenshot.
When the source is a URL, none of it has to be guessed. getComputedStyle gives the family, the
exact pixels, the line-height ratio, the tracking in em and — through a 1×1 canvas — the hex behind
an oklch(). This skill exists to replace an estimate with a measurement.
When it applies
- The user gives a URL and wants to start from it: "parti da questo sito", "rifacciamo adastrasicily.com", "estrai il design da questo".
dev-flowroutes here fromemptyorprd_draftedwhen there is a URL rather than a Figma or images.- The source may be their own site (a redesign) or somebody else's (a reference). Ask which, because it changes what may be produced — see Whose site is it below.
If the user has a Figma, prefer figma-to-design-md: a Variables panel beats any measurement.
Two modes, and it is not a flag
site |
app |
|
|---|---|---|
| Repeated chrome | deduplicated — a header on every page would outvote the content | never — the sidebar is the product; deduplicating it throws away the reason for the run |
| Components read | hero, sections, bands, cards, nav, buttons | sidebar + collapsed width, topbar, table row and header height, field height and label position, modal and drawer widths, toast, status colours, focus ring, density |
| Section rhythm | light/dark bands | meaningless, omitted |
| Text kept | short UI labels and CTAs; five quotes only from public pages | no strings at all — counts, lengths, case statistics only |
| Responsive | clamp() from the 390/1440 pair |
a table at 1440 and at 390 are two components, not one with a clamp |
What ships with it
23 files 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.
- references/artifacts.md 4.5 KB
- references/contracts.md 85 KB
- references/measure.md 5.7 KB
- references/review.md 5.3 KB
- scripts/analyze.py 64 KB runs code
- scripts/collect.py 11 KB runs code
- scripts/extract.js 35 KB runs code
- scripts/fixtures/known-site.html 5.1 KB
- scripts/fixtures/snapshot-known-site-1440.json 25 KB
- scripts/fixtures/snapshot-known-site-390.json 25 KB
- scripts/fixtures/verify-390.json 2.0 KB
- scripts/images.py 15 KB runs code
- scripts/make_design_md.py 17 KB runs code
- scripts/make_video.py 5.0 KB runs code
- scripts/pixel_check.py 15 KB runs code
- scripts/render_decision.py 14 KB runs code
- scripts/render_guide.py 45 KB runs code
- scripts/render_media.py 23 KB runs code
- scripts/run_log.py 6.7 KB runs code
- scripts/test_analyze.py 17 KB runs code
- scripts/test_render.py 13 KB runs code
- scripts/verify_page.js 5.4 KB runs code
- scripts/verify.py 12 KB runs code
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.
- 5d ago First seen · 256 lines · 227 tokens per session scan A 5bcf4e07fc10
url-to-design-md is a skill published in the GitHub repository lukedj78/dev-flow (6 stars, last pushed 5d ago), licensed MIT. It adds 227 tokens to every session and 3,541 once invoked, about $0.0009 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-10-22.
Other skills, from other repositories
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
mcp-host-styling-integration
Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.
design-craft
Design or substantially improve user-facing interfaces with a product-specific visual direction, content hierarchy, and rendered critique. Use for new screens, landing pages, redesigns, typography/layout work, or UI that feels generic or AI-generated. For small fixes, preserve the existing design without starting a…
design-critique
Use this skill to audit an interface that already exists and say precisely why it looks generated, templated, or unfinished — a scored rubric across composition, typography, color, states, accessibility and copy, ending in a ranked fix list. Triggers: user says "review the design", "critique this UI", "why does this…
accessibility
Implement and review accessible user interfaces with semantic controls, keyboard and focus behavior, readable content and assistive-technology checks. Use when fixing inaccessible forms, dialogs, navigation, drag interactions or WCAG gaps; distinguish automated findings from tested accessibility.
gen-ui
Build interactive HTML widgets (simulators, explorers, calculators, UI mockups) inline in desktop conversations with renderwidget.