# Design Trio

> Canonical 7-step pipeline for app + website work. Sequences caveman-compress → taste-skill → bencium-negentropy-lens → baseline-ui → fixing-accessibility → fixing-motion-performance → bencium-design-audit. Use whenever the user asks to design, build, redesign, polish, or audit any UI surface (landing page, dashboard, marketing page, SaaS UI, pricing, modal, form, component).

- Skill: `maybackcompany/design-trio` (Agent Skill)
- Install (CLI): `npx skillmds@latest add maybackcompany/design-trio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/maybackcompany/design-trio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: MaybackCompany (https://skillmd.com/u/maybackcompany)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/maybackcompany/design-trio

---


# design-trio (canonical workflow)

Default pipeline. Run steps in order. Skip a step only when the brief explicitly excludes that concern.

## When to invoke

Auto-trigger on: design / redesign / polish / audit / improve / build + UI noun (page, hero, card, modal, dashboard, pricing, landing, component); or mentions of Tailwind, shadcn, framer-motion, animation; or after first UI draft is generated.

## Pipeline (7 steps, fixed order)

### 1. caveman-compress — token control
- Compress brief + constraints
- Keep: file paths, acceptance criteria, brand tokens, banned patterns, target users
- Drop: hedging, restated context
- Output: ≤10-line compressed brief

### 2. taste-skill — structure + conversion hierarchy
- Pick aesthetic direction BEFORE markup (brutalist / editorial / retro-futuristic / premium-saas / swiss / monospace)
- AIDA flow for marketing surfaces; bento for dashboards; section ordering for landings
- CTA hierarchy, trust strip placement, pricing anchoring
- Output: section list + direction + typography pairing

### 3. bencium-negentropy-lens — reduction pass
- Remove clutter, gimmicks, redundant cards, decorative animations
- Whitespace audit: every block earns its space
- Material honesty: no fake glass/gradients masking weak hierarchy
- Output: deletion list + density target

### 4. baseline-ui — implementation standards
- Tailwind defaults; tokenized OKLCH; no random palette
- Spacing rhythm consistent; typography scale enforced
- Borders over shadows; rounded radius consistent
- **Banned:** purple gradients, blur abuse, heavy drop-shadows (unless justified), `transition-all`, emoji on landing copy
- **Animation:** transform/opacity only; never width/height/top/left
- **Duration:** ≤200ms

### 5. fixing-accessibility — a11y pass
- Semantic landmarks (`<main>`, `<nav>`, `<section>`)
- Every interactive element has accessible name/label
- Focus rings visible; keyboard tab order; focus traps in dialogs
- Form labels + describedby for errors
- Contrast ≥ WCAG AA; respect prefers-reduced-motion

### 6. fixing-motion-performance — render budget
- transform/opacity only
- No will-change spam; no expensive backdrop-blur stacks
- requestAnimationFrame for scroll-linked motion
- Promote layers deliberately
- Honor prefers-reduced-motion

### 7. bencium-design-audit — final quality gate
- Phased audit: visual hierarchy, type, spacing, color, motion, a11y, conversion
- Output: pass/fail per category + fix list
- If fail: loop back to step 3

## Output contract

Every UI deliverable produced through this pipeline declares:

```
[design-trio]
  direction: <chosen aesthetic>
  sections: <ordered list>
  deletions: <what was cut>
  tokens: <colors, type, spacing referenced>
  a11y: <landmarks, focus, contrast notes>
  motion: <animated props + durations>
  audit: <pass | fix-list>
```

## Skip protocol

- "skip trio" / "no design pass" / one-line fix → bypass pipeline
- Reference image provided → still run trio but step 2 becomes "match reference exactly"

## Token policy
Every 6 turns produce a snapshot note (state, active files, next steps), then compress with caveman-compress.

## Related (still active)
- `fixing-metadata` — SEO + OG + JSON-LD pass (run after step 7 for marketing pages)
- `react-best-practices` — performance correctness layer
- `webapp-testing` — verification (Playwright)