rico-ui-ux-themes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

rico-ui-ux-themes

UI/UX design optimization toolkit with 20 built-in themes and custom theme generation.

UI/UX设计优化工具包，内置20种主题并支持自定义主题生成。

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.

[用户输入] → [读取当前项目代码] → [分析6项问题] → [选择模式] → [确认] → [输出]

关键执行规则：

绝对不要显示欢迎信息或问候语
必须在执行前显示选择菜单A/B/C/D
必须在显示菜单后等待用户输入
必须在做出任何更改前确认
绝对不要跳过步骤或未经用户确认自动执行

重要说明：

触发时自动读取当前工作目录的代码（例如："optimize this project/page/design"），无需询问“哪个项目”。
语言规则：根据初始触发指令检测语言（例如："rico 优化" = 中文，"rico optimize" = 英文），之后全程保持语言一致。
项目模式检测：仅在明确请求时生成缺失的浅色/深色模式；绝不强制切换。
集成：使用webReader（获取URL）、读写工具（代码操作）。所有操作均需确认。

4 Interaction Patterns

4种交互模式

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

模式	触发示例
完整流程	rico optimize, rico 优化网站设计
直接应用	rico use Claude style, rico 用 Claude 风格
生成主题	rico create theme: stripe.com
自然语言	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.

所有命令均以

rico

为前缀，支持4种模式：

模式	触发示例	简要流程
完整流程	rico optimize, rico 优化, rico 优化网站设计, rico improve this page design, rico 让页面更好看	[读取代码] → [分析] → [菜单A/B/C/D] → [选择] → [确认] → [输出]
直接应用	rico use [主题名] 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" → 根据意图映射到完整流程或直接应用模式。

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.

当用户触发"rico optimize"时，工作流程如下：

[读取当前项目] → [6维度分析] → [显示菜单A/B/C/D] → [用户选择] → [确认] → [输出]

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

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

A. 按设计原则优化（无特定风格）
B. 从内置主题中选择（20种主题）
C. 参考行业案例生成主题
D. 自定义主题（URL或从项目提取）

输入选项(A/B/C/D)：

Option A: Design Principles

选项A：设计原则

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)

用户输入：A

📋 6维度分析结果

1. [⚠️] 色彩    - 对比度3.2:1，低于WCAG AA标准
2. [⚠️] 排版 - Inter字体，层级不清晰
3. [⚠️] 间距  - 不一致，无网格系统
4. [✓] 圆角 - 风格统一
5. [⚠️] 阴影   - 过于厚重
6. [⚠️] 交互 - 缺失悬停/聚焦状态

选择优化模式：
- a: 全部优化（推荐）
- b: 仅优化问题项（1,2,3,5,6）
- 或直接输入数字：1,3（自定义）、3（单项）

输入(a/b或数字)：

确认对话框：

📋 即将优化：间距

操作内容：
• 建立统一的4pt网格系统
• 调整间隙与边距
• 优化留白节奏

确认？(y/n)

Option B: Built-in Themes

选项B：内置主题

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)

用户输入：B

📊 项目分析
检测到：SaaS / 企业应用
风格：专业、简洁、数据驱动

🎯 推荐主题：
   • 6. 专业蓝 ⭐
         → 风格：沉稳蓝色+清晰层级
         → 匹配度：95%

   • 1. Claude
         → 风格：暖白+赭石橙
         → 匹配度：88%

   • 8. 简洁仪表盘
         → 风格：简洁管理后台、聚焦数据
         → 匹配度：85%

   • 7. 金融可信
         → 风格：深蓝+金色
         → 匹配度：82%

   • 2. 极简蓝
         → 风格：深色背景+蓝色强调
         → 匹配度：78%

• 输入数字选择主题
• 输入L查看全部主题（内置+用户创建）

输入：

选择主题后：

已选择：5. Agent Dark（深色主题）

📋 风格特点：
   • 深黑背景+亮紫色强调
   • 现代且富有创意
   • 最佳适用：AI Agent、创意工具
   • 模式：深色（单模式）

🔧 操作内容：
   • 应用深色背景(#0A0A0B)
   • 添加紫色强调色(#A855F7)
   • 将圆角优化为8px

确认？(y/n)

Option C: Industry Reference

选项C：行业参考

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)

用户输入：C

📊 项目类型检测

检测到：SaaS / 企业应用
（若有误，请输入正确类型）

🌐 行业参考网站：
   1. stripe.com
      → 风格：深蓝+金色强调，专业感
      → 特点：极简、留白、清晰层级

   2. linear.app
      → 风格：深色背景+紫色渐变，现代科技感
      → 特点：精致交互、微妙动画

   3. notion.so
      → 风格：白背景+极简，内容优先
      → 特点：简洁、高效、无干扰

   4. figma.com
      → 风格：多彩渐变+亮紫色
      → 特点：创意、专业、协作性

   5. vercel.com
      → 风格：黑白极简+霓虹渐变
      → 特点：酷炫、现代、开发者友好

   • 输入数字选择
   • 输入URL使用自定义网站
   • 输入n跳过

输入：

用户输入：1

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

确认？(y/n)

Option D: Custom Theme

选项D：自定义主题

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

---

用户输入：D

🎨 自定义主题

1. 输入URL
   → 示例：apple.com

2. 从当前项目生成
   → 提取现有设计

输入选项(1/2)或URL：

若选择选项2（从项目生成）：

AI回复：

📋 操作内容：
• 分析当前项目设计特点
• 提取色彩、排版、间距系统
• 生成主题文件

输入主题名称：[my-brand]

保存位置：
   1. 当前项目
      → references/styles/my-brand.md
      → 仅当前项目可访问

   2. 用户全局目录
      → ~/.rico/themes/my-brand.md
      → 所有项目均可访问

输入(1/2)：

用户输入：1

AI回复：正在分析项目设计特点... 正在生成主题文件...

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

是否应用到优化？(y/n)


**选项D说明：**
- 支持输入URL或从当前项目生成
- 从项目生成时，需询问主题名称和保存位置
- 保存位置选项：项目目录或全局目录

---

6-Dimension Analysis Framework

6维度分析框架

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

详细指南请查看

references/docs/

。

维度	检查要点	参考文档
1. 色彩	对比度（WCAG AA 4.5:1）、品牌色占比≤10%、饱和度、浅色/深色模式	color.md
2. 排版	层级、行高、字体粗细、对齐方式	typography.md
3. 间距	网格系统（4pt）、留白、对齐	layout.md
4. 圆角	一致性、风格统一	component.md
5. 阴影	层级、表意性、避免通用化	component.md
6. 交互	8种状态（默认/悬停/聚焦/激活/禁用/加载/错误/成功）、反馈	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

问题类型	常见问题
色彩	对比度低、滥用颜色、彩色背景上文字模糊
排版	字号不一致、行高混乱、字体混用
间距	无网格、布局拥挤、对齐错误
圆角	尺寸不一致、风格混杂
阴影	过于厚重、无意义、通用化
交互	缺失状态、反馈薄弱

完整审核方法请查看

references/docs/polish.md

。

Design Anti-Patterns

设计反模式

Based on Impeccable design principles:

基于Impeccable设计原则：

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%

不要在彩色背景上使用灰色文字 → 使用色调化的阴影色
不要使用纯黑(#000)或纯白(#fff) → 始终使用色调化颜色
不要使用“AI调色板”（深色背景配青色、紫色渐变）
不要过度使用品牌色 → 强调色占比≤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

不要使用过度泛滥的字体（Inter、Roboto、Arial）
不要使用过多相似字号 → 会模糊层级

Motion

动效层面

DON'T use bounce easing → feels dated
DON'T animate layout properties → use transform only
DON'T ignore prefers-reduced-motion

不要使用弹跳缓动 → 显得过时
不要为布局属性添加动画 → 仅使用transform
不要忽略prefers-reduced-motion设置

The AI Slop Test

AI劣质设计测试

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?"

如果有人说“这是AI做的”，且一眼就能看出来 → 这就是问题所在。优秀的设计会让人问“这是怎么做出来的？”而不是“这是哪个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.

主题来源：

内置：20种主题存储在
```
references/styles/
```
用户创建：
```
references/styles/
```
中的任意
```
.md
```
文件会自动加入主题列表

当用户创建新主题（选项D）时，会自动添加到主题列表中。

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

主题	描述	最佳适用场景
Claude	暖白+赭石橙，理性且温暖	AI产品、开发工具
Minimal Blue	深色背景+蓝色强调，极简风格	代码编辑器、助手工具
Marketplace Dark	深色+代码美学	开发者市场
SaaS Dark	监控类深色主题，实时性	DevOps、监控工具
Agent Dark	深黑+亮紫色	AI Agent、创意工具

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

主题	描述	最佳适用场景
Professional Blue	沉稳蓝色+清晰层级	SaaS、B2B产品
Trust Finance	深蓝+金色	金融科技、银行业
Dashboard Clean	简洁管理后台，聚焦数据	企业仪表盘

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

主题	描述	最佳适用场景
Retro Vibrant	高饱和度+大胆风格	时尚、艺术行业
Creative Gallery	图片网格+视觉优先	作品集、画廊
Neo-Brutalist	粗边框+实阴影	创意机构
Creative Vitality	亮橙色+渐变	创意工作室

Media & Culture

媒体与文化类主题

Theme	Description	Best For
Radio Static	B&W + TV static	Podcasts, radio
Record Club	Vinyl aesthetic + warm	Music platforms

主题	描述	最佳适用场景
Radio Static	黑白+电视噪点风格	播客、电台
Record Club	黑胶美学+暖色调	音乐平台

Commerce

电商类主题

Theme	Description	Best For
Vibrant Commerce	Orange-red + yellow	E-commerce, retail

主题	描述	最佳适用场景
Vibrant Commerce	橙红+黄色	电商、零售

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

主题	描述	最佳适用场景
Airbnb	暖珊瑚色+留白	旅游、酒店业
Linear	简洁深色+精致风格	生产力工具
Notion	干净极简+内容优先	文档类产品
Duolingo	活泼亮色+游戏化	教育类产品
Spotify	深色+亮绿色	音乐流媒体

Theme Generation

主题生成

Workflow

工作流程

[URL] → [webReader fetch] → [Extract design] → [Generate 14-chapter doc] → [Save]

[URL] → [webReader获取] → [提取设计] → [生成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

生成主题时，请使用

references/docs/

中的以下文档：

themes-guide.md - 主题结构的14章模板
color.md - 色彩系统指南
typography.md - 排版规则
layout.md - 间距/网格系统
component.md - 组件设计标准
motion.md - 动画原则
polish.md - 6维度审核框架

Generated Theme Structure (14 Chapters)

生成的主题结构（14章）

Every generated theme includes:

Design Philosophy (设计核心理念)
- Brand concept / Design philosophy
- Core keywords (3-5)
- Why this design?
Color System + Usage Guidelines (颜色系统 + 使用原则)
- Primary, background, text, accent colors
- When to use each color
- Usage proportion rules
- Common mistakes
Interaction Philosophy (交互理念)
- Animation principles
- Feedback mechanisms
- Transition timing
Layout Principles (布局原则)
- Spacing strategy (grid system)
- Whitespace principles
- Content max-width
Component Design Decisions (组件设计决策)
- Why this height/radius/color?
- Design rationale
Application Scenarios (应用场景)
- Suitable project types
- Adjustments for different scenarios
Common Mistakes (避免的误区)
- 5+ common errors
- Negative checklist

Plus 7 more chapters covering typography, spacing, shadows, components, animations, and use cases.

每个生成的主题包含：

设计核心理念
- 品牌概念/设计理念
- 核心关键词（3-5个）
- 设计原因
颜色系统 + 使用原则
- 主色、背景色、文字色、强调色
- 各颜色使用场景
- 使用比例规则
- 常见错误
交互理念
- 动画原则
- 反馈机制
- 过渡时长
布局原则
- 间距策略（网格系统）
- 留白原则
- 内容最大宽度
组件设计决策
- 为何选择此高度/圆角/颜色？
- 设计依据
应用场景
- 适用项目类型
- 不同场景的调整方案
避免的误区
- 5个以上常见错误
- 负面检查清单

另外7章涵盖排版、间距、阴影、组件、动画和用例。

Save Location

保存位置

Project:
```
references/styles/[theme-name].md
```
Global:
```
~/.rico/themes/[theme-name].md
```

项目目录：
```
references/styles/[theme-name].md
```
全局目录：
```
~/.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".

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

主题模式应用规则：

项目模式	主题模式	操作
单模式（浅色/深色）	双模式（两种都有）	仅使用项目现有模式的颜色
单模式（浅色/深色）	单模式	应用主题定义的模式
双模式（两种都有）	任意	应用主题定义的模式

绝不强制切换模式。主题的双模式是“支持”而非“必需”。

Analysis Dimensions

分析维度

AI checks these design dimensions:

Color - Contrast ratios, saturation, brand color usage, light/dark theme support, tinted neutrals
Typography - Font size, line-height, weight, font family
Spacing - Grid system, whitespace, compactness
Border Radius - Size consistency, style unity
Shadow - Weight, consistency, meaningful
Interaction - Button/link states, animations, feedback
Icons - All original icons preserved (SVG, icon fonts, images)
Gradients - All gradient backgrounds preserved

AI会检查以下设计维度：

色彩 - 对比度、饱和度、品牌色使用、浅色/深色主题支持、色调化中性色
排版 - 字号、行高、字体粗细、字体族
间距 - 网格系统、留白、紧凑度
圆角 - 尺寸一致性、风格统一性
阴影 - 权重、一致性、表意性
交互 - 按钮/链接状态、动画、反馈
图标 - 保留所有原始图标（SVG、图标字体、图片）
渐变 - 保留所有渐变背景

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

位于

references/docs/

：

color.md - 色彩设计参考
component.md - 组件设计参考
layout.md - 布局设计参考
motion.md - 动画设计参考
polish.md - 设计审核参考
themes-guide.md - 主题生成提示模板
typography.md - 排版设计参考

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.

项目模式	主题支持	操作
双模式	两种模式都定义	为两种模式生成CSS变量
仅浅色	任意	仅应用浅色模式（不自动添加深色）
仅深色	任意	仅应用深色模式（不自动添加浅色）

注意： 仅在用户明确请求时生成缺失的模式。除非用户要求，否则不要自动生成深色/浅色模式。

Key Decisions to Explain

需要解释的关键决策

Theme mode strategy
Icon handling (preserve vs adapt)
Gradient handling (preserve vs adapt)
Impeccable principles applied

主题模式策略
图标处理（保留还是适配）
渐变处理（保留还是适配）
应用的Impeccable设计原则

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

自动适配：React、Vue、Angular、HTML、Sass/SCSS、Tailwind、Next.js、小程序

技术栈	支持程度	处理方式
React	完全支持	JSX、styled-components、CSS Modules
Vue	完全支持	Vue单文件组件、作用域样式
Angular	完全支持	组件样式
HTML/CSS	完全支持	CSS变量
Sass/SCSS	完全支持	变量、混合宏
Tailwind	完全支持	主题配置
小程序	完全支持	rpx、自定义组件

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

项目类型	推荐主题
开发者工具	Claude、Minimal Blue、Marketplace Dark
AI Agent	Agent Dark、Creative Vitality
企业应用	Professional Blue、Trust Finance
创意品牌	Retro Vibrant、Neo-Brutalist
音频/音乐	Radio Static、Record Club、Spotify
电商	Vibrant Commerce
品牌风格	Airbnb、Linear、Notion

Combining Themes

主题组合

rico use Minimal Blue colors + Neo-Brutalist borders

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

rico create theme: example.com
用户：颜色太暗 → AI：调亮中...
用户：更大的圆角 → AI：调整为12px...

Output Format

输出格式

Generated code includes:

CSS Variables - Complete system with OKLCH color space
Component Styles - Button, input, card, nav adapted to theme
Responsive Design - Mobile, tablet, desktop breakpoints
Accessibility - WCAG 2.1 AA compliant
Code Comments - Key design decisions explained
Motion - prefers-reduced-motion support

Always include decision summary:

Theme mode strategy
Icon/gradient handling rationale
Impeccable principles applied

生成的代码包含：

CSS变量 - 完整的OKLCH色彩空间系统
组件样式 - 按钮、输入框、卡片、导航适配主题
响应式设计 - 移动端、平板、桌面端断点
无障碍支持 - 符合WCAG 2.1 AA标准
代码注释 - 解释关键设计决策
动效支持 - 适配prefers-reduced-motion设置

必须包含决策摘要：

主题模式策略
图标/渐变处理依据
应用的Impeccable设计原则

Quick Examples

快速示例

User: rico optimize this website

用户：rico optimize this website

[Read code] → [Analyze 6 dimensions] → [Show menu A/B/C/D] → [User selects] → [Confirm] → [Generate]

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

User: rico use Claude style

用户：rico use Claude style

[Load claude.md] → [Show style preview] → [Confirm] → [Apply to code]

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

User: rico create theme: stripe.com

用户：rico create theme: stripe.com

[Fetch stripe.com] → [Extract design] → [Generate doc] → [Save] → [Confirm] → [Apply?]

[获取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.

此工具集成了：

webReader工具 - 获取目标页面用于主题生成
Read工具 - 读取现有代码文件
Write/Edit工具 - 生成优化后的代码

所有操作均需用户确认后方可执行。