pgomezurrea-eng Design Advisor
Overview
A design advisor skill that provides industry-specific UI/UX recommendations before building. Searches design data files to give actionable recommendations with hex codes, font pairings, layout patterns, and anti-pattern warnings.
Trigger
Activate when the user:
- Types
/designfollowed by a description - Asks for design recommendations, color palettes, or typography for a specific industry
- Asks "what colors should I use for X"
- Asks for a design brief before building a component or page
Workflow
- Identify the industry/product type from the user's request
- Search relevant CSV data files in
.claude/skills/design-advisor/data/(or~/.claude/skills/design-advisor/data/for global) - Cross-reference with design vocabulary for proper terminology
- Present structured recommendations with implementation details
Data Files
Search these CSV files based on what the user needs:
colors.csv— industry color palettes (primary, secondary, cta, background, text, border)typography.csv— font pairings with mood, use cases, Google Fonts linksui-reasoning.csv— industry design patterns, anti-patterns, severitystyles.csv— visual design styles and implementation detailslanding.csv— landing page layout patterns and CTA strategiesux-guidelines.csv— UX do/don't rulescharts.csv— data visualization recommendations
Output Format
Structure your response as:
🎨 Style Direction
Recommended visual style and why it fits this industry.
🎨 Color Palette
| Role | Hex | Usage |
|---|---|---|
| Primary | #hex | Headers, key UI elements |
| Secondary | #hex | Hover states, secondary buttons |
| CTA | #hex | Buttons, links that need attention |
| Background | #hex | Page background |
| Text | #hex | Body text |
| Border | #hex | Cards, dividers |
✍️ Typography
- Heading font: Name — why it works
- Body font: Name — why it works
- Google Fonts link: ready-to-use URL
- Tailwind config: fontFamily snippet
📐 Page Structure
Recommended section order and CTA placement strategy.
✨ Key Effects
Animations and interactions that fit this industry.
⚠️ Anti-Patterns (avoid these)
List with severity: HIGH / MEDIUM / LOW
➡️ Next Step
Suggested prompt to start building: /ui [description based on this brief]