| name | inspiration-brief |
| description | Gate before any UI implementation — requires confirmed inspiration references, color intent, typography direction, visual storytelling concept, and product-type design system. No HTML/CSS written until brief is confirmed. |
| version | 0.1.0 |
| level | 2 |
| triggers | ["inspiration brief","design brief","before we build","start a new UI","new landing page","new page","/inspiration-brief"] |
| context_files | ["context/project.md"] |
| steps | [{"name":"Brand Check","description":"Confirm brand context is loaded. If not, invoke brand-context first."},{"name":"Product Type","description":"Identify the product type and target audience. Run ui-ux-pro-max design system generator to get style/color/typography recommendations."},{"name":"Gather References","description":"Collect 2-5 inspiration URLs or screenshots. At least one must be from awwwards, godly.website, Dribbble, or Pinterest."},{"name":"Brief Draft","description":"Synthesize brand + product type recommendations + references into a concrete design brief with color direction, typography direction, named style, and visual storytelling concept."},{"name":"Confirm","description":"Present the brief. Get explicit approval. Only then proceed to implementation."}] |
Inspiration Brief Skill
Define what the UI should look and feel like before writing a line of code. The output is a confirmed brief that implementation uses as its visual source of truth.
What Claude Gets Wrong Without This Skill
Without a brief, Claude starts building immediately. It makes every design decision implicitly — color palette, font choice, layout structure, animation style — and presents the result as a fait accompli. The user then spends 10 prompts correcting decisions that could have been made in 5 minutes upfront.
The deeper problem: Claude's default choices are statistically average. It has seen thousands of SaaS templates. Without direction, it produces the centroid of those templates — technically functional, visually indistinguishable from every other AI-generated interface.
Where to Find Inspiration
Before drafting the brief, the user should have looked at references. Point them here if they have not:
- awwwards.com — Sites of the Day/Month. Award-winning work, high craft signal.
- godly.website — Infinite scroll of curated contemporary web design.
- dribbble.com — Component and page-level inspiration. Search by product type.
- pinterest.com — SaaS landing pages, dashboard UI, mobile app screens.
- 21st.dev — Component-level inspiration (buttons, backgrounds, cards, navigation).
At least one reference must be a full page (not just a component) from awwwards, godly, or Dribbble.
Phase Gates
Brand Check — hard gate
Verify brand-context has been run and brand tokens are available. If not, invoke it first. Do not skip this — the brief must be grounded in the actual brand palette, not invented colors.
Product Type + Design System
Identify the product type from the user's description. Map it to the ui-ux-pro-max reasoning database:
python3 .claude/skills/ui/ui-ux-pro-max/scripts/search.py \
"[product description]" --design-system -p "[ProjectName]"
This returns:
- Recommended style (e.g., Glassmorphism + Flat Design for SaaS)
- Color direction (e.g., Trust blue + orange CTA)
- Typography recommendation (e.g., Space Grotesk + DM Sans)
- Anti-patterns to avoid for this product type
- Landing page pattern recommendation
Use these as the starting point — they are defaults to refine, not mandates.
Gather References — hard gate
