rico-ui-ux-themes
UI/UX design optimization toolkit with 20 built-in themes and custom theme generation.
Workflow
[User Input] → [Read Current Project Code] → [Analyze 6 Issues] → [Select Mode] → [Confirm] → [Output]
CRITICAL EXECUTION RULES:
- NEVER show welcome message or greeting
- ALWAYS show selection menu A/B/C/D before execution
- ALWAYS wait for user input after showing menu
- ALWAYS confirm before making any changes
- NEVER skip steps or auto-execute without user confirmation
Key Notes:
- Automatically read code from current working directory when triggered (e.g., "optimize this project/page/design"). No need to ask "which project".
- Language Rule: Detect from initial trigger (e.g., "rico 优化" = Chinese, "rico optimize" = English), then maintain consistent language throughout.
- Project mode detection: Only generate missing light/dark mode if explicitly requested; never force switch.
- Integration: Uses webReader (fetch URLs), Read/Write tools (code operations). All require confirmation.
4 Interaction Patterns
| Pattern | Trigger Examples |
|---|---|
| Full Flow | rico optimize, rico 优化网站设计 |
| Direct Apply | rico use Claude style, rico 用 Claude 风格 |
| Generate Theme | rico create theme: stripe.com |
| Natural Language | rico make it more vibrant |
Triggers and Interaction Patterns
All commands use rico prefix. Supports 4 patterns:
| Pattern | Trigger Examples | Brief Flow |
|---|---|---|
| Full Flow | rico optimize, rico 优化, rico 优化网站设计, rico improve this page design, rico 让页面更好看 | [Read Code] → [Analyze] → [Menu A/B/C/D] → [Select] → [Confirm] → [Output] |
| Direct Apply | rico use [theme-name] style, rico 用 [主题名] 风格, rico 用 Claude 风格优化, rico use Minimal Blue colors + Neo-Brutalist borders | [Load Theme] → [Preview] → [Confirm] → [Apply] |
| Generate Theme | rico create theme: [URL], rico 制作主题：[URL], rico 参考 [URL] 做主题 | [Fetch URL] → [Extract] → [Generate Doc] → [Save] → [Confirm Apply?] |
| Theme Management | rico list themes, rico 有哪些主题, rico show [theme-name], rico 看看 [主题名] | [List/Show] → No further steps unless apply |
Natural Language Support: e.g., "rico make it more vibrant" → Map to Full Flow or Direct Apply based on intent.
Selection Menu (Full Flow)
When user triggers "rico optimize", the workflow is:
[Read Current Project] → [Analyze 6 Dimensions] → [Show Menu A/B/C/D] → [User Selects] → [Confirm] → [Output]
IMPORTANT: Show the menu immediately after reading code. Do NOT ask "what do you want to do" or show welcome message.
Show Selection Menu
- A. Optimize by design principles (no specific style)
- B. Select from built-in themes (20 themes)
- C. Generate theme from industry reference
- D. Custom theme (URL or from project)
Enter option (A/B/C/D):
Option A: Design Principles
User inputs: A
📋 6-Dimension Analysis Results 1. [⚠️] Color - Contrast 3.2:1, below WCAG AA 2. [⚠️] Typography - Inter font, unclear hierarchy 3. [⚠️] Spacing - Inconsistent, no grid system 4. [✓] Border-radius - Unified style 5. [⚠️] Shadow - Too heavy 6. [⚠️] Interaction - Missing hover/focus states Select optimization mode: - a: All (recommended) - b: Issues only (1,2,3,5,6) - Or directly input numbers: 1,3 (custom), 3 (single) Enter (a/b or numbers):
Confirmation Dialog:
📋 Ready to Optimize: Spacing Actions: • Establish unified 4pt grid • Adjust gaps and margins • Optimize whitespace rhythm Confirm? (y/n)
Option B: Built-in Themes
User inputs: B
📊 Project Analysis Detected: SaaS / Enterprise App Style: Professional, clean, data-driven 🎯 Recommended Themes: • 6. Professional Blue ⭐ → Style: Stable blue + clear hierarchy → Match: 95% • 1. Claude → Style: Warm white + ocher orange → Match: 88% • 8. Dashboard Clean → Style: Clean admin, data-focused → Match: 85% • 7. Trust Finance → Style: Deep blue + gold → Match: 82% • 2. Minimal Blue → Style: Dark BG + blue accent → Match: 78% • Enter number to select • Enter L to view all themes (built-in + user-created) Enter:
After theme selection:
Selected: 5. Agent Dark (Dark theme) 📋 Style Features: • Deep black background + vibrant purple accent • Modern & creative • Best for: AI agents, creative tools • Mode: Dark (single mode) 🔧 Actions: • Apply dark background (#0A0A0B) • Add purple accent (#A855F7) • Optimize border-radius to 8px Confirm? (y/n)
Option C: Industry Reference
User inputs: C
📊 Project Type Detection Detected: SaaS / Enterprise (If incorrect, enter correct type) 🌐 Industry Reference Websites: 1. stripe.com → Style: Deep blue + gold accents, professional → Features: Minimal, whitespace, clear hierarchy 2. linear.app → Style: Dark BG + purple gradient, modern tech → Features: Refined interaction, subtle animation 3. notion.so → Style: White BG + minimal, content-first → Features: Clean, efficient, distraction-free 4. figma.com → Style: Colorful gradient + vibrant purple → Features: Creative, professional, collaborative 5. vercel.com → Style: B&W minimal + neon gradient → Features: Cool, modern, developer-friendly • Enter number to select • Enter URL to use custom website • Enter n to skip Enter:
User inputs: 1
📋 Actions: • Fetch stripe.com design features • Analyze color, typography, spacing system • Generate theme file • Apply to current project
Confirm? (y/n)
Option D: Custom Theme
User inputs: D
🎨 Custom Theme 1. Input URL → Example: apple.com 2. Generate from current project → Extract existing design Enter option (1/2) or URL:
If option 2 (generate from project):
AI response:
📋 Actions: • Analyze current project design features • Extract color, typography, spacing system • Generate theme file Enter theme name: [my-brand] Save location: 1. Current project → references/styles/my-brand.md → Project-only access 2. User global directory → ~/.rico/themes/my-brand.md → Available for all projects Enter (1/2):
User inputs: 1
AI response: Analyzing project design features... Generating theme file...
✅ Theme saved to: references/styles/my-brand.md
Apply to optimization? (y/n)
**Option D Notes:** - Supports URL input or generate from current project - When generating from project, ask for theme name and save location - Save location options: project or global --- ## 6-Dimension Analysis Framework For detailed guidelines, see `references/docs/`. | Dimension | Check Points | Reference | |-----------|--------------|-----------| | **1. Color** | Contrast (WCAG AA 4.5:1), brand usage ≤10%, saturation, light/dark mode | color.md | | **2. Typography** | Hierarchy, line-height, font weight, alignment | typography.md | | **3. Spacing** | Grid system (4pt), whitespace, alignment | layout.md | | **4. Border-radius** | Consistency, unified style | component.md | | **5. Shadow** | Hierarchy, meaning, avoid generic | component.md | | **6. Interaction** | 8 states (default/hover/focus/active/disabled/loading/error/success), feedback | motion.md | ### Quick Analysis Checklist | Issue Type | Common Problems | |------------|-----------------| | Color | Low contrast, color abuse, washout on colored bg | | Typography | Inconsistent sizes, line-height, mixed fonts | | Spacing | No grid, cramped, misaligned | | Border-radius | Inconsistent sizes, mixed styles | | Shadow | Too heavy, meaningless, generic | | Interaction | Missing states, weak feedback | For complete audit methodology, see `references/docs/polish.md`. ## Design Anti-Patterns Based on Impeccable design principles: ### Visual - **DON'T** use gray text on colored backgrounds → use tinted shade - **DON'T** use pure black (#000) or white (#fff) → always tint - **DON'T** use "AI color palette" (cyan-on-dark, purple gradients) - **DON'T** overuse brand colors → accent ≤10% ### Layout - **DON'T** wrap everything in cards - **DON'T** nest cards inside cards - **DON'T** center everything → asymmetry feels more designed ### Typography - **DON'T** use overused fonts (Inter, Roboto, Arial) - **DON'T** use too many similar font sizes → muddy hierarchy ### Motion - **DON'T** use bounce easing → feels dated - **DON'T** animate layout properties → use transform only - **DON'T** ignore prefers-reduced-motion ### The AI Slop Test If someone says "AI made this" and it's immediately obvious → that's the problem. Distinctive design makes people ask "how was this made?" not "which AI?" --- ## Built-in Themes **Theme Sources:** - Built-in: 20 themes stored in `references/styles/` - User-created: Any `.md` file in `references/styles/` is automatically available When user creates a new theme (Option D), it is automatically added to the theme list. ### Developer Tools | Theme | Description | Best For | |-------|------------|----------| | Claude | Warm white + ocher orange, rational & warm | AI products, dev tools | | Minimal Blue | Dark BG + blue accent, minimal | Code editors, assistants | | Marketplace Dark | Dark + code aesthetics | Dev marketplaces | | SaaS Dark | Monitoring dark, real-time | DevOps, monitoring | | Agent Dark | Deep black + vibrant purple | AI agents, creative | ### Business & Enterprise | Theme | Description | Best For | |-------|------------|----------| | Professional Blue | Stable blue + clear hierarchy | SaaS, B2B | | Trust Finance | Deep blue + gold | Fintech, banking | | Dashboard Clean | Clean admin, data-focused | Enterprise dashboards | ### Creative Design | Theme | Description | Best For | |-------|------------|----------| | Retro Vibrant | High saturation + bold | Fashion, art | | Creative Gallery | Image grid + visual first | Portfolios, galleries | | Neo-Brutalist | Bold borders + solid shadows | Creative agencies | | Creative Vitality | Vibrant orange + gradients | Creative studios | ### Media & Culture | Theme | Description | Best For | |-------|------------|----------| | Radio Static | B&W + TV static | Podcasts, radio | | Record Club | Vinyl aesthetic + warm | Music platforms | ### Commerce | Theme | Description | Best For | |-------|------------|----------| | Vibrant Commerce | Orange-red + yellow | E-commerce, retail | ### Brand Styles | Theme | Description | Best For | |-------|------------|----------| | Airbnb | Warm coral + whitespace | Travel, hospitality | | Linear | Sleek dark + refined | Productivity tools | | Notion | Clean minimal + content | Documentation | | Duolingo | Playful bright + gamified | Education | | Spotify | Dark + vibrant green | Music streaming | --- ## Theme Generation ### Workflow
[URL] → [webReader fetch] → [Extract design] → [Generate 14-chapter doc] → [Save]
### Reference Documents Use these docs from `references/docs/` when generating themes: - **themes-guide.md** - 14-chapter template for theme structure - **color.md** - Color system guidelines - **typography.md** - Typography rules - **layout.md** - Spacing/grid system - **component.md** - Component design standards - **motion.md** - Animation principles - **polish.md** - 6-dimension audit framework ### Generated Theme Structure (14 Chapters) Every generated theme includes: 1. **Design Philosophy** (设计核心理念) - Brand concept / Design philosophy - Core keywords (3-5) - Why this design? 2. **Color System + Usage Guidelines** (颜色系统 + 使用原则) - Primary, background, text, accent colors - When to use each color - Usage proportion rules - Common mistakes 3. **Interaction Philosophy** (交互理念) - Animation principles - Feedback mechanisms - Transition timing 4. **Layout Principles** (布局原则) - Spacing strategy (grid system) - Whitespace principles - Content max-width 5. **Component Design Decisions** (组件设计决策) - Why this height/radius/color? - Design rationale 6. **Application Scenarios** (应用场景) - Suitable project types - Adjustments for different scenarios 7. **Common Mistakes** (避免的误区) - 5+ common errors - Negative checklist Plus 7 more chapters covering typography, spacing, shadows, components, animations, and use cases. ### Save Location - Project: `references/styles/[theme-name].md` - Global: `~/.rico/themes/[theme-name].md` --- ## Theme Application Workflow
User Input: rico apply [theme-name] ↓ ┌──────────────────────────────────────────┐ │ 1. Load theme from references/styles/ │ │ 2. Detect theme mode (light/dark) │ │ 3. Switch project to theme's mode │ ← Key: Apply dark → switch to dark │ 4. Analyze code: 6-dimension check │ │ 5. Apply theme colors, spacing, etc. │ │ 6. Generate optimized code │ │ 7. Explain key decisions │ └──────────────────────────────────────────┘
**Theme Mode Application Rule:** | Project Mode | Theme Mode | Action | |--------------|------------|--------| | Single (light/dark) | Dual (both) | Use only project's existing mode colors | | Single (light/dark) | Single | Apply theme's defined mode | | Dual (both) | Any | Apply theme's defined mode | **Never force switch mode.** Theme's dual-mode is "supported", not "required". ### Analysis Dimensions AI checks these design dimensions: 1. **Color** - Contrast ratios, saturation, brand color usage, light/dark theme support, tinted neutrals 2. **Typography** - Font size, line-height, weight, font family 3. **Spacing** - Grid system, whitespace, compactness 4. **Border Radius** - Size consistency, style unity 5. **Shadow** - Weight, consistency, meaningful 6. **Interaction** - Button/link states, animations, feedback 7. **Icons** - All original icons preserved (SVG, icon fonts, images) 8. **Gradients** - All gradient backgrounds preserved --- ## Design Reference Files Located in `references/docs/`: - **color.md** - Color design reference - **component.md** - Component design reference - **layout.md** - Layout design reference - **motion.md** - Animation design reference - **polish.md** - Design audit reference - **themes-guide.md** - Theme generation prompt template - **typography.md** - Typography design reference --- ### Mode Detection | Project Mode | Theme Support | Action | |--------------|---------------|--------| | Dual-mode | Both defined | Generate CSS variables for both | | Light-only | Any | Apply light mode only (don't auto-add dark) | | Dark-only | Any | Apply dark mode only (don't auto-add light) | **Note:** Only generate missing mode if user explicitly requests it. Don't auto-generate dark/light mode unless asked. ### Key Decisions to Explain - Theme mode strategy - Icon handling (preserve vs adapt) - Gradient handling (preserve vs adapt) - Impeccable principles applied --- ## Technical Stack Support Auto-adapt to: React, Vue, Angular, HTML, Sass/SCSS, Tailwind, Next.js, Mini Programs | Stack | Support | Handling | |-------|---------|----------| | React | Full | JSX, styled-components, CSS Modules | | Vue | Full | Vue SFC, scoped styles | | Angular | Full | Component styles | | HTML/CSS | Full | CSS variables | | Sass/SCSS | Full | Variables, mixins | | Tailwind | Full | Theme config | | Mini Programs | Full | rpx, custom components | --- ## Best Practices ### Choosing Theme | Project Type | Recommended Themes | |--------------|-------------------| | Developer Tools | Claude, Minimal Blue, Marketplace Dark | | AI Agents | Agent Dark, Creative Vitality | | Enterprise | Professional Blue, Trust Finance | | Creative Brands | Retro Vibrant, Neo-Brutalist | | Audio/Music | Radio Static, Record Club, Spotify | | E-commerce | Vibrant Commerce | | Brand Style | Airbnb, Linear, Notion | ### Combining Themes
rico use Minimal Blue colors + Neo-Brutalist borders
### Fine-tuning
rico create theme: example.com User: Colors too dark → AI: Adjusting lighter... User: Larger border-radius → AI: Increasing to 12px...
--- ## Output Format Generated code includes: 1. **CSS Variables** - Complete system with OKLCH color space 2. **Component Styles** - Button, input, card, nav adapted to theme 3. **Responsive Design** - Mobile, tablet, desktop breakpoints 4. **Accessibility** - WCAG 2.1 AA compliant 5. **Code Comments** - Key design decisions explained 6. **Motion** - prefers-reduced-motion support **Always include decision summary:** - Theme mode strategy - Icon/gradient handling rationale - Impeccable principles applied --- ## Quick Examples ### User: rico optimize this website
[Read code] → [Analyze 6 dimensions] → [Show menu A/B/C/D] → [User selects] → [Confirm] → [Generate]
### User: rico use Claude style
[Load claude.md] → [Show style preview] → [Confirm] → [Apply to code]
### User: rico create theme: stripe.com
[Fetch stripe.com] → [Extract design] → [Generate doc] → [Save] → [Confirm] → [Apply?]
## Theme Naming Convention All themes follow **"Style + Color/Feature"** naming. This naming convention helps users quickly understand each theme's core characteristics and applicable scenarios. --- ## Integration This skill integrates with: - **webReader tool** - Fetch target pages for theme generation - **Read tool** - Read existing code files - **Write/Edit tools** - Generate optimized code All operations require user confirmation before execution.
