# Design Advisor

> Provides professional design recommendations before building any UI. Use this skill when the user asks for design guidance, color palettes, typography, layout recommendations, or runs /design. Returns structured design briefs with hex codes, font pairings, layout patterns, and anti-pattern warnings specific to the industry.

- Skill: `pgomezurrea-eng/design-advisor` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add pgomezurrea-eng/design-advisor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pgomezurrea-eng/design-advisor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: pgomezurrea-eng (https://skillmd.com/u/pgomezurrea-eng)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/pgomezurrea-eng/design-advisor

---


# 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 `/design` followed 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
1. Identify the industry/product type from the user's request
2. Search relevant CSV data files in `.claude/skills/design-advisor/data/` (or `~/.claude/skills/design-advisor/data/` for global)
3. Cross-reference with design vocabulary for proper terminology
4. 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 links
- `ui-reasoning.csv` — industry design patterns, anti-patterns, severity
- `styles.csv` — visual design styles and implementation details
- `landing.csv` — landing page layout patterns and CTA strategies
- `ux-guidelines.csv` — UX do/don't rules
- `charts.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]`