Design Lab
Generate and compare UI directions using curated Nielsen, Norman, and design-system principles as the agent’s reference while you shape screens.
Overview
Design Lab is an agent skill most often used in Build (also Validate scope, Launch distribution polish) that applies Nielsen and Norman UX principles when generating design variations.
Install
npx skills add https://github.com/0xdesign/design-plugin --skill design-labWhat is this skill?
- Jakob Nielsen’s 10 usability heuristics as an explicit checklist for critiques and variations
- Don Norman affordances, signifiers, mapping, feedback, and conceptual-model guidance
- Curated world-class design-system practices for generating multiple design variations
- Recognition-over-recall and error-prevention framing for agent-generated UI drafts
- Reference document meant to be read before producing design alternatives in the design plugin flow
- 10-step Nielsen usability heuristics checklist
- 5 Don Norman design principles called out for interaction design
Adoption & trust: 1 installs on skills.sh; 731 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
Your agent spits out UI mockups that look modern but ignore usability basics, so every iteration feels subjective and you cannot explain why one version is better.
Who is it for?
Solo builders and designers-in-one-person teams who want principled UI exploration inside Claude Code, Cursor, or similar agents.
Skip if: Teams needing formal user research plans, WCAG remediation checklists only, or backend-only work with no interface decisions.
When should I use this skill?
Before generating design variations or UI critiques when you want agent output anchored to established UX heuristics and design-system best practices.
What do I get? / Deliverables
You get design variations and critiques grounded in named heuristics so you can pick a direction with clearer UX rationale before you code or ship.
- Named design variations tied to specific heuristics
- Structured UX critique referencing Nielsen and Norman rules
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Most concrete output is UI during Build, even though the same heuristics inform earlier prototypes and later polish. Frontend is the canonical shelf because the reference doc directly steers layout, hierarchy, feedback, and minimalist composition choices on interfaces.
Where it fits
Compare two onboarding flows using error-prevention and recognition-over-recall before you commit to a clickable prototype.
Generate dashboard layout variations that enforce visibility of system status and consistent component language.
Tighten landing-page hierarchy and minimalist copy blocks before paid acquisition sends cold traffic.
How it compares
Principle-backed UI reference for agents, not a component library installer or automated visual regression test.
Common Questions / FAQ
Who is design-lab for?
Indie SaaS builders and agent-first developers who want UX-heuristic grounding when exploring interface alternatives.
When should I use design-lab?
Use it while scoping prototypes in Validate, building frontend layouts in Build, and refining launch-ready marketing or product UI in Launch when clarity and feedback matter.
Is design-lab safe to install?
It is editorial reference content; still review the Security Audits panel on this Prism page and avoid piping confidential user research into shared chats.
SKILL.md
READMESKILL.md - Design Lab
# Design Principles Reference This document contains curated best practices from world-class designers and design systems. Reference these principles when generating design variations. --- ## Part 1: UX Foundations ### Jakob Nielsen's 10 Usability Heuristics 1. **Visibility of system status** - Always keep users informed through appropriate feedback within reasonable time 2. **Match between system and real world** - Use familiar language, concepts, and conventions 3. **User control and freedom** - Provide clear "emergency exits" (undo, cancel, back) 4. **Consistency and standards** - Follow platform conventions; same words mean same things 5. **Error prevention** - Eliminate error-prone conditions or ask for confirmation 6. **Recognition over recall** - Minimize memory load; make options visible 7. **Flexibility and efficiency** - Provide accelerators for expert users (shortcuts, defaults) 8. **Aesthetic and minimalist design** - Remove irrelevant information; every element competes 9. **Help users recover from errors** - Plain language errors with constructive solutions 10. **Help and documentation** - Provide concise, task-focused help when needed ### Don Norman's Design Principles - **Affordances** - Design elements should suggest their usage - **Signifiers** - Visual cues that indicate where actions should happen - **Mapping** - Controls should relate spatially to their effects - **Feedback** - Every action needs a perceivable response - **Conceptual model** - Users should understand how the system works ### Cognitive Load Principles - **Limit choices** - 5-7 items max in navigation; 3-4 options in decisions - **Progressive disclosure** - Show only what's needed at each step - **Chunking** - Group related items; break long forms into steps - **Visual hierarchy** - Guide attention with size, color, contrast, position - **Reduce cognitive friction** - Minimize decisions, clicks, and reading ### URL & State Principles - **URL state reflection** - Important UI state (filters, tabs, pagination) should be in the URL - **Shareable links** - Users should be able to share/bookmark the current view - **Browser navigation** - Back/forward buttons should work as expected ### Destructive Actions - **Confirmation required** - Delete, remove, and irreversible actions need explicit confirmation - **Clear consequences** - State exactly what will happen ("This will permanently delete 5 files") - **Recovery path** - Prefer soft delete with undo over immediate permanent deletion - **Visual distinction** - Destructive buttons use warning colors (red) and distinct styling --- ## Part 2: Visual Design Systems ### Typography (from iA, Stripe, Linear) **Hierarchy:** ``` Display: 32-48px, -0.02em tracking, 700 weight Heading 1: 24-32px, -0.02em tracking, 600 weight Heading 2: 20-24px, -0.01em tracking, 600 weight Heading 3: 16-18px, normal tracking, 600 weight Body: 14-16px, normal tracking, 400 weight Caption: 12-13px, +0.01em tracking, 400-500 weight ``` **Best practices:** - Max 60-75 characters per line for readability - Line height: 1.4-1.6 for body text, 1.2-1.3 for headings - Use weight contrast (400 vs 600) more than size contrast - Limit to 2 font families maximum - System fonts for performance: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` **Typographic details:** - Use proper ellipsis `…` not `...` (three dots) - Use curly quotes `"` `"` not straight quotes `"` - Non-breaking spaces for values: `10 MB`, `5 items` (use ` ` or `\u00A0`) - `font-variant-numeric: tabular-nums` for numbers in tables, counters, prices - `text-wrap: balance` for headings (prevents orphans/widows) - `text-wrap: pretty` for body text (better line breaks) ### Spacing System (8px grid) ``` 4px - Tight: icon padding, inline spacing 8px - Base: related elements, form field padding 12px - Comfortable: between form fields 16px - Standard: section padding, card padding 24px - Relaxed: between secti