Design Engineer

# Design Engineer

<p align="center">
  <strong>Craft · Memory · Consistency</strong>
</p>

<p align="center">
  Build interfaces with intention. Remember decisions across sessions. Maintain systematic consistency.
</p>

<p align="center">
  <em>For interface design — dashboards, apps, tools, admin panels. Not for marketing sites.</em>
</p>

<p align="center">
  <a href="#installation">Install</a> ·
  <a href="#how-it-works">How It Works</a> ·
  <a href="#examples">Examples</a> ·
  <a href="https://dashboard-v4-eta.vercel.app">Demo</a>
</p>

---

## What This Does

When you build UI with Claude, design decisions get made: spacing values, colors, depth strategy, surface elevation. Without structure, those decisions drift across sessions.

**Design Engineer helps you:**

1. **Craft** — Principle-based design that produces professional, polished interfaces
2. **Memory** — Save decisions to `.design-engineer/system.md`, load automatically
3. **Consistency** — Every component follows the same principles throughout the session

Make choices once. Apply them consistently.

## Before & After

**Without design-engineer:**
- Every session starts from scratch
- Button heights drift (36px, 38px, 40px...)
- Random spacing values (14px, 17px, 22px...)
- No consistency across components

**With design-engineer:**
- System loads automatically each session
- Patterns reused (Button: 36px, Card: 16px pad)
- Spacing on grid (4px, 8px, 12px, 16px)
- Consistent depth and surface treatment throughout

See the difference: **[dashboard-v4-eta.vercel.app](https://dashboard-v4-eta.vercel.app)**

---

## Installation

### Plugin (Recommended)

```bash
# Add the marketplace
/plugin marketplace add Dammyjay93/claude-design-engineer

# Install the plugin
/plugin menu
```

Select `design-engineer` from the menu. Restart Claude Code after.

Gets you:
- Principle-based craft for every UI component
- Automatic system.md loading every session
- Per-component design checkpoint
- Commands (/design-engineer status, audit, extract)

### Manual (Advanced)

```bash
git clone https://github.com/Dammyjay93/claude-design-engineer.git
cd claude-design-engineer
cp -r .claude/* ~/.claude/
cp -r .claude-plugin/* ~/.claude-plugin/
```

Restart Claude Code.

---

## How It Works

### The Flow

When you build UI with design-engineer:

**If system.md exists:**
```
✓ Reads skill files and principles
✓ Loads .design-engineer/system.md
✓ Applies established patterns
✓ States design choices before each component
✓ Offers to save new patterns
```

**If no system.md:**
```
1. Reads skill files and principles
2. Assesses project context
3. Suggests direction, asks for confirmation
4. States design choices before each component
5. Builds with consistent principles
6. Offers to save system
```

### Example: First Session

```
You: "Build a user dashboard with metrics cards"

Claude:
This feels like a data-heavy dashboard — I'd suggest:
- Depth: Borders-only (clean, technical)
- Surfaces: Subtle elevation shifts
- Spacing: 8px base

Does this direction fit?

[You: y]

Depth: borders-only
Surfaces: 7% → 9% → 11% lightness scale
Borders: rgba(255,255,255,0.06)
Spacing: 8px base

[Builds dashboard with consistent depth, spacing, surfaces]

Want me to save these patterns to .design-engineer/system.md?

[You: y]

✓ System saved
```

### Example: Second Session

```
You: "Add a settings page"

Claude:
✓ Loaded system.md

Depth: borders-only
Surfaces: using established scale
Borders: rgba(255,255,255,0.06)
Spacing: 8px base

[Builds settings page matching existing system]

Want me to save any new patterns?
```

The system **remembers** across sessions.

---

## System File

After establishing direction, your decisions live in `.design-engineer/system.md`:

```markdown
# Design System

## Direction
Personality: Precision & Density
Foundation: Cool (slate)
Depth: Borders-only

## Tokens
### Spacing
Base: 4px
Scale: 4, 8, 12, 16, 24, 32

### Colors
--foreground: slate-900
--secondary: slate-600
--accent: blue-600

## Patterns
### Button Primary
- Height: 36px
- Padding: 12px 16px
- Radius: 6px
- Usage: Primary actions

### Card Default
- Border: 0.5px solid
- Padding: 16px
- Radius: 8px
```

This file loads automatically at session start. Claude sees it and maintains consistency.

---

## Commands

```bash
/design-engineer:init           # Start building with design principles
/design-engineer:status         # Show current system
/design-engineer:audit <path>   # Check code against system
/design-engineer:extract        # Extract patterns from existing code
```

---

## Design Directions

The skill infers direction from project context, but you can customize:

| Direction | Feel | Best For |
|-----------|------|----------|
| **Precision & Density** | Tight, technical, monochrome | Developer tools, admin dashboards |
| **Warmth & Approachability** | Generous spacing, soft shadows | Collaborative tools, consumer apps |
| **Sophistication & Trust** | Cool tones, layered depth | Fi

... (truncated)