Home / nahid-sparktales / agent-dispatcher · skills/design/design-to-code/SKILL.md · GitHub

design-to-code skillA

Name: design-to-code
Author: nahid-sparktales

design-to-code is agent-read markdown (skill) from nahid-sparktales/agent-dispatcher: Turn a design, mockup, Figma frame or screenshot into implementation that actually matches it — mapping values to the codebase's existing tokens and components, covering the states the design never drew, and listing what the design left ambiguous instead of guessing. Use when handed a design to build, when asked whether an implementation matches its source, or when a build has drifted from the design. Not for deciding what the design should be, and not by itself proof that the screen works..

Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.

What the file says

# Design to code

A design is a set of still frames of the happy path. The implementation is every state, every
width, and every interaction. Most of the gap between them is not fidelity — it is the frames that
were never drawn.

## When this fires

A design file, mockup, screenshot or redline is the source for a UI change, or an existing
implementation is being compared against one. It does not fire when there is no design source and
the visual direction is yours to invent.

## Procedure

1. **Read the source for structure before pixels.** Find the repeating unit, the hierarchy, and
   which pieces are instances of something the design system already has versus one-offs drawn for
   this screen. Building a one-off as a component, or a component as a one-off, costs more later
   than any spacing error.
2. **Take values from the source, not from the picture.** Where the design tool exposes variables,
   tokens, styles or layer measurements, read them. Measuring a screenshot yields a scaled
   approximation, and approximations accumulate. If you only have an image, say so — that changes
   what "matches" can mean.
…

Read the whole file at its exact version.

How to install

Latest version

mdr add nahid-sparktales/agent-dispatcher/design-to-code@git:20260919.a0d4f55

Exact content

mdr add nahid-sparktales/agent-dispatcher/design-to-code@sha256:b01d11be1066cfd4

Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.

Badge

[![mdr](https://markdownregistry.com/badge/art_f3v6kysepl47i5vt.svg)](https://markdownregistry.com/a/art_f3v6kysepl47i5vt)

1 badge views in 30 days

Versions

version	committed	commit	size	audit
git:20260919.a0d4f55 latest	2026-09-19	a0d4f55	5,953 B	A	view

Audit of the latest version

A 17 of 17 checks passed. Deterministic, no model, same answer every run.

pass: Frontmatter block present
pass: Frontmatter declares a name
pass: Frontmatter declares a description
pass: Size between 200 bytes and 200 KB (5953 bytes)
pass: No zero-width or bidi control characters
pass: No instruction hidden inside an HTML comment
pass: No link to an exfiltration or paste host
pass: No credential-shaped string
pass: No instruction to send local credentials anywhere
pass: No text hidden with inline styles
pass: No prompt-injection phrasing
pass: No curl or wget piped into a shell
pass: No recursive delete of root, home or parent
pass: No instruction to read or print local credentials
pass: No base64 blob over 200 characters
pass: No link to a raw IP address
pass: No script tag

Source

GitHub

nahid-sparktales/agent-dispatcher · 49 stars · license MIT · pushed 2026-09-23 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_f3v6kysepl47i5vt
GET https://markdownregistry.com/api/v1/resolve?ref=nahid-sparktales/agent-dispatcher/design-to-code
GET https://markdownregistry.com/api/v1/blob/b01d11be1066cfd4ad7666a400a1e12e2a204b19688fae688bacacb08b2966c5

Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

More from nahid-sparktales/agent-dispatcher

agent-dispatcher skill

nahid-sparktales/agent-dispatcher · skills/agent-dispatcher/SKILL.md · Route work to a specialist role and load its task-specific guidance. Use when the user invokes /agent-dispatcher, names…

git:20260920.c183eff · audit A · 49 stars

agent-design skill

nahid-sparktales/agent-dispatcher · skills/ai/agent-design/SKILL.md · Scope an agent or subagent before it is built — the one job it owns, the smallest tool set that closes that job, what…