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 layerwebapp-testing — verification (Playwright)
1---2name: design-trio3description: 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).4---56# design-trio (canonical workflow)78Default pipeline. Run steps in order. Skip a step only when the brief explicitly excludes that concern.910## When to invoke1112Auto-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.1314## Pipeline (7 steps, fixed order)1516### 1. caveman-compress — token control17- Compress brief + constraints18- Keep: file paths, acceptance criteria, brand tokens, banned patterns, target users19- Drop: hedging, restated context20- Output: ≤10-line compressed brief2122### 2. taste-skill — structure + conversion hierarchy23- Pick aesthetic direction BEFORE markup (brutalist / editorial / retro-futuristic / premium-saas / swiss / monospace)24- AIDA flow for marketing surfaces; bento for dashboards; section ordering for landings25- CTA hierarchy, trust strip placement, pricing anchoring26- Output: section list + direction + typography pairing2728### 3. bencium-negentropy-lens — reduction pass29- Remove clutter, gimmicks, redundant cards, decorative animations30- Whitespace audit: every block earns its space31- Material honesty: no fake glass/gradients masking weak hierarchy32- Output: deletion list + density target3334### 4. baseline-ui — implementation standards35- Tailwind defaults; tokenized OKLCH; no random palette36- Spacing rhythm consistent; typography scale enforced37- Borders over shadows; rounded radius consistent38- **Banned:** purple gradients, blur abuse, heavy drop-shadows (unless justified), `transition-all`, emoji on landing copy39- **Animation:** transform/opacity only; never width/height/top/left40- **Duration:** ≤200ms4142### 5. fixing-accessibility — a11y pass43- Semantic landmarks (`<main>`, `<nav>`, `<section>`)44- Every interactive element has accessible name/label45- Focus rings visible; keyboard tab order; focus traps in dialogs46- Form labels + describedby for errors47- Contrast ≥ WCAG AA; respect prefers-reduced-motion4849### 6. fixing-motion-performance — render budget50- transform/opacity only51- No will-change spam; no expensive backdrop-blur stacks52- requestAnimationFrame for scroll-linked motion53- Promote layers deliberately54- Honor prefers-reduced-motion5556### 7. bencium-design-audit — final quality gate57- Phased audit: visual hierarchy, type, spacing, color, motion, a11y, conversion58- Output: pass/fail per category + fix list59- If fail: loop back to step 36061## Output contract6263Every UI deliverable produced through this pipeline declares:6465```66[design-trio]67 direction: <chosen aesthetic>68 sections: <ordered list>69 deletions: <what was cut>70 tokens: <colors, type, spacing referenced>71 a11y: <landmarks, focus, contrast notes>72 motion: <animated props + durations>73 audit: <pass | fix-list>74```7576## Skip protocol7778- "skip trio" / "no design pass" / one-line fix → bypass pipeline79- Reference image provided → still run trio but step 2 becomes "match reference exactly"8081## Token policy82Every 6 turns produce a snapshot note (state, active files, next steps), then compress with caveman-compress.8384## Related (still active)85- `fixing-metadata` — SEO + OG + JSON-LD pass (run after step 7 for marketing pages)86- `react-best-practices` — performance correctness layer87- `webapp-testing` — verification (Playwright)
MaybackCompany