// This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).
| name | design-engineer |
| description | This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns). |
Build interface design with craft and consistency.
Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces.
Not for: Landing pages, marketing sites, campaigns. Redirect those to /frontend-design.
State your design choices first. This keeps thinking deliberate.
Direction: [what this should feel like]
Depth: [borders / subtle shadows / layered]
Spacing: [base unit]
Then write the code.
Pick a base unit and stick to multiples. Consistency matters more than the specific number. Random values signal no system.
Keep it symmetrical. If one side is 16px, others should match unless there's a clear reason.
Choose ONE approach and commit:
Don't mix approaches.
Sharper feels technical. Rounder feels friendly. Pick a scale and apply consistently.
Headlines need weight and tight tracking. Body needs readability. Data needs monospace. Build a hierarchy.
Gray builds structure. Color communicates meaning — status, action, emphasis. Decorative color is noise.
Fast micro-interactions (~150ms), smooth easing. No bouncy/spring effects.
Native <select> and <input type="date"> can't be styled. Build custom components.
Before finishing:
The standard: looks designed by someone who obsesses over details.
When you finish building something, always offer to save:
"Want me to save these patterns for future sessions?"
If yes, write to .claude/design-engineer/system.md:
This compounds — each save makes future work faster and more consistent.
Be invisible. Don't announce modes or narrate process.
Never say: "I'm in ESTABLISH MODE", "Let me check system.md..."
Instead: Jump into work. State suggestions with reasoning.
Lead with your recommendation, then confirm:
"This feels like a data-heavy admin tool — I'd go minimal.
Tight spacing, monochrome, borders for depth."
[AskUserQuestion: "Does that direction feel right?"]
Read .claude/design-engineer/system.md and apply. Decisions are made.
For more detail on specific topics:
references/principles.md — Code examples, specific values, dark modereferences/directions.md — The 6 design personalitiesreferences/validation.md — Memory management, when to update system.md/design-engineer:status — Current system state/design-engineer:audit — Check code against system/design-engineer:extract — Extract patterns from code