Dynamic UI design system generator that creates 10 unique, diverse design directions every time it's invoked. Generates both detailed specifications AND an interactive HTML preview so users can visually explore all options. Each direction includes complete specifications (typography, colors, spacing, components, motion). Automatically triggers before any new UI/frontend work to ensure intentional, cohesive aesthetics. Never shows the same 10 designs twice - always generates fresh options based on varied inspirations, aesthetics, and use cases.
This skill generates 10 completely new design directions every time you start UI work. Each direction is a fully-specified design system with typography, colors, spacing, components, and motion guidelines.
Important: This skill generates NEW designs each time. Never reuse previous designs. Always create fresh, diverse options.
Visual Preview: After generating designs, create an interactive HTML preview at /docs/ui-portfolio/index.html so users can visually explore all 10 options.
Automatically triggers when:
/ui-portfolio-designSkip only when:
CRITICAL: Generate 10 COMPLETELY NEW design directions. Do NOT reuse these examples:
Generation Strategy: Draw inspiration from varied sources to ensure diversity:
Inspiration Sources (pick from different categories):
Diversity Requirements:
For each of the 10 directions, generate complete specifications:
Primary Font: [Font name and fallbacks]
Secondary Font: [If needed]
Scale: [Size range, e.g., 12/14/16/20/24/32/40/48px]
Weights: [e.g., 300, 400, 600, 700]
Line Height: [e.g., 1.5, tight/normal/relaxed]
Letter Spacing: [e.g., 0.02em, tight/normal/wide]
Special: [Any unique characteristics, e.g., all-caps headers]
Primary: [Hex codes and usage]
Secondary: [Hex codes and usage]
Accent: [Hex codes for highlights]
Success/Warning/Error: [State colors]
Neutrals: [Gray scale or equivalent]
Backgrounds: [Main bg colors]
Text: [Text colors for different backgrounds]
Special: [Any unique colors, gradients, or effects]
Base Unit: [e.g., 4px, 8px]
Scale: [e.g., 4, 8, 12, 16, 24, 32, 48, 64]
Component Padding: [e.g., 16-24px, compact/generous]
Margins: [Approach to margins/gaps]
Layout: [Grid system, if any]
Borders: [Width, style, color approach]
Border Radius: [Values, e.g., 0px sharp, 8px rounded, 16px+ pill]
Shadows: [Approach and values]
Textures: [Any background textures or patterns]
Inputs: [Form element styling]
Buttons: [Button styling approach]
Cards: [Card/container styling]
Duration: [Timing values, e.g., 150ms, 300ms, 500ms]
Easing: [Functions, e.g., ease-out, cubic-bezier]
Hover States: [How elements respond to hover]
Focus States: [Keyboard focus appearance]
Loading: [Loading state animations]
Transitions: [What properties animate]
- ❌ [Specific things that break this design direction]
- ❌ [At least 4-5 anti-patterns]
CRITICAL: After generating all 10 design directions, create an interactive HTML preview at /docs/ui-portfolio/index.html so the user can visually explore them.
HTML Structure:
<!DOCTYPE html>
<html>
<head>
<title>UI Portfolio - Design Directions</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=[fonts]&display=swap">
<style>
/* Custom styles for design-specific effects */
</style>
</head>
<body>
<!-- Selection Screen with all 10 options -->
<div id="selection-screen">
<!-- Grid of 10 cards, each clickable -->
</div>
<!-- 10 Full Dashboard Views (hidden by default) -->
<div id="dashboard-1" class="hidden">
<!-- Full dashboard example in that design system -->
</div>
<!-- ... repeat for all 10 -->
<script>
function showDashboard(id) {
// Hide selection, show specific dashboard
}
function showSelection() {
// Back to selection screen
}
</script>
</body>
</html>
What to Include in Each Dashboard View:
After creating HTML:
// Write the file
Write({ file_path: "/Users/.../docs/ui-portfolio/index.html", content: html })
// Open it in browser
Bash({ command: "open /Users/.../docs/ui-portfolio/index.html" })
After generating and opening the HTML preview:
🎨 UI Portfolio: Choose Your Design Direction
I've generated 10 unique design directions for your [project type] and opened an interactive preview in your browser.
**Quick Overview**:
1. [Emoji] **[Direction Name]** - [One-line description]
2. [Emoji] **[Direction Name]** - [One-line description]
...
[All 10]
**For your [project type] project, I recommend:**
- Option [X]: [Direction Name] - [Why it fits]
- Option [Y]: [Direction Name] - [Alternative reasoning]
👉 **Explore them visually in your browser**, then choose a number (1-10) or describe what you're looking for.
Want to see 10 completely different options? Just ask!
Once user selects a direction:
✓ Loaded: [Direction Name]
Key characteristics:
- Typography: [Summary]
- Colors: [Summary]
- Spacing: [Summary]
- Component style: [Summary]
Ready to implement. What would you like to build?
Keep Full Spec in Memory
Offer Token Generation (if new project)
Would you like me to generate:
- Tailwind config with these design tokens
- CSS variables
- Design system documentation
Typography
// Apply font family, size, weight, line-height, letter-spacing
<h1 className="font-[primary] text-[size] font-[weight] leading-[height] tracking-[spacing]">
Colors
// Use palette consistently
<div className="bg-[background] text-[text]">
<button className="bg-[primary] hover:bg-[primary-dark]">
Spacing
// Follow spacing scale
<div className="p-[padding] space-y-[gap]">
Components
// Match border radius, shadows, etc.
<Card className="rounded-[radius] shadow-[shadow] border-[border]">
Motion
// Apply duration and easing
<button className="transition-[property] duration-[duration] ease-[easing]">
Throughout implementation, verify:
For Financial Dashboards:
For E-commerce:
For Analytics:
For Content Platforms:
Key Requirements:
Creating Memorable Directions:
Avoiding Repetition:
Quality Standards:
Tailoring to Project:
If user returns to the same project later:
If user wants to try alternatives:
User asks "show me more options":
User says "I don't like any of these":
User provides their own design spec:
Working in existing codebase with design system:
Remember:
/docs/ui-portfolio/index.html