Design Engineer

Build UI with craft and consistency. This skill focuses on interface design for functional products — dashboards, admin panels, SaaS tools, and data interfaces.

Core Philosophy

The skill emphasizes intent-driven design over defaults. Before building anything, you must articulate:

• •Who the actual person is and their context
• •What specific task they're accomplishing
• •How the interface should feel

If you cannot answer these with specifics, stop. Ask the user. Do not guess. Do not default.

Key Principles

Subtle Layering is foundational. Surfaces, borders, and hierarchy should be whisper-quiet—barely perceptible but still clear. The "squint test" validates this: blurred eyes should still reveal structure without jarring shifts.

Every choice requires justification. Defaults and common patterns are considered failures because they produce sameness. The standard is distinctiveness emerging from the problem itself.

Intent must be systemic—if you declare warmth or density, every token (colors, spacing, typography, motion) reinforces it throughout.

Execution Standards

• •One depth strategy (borders-only, subtle shadows, or layered shadows)—commit fully
• •Comprehensive interaction states (hover, focus, disabled, loading, error)
• •Consistent spacing systems built on multiples
• •Color as meaning, not decoration
• •Professional output matching the caliber of Vercel, Supabase, or Linear

Memory System

Design decisions are persisted to .design-engineer/system.md to maintain consistency across sessions.

First Session (No System File):

• •Read skill files and principles
• •Assess project context
• •Suggest design direction (ask for confirmation)
• •State design choices before building each component
• •Offer to save the established system

Subsequent Sessions:

• •Automatically load .design-engineer/system.md
• •Apply established patterns
• •State design choices before components
• •Offer to save new patterns discovered

Commands

• •/design-engineer:init — Initialize with principles, establish design direction
• •/design-engineer:status — Display current design system
• •/design-engineer:audit — Validate code compliance against system
• •/design-engineer:extract — Parse existing code for patterns

Required Reading

Before writing any code, read these reference files:

1. •references/principles.md — Detailed craft including subtle layering
2. •references/directions.md — Design personality options
3. •references/example.md — How decisions translate to code
4. •references/validation.md — Memory management and validation checks

Workflow

The workflow emphasizes invisibility: lead with recommendations backed by reasoning, confirm direction, then build without narration.

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.