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/murphytrueman/design-system-ops/design-to-code-checknpx skills add murphytrueman/design-system-ops --skill design-to-code-checkgit clone --depth 1 https://github.com/murphytrueman/design-system-opsWrote 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/murphytrueman/design-system-ops/design-to-code-check)<a href="https://agentmods.dev/skills/murphytrueman/design-system-ops/design-to-code-check"><img src="https://agentmods.dev/badge/skills/murphytrueman/design-system-ops/design-to-code-check.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.1 | $0.00095 | $0.02924 |
| Opus 5 | $0.00048 | $0.01462 |
| Sonnet 5 | $0.00019 | $0.00585 |
| Haiku 4.5 | $0.00010 | $0.00292 |
Grade A, and why
design-to-code-check 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 6d 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 — 247 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design-to-code check
A skill for reviewing the alignment between a design specification and its code implementation, producing a structured discrepancy report catalogued by dimension and severity.
Context
Design-to-code alignment reviews catch two different categories of problem. The first is implementation error — the developer built something different from what was specified, either by mistake or because the specification was unclear. The second is specification ambiguity — the design did not define behaviour completely enough for the developer to implement it correctly, and the developer made a reasonable guess that turned out to be wrong.
Both categories matter, but they require different responses. An implementation error needs to be corrected in the code. A specification ambiguity needs to be corrected in the design and documented, so the same guess does not get made again.
This skill produces a report that distinguishes between the two.
Configuration
Before producing output, check for a .ds-ops-config.yml file in the project root. If present, load:
severity.*— overrides for discrepancy severity, especiallyspecification_gapandmissing_interaction_statesystem.frameworkandsystem.styling— pre-selects framework-specific checking guidanceintegrations.figma— if enabled, auto-pull the design specification (see below)integrations.chromatic— if enabled, use visual regression data as a supplementary signalgates.design_to_code— if running as part ofcomponent-to-release, determines which findings block release
Auto-pull integrations
Figma MCP (integrations.figma.enabled: true):
- Pull the component specification directly from
integrations.figma.file_keyvia Figma MCP - Read component properties, variant definitions, and layer structure as the design reference
- This replaces the need for the user to provide a Figma file link — the skill can say "I pulled the Button specification from your Figma library" and proceed immediately
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.
- 6d ago First seen · 247 lines · 95 tokens per session scan A 57c24c82b8d5
design-to-code-check is a skill published in the GitHub repository murphytrueman/design-system-ops (175 stars, last pushed 14d ago), licensed MIT. It adds 95 tokens to every session and 2,924 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-30.
Other skills, from other repositories
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
design-engineering
Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…
fmcp-token-sync-orchestrator
Figma design token'larını kod dosyalarıyla (CSS/Tailwind/Swift/Compose) platform-agnostic senkronize eder. Diff preview + onay + write akışı zorunlu. Her platformda çalışır. Condensed-first: Essentials bölümü %80 case'i kapsar, Advanced sadece edge case'lerde.
analyze-component-set-figma
Analyze a Figma COMPONENTSET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating…
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…
omd:feel
디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션 타이밍·이징·동심원 radius·tabular-nums·44px 타깃·focus ring·prefers-reduced-motion 등. 'feel 좋게 다듬어줘', '인터페이스 디테일 적용', 'feel 점검', '마이크로 인터랙션…