Design engineer skills for your coding agent
Six open-source skills that take a designer from a fresh clone to a pull request an engineer can review. They run in Claude Code, Cursor, Codex and any agent that reads SKILL.md files, on your own repository, with no account and no product in the loop.
npx skills add modeinspect/design-engineer-skillsMIT licensed. One skill at a time with --skill <name>.
The repetitive parts of the job, written down once.
A skill is the senior version of a good prompt: the steps, the checks and the report, read by the agent before every run.
Chapter 4 of the guide argues that a design engineer learns five concepts inside their own codebase and prompts the agent with those references. The same work comes up on every change: get the app running, find where a component is used, check the branch at a narrow width and in dark mode, take before and after screenshots, write a description an engineer will read. Agents drift on exactly these steps. They report a mobile fix without loading the page at a mobile width, or write “no visual changes” from reading the diff.
Each skill here pins one of those jobs down. Every check points to a screenshot on disk or a command that ran. A check that did not run is reported as not run, never as passed. Nothing is committed on the main branch, and nothing is pushed without you asking.
Six skills, in the order you will need them.
Each one belongs to a chapter of the guide. Start with the one that matches where you are stuck.
- 01
repo-orientation
A designer's first run in an unfamiliar repo: gets the dev server running or stops with the exact error and fix, maps tokens, components and routes, and sorts the code into safe to change, change with care, and ask an engineer first.
Ask for it: “Get this running”, “where are the design tokens”, “what can I safely change”
In the guide: Chapter 6: your first pull request, step 3
- 02
component-impact
Before a shared component or token changes, finds every place it is used, renders each one before and after, and flags what broke.
Ask for it: “Where is this component used”, “will changing the Button break anything”
In the guide: Chapter 6: your first pull request, step 5
- 03
visual-qa-branch
Compares a branch against production or the main branch, route by route, across hover, focus, dark mode and narrow widths, with before and after screenshots.
Ask for it: “QA my branch”, “did I break anything visually”, “check it in dark mode and on mobile”
In the guide: Chapter 7: design QA in code
- 04
reviewable-ui-pr
Turns a designer's UI change into a scoped draft pull request: splits off unrelated edits, captures before and after screenshots per width and theme, and writes a description engineers can review.
Ask for it: “Make this a PR”, “add before and after screenshots”, “hand this to engineering”
In the guide: Chapter 6: your first pull request, step 6
- 05
review-as-designer
Helps a designer review an engineer's UI pull request: opens the preview, walks the states it touches, and drafts comments that say what is wrong, where, why and whether it blocks.
Ask for it: “Review this PR as a designer”, “what should I comment on this pull request”
In the guide: Chapter 7: design QA in code, steps 2 to 4
- 06
ai-ready-design-system
Scores how ready a design system in code is for AI agents against a published six-criterion rubric, then fixes what fails on a branch, one commit per criterion.
Ask for it: “Is our design system AI-ready”, “why does the agent ignore our tokens”
In the guide: Chapter 9: protect the design system
Install in one command.
The skills CLI puts each skill where your agents look for it. You pick which agents.
npx skills add modeinspect/design-engineer-skills- One skill: add
--skill reviewable-ui-pr. Every skill works on its own. - As a Claude Code plugin: run
claude plugin marketplace add modeinspect/design-engineer-skills, thenclaude plugin install design-engineer@modeinspect. Skills then run with the plugin prefix, such as/design-engineer:reviewable-ui-pr. - Without the CLI: copy a folder from skills/ into the directory your agent reads skills from, such as
.claude/skills/for Claude Code. - Then: open your repository in the agent and ask in plain words. “Get this running” starts repo-orientation. The three screenshot skills start only when you name them, because they run two copies of the app.
The short answers.
Built by the people who wrote the guide.
The skills follow the same rules as the guide to becoming a design engineer. Found a step they get wrong on your codebase? Open an issue on GitHub; the authoring rules are in the repository.
modeinspect/design-engineer-skills on GitHub