Design Mastery Skill v2.0.0
"Design is intelligence made visible." — Alina Wheeler
World-class design system ที่ช่วยให้ AI สร้าง UI ที่สวย professional ไม่ซ้ำใคร และที่สำคัญ ไม่ดู "AI-generated"
🧠 Core Philosophy
The Invisible Design Principle
Good design is INVISIBLE.
Users don't notice good design - they notice BAD design.
When someone says "this looks AI-generated", that's design failure.
When someone says "this looks professional", that's still not enough.
When someone DOESN'T comment on design and just USES the app - that's success.
Three Pillars of Design Mastery
┌─────────────────────────────────────────────────────────────────┐
│ DESIGN MASTERY │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 1. CONTEXT INTELLIGENCE │
│ └── Understand business + audience = right design │
│ │
│ 2. ANTI-AI VIGILANCE │
│ └── Detect and eliminate AI-looking patterns │
│ │
│ 3. CRAFT EXCELLENCE │
│ └── Every pixel intentional, every space meaningful │
│ │
└─────────────────────────────────────────────────────────────────┘
📋 Design Process (5 Steps)
USER REQUEST
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ STEP 1: BUSINESS ANALYSIS │
│ - What type of business/app is this? │
│ - Who is the target audience? │
│ - What emotion should it evoke? │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ STEP 2: SELECT DESIGN PROFILE │
│ - Match business to registry profile │
│ - Load design tokens (colors, typography, spacing) │
│ - Load component patterns │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ STEP 3: ANTI-AI SCAN │
│ - Check for AI red flags in design choices │
│ - Ensure uniqueness and intentionality │
│ - Apply human-like variations │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ STEP 4: IMPLEMENT DESIGN │
│ - Apply design tokens to components │
│ - Create consistent design system │
│ - Add appropriate micro-interactions │
└─────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ STEP 5: QUALITY VERIFICATION │
│ - Would a designer be proud of this? │
│ - Does it feel like a real product? │
│ - Is it better than competitors? │
└─────────────────────────────────────────────────────────────────┘
🏢 Business Type Registry (Extensible)
How to Use This Registry
// 1. Identify business type from user request
const businessType = analyzeBusinessType(userRequest);
// 2. Load design profile
const profile = DESIGN_REGISTRY[businessType] || DESIGN_REGISTRY['saas-dashboard'];
// 3. Apply design tokens
applyDesignTokens(profile.tokens);
// 4. Use component patterns
useComponentPatterns(profile.patterns);
Registry Structure
# Each entry in the registry follows this structure:
business_type:
name: "Human-readable name"
description: "When to use this profile"
keywords: ["matching", "keywords"]
emotion: "What users should feel"
tokens:
colors:
primary: "#hex"
secondary: "#hex"
accent: "#hex"
background: "#hex"
surface: "#hex"
text:
primary: "#hex"
secondary: "#hex"
muted: "#hex"
semantic:
success: "#hex"
warning: "#hex"
error: "#hex"
typography:
heading: "Font Family"
body: "Font Family"
thai: "Thai Font (if applicable)"
scale: [xs, sm, base, lg, xl, 2xl, 3xl, 4xl]
spacing:
unit: 4 # base unit in pixels
scale: [1, 2, 3, 4, 6, 8, 12, 16, 24]
borders:
radius:
sm: "0.125rem"
md: "0.375rem"
lg: "0.5rem"
xl: "0.75rem"
full: "9999px"
default: "md" # which to use by default
shadows:
level: "subtle | moderate | elevated"
animation:
level: "minimal | moderate | expressive"
timing: "fast | normal | slow"
patterns:
layout: "sidebar | top-nav | minimal | split"
hero: "centered | split | background | none"
cards: "elevated | flat | bordered | glass"
buttons: "solid | outline | ghost | gradient"
anti_patterns:
- "Specific things to AVOID for this business type"
📦 Design Profile Registry
Profile: SaaS Dashboard
saas-dashboard:
name: "SaaS Dashboard"
description: "Data-driven apps, admin panels, analytics tools"
keywords: ["dashboard", "admin", "analytics", "tracker", "management", "tool"]
emotion: "Efficient, Clear, Trustworthy"
tokens:
colors:
primary: "#6366F1" # Indigo - professional yet modern
secondary: "#8B5CF6" # Violet - accent
accent: "#F59E0B" # Amber - attention
background: "#F8FAFC" # Slate-50
surface: "#FFFFFF"
text:
primary: "#0F172A" # Slate-900
secondary: "#475569" # Slate-600
muted: "#94A3B8" # Slate-400
semantic:
success: "#10B981" # Emerald-500
warning: "#F59E0B" # Amber-500
error: "#EF4444" # Red-500
typography:
heading: "Inter"
body: "Inter"
thai: "Noto Sans Thai"
mono: "JetBrains Mono"
borders:
default: "md" # rounded-md
cards: "lg" # rounded-lg
buttons: "md" # rounded-md
inputs: "md" # rounded-md
shadows:
level: "subtle"
cards: "shadow-sm hover:shadow-md"
modals: "shadow-xl"
animation:
level: "moderate"
timing: "200ms"
easing: "ease-out"
patterns:
layout: "sidebar"
hero: "none"
cards: "bordered" # Clean, not heavy shadows
buttons: "solid"
tables: "striped"
anti_patterns:
- "Heavy gradients (looks dated)"
- "Rounded-full on cards"
- "Too many accent colors"
- "Bounce animations"
Profile: E-commerce
ecommerce:
name: "E-commerce"
description: "Online stores, product catalogs, marketplaces"
keywords: ["shop", "store", "product", "sell", "buy", "cart", "order", "marketplace"]
emotion: "Trustworthy, Action-oriented, Exciting"
tokens:
colors:
primary: "#2563EB" # Blue - trust
secondary: "#1E40AF" # Darker blue
accent: "#F97316" # Orange - action, CTAs
background: "#FAFAFA"
surface: "#FFFFFF"
text:
primary: "#1F2937" # Gray-800
secondary: "#4B5563" # Gray-600
muted: "#9CA3AF" # Gray-400
semantic:
success: "#059669" # Emerald-600
warning: "#D97706" # Amber-600
error: "#DC2626" # Red-600
sale: "#DC2626" # Red for discounts
typography:
heading: "Poppins"
body: "Inter"
thai: "Prompt"
price: "Tabular nums"
borders:
default: "lg"
cards: "xl"
buttons: "lg"
product_cards: "xl"
shadows:
level: "elevated"
cards: "shadow-md hover:shadow-xl"
product: "shadow-lg"
animation:
level: "expressive"
timing: "300ms"
cart_add: "scale bounce"
patterns:
layout: "top-nav"
hero: "split"
cards: "elevated"
buttons: "solid"
product_grid: "responsive 2-4 cols"
anti_patterns:
- "Muted colors (needs energy)"
- "Small product images"
- "Hidden add-to-cart"
- "Minimal animations (needs feedback)"
Profile: AI / Chatbot
ai-chatbot:
name: "AI Chatbot / AI Tool"
description: "Conversational AI, chatbots, AI assistants, AI SaaS"
keywords: ["ai", "chatbot", "assistant", "gpt", "claude", "chat", "conversation", "bot"]
emotion: "Friendly, Intelligent, Approachable"
tokens:
colors:
# ⚠️ CRITICAL: Do NOT use purple-blue gradient! Every AI uses it!
primary: "#0D9488" # Teal - friendly, different from others
secondary: "#14B8A6" # Lighter teal
accent: "#F472B6" # Pink - warmth
background: "#F0FDFA" # Teal-50
surface: "#FFFFFF"
text:
primary: "#134E4A" # Teal-900
secondary: "#115E59" # Teal-800
muted: "#5EEAD4" # Teal-300
chat:
user_bubble: "#0D9488"
bot_bubble: "#F0FDFA"
typing: "#99F6E4"
typography:
heading: "Nunito"
body: "Nunito"
thai: "Prompt"
chat: "system-ui"
borders:
default: "xl"
chat_bubble: "2xl"
buttons: "full"
cards: "xl"
shadows:
level: "soft"
chat: "shadow-sm"
cards: "shadow-md"
animation:
level: "expressive"
typing: "pulse"
message_appear: "fade-up"
timing: "250ms"
patterns:
layout: "split" # Chat center, sidebar history
hero: "centered"
cards: "glass"
buttons: "solid rounded-full"
chat: "bubbles with tails"
anti_patterns:
- "Purple-blue gradient (EVERY AI uses this!)"
- "Sparkle emoji ✨ everywhere"
- "Robot/AI imagery (too cliché)"
- "Cold/mechanical feeling"
- "Generic 'AI Assistant' naming"
Profile: Food & Restaurant
food-restaurant:
name: "Food & Restaurant"
description: "Restaurants, food delivery, menus, F&B businesses"
keywords: ["food", "restaurant", "menu", "order", "delivery", "cafe", "kitchen", "eat"]
emotion: "Warm, Appetizing, Welcoming"
tokens:
colors:
primary: "#DC2626" # Red - appetite
secondary: "#B91C1C" # Darker red
accent: "#F59E0B" # Amber - warmth
background: "#FFFBEB" # Amber-50
surface: "#FFFFFF"
text:
primary: "#292524" # Stone-800
secondary: "#57534E" # Stone-600
muted: "#A8A29E" # Stone-400
semantic:
success: "#16A34A"
spicy: "#DC2626"
vegetarian: "#22C55E"
typography:
heading: "Playfair Display" # Elegant
body: "Source Sans Pro"
thai: "Sarabun"
menu: "serif"
borders:
default: "lg"
cards: "xl"
images: "2xl"
shadows:
level: "moderate"
cards: "shadow-md"
images: "shadow-lg"
animation:
level: "moderate"
hover: "scale 1.02"
timing: "300ms"
patterns:
layout: "top-nav"
hero: "background" # Full-width food imagery
cards: "elevated"
menu_style: "image-heavy"
anti_patterns:
- "Cold/blue colors"
- "Small food images"
- "Generic stock photos"
- "Minimalist (food needs warmth)"
Profile: Finance / Fintech
finance:
name: "Finance / Fintech"
description: "Banking, investments, financial tools, money management"
keywords: ["finance", "bank", "money", "invest", "payment", "wallet", "budget", "financial"]
emotion: "Secure, Trustworthy, Professional"
tokens:
colors:
primary: "#0F766E" # Teal-700 - money, growth
secondary: "#115E59" # Teal-800
accent: "#0284C7" # Sky-600 - trust
background: "#F8FAFC" # Slate-50
surface: "#FFFFFF"
text:
primary: "#0F172A" # Slate-900
secondary: "#334155" # Slate-700
muted: "#64748B" # Slate-500
semantic:
positive: "#059669" # Emerald - gains
negative: "#DC2626" # Red - losses
warning: "#D97706"
typography:
heading: "IBM Plex Sans"
body: "IBM Plex Sans"
thai: "IBM Plex Sans Thai"
numbers: "Tabular lining"
borders:
default: "md"
cards: "lg"
buttons: "md"
shadows:
level: "subtle"
cards: "shadow-sm"
animation:
level: "minimal"
timing: "150ms"
numbers: "count-up"
patterns:
layout: "sidebar"
hero: "none"
cards: "bordered"
numbers: "large prominent"
charts: "clean minimal"
anti_patterns:
- "Playful animations"
- "Bright/loud colors"
- "Casual typography"
- "Excessive decoration"
Profile: Healthcare / Wellness
healthcare:
name: "Healthcare / Wellness"
description: "Health apps, medical, wellness, fitness tracking"
keywords: ["health", "medical", "wellness", "fitness", "doctor", "patient", "care", "clinic"]
emotion: "Calm, Trustworthy, Caring"
tokens:
colors:
primary: "#0EA5E9" # Sky-500 - calm, medical
secondary: "#0284C7" # Sky-600
accent: "#10B981" # Emerald - health, growth
background: "#F0F9FF" # Sky-50
surface: "#FFFFFF"
text:
primary: "#0C4A6E" # Sky-900
secondary: "#075985" # Sky-800
muted: "#7DD3FC" # Sky-300
typography:
heading: "Source Sans Pro"
body: "Source Sans Pro"
thai: "Sarabun"
borders:
default: "lg"
cards: "xl"
buttons: "lg"
shadows:
level: "none" # Clean, clinical
cards: "border only"
animation:
level: "minimal"
timing: "200ms"
transitions: "gentle"
patterns:
layout: "top-nav"
hero: "centered"
cards: "flat bordered"
accessibility: "WCAG AAA"
anti_patterns:
- "Dark themes"
- "Sharp corners"
- "Aggressive colors"
- "Complex animations"
Profile: Creative / Portfolio
creative:
name: "Creative / Portfolio"
description: "Design portfolios, creative agencies, artists"
keywords: ["portfolio", "creative", "agency", "design", "art", "studio"]
emotion: "Expressive, Unique, Inspiring"
tokens:
colors:
# Unique palette - break the rules!
primary: "#7C3AED" # Violet - creativity
secondary: "#A78BFA" # Violet light
accent: "#F472B6" # Pink
background: "#FAFAF9" # Stone-50
surface: "#FFFFFF"
text:
primary: "#1C1917" # Stone-900
secondary: "#44403C" # Stone-700
muted: "#A8A29E" # Stone-400
typography:
heading: "Playfair Display" # Or custom/unique
body: "DM Sans"
thai: "Prompt"
borders:
default: "none" # Clean edges
cards: "none"
images: "none"
shadows:
level: "elevated"
cards: "shadow-2xl"
animation:
level: "expressive"
scroll: "parallax"
hover: "dramatic"
timing: "400ms"
patterns:
layout: "minimal"
hero: "full-screen"
grid: "masonry"
transitions: "page transitions"
anti_patterns:
- "Generic templates"
- "Standard layouts"
- "Safe color choices"
- "Boring typography"
Profile: Enterprise / B2B
enterprise:
name: "Enterprise / B2B"
description: "Corporate software, B2B tools, enterprise systems"
keywords: ["enterprise", "corporate", "b2b", "crm", "erp", "business"]
emotion: "Professional, Reliable, Efficient"
tokens:
colors:
primary: "#1E40AF" # Blue-800 - trust
secondary: "#1E3A8A" # Blue-900
accent: "#0369A1" # Sky-700
background: "#F8FAFC"
surface: "#FFFFFF"
text:
primary: "#1E293B" # Slate-800
secondary: "#475569" # Slate-600
muted: "#94A3B8" # Slate-400
typography:
heading: "IBM Plex Sans"
body: "IBM Plex Sans"
thai: "IBM Plex Sans Thai"
borders:
default: "sm"
cards: "md"
tables: "sm"
shadows:
level: "minimal"
cards: "shadow-sm"
animation:
level: "minimal"
timing: "150ms"
patterns:
layout: "sidebar"
density: "high" # More information visible
tables: "full-featured"
forms: "multi-step"
anti_patterns:
- "Playful elements"
- "Casual tone"
- "Low information density"
- "Decorative elements"
🚨 Anti-AI Detection System
Level 1: Obvious AI Tells (CRITICAL - Always check!)
| AI Pattern |
Why It's Bad |
Fix |
| Purple-blue gradient |
Every AI uses it |
Solid color or subtle gradient |
rounded-full everywhere |
Thoughtless default |
Vary by element type |
shadow-md on everything |
No hierarchy |
Use shadow scale purposefully |
| Inter font everywhere |
Default choice |
Choose font for business |
| Emoji in headings 👋🚀 |
Looks unprofessional |
Remove or use sparingly |
| "Welcome back, User!" |
Generic placeholder |
Use actual name or remove |
Pure black #000 text |
Too harsh |
Use slate-900 or gray-900 |
| Bounce animations |
Childish |
Use ease-out transitions |
Level 2: Subtle AI Tells (Important)
| AI Pattern |
Why It's Bad |
Fix |
| Same border-radius everywhere |
No visual hierarchy |
Vary: sm for inputs, lg for cards |
| Gradient text |
Overused trend |
Solid color or subtle highlight |
| Card → Card → Card layout |
Monotonous |
Mix layouts: cards, tables, lists |
| Centered everything |
Lazy alignment |
Use grids, asymmetry |
| Generic hero sections |
Template-looking |
Custom layout per business |
| Stock illustration style |
Obvious AI |
Custom icons or real photos |
| Equal spacing everywhere |
No rhythm |
Create visual rhythm |
Level 3: Deep AI Tells (Polish)
| AI Pattern |
Why It's Bad |
Fix |
| Same hover effect everywhere |
Thoughtless |
Vary by element importance |
| No empty states |
Incomplete |
Design proper empty states |
| Generic loading spinners |
Lazy |
Custom skeleton or branded loader |
| Copy-paste component styles |
Inconsistent |
Create design tokens |
| No micro-interactions |
Lifeless |
Add subtle feedback |
| Perfect symmetry |
Unnatural |
Introduce subtle asymmetry |
| Generic icons |
No personality |
Choose icon set that fits brand |
Anti-AI Checklist (Run before delivery!)
□ No purple-blue gradients?
□ Border-radius varies by element?
□ Shadows have purpose and hierarchy?
□ Typography chosen for business (not just Inter)?
□ No emoji in headings?
□ Text colors are soft (not pure black)?
□ Animations are subtle (no bounce)?
□ Layout has variety (not all cards)?
□ Empty states are designed?
□ Loading states are polished?
□ Would a human designer approve?
🎨 Design Token System
Color Scale Generator
// Generate consistent color scales
function generateColorScale(baseHue: number, saturation: number) {
return {
50: `hsl(${baseHue}, ${saturation}%, 97%)`,
100: `hsl(${baseHue}, ${saturation}%, 94%)`,
200: `hsl(${baseHue}, ${saturation}%, 86%)`,
300: `hsl(${baseHue}, ${saturation}%, 76%)`,
400: `hsl(${baseHue}, ${saturation}%, 62%)`,
500: `hsl(${baseHue}, ${saturation}%, 50%)`, // Primary
600: `hsl(${baseHue}, ${saturation}%, 42%)`,
700: `hsl(${baseHue}, ${saturation}%, 34%)`,
800: `hsl(${baseHue}, ${saturation}%, 26%)`,
900: `hsl(${baseHue}, ${saturation}%, 18%)`,
};
}
Typography Scale
/* Consistent type scale (1.25 ratio) */
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.8px */
Spacing Scale
/* 4px base unit */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
🌍 Trend Awareness (2024-2025)
Current Design Trends (Use selectively!)
| Trend |
When to Use |
When to Avoid |
| Bento Grid |
Creative, Portfolio |
Enterprise, Healthcare |
| Glassmorphism |
AI apps, Modern SaaS |
Finance, Traditional |
| Dark Mode |
Dev tools, Creative |
Healthcare, Kids |
| Neubrutalism |
Creative, Youth brands |
Corporate, Medical |
| Microinteractions |
E-commerce, SaaS |
Enterprise, Minimal |
| 3D Elements |
Gaming, Creative |
Finance, Medical |
| Variable Fonts |
Editorial, Creative |
Corporate, Forms |
| Scroll Animations |
Marketing, Portfolio |
Dashboards, Forms |
Timeless Principles (Always apply!)
1. HIERARCHY - Clear visual importance
2. CONTRAST - Readable, accessible
3. ALIGNMENT - Consistent, intentional
4. PROXIMITY - Related items grouped
5. REPETITION - Consistent patterns
6. WHITESPACE - Room to breathe
🔌 Extensibility: Adding New Business Types
How to Add a New Profile
# Template for new business type
new-business-type:
name: "Display Name"
description: "When to use this profile"
keywords: ["keyword1", "keyword2", "keyword3"]
emotion: "What users should feel"
tokens:
colors:
primary: "#hexcode"
secondary: "#hexcode"
accent: "#hexcode"
background: "#hexcode"
surface: "#hexcode"
text:
primary: "#hexcode"
secondary: "#hexcode"
muted: "#hexcode"
semantic:
success: "#hexcode"
warning: "#hexcode"
error: "#hexcode"
typography:
heading: "Font Name"
body: "Font Name"
thai: "Thai Font"
borders:
default: "size"
cards: "size"
shadows:
level: "subtle | moderate | elevated"
animation:
level: "minimal | moderate | expressive"
patterns:
layout: "sidebar | top-nav | minimal"
hero: "centered | split | background | none"
cards: "elevated | flat | bordered | glass"
anti_patterns:
- "Thing to avoid 1"
- "Thing to avoid 2"
Examples of Extensible Types
# Future business types that can be added:
- gaming
- education-kids
- education-professional
- real-estate
- travel-booking
- social-media
- news-media
- government
- nonprofit
- sports-fitness
- music-entertainment
- legal-services
- logistics-shipping
🎯 Quick Reference
Business Type → Design Profile Mapping
function selectDesignProfile(keywords: string[]): DesignProfile {
const mapping = {
// E-commerce
['shop', 'store', 'product', 'cart', 'order']: 'ecommerce',
// SaaS Dashboard
['dashboard', 'admin', 'analytics', 'tracker', 'management']: 'saas-dashboard',
// AI / Chatbot
['ai', 'chatbot', 'assistant', 'gpt', 'claude', 'chat']: 'ai-chatbot',
// Food
['food', 'restaurant', 'menu', 'delivery', 'cafe']: 'food-restaurant',
// Finance
['finance', 'bank', 'money', 'invest', 'payment', 'budget']: 'finance',
// Healthcare
['health', 'medical', 'wellness', 'fitness', 'doctor']: 'healthcare',
// Creative
['portfolio', 'creative', 'agency', 'design', 'art']: 'creative',
// Enterprise
['enterprise', 'corporate', 'b2b', 'crm', 'erp']: 'enterprise',
};
// Find best match
for (const [keys, profile] of Object.entries(mapping)) {
if (keywords.some(k => keys.includes(k.toLowerCase()))) {
return DESIGN_REGISTRY[profile];
}
}
// Default fallback
return DESIGN_REGISTRY['saas-dashboard'];
}
📝 Integration with Agents
For Vibe Agent (New Projects)
1. Analyze user request for business keywords
2. Select design profile from registry
3. Apply design tokens to project setup
4. Use component patterns from profile
5. Run anti-AI checklist before delivery
For Design Agent (Polish)
1. Load current design system
2. Compare against appropriate profile
3. Identify deviations and AI patterns
4. Fix issues following profile guidelines
5. Verify with anti-AI checklist
For UI Agent (Components)
1. Check project's design profile (from memory)
2. Use tokens for new components
3. Follow patterns from profile
4. Ensure consistency with existing design
✅ Success Criteria
A design passes if:
Design Mastery Skill v2.0.0 - World-Class Extensible Design System
📦 Additional Business Profiles (Extended Registry)
Profile: Education / E-Learning
education:
name: "Education / E-Learning"
description: "Online courses, LMS, tutoring, educational platforms"
keywords: ["education", "course", "learn", "school", "student", "teacher", "quiz", "lesson"]
emotion: "Encouraging, Clear, Engaging"
tokens:
colors:
primary: "#4F46E5" # Indigo - knowledge, wisdom
secondary: "#6366F1" # Lighter indigo
accent: "#F59E0B" # Amber - achievement, stars
background: "#F5F3FF" # Violet-50 (soft)
surface: "#FFFFFF"
text:
primary: "#1E1B4B" # Indigo-950
secondary: "#4338CA" # Indigo-600
muted: "#A5B4FC" # Indigo-300
semantic:
success: "#10B981" # Completed/Passed
warning: "#F59E0B" # In progress
error: "#EF4444" # Failed/Wrong
star: "#FBBF24" # Achievement
typography:
heading: "Nunito" # Friendly, approachable
body: "Inter"
thai: "Prompt"
borders:
default: "lg"
cards: "xl"
progress: "full"
shadows:
level: "moderate"
cards: "shadow-md"
animation:
level: "expressive"
progress: "smooth fill"
achievement: "bounce once"
timing: "300ms"
patterns:
layout: "sidebar"
hero: "split" # Image + CTA
cards: "elevated"
progress: "prominent"
gamification: "badges, streaks, points"
anti_patterns:
- "Boring corporate look"
- "Dense text walls"
- "No progress indicators"
- "Static, no feedback"
Profile: Travel / Booking
travel:
name: "Travel / Booking"
description: "Travel booking, hotels, flights, vacation planning"
keywords: ["travel", "hotel", "flight", "booking", "vacation", "trip", "tour", "destination"]
emotion: "Adventurous, Exciting, Trustworthy"
tokens:
colors:
primary: "#0891B2" # Cyan-600 - sky, ocean
secondary: "#06B6D4" # Cyan-500
accent: "#F97316" # Orange - sunset, excitement
background: "#ECFEFF" # Cyan-50
surface: "#FFFFFF"
text:
primary: "#164E63" # Cyan-900
secondary: "#0E7490" # Cyan-700
muted: "#67E8F9" # Cyan-300
semantic:
success: "#10B981"
deal: "#DC2626" # Special deals
popular: "#F59E0B" # Popular choices
typography:
heading: "Poppins"
body: "Inter"
thai: "Prompt"
price: "Tabular nums"
borders:
default: "xl"
cards: "2xl"
images: "xl"
shadows:
level: "elevated"
cards: "shadow-lg hover:shadow-xl"
animation:
level: "expressive"
images: "zoom on hover"
timing: "300ms"
patterns:
layout: "top-nav"
hero: "full-width image"
search: "prominent center"
cards: "image-heavy"
gallery: "carousel"
anti_patterns:
- "Muted colors"
- "Small destination images"
- "Complex booking forms"
- "No price transparency"
Profile: Real Estate
real-estate:
name: "Real Estate"
description: "Property listings, real estate agencies, home buying/selling"
keywords: ["property", "real estate", "house", "apartment", "rent", "buy", "home", "listing"]
emotion: "Trustworthy, Premium, Clear"
tokens:
colors:
primary: "#1E3A5F" # Navy - trust, premium
secondary: "#2D5A87" # Lighter navy
accent: "#B8860B" # Gold - premium feel
background: "#F8FAFC" # Slate-50
surface: "#FFFFFF"
text:
primary: "#0F172A" # Slate-900
secondary: "#334155" # Slate-700
muted: "#94A3B8" # Slate-400
semantic:
success: "#059669"
featured: "#B8860B" # Gold for premium
new: "#2563EB" # New listing
typography:
heading: "Playfair Display" # Elegant, premium
body: "Source Sans Pro"
thai: "Sarabun"
price: "Tabular lining"
borders:
default: "md"
cards: "lg"
images: "md"
shadows:
level: "subtle"
cards: "shadow-sm hover:shadow-md"
animation:
level: "minimal"
timing: "200ms"
patterns:
layout: "top-nav"
hero: "search-focused"
cards: "image-dominant"
gallery: "full-screen lightbox"
map: "integrated"
anti_patterns:
- "Playful colors"
- "Small property images"
- "Hidden pricing"
- "Cluttered listings"
Profile: Gaming / Entertainment
gaming:
name: "Gaming / Entertainment"
description: "Games, gaming platforms, entertainment apps"
keywords: ["game", "gaming", "play", "entertainment", "esports", "stream", "player"]
emotion: "Exciting, Immersive, Dynamic"
tokens:
colors:
# Bold, vibrant palette
primary: "#7C3AED" # Violet - gaming culture
secondary: "#8B5CF6" # Lighter violet
accent: "#10B981" # Emerald - online/active
background: "#0F0F23" # Near black (dark theme!)
surface: "#1A1A2E"
text:
primary: "#F8FAFC" # White
secondary: "#CBD5E1" # Slate-300
muted: "#64748B" # Slate-500
semantic:
online: "#10B981" # Green = online
offline: "#64748B" # Gray = offline
live: "#EF4444" # Red = live
gold: "#FBBF24" # Achievements
typography:
heading: "Rajdhani" # Tech/gaming feel
body: "Inter"
thai: "Prompt"
borders:
default: "lg"
cards: "xl"
avatars: "full"
shadows:
level: "dramatic"
glow: "colored glow effects"
animation:
level: "expressive"
timing: "200ms"
hover: "scale + glow"
transitions: "smooth"
patterns:
layout: "sidebar"
theme: "DARK MODE by default"
cards: "glass morphism"
avatars: "prominent"
stats: "real-time updates"
anti_patterns:
- "Light theme (feels wrong)"
- "Corporate/boring look"
- "Static content"
- "Slow animations"
Profile: Social Media / Community
social-media:
name: "Social Media / Community"
description: "Social platforms, communities, forums, networking"
keywords: ["social", "community", "forum", "network", "post", "share", "follow", "feed"]
emotion: "Connected, Engaging, Personal"
tokens:
colors:
primary: "#3B82F6" # Blue - connection
secondary: "#60A5FA" # Lighter blue
accent: "#EC4899" # Pink - likes, hearts
background: "#F8FAFC"
surface: "#FFFFFF"
text:
primary: "#1E293B"
secondary: "#475569"
muted: "#94A3B8"
semantic:
like: "#EC4899" # Hearts
success: "#10B981"
notification: "#EF4444"
typography:
heading: "Inter"
body: "Inter"
thai: "Noto Sans Thai"
borders:
default: "lg"
cards: "xl"
avatars: "full"
posts: "lg"
shadows:
level: "subtle"
cards: "shadow-sm"
animation:
level: "expressive"
like: "heart pop"
notification: "shake"
timing: "200ms"
patterns:
layout: "centered feed"
cards: "bordered"
feed: "infinite scroll"
interactions: "instant feedback"
avatars: "prominent"
anti_patterns:
- "Slow interactions"
- "No feedback animations"
- "Hidden engagement metrics"
- "Complex navigation"
🔮 Trend Registry (2024-2025 Updates)
How to Use Trends
// Trends are OPTIONAL enhancements, not requirements
// Apply only when they fit the business type
interface TrendConfig {
name: string;
suitableFor: string[]; // Business types
notSuitableFor: string[]; // Avoid for these
implementation: string; // How to implement
overuseWarning: string; // When it becomes a problem
}
Active Trends Registry
bento-grid:
name: "Bento Grid Layout"
suitableFor: ["creative", "saas-dashboard", "social-media"]
notSuitableFor: ["enterprise", "healthcare", "finance"]
implementation: |
grid grid-cols-4 gap-4
Items span different col/row counts
Asymmetric but balanced
overuseWarning: "Not for data-heavy dashboards"
glassmorphism:
name: "Glass Morphism"
suitableFor: ["ai-chatbot", "gaming", "creative"]
notSuitableFor: ["finance", "healthcare", "enterprise"]
implementation: |
bg-white/10 backdrop-blur-lg
border border-white/20
Works best on colorful/image backgrounds
overuseWarning: "Performance issues on older devices"
dark-mode-first:
name: "Dark Mode as Default"
suitableFor: ["gaming", "creative", "ai-chatbot"]
notSuitableFor: ["healthcare", "food-restaurant", "education"]
implementation: |
Start with dark palette
bg-slate-900/950
Light text, subtle surfaces
overuseWarning: "Not appropriate for all audiences"
micro-interactions:
name: "Micro-interactions"
suitableFor: ["ALL except enterprise"]
notSuitableFor: ["enterprise (minimal only)"]
implementation: |
Button press feedback
Form field focus effects
Loading state animations
Success/error feedback
overuseWarning: "Too many = distracting"
variable-fonts:
name: "Variable Fonts"
suitableFor: ["creative", "editorial", "education"]
notSuitableFor: ["enterprise", "finance"]
implementation: |
Font-weight animations
Responsive typography
Custom font-variation-settings
overuseWarning: "Larger file sizes"
scroll-animations:
name: "Scroll-Triggered Animations"
suitableFor: ["creative", "ecommerce", "travel"]
notSuitableFor: ["saas-dashboard", "enterprise", "healthcare"]
implementation: |
Framer Motion useInView
Subtle fade-in, slide-up
Parallax (sparingly)
overuseWarning: "Annoying if overdone"
Emerging Trends (Watch List)
# These are emerging - use with caution
ai-generated-art:
status: "emerging"
note: "Custom AI art for illustrations - but make it unique"
spatial-design:
status: "emerging"
note: "3D elements, depth - for Vision Pro ready"
voice-ui:
status: "emerging"
note: "Voice commands integration"
🌐 Design Inspiration Sources
By Business Type
saas-dashboard:
sources:
- "Linear.app"
- "Notion.so"
- "Vercel Dashboard"
- "Stripe Dashboard"
why: "Clean, functional, developer-friendly"
ecommerce:
sources:
- "Shopify themes"
- "Apple Store"
- "Nike.com"
- "Glossier"
why: "Conversion-focused, visual-heavy"
ai-chatbot:
sources:
- "Claude.ai" # But differentiate!
- "Perplexity.ai"
- "ChatGPT"
- "Character.ai"
why: "But AVOID copying purple-blue gradient!"
food-restaurant:
sources:
- "Uber Eats"
- "DoorDash"
- "OpenTable"
- "Resy"
why: "Appetite-inducing, image-focused"
finance:
sources:
- "Wise (TransferWise)"
- "Robinhood"
- "Mercury Bank"
- "Ramp"
why: "Trust, clarity, security-feeling"
healthcare:
sources:
- "Oscar Health"
- "One Medical"
- "Headspace"
- "Calm"
why: "Calming, accessible, trustworthy"
creative:
sources:
- "Awwwards winners"
- "Behance"
- "Dribbble"
- "Minimal Gallery"
why: "Break conventions, be unique"
gaming:
sources:
- "Discord"
- "Steam"
- "Twitch"
- "Epic Games Store"
why: "Dark theme, vibrant, immersive"
education:
sources:
- "Duolingo"
- "Khan Academy"
- "Coursera"
- "Skillshare"
why: "Engaging, progress-focused"
travel:
sources:
- "Airbnb"
- "Booking.com"
- "Expedia"
- "Google Travel"
why: "Dreamy imagery, trust signals"
🔌 Agent Integration Protocol (MANDATORY!)
For Vibe Orchestrator (New Projects)
## REQUIRED: Design Profile Selection
BEFORE spawning UI Builder, MUST:
1. Extract keywords from user request
2. Match to design profile using registry
3. Store selected profile in memory
Example:
User: "สร้างแอพขายกาแฟ"
Keywords: ["ขาย", "กาแฟ"]
Matches: "food-restaurant" (keywords: food, cafe)
Action: Load food-restaurant profile
Tell UI Builder:
"Apply design profile: food-restaurant
- Primary: #DC2626 (red - appetite)
- Typography: Playfair Display + Source Sans Pro
- Layout: top-nav
- Hero: background (food imagery)
- Cards: elevated
- Emotion: Warm, Appetizing, Welcoming"
For Design Reviewer (Polish)
## REQUIRED: Profile-Based Review
1. Read project's design profile from memory
- If none set, detect from project content
2. Compare current design against profile
- Colors match profile?
- Typography matches profile?
- Layout follows profile patterns?
- Anti-patterns avoided?
3. Fix deviations
- Align to profile standards
- Apply profile's anti-pattern fixes
4. Run Anti-AI checklist
- All 3 levels (Obvious, Subtle, Deep)
For UI Builder (Components)
## REQUIRED: Profile-Consistent Components
1. Check memory for project's design profile
- If exists, use profile tokens
- If not, use saas-dashboard default
2. Apply profile tokens to new components
- Colors from profile.tokens.colors
- Typography from profile.tokens.typography
- Borders from profile.tokens.borders
- Shadows from profile.tokens.shadows
3. Follow profile patterns
- Card style from profile.patterns.cards
- Button style from profile.patterns.buttons
- Layout from profile.patterns.layout
📊 Design Decision Matrix
Quick Selection Guide
| User Request |
Detected Keywords |
Profile |
Key Design Choices |
| "expense tracker" |
tracker, budget |
finance |
Navy+Teal, IBM Plex, numbers prominent |
| "coffee shop menu" |
menu, cafe |
food-restaurant |
Red+Amber, Playfair, food imagery |
| "AI assistant" |
ai, assistant |
ai-chatbot |
Teal (NOT purple!), friendly rounded |
| "online course" |
course, learn |
education |
Indigo+Amber, progress bars, gamification |
| "hotel booking" |
hotel, booking |
travel |
Cyan+Orange, big images, search prominent |
| "property listing" |
property, rent |
real-estate |
Navy+Gold, premium feel, map integration |
| "gaming platform" |
game, play |
gaming |
Dark mode, violet+emerald, glow effects |
| "social app" |
social, share |
social-media |
Blue+Pink, feed layout, instant feedback |
| "CRM system" |
crm, b2b |
enterprise |
Blue, high density, professional |
| "fitness app" |
fitness, workout |
healthcare |
Sky+Emerald, calming, accessible |
✅ Pre-Delivery Design Checklist
Level 1: Profile Alignment
Level 2: Anti-AI Verification
Level 3: Quality Assurance
Design Mastery Skill v2.1.0 - World-Class Extensible Design System with Extended Registry