Design To Code Check

by murphytrueman

Design To Code Check is a Quality skill for Claude Code, published by murphytrueman in design-system-ops.

176 stars7 forkson murphytrueman/design-system-opsAdded 2026/09/07+1% in starsRepository updated 2026/08/22

View source on GitHub Download repo ZIP

claude-codeclaude-code-plugindesign-systemdesign-systemsdesign-tokensfigmaskills

Install in seconds

Install Design To Code Check

Copy Design To Code Check into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/murphytrueman/design-system-ops/tree/main/skills/design-to-code-check ~/.claude/skills/design-to-code-check

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/murphytrueman/design-system-ops.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/design-to-code-check/SKILL.md in murphytrueman/design-system-ops
Installs to: ~/.claude/skills/design-to-code-check
Collection: One of 25 skills cataloged from this repository
Category: Quality — 1817 skills

What Design To Code Check does

Design To Code Check reviews a single component or screen against its design specification and flags mismatches by dimension and severity. Use it when comparing a design to the built implementation or checking what differs between them.

Design To Code Check is cataloged under Quality on DirSkills. Design To Code Check comes from a repository tagged claude-code, claude-code-plugin, design-system, design-systems and design-tokens.

Documentation

README

Excerpt

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.

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Design To Code Check

What else does murphytrueman publish alongside Design To Code Check?
Design To Code Check is one of 25 skills that DirSkills catalogs from murphytrueman/design-system-ops, the repository it ships in. Its siblings there include AI Component Description, Accessibility Per Component and Adoption Report. Each one is a separate skill with its own page in this directory, installs the same way Design To Code Check does, and is maintained by murphytrueman in that same repository. The rest of the collection is listed on the murphytrueman/design-system-ops page.
How does Design To Code Check compare to other Quality skills?
Design To Code Check ranks #1692 by stars among the 1817 Quality skills in this catalog. The most-starred ones next to it are Benchmark, Benchmark Optimization Loop and API Design Patterns. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Design To Code Check against them. Open each page to compare what they document and how they install.