Start here
Practical judgment for product designers building real software.
This guide is for product designers building in code with AI agents. It covers the decisions around the screens too: what your client needs, how data is saved, what happens when things fail, and what someone else will need to maintain the result.
Who this is for
You already understand product design and are starting to own more of the working product. The guide explains the technical decisions that affect that work, with examples you can discuss and check with your agent.
Start with the page that matches what you're doing today. The skills bring the same guidance into a conversation with your agent.
Choose a starting point
| What you are doing | Start with | Use a skill |
|---|---|---|
| Clarifying a client's rough idea | Product intent | $intent |
| Building something a client can try | Prototyping in code | $prototype |
| Improving a screen's layout and interaction | Interface craft | $craft |
| Connecting a screen to real data | Full-stack understanding | $slice |
| Fixing loading, error, or recovery behavior | State coverage and recovery | $states |
| Checking a build before real use | Release risks | $readiness |
Work in a loop
Start with what someone needs to do. Build just enough of that task to try it. See where people get stuck, then revise it. Before real use, check what a good demo can hide: who can see what, saving, recovery, and ongoing support.
For example, a crew scheduler starts with “people need to know tomorrow's assignment.” A board may answer the layout question. Trying it on a phone can show that changed assignments are hard to spot. Real use then needs access checks, clear freshness, and recovery when the connection drops. Each step changes what deserves attention.
Put the guide to work
Design Engineering Skills turns these decisions into focused agent instructions. Install the pack, then call on the skill that fits your question. You can use any skill before work or to revisit something you already made; you don't need to run them in order.
npx skills add mattjmdesign/dengskillsBring a task, the relevant page, and your existing work. For example:
Use $craft to improve the project list. Read the interface craft guide
and inspect the existing page first. People need to find a project
and see whether it needs attention.
Keep the existing routes, design tokens, and project actions.
Improve hierarchy and wrapping using the actual project names.
Check the result at narrow and wide widths and with a keyboard.
Tell me what changed and what you could not verify.The agent collaboration guide shows how to set boundaries, request a review, and revise a result. Code examples use this team's current setup; check the linked references against your installed versions.
Last updated on