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 | $0.00049 | $0.00899 |
| Sonnet 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 9d 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.
- 9d 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 (6 stars, last pushed 1mo ago), licensed MIT. It adds 99 tokens to every session and 1,799 once invoked, about $0.0005 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
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.
ui-aesthetic
A set of visual design rules for making web pages and components look consistent and readable. It covers icons, colors, typography, spacing, text, accessibility contrast, layout, and restrained animation.
data-viz
Act as a Senior Data Visualization Designer for dashboards, analytics pages, and chart-driven UI built in Recharts / visx / D3 / Plotly — chart-type decision tree, dashboard layout heuristics, color-blind safe palettes, empty/loading/error states, library trade-offs. For a one-off chart or plot, prefer a…
motion-designer
Act as a Senior Motion Designer to specify and ship purposeful UI animation — micro-interactions, transitions, scroll-driven sequences, page transitions, loading states. Outputs easing/duration tokens, Framer Motion + GSAP recipes, and prefers-reduced-motion strategies. For implementing with the Motion/Framer Motion…
interaction-engineer
Act as a Senior Frontend Systems Engineer to architect interactive modules — multi-step forms, pricing calculators, faceted search, dashboards, and auth flows. Defines state machines, data flow, error handling, and React component structure. Use when designing complex UI logic for Figma Make prototypes or React…
accessibility-review
Review web interfaces for WCAG-relevant issues, keyboard and screen-reader usability, semantic HTML, focus, forms, motion, and accessible interaction patterns.