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 iFurySt/DESIGN.md --skill design-md-creatorgit clone --depth 1 https://github.com/iFurySt/DESIGN.mdWrote 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/ifuryst/design.md/design-md-creator)<a href="https://agentmods.dev/skills/ifuryst/design.md/design-md-creator"><img src="https://agentmods.dev/badge/skills/ifuryst/design.md/design-md-creator/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/ifuryst/design.md/design-md-creator"><img src="https://agentmods.dev/badge/skills/ifuryst/design.md/design-md-creator.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.00099 | $0.01799 |
| Opus 5.5 | $0.00040 | $0.00720 |
| Sonnet 5.5 | $0.00020 | $0.00360 |
| Haiku 4.5 | $0.00010 | $0.00180 |
Grade A, and why
design-md-creator 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 2mo 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 — 128 lines — stays where its author put it; the contents beside it link to each section on GitHub.
DESIGN.md Creator
Turn a public website into a reusable DESIGN.md and a faithful HTML implementation that verifies it.
Core Workflow
- Open the design reference URL and inspect the rendered page at desktop and mobile widths when possible.
- Determine the HTML implementation target from the user's request:
- If the user describes a page, product, content, or workflow to implement, build that requested experience with the extracted design system. The reference URL supplies the visual language, not necessarily the page structure.
- If the user explicitly asks to clone or reproduce a URL, recreate that page.
- If the user provides only a reference URL and no separate implementation brief, recreate that page as the default visual test.
- Inspect 1-3 additional high-signal pages only when the reference does not reveal enough of the shared visual system:
- pricing
- docs
- product/dashboard
- signup/auth
- Extract only publicly visible design information. Separate observed values from conservative inference.
- Draft or update
DESIGN.mdusing the section order in output-template.md. - Build
preview.htmlfrom thatDESIGN.md, following the implementation target chosen in step 2. - Render the HTML at representative desktop and mobile sizes and evaluate both adherence to the design system and fulfillment of the user's requested content and layout.
- When the comparison exposes a missing or incorrect reusable rule, update
DESIGN.mdfirst, then bring the HTML back into alignment. Repeat until the document and preview agree. - Open the final HTML in the user's default browser and report its absolute file path.
Use extraction-checklist.md before finalizing both artifacts.
What To Capture
- Visual theme and atmosphere
- Color palette with semantic roles
- Typography families, sizes, weights, tracking, and line heights
- Component styling for buttons, cards, inputs, nav, badges, and links
- Layout system: spacing, container widths, grid, radius, section rhythm
- Depth/elevation: borders, shadows, blur, overlays
- Responsive behavior visible from the site or strongly implied by the layout
- Design guardrails: repeated patterns worth preserving and anti-patterns to avoid
What ships with it
3 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.
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.
- 2mo ago First seen · 128 lines · 99 tokens per session scan A 196a2b3e77c2
design-md-creator is a skill published in the GitHub repository iFurySt/DESIGN.md (9 stars, last pushed 3mo ago), licensed MIT. It adds 99 tokens to every session and 1,799 once invoked, about $0.0004 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-31.
Other skills, from other repositories
design-taste
A visual review method for web interfaces that looks for generic, repetitive, or machine-made design patterns. It considers hierarchy, spacing, density, movement, and the intended audience without writing product code.
page-prototype
An HTML wireframe tool for making a rough, clickable model of one page or screen. A wireframe shows structure and interactions with simple gray boxes rather than finished visual design.
web-design
A routing and review process for web interfaces. It directs a request to the appropriate design review and checks visual structure, layout, accessibility, and responsive behaviour; responsive behaviour means working across screen sizes.
project-design
Roteador de processos de design e marca que carrega orientações para criar arquivos DESIGN.md completos para um projeto e suas aplicações de interface.
impeccable-ui
A set of checks and instructions for the technical quality of a web interface, including layout, accessibility, text arrangement, and responsive states. Accessibility means making an interface usable by people with different abilities.
brand-tokens
A reference library of visual design rules for well-known brands, including colors, fonts, corner shapes, and explanations of each brand's visual style. Design tokens are reusable values that keep an interface's appearance consistent.