rico-ui-ux-themes

rico-ui-ux-themes

包含 20 种内置主题和自定义主题生成功能的 UI/UX 设计优化工具包。

工作流

[User Input] → [Read Current Project Code] → [Analyze 6 Issues] → [Select Mode] → [Confirm] → [Output]

关键执行规则：

1. 绝不显示欢迎消息或问候语
2. 始终在执行前显示 A/B/C/D 选项菜单
3. 始终在显示菜单后等待用户输入
4. 始终在进行任何更改前确认
5. 绝不跳过步骤或未经用户确认自动执行

重要说明：

• 触发时自动读取当前工作目录中的代码（例如“优化这个项目/页面/设计”）。无需询问“哪个项目”。
• 语言规则：根据初始触发语检测语言（例如，“rico 优化”表示中文，“rico optimize”表示英文），然后全程保持语言一致。
• 项目模式检测：仅在明确提出要求时，才生成缺失的浅色/深色模式；绝不强制切换。
• 集成：使用 webReader（获取 URL）、Read/Write 工具（代码操作）。所有操作都需要确认。

4 种交互模式

模式	触发示例
完整流程	rico optimize, rico 优化网站设计
直接应用	rico use Claude style, rico 用 Claude 风格
生成主题	rico create theme: stripe.com
自然语言	rico make it more vibrant

触发方式和交互模式

所有命令都使用 rico 前缀。支持 4 种模式：

模式	触发示例	简要流程
完整流程	rico optimize, rico 优化, rico 优化网站设计, rico improve this page design, rico 让页面更好看	[读取代码] → [分析] → [菜单 A/B/C/D] → [选择] → [确认] → [输出]
直接应用	rico use [theme-name] style, rico 用 [主题名] 风格, rico 用 Claude 风格优化, rico use Minimal Blue colors + Neo-Brutalist borders	[加载主题] → [预览] → [确认] → [应用]
生成主题	rico create theme: [URL], rico 制作主题：[URL], rico 参考 [URL] 做主题	[获取 URL] → [提取] → [生成文档] → [保存] → [确认应用？]
主题管理	rico list themes, rico 有哪些主题, rico show [theme-name], rico 看看 [主题名]	[列出/显示] → 除非应用，否则无需后续步骤

**自然语言支持：**例如，“rico make it more vibrant” → 根据意图映射到“完整流程”或“直接应用”。

选择菜单（完整流程）

用户触发“rico optimize”时，工作流如下：

[Read Current Project] → [Analyze 6 Dimensions] → [Show Menu A/B/C/D] → [User Selects] → [Confirm] → [Output]

**重要：**读取代码后立即显示菜单。不要询问“你想做什么”，也不要显示欢迎消息。

显示选择菜单

• A. 按照设计原则优化（不指定具体风格）
• B. 从内置主题中选择（20 种主题）
• C. 根据行业参考生成主题
• D. 自定义主题（URL 或来自项目）

输入选项（A/B/C/D）：

---

选项 A：设计原则

用户输入：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):

确认对话框：

📋 Ready to Optimize: Spacing

Actions:
• Establish unified 4pt grid
• Adjust gaps and margins
• Optimize whitespace rhythm

Confirm? (y/n)

---

选项 B：内置主题

用户输入：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:

选择主题后：

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)

选项 C：行业参考

用户输入：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:

用户输入：1

📋 操作： • 获取 stripe.com 的设计特色 • 分析配色、字体排版、间距系统 • 生成主题文件 • 应用到当前项目

确认？（y/n）

---

选项 D：自定义主题

用户输入：D

🎨 Custom Theme

1. Input URL
   → Example: apple.com

2. Generate from current project
   → Extract existing design

Enter option (1/2) or URL:

如果选择选项 2（从项目生成）：

AI 响应：

📋 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):

用户输入：1

AI 响应： 正在分析项目设计特征…… 正在生成主题文件……

✅ 主题已保存到：references/styles/my-brand.md

是否应用于优化？（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] → [提取设计] → [生成 14 章文档] → [保存]

### 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

用户输入：rico apply [theme-name] ↓ ┌──────────────────────────────────────────┐ │ 1. 从 references/styles/ 加载主题 │ │ 2. 检测主题模式（浅色/深色） │ │ 3. 将项目切换为主题模式 │ ← 关键：应用深色主题 → 切换为深色模式 │ 4. 分析代码：检查 6 个维度 │ │ 5. 应用主题颜色、间距等 │ │ 6. 生成优化后的代码 │ │ 7. 说明关键决策 │ └──────────────────────────────────────────┘

**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 用户：颜色太暗 → AI：正在调浅…… 用户：增大 border-radius → AI：正在增至 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

[读取代码] → [分析 6 个维度] → [显示菜单 A/B/C/D] → [用户选择] → [确认] → [生成]

### User: rico use Claude style

[加载 claude.md] → [显示样式预览] → [确认] → [应用到代码]

### User: rico create theme: stripe.com

[获取 stripe.com] → [提取设计] → [生成文档] → [保存] → [确认] → [是否应用？]

## 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.