This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).
/plugin marketplace add Dammyjay93/claude-design-engineer/plugin install design-engineer@design-engineerThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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 .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 .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 codeThis skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.