design-engineer · Claude Code Plugin

Installation

$ /plugin marketplace add Dammyjay93/oakinleye

Then run /plugin install design-engineer to install. Restart Claude Code after.

What it does

Saves your design decisions to .design-engineer/system.md
Loads that file automatically every conversation
Validates code after Claude writes it
Catches spacing drift, shadow/border inconsistencies, off-grid values
Claude fixes violations before you see them

How it works

1. Suggests a direction

Scans your project files
Infers product type (dashboard, marketing, collaborative tool)
Suggests appropriate direction (tight spacing vs generous, borders vs shadows)
Asks one question to confirm

2. Saves decisions

Button heights, padding, border radius
Spacing grid (4px, 8px, 12px, 16px...)
Color palette
Depth strategy (borders vs shadows)
Component patterns (exact measurements)

3. Catches drift

Validation runs after every file write
Checks spacing against your grid
Checks colors against your palette
Checks shadows vs borders
Claude sees violations and fixes them

Example validation output

Problems found: Spacing is 17px, but your grid uses 4px increments → Change to 16px or 20px Code uses a shadow, but you chose borders-only → Replace with border

Three modes

Apply mode (system exists)

Loads your file automatically
Uses exact decisions
Validates every write

Establish mode (no system yet)

Infers product type
Suggests direction
Saves system file

Principles mode (prototyping)

No questions
No system file
Just builds

Design directions

Precision & Density

Tight spacing, borders, monochrome
Developer tools, admin dashboards

Warmth & Approachability

Generous spacing, soft shadows, rounded corners
Collaborative tools, consumer apps

Sophistication & Trust

Cool tones, layered shadows, refined
Finance, enterprise, legal

Boldness & Clarity

High contrast, dramatic spacing, strong accents
Marketing sites, modern dashboards

Utility & Function

Muted palette, minimal decoration
Developer tools, documentation

Data & Analysis

Chart-optimized colors, numbers-first
Analytics, BI tools

Commands

/design-engineer

Show status or suggest next steps

/design-engineer status

View your current system

/design-engineer audit <path>

Check existing code against system

/design-engineer extract

Pull patterns from existing code