From 0967edf62cc7ac19eafe8ddc53ac318a030a9a18 Mon Sep 17 00:00:00 2001 From: Viet Tran Date: Fri, 16 Jan 2026 10:58:51 +0700 Subject: [PATCH] docs: enhance design system example in README with full details - Add Conversion and CTA placement details - Add numbered Sections list - Add Style keywords, Best For, Performance/Accessibility - Add color names and Notes - Add Typography Mood, Best For, Google Fonts - Add Pre-Delivery Checklist (7 items) - Fix ASCII box alignment for consistent right border Co-Authored-By: Claude Opus 4.5 --- README.md | 71 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 7076c70..4695d4e 100644 --- a/README.md +++ b/README.md @@ -33,29 +33,54 @@ An AI skill that provides design intelligence for building professional UI/UX ac The flagship feature of v2.0 is the **Design System Generator** - an AI-powered reasoning engine that analyzes your project requirements and generates a complete, tailored design system in seconds. ``` -+-----------------------------------------------------------------------------------------+ -| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM | -+-----------------------------------------------------------------------------------------+ -| | -| PATTERN: Hero-Centric + Social Proof | -| Sections: Hero > Services > Testimonials > Booking > Contact | -| | -| STYLE: Soft UI Evolution + Neumorphism | -| Keywords: Soft shadows, subtle depth, calming, premium feel | -| Performance: Excellent | Accessibility: WCAG AA | -| | -| COLORS: | -| Primary: #E8B4B8 Secondary: #A8D5BA CTA: #D4AF37 | -| Background: #FFF5F5 Text: #2D3436 | -| | -| TYPOGRAPHY: Cormorant Garamond / Montserrat | -| Google Fonts: https://fonts.google.com/share?selection.family=... | -| | -| KEY EFFECTS: Soft shadows + Smooth transitions (200-300ms) + Gentle hover | -| | -| AVOID: Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients | -| | -+-----------------------------------------------------------------------------------------+ ++----------------------------------------------------------------------------------------+ +| TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM | ++----------------------------------------------------------------------------------------+ +| | +| PATTERN: Hero-Centric + Social Proof | +| Conversion: Emotion-driven with trust elements | +| CTA: Above fold, repeated after testimonials | +| Sections: | +| 1. Hero | +| 2. Services | +| 3. Testimonials | +| 4. Booking | +| 5. Contact | +| | +| STYLE: Soft UI Evolution | +| Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes | +| Best For: Wellness, beauty, lifestyle brands, premium services | +| Performance: Excellent | Accessibility: WCAG AA | +| | +| COLORS: | +| Primary: #E8B4B8 (Soft Pink) | +| Secondary: #A8D5BA (Sage Green) | +| CTA: #D4AF37 (Gold) | +| Background: #FFF5F5 (Warm White) | +| Text: #2D3436 (Charcoal) | +| Notes: Calming palette with gold accents for luxury feel | +| | +| TYPOGRAPHY: Cormorant Garamond / Montserrat | +| Mood: Elegant, calming, sophisticated | +| Best For: Luxury brands, wellness, beauty, editorial | +| Google Fonts: https://fonts.google.com/share?selection.family=... | +| | +| KEY EFFECTS: | +| Soft shadows + Smooth transitions (200-300ms) + Gentle hover states | +| | +| AVOID (Anti-patterns): | +| Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients | +| | +| PRE-DELIVERY CHECKLIST: | +| [ ] No emojis as icons (use SVG: Heroicons/Lucide) | +| [ ] cursor-pointer on all clickable elements | +| [ ] Hover states with smooth transitions (150-300ms) | +| [ ] Light mode: text contrast 4.5:1 minimum | +| [ ] Focus states visible for keyboard nav | +| [ ] prefers-reduced-motion respected | +| [ ] Responsive: 375px, 768px, 1024px, 1440px | +| | ++----------------------------------------------------------------------------------------+ ``` ### How Design System Generation Works