Tutorial Overview
Series index: gstack Tutorial Series
/design-review audits your UI, finds AI slop and UX issues, then fixes them. /devex-review audits your developer experience in real-time.
What you will learn
- ✅
/design-reviewlive audit workflow - ✅ AI slop detection patterns
- ✅ Before/after screenshot documentation
- ✅
/devex-reviewlive DX audit - ✅ Boomerang effect comparison
- ✅ Onboarding flow example
Why Live Design Review?
Plan review vs live review
| Phase | Command | Purpose |
|---|---|---|
| Before coding | /plan-design-review |
Evaluate proposed design |
| After coding | /design-review |
Audit actual implementation, fix issues |
flowchart LR
A[Proposed Design] --> B[/plan-design-review]
B --> C[Implement]
C --> D[/design-review]
D --> E[Fixed UI]
style B fill:#fff3e0
style D fill:#e8f5e9
What /design-review adds
The plan review only evaluates. The live review:
- Navigates — Real browser, actual pages
- Screenshots — Captures current state
- Finds issues — AI slop, UX problems, visual bugs
- Fixes — Applies atomic commits
- Documents — Before/after comparison
/design-review — Live UX Audit
Audit checklist
Same 10 sections as /plan-design-review, evaluated live:
| Section | What’s Checked |
|---|---|
| 1. Visual hierarchy | Heading sizes, spacing, focal points |
| 2. Color contrast | WCAG AA compliance, palette consistency |
| 3. Typography | Font sizes, line heights, readability |
| 4. Layout & spacing | Grid alignment, whitespace, responsive |
| 5. Interactions | Hover states, transitions, feedback |
| 6. Accessibility | ARIA labels, focus states, keyboard nav |
| 7. Content clarity | Microcopy, error messages, placeholders |
| 8. AI slop detection | Generic patterns, unnatural phrasing |
| 9. Mobile experience | Touch targets, viewport, gestures |
| 10. Brand consistency | Logo usage, tone, visual identity |
Usage
/design-review
Output:
Running design review on current UI...
┌─────────────────────────────────────────────────────────────┐
│ DESIGN REVIEW │
├─────────────────────────────────────────────────────────────┤
│ Section 1: Visual Hierarchy │
│ Rating: 6/10 │
│ Issues: │
│ - H1 too similar to H2 (both 24px) │
│ - No clear focal point on landing page │
│ │
│ 🔧 Fixing... │
│ - H1 → 32px, H2 → 24px, H3 → 18px │
│ Commit: fix heading hierarchy for visual clarity │
│ │
│ Section 8: AI Slop Detection │
│ Rating: 4/10 │
│ Issues: │
│ ❌ "Seamlessly integrate your workflow" │
│ → Generic AI phrase, no meaning │
│ ❌ "Empower your team to collaborate" │
│ → Empty corporate speak │
│ ❌ "Unlock the power of..." │
│ → Classic AI cliché │
│ │
│ 🔧 Fixing... │
│ - "Seamlessly" → "Connect your tools in 2 clicks" │
│ - "Empower" → "Share files instantly with your team" │
│ - "Unlock" → "See your data in real-time" │
│ Commit: replace AI slop with concrete copy │
│ │
│ Section 3: Typography │
│ Rating: 8/10 │
│ Issues: │
│ - Body text too small on mobile (14px → need 16px) │
│ │
│ 🔧 Fixing... │
│ - Mobile body → 16px minimum │
│ Commit: increase mobile body text size │
└─────────────────────────────────────────────────────────────┘
Design review complete.
Sections audited: 10
Issues found: 5
Fixes applied: 5
Screenshots: before-01.png, after-01.png, before-02.png, after-02.png
AI slop detection patterns
Common AI-generated phrases that get flagged:
| Pattern | Why it’s slop | Replacement |
|---|---|---|
| “Seamlessly” | Empty promise | Specific action + time |
| “Empower” | Corporate speak | Concrete benefit |
| “Unlock the power” | cliché | What user actually gets |
| “Elevate your X” | Vague | How X improves |
| “Streamline” | Meaningless | Steps reduced |
| “Transform” | Hyperbole | Before/after state |
| “Leverage” | Jargon | Use, apply, connect |
| “Cutting-edge” | Empty | Specific tech/feature |
| “Best-in-class” | Unverifiable | Specific metric |
| “Game-changing” | Hyperbole | What changed |
Before/After Documentation
Automatic screenshot capture
Every fix generates:
screenshots/
├── design-review-2026-04-07/
│ ├── before-01-visual-hierarchy.png
│ ├── after-01-visual-hierarchy.png
│ ├── before-02-ai-slop.png
│ ├── after-02-ai-slop.png
│ ├── before-03-typography.png
│ ├── after-03-typography.png
│ └── diff-report.md
Diff report
# Design Review Diff Report
## Fix 1: Visual Hierarchy
### Before
- H1: 24px
- H2: 24px
- No focal point
### After
- H1: 32px
- H2: 24px
- Hero section as focal point
### Impact
Users now scan the page correctly. H1 stands out as primary heading.
## Fix 2: AI Slop Removal
### Before
"Seamlessly integrate your workflow"
### After
"Connect your tools in 2 clicks"
### Impact
Copy now describes actual functionality. Users understand what happens.
/devex-review — Live DX Audit
What it audits
Developer experience for your documentation, onboarding, and API:
| Metric | Measurement |
|---|---|
| TTHW (Time to Hello World) | Minutes from docs to working code |
| Readme clarity | Can someone start in 5 minutes? |
| API discoverability | Are endpoints documented? |
| Error messages | Do they help debug? |
| Example quality | Do examples actually work? |
Usage
/devex-review
Output:
Running developer experience review...
┌─────────────────────────────────────────────────────────────┐
│ DEVEX REVIEW │
├─────────────────────────────────────────────────────────────┤
│ 🧪 Testing: Getting Started flow │
│ │
│ Step 1: Read README │
│ Time: 2m │
│ Issue: Installation command uses old package name │
│ │
│ 🔧 Fixing... │
│ README.md:12: 'npm install mypkg' → 'npm install mypkg-v2' │
│ Commit: fix outdated package name in readme │
│ │
│ Step 2: Run first example │
│ Time: 3m │
│ Issue: Example requires API key not mentioned in docs │
│ │
│ 🔧 Fixing... │
│ README.md:45: Add "Get your API key from dashboard" │
│ Commit: add api key setup instructions │
│ │
│ Step 3: Make first API call │
│ Time: 1m │
│ ✅ Works correctly │
│ │
│ ─────────────────────────────────────────────────────────────│
│ │
│ TTHW: 6 minutes (target: 5) │
│ Rating: 7/10 │
│ │
│ Improvements needed: │
│ - Add quickstart section to README │
│ - Include API key setup in getting started │
│ - Add copy-paste examples │
└─────────────────────────────────────────────────────────────┘
Devex review complete.
TTHW: 6 minutes (over target by 1m)
Fixes applied: 2
Boomerang Effect
Compare plan scores vs live scores
When you ran /plan-devex-review before coding:
┌────────────────────────────────────────────┐
│ DEVEX BOOMERANG COMPARISON │
├────────────────────────────────────────────┤
│ Metric Plan Live Delta │
├────────────────────────────────────────────┤
│ TTHW target 5m 6m +1m ❌ │
│ Readability 8/10 7/10 -1 ❌ │
│ API docs 9/10 9/10 0 ✅ │
│ Examples 8/10 6/10 -2 ❌ │
├────────────────────────────────────────────┤
│ Overall 8/10 7/10 -1 │
│ │
│ Recommendation: │
│ Live scores below plan. Re-run after │
│ applying fixes. │
└────────────────────────────────────────────┘
Why scores drift
- Plan was optimistic — Estimated TTHW without testing
- Implementation added complexity — More steps than planned
- Docs outdated — README doesn’t match current API
- Examples broken — Dependencies changed
Example: Onboarding Flow Audit
Scenario
Audit a new user onboarding flow from landing to first action.
Commands
# Design review first
/design-review
# Then devex review for docs
/devex-review
# Check boomerang comparison
# [Compare against plan-devex-review scores]
/design-review on landing page
Auditing landing page...
┌─────────────────────────────────────────────────────────────┐
│ ONBOARDING FLOW AUDIT │
├─────────────────────────────────────────────────────────────┤
│ Step 1: Landing → Signup │
│ │
│ 🔴 Issue: Signup button has no hover state │
│ 🔧 Fix: Add cursor:pointer + background change on hover │
│ │
│ 🟡 Issue: Form placeholder says "Enter email" │
│ Better: "[email protected]" │
│ 🔧 Fix: Update placeholder to show format │
│ │
│ Step 2: Signup → Dashboard │
│ │
│ ✅ Transition smooth │
│ │
│ 🟡 Issue: No welcome message after signup │
│ 🔧 Fix: Add "Welcome! Let's get started." banner │
│ │
│ Step 3: Dashboard → First Action │
│ │
│ 🔴 Issue: No clear first action │
│ 🔧 Fix: Add "Start here" callout with arrow │
└─────────────────────────────────────────────────────────────┘
Onboarding audit complete.
Steps audited: 3
Issues found: 4
Fixes applied: 4
Before/after screenshots saved.
Integration with QA Workflow
Combined flow
flowchart TD
A[UI Complete] --> B[/design-review]
B --> C{UX issues?}
C -->|Yes| D[Fix UX]
D --> B
C -->|No| E[/devex-review]
E --> F{DX issues?}
F -->|Yes| G[Fix docs]
G --> E
F -->|No| H[/qa]
H --> I[Ship]
style B fill:#e8f5e9
style E fill:#fff3e0
style I fill:#e1f5ff
Typical sequence
# 1. Design review (UI/UX)
/design-review
# 2. Devex review (docs/onboarding)
/devex-review
# 3. QA (functional testing)
/qa https://staging.myapp.com
# 4. Ship when all pass
/ship
Skill Quick Reference
| Command | Purpose | Output |
|---|---|---|
/design-review |
Live UX audit + fixes | 10 sections, before/after |
/devex-review |
Live DX audit + fixes | TTHW, docs, examples |
/design-review --section 8 |
AI slop only | Slop detection focused |
/devex-review --tthw |
TTHW measurement only | Time-based metric |
Summary
Live design review in gstack provides:
- 10-section UX audit — Same checklist as plan, applied live
- AI slop detection — Find and replace empty phrases
- Before/after screenshots — Visual documentation for each fix
- Devex audit — TTHW, docs clarity, example quality
- Boomerang comparison — Plan scores vs live reality
Key takeaways
- ✅ Run
/design-reviewafter UI implementation - ✅ Run
/devex-reviewafter docs written - ✅ Check AI slop section specifically (section 8)
- ✅ Compare against plan scores with boomerang effect
Series navigation:
- ← Previous: Tutorial 8: QA & Security
- → Next: Tutorial 10: Release Engineering
- Back: Series Index