Agent skill
vs-design
High-quality UI design. Mode Collapse prevention, Low-Typicality selection. Use for component, page, dashboard design.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/vs-design
SKILL.md
VS Design Diverge (Meeting Context Hub)
Phase 0: Context Discovery (MANDATORY)
Explore following dimensions via AskUserQuestion:
- Emotional Tone: Trust? Edgy? Calm?
- Target Audience: Who uses it? Technical level?
- Reference/Anti-Reference: What to reference, what to avoid
- Business Context: What problem to solve?
Phase 1: Identify the Mode (Generic Baseline)
State the most predictable (P~0.95) design. This is NOT to be selected.
Meeting Context Hub default patterns (AI-slop):
- Inter font, purple gradient
- F-pattern layout, white background
- 8px border-radius uniformly
Phase 2: Sample the Long-Tail (3 Directions)
| Direction | T-Score | Description |
|---|---|---|
| A | ~0.7 | Modern/Clean but safe |
| B | ~0.4 | Distinctive/Characterful |
| C | <0.2 | Experimental/Bold |
T-Score justification required for each direction.
Phase 3: Commit to Low-Typicality
Select lowest T-Score that satisfies Quality Guardrails:
- Visual Hierarchy
- Contrast & Legibility (WCAG AA)
- Internal Consistency
- Functional Clarity
Meeting Context Hub Design Tone
Professional + Calm + Organized
- Keywords: Productivity, team collaboration, information organization
- Colors: Neutral tones (slate, zinc) + accents (blue, green)
- Typography: JetBrains Mono (code), Pretendard (body)
Domain Components
| Component | Aesthetic Direction |
|---|---|
| MeetingCard | Tag badges, date meta |
| PRDSummary | Problem/Goal/Scope sections |
| ActionItemList | Checkboxes, assignee avatars |
| TagSelector | Chip style, autocomplete |
| ContextTimeline | Timeline/grid toggle |
Final Validation
- Intentionality: Can all decisions be justified?
- Consistency: Internal logic consistent?
- Guardrails: Hierarchy/legibility/clarity?
- Surprise: Stands out in AI-generated lineup?
Didn't find tool you were looking for?