design-system

AI 设计系统技能

你可以使用一个由 AI 驱动的设计系统，其中包含 50 多种经过专业策划的视觉风格。此技能可帮助你为组件和界面应用协调统一、独具特色的美学风格，同时避免千篇一律的“AI 垃圾”设计模式。

核心功能

1. 应用风格

为组件应用 50 多种经过策划的风格中的任意一种：

"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"

2. 混合风格

按权重混合多种风格：

"blend japandi with scandinavian 80/20"
"mix brutalist with glassmorphism 60/40"
"combine art-deco with cyberpunk 50/50"

3. 生成组件

使用当前启用的风格生成样式化组件：

"create button with current style"
"generate card component in art-deco style"
"build navigation bar using brutalist tokens"

4. 管理 Token

访问并应用设计 Token：

"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"

风格类别（50 多种风格）

1. 极简与现代（5 种风格）

• minimalist：纯粹简约、最大限度留白、细腻的交互
• brutalist：原始 HTML 美学、鲜明的字体、刻意“破碎”的设计
• scandinavian：浅色木材、柔和色彩、舒适实用
• japandi：日式极简主义与斯堪的纳维亚式温暖相融合
• swiss：基于网格的布局、无衬线字体、不对称排版

2. 历史与古典（5 种风格）

• art-deco：几何图案、金色点缀、奢华材质
• art-nouveau：有机曲线、自然图案、装饰性字体
• baroque：华丽细节、戏剧性对比、丰富装饰
• victorian：装饰边框、衬线字体、复古色彩
• renaissance：古典比例、平衡构图、精致细节

3. 复古与怀旧（5 种风格）

• retro-80s：霓虹色彩、几何形状、合成器浪潮氛围
• retro-90s：大胆渐变、CD-ROM 美学、早期网络怀旧风格
• vaporwave：粉蓝等柔和色彩、故障效果、超现实图像
• y2k：金属质感、泡泡字、21 世纪初的科技美学
• mid-century：原子时代设计、大胆色彩、有机形状

4. 数字 UI（5 种风格）

• glassmorphism：磨砂玻璃效果、背景模糊、透明图层
• neumorphism：柔和阴影、细腻层次、触感表面
• material-design：海拔系统、大胆色彩、动效原则
• fluent-design：亚克力材质、深度图层、光影效果
• skeuomorphic：真实世界纹理、立体阴影、触觉隐喻

5. 未来与科幻（5 种风格）

• cyberpunk：暗色背景上的霓虹、科技颓废感、高对比度
• cybernetic：镀铬质感、全息元素、科技界面
• space-age：宇宙色彩、星空、未来主义字体
• dystopian：工业灰色、磨损纹理、实用主义设计
• solarpunk：生态未来主义、绿色科技、乐观的可持续发展理念

6. 自然灵感（5 种风格）

• organic：自然形态、大地色调、流畅形状
• botanical：植物图案、绿色调、生长纹理
• coastal：海洋蓝、沙色中性色、风化纹理
• desert：温暖的沙色、陶土色、极简景观
• forest：深绿色、木质纹理、层叠的树冠效果

7. 大胆与表现力（5 种风格）

• maximalist：图案繁复、色彩冲突、刻意营造的混乱
• pop-art：大胆色彩、半色调图案、漫画美学
• psychedelic：旋涡图案、万花筒般的色彩、视觉错觉效果
• graffiti：城市纹理、喷漆效果、街头艺术活力
• punk：DIY 美学、拼贴风格、叛逆字体

8. 插画与艺术（5 种风格）

• hand-drawn：粗略线条、不规则形状、人文质感
• watercolor：柔和的水彩晕染、色彩渗化、有机纹理
• flat-illustration：矢量艺术、纯色、简化形状
• isometric：3D 透视、技术插画、游戏般的视角
• line-art：简约线条、单色、优雅简洁

9. 文化与地域风格（5 种）

• mediterranean：温暖的蓝色、赤陶色、经阳光洗褪的美感
• nordic：冷色调、极简图案、实用之美
• asian-zen：平衡、留白、天然材料
• tribal：几何图案、大地色颜料、文化纹样
• moroccan：浓郁色彩、繁复图案、装饰细节

10. 特殊用途与新兴风格（5 种）

• dark-mode：纯黑色、针对 OLED 优化、减轻眼睛疲劳
• high-contrast：符合 WCAG AAA 标准、无障碍优先、层次清晰
• print-inspired：报纸式布局、编辑式排版、油墨纹理
• terminal：等宽字体、命令行美学、黑客风格的绿色或琥珀色
• low-fi：刻意做旧、像素艺术、复古计算机风格

令牌参考结构

设计令牌采用分层组织：

src/design-system/
  tokens/
    styles/
      {style-name}.json          # Complete style definition
    core/
      colors.json                # Base color palette
      typography.json            # Font definitions
      spacing.json               # Spacing scale
      shadows.json               # Shadow tokens
      animations.json            # Motion tokens

每个风格令牌文件都包含：

• colors：主色、次色、强调色、表面色、文本色
• typography：字体系列、字号、字重、行高
• spacing：外边距、内边距、间距刻度
• borders：圆角、宽度、样式
• shadows：层级、焦点状态
• animations：过渡效果、时长、缓动函数

使用指南

避免 AI 廉价感的原则

绝不使用以下通用模式：

• 将 Inter、Roboto、Arial 或 Helvetica 设为主要字体
• 白色背景上的紫蓝渐变（#667eea → #764ba2）
• 千篇一律的圆角（到处都是 border-radius: 8px）
• 带投影的模板化卡片布局
• 在 UI 中过度使用 Emoji（🚀 ✨ 🎉）
• 通用的“现代”间距（gap: 1rem）

始终遵循以下规则：

1. 贯彻到底，坚持所选美学风格，不要半途而废
2. 所有数值都使用设计令牌，不要使用魔法数字
3. 定义悬停状态，让每个交互元素都能提供反馈
4. 考虑深色模式，从一开始就同时针对浅色和深色模式进行设计
5. 测试无障碍性，确保对比度至少符合 WCAG AA 标准
6. 使用独特字体，选择与风格相匹配的字体
7. 增添个性，让每种风格都独特且经过精心设计

风格应用工作流

1. 选择风格：从 50 多种风格中选择，或混合多种风格
2. 加载令牌：参考所选风格对应的令牌文件
3. 系统化应用：使用令牌设置颜色、排版和间距
4. 添加交互：定义悬停、焦点、激活和禁用状态
5. 测试一致性：确保所有组件风格统一
6. 记录用法：注明各处应用的风格

组件生成最佳实践

生成组件时：

1. 从语义化 HTML 结构开始
2. 应用风格令牌，不要使用硬编码值
3. 包含所有交互状态（悬停、焦点、激活、禁用）
4. 添加 ARIA 属性以支持无障碍访问
5. 提供不同变体（尺寸、颜色、状态）
6. 包含用法示例和文档

混合公式

按比例混合风格（例如 80/20）时：

• 主导风格（80%）：核心颜色、主要排版、主要间距
• 强调风格（20%）：次要颜色、强调字体、装饰元素

混合示例：

"blend art-deco with cyberpunk 70/30"
→ Art-deco base with cyberpunk accent colors and occasional neon highlights

与开发工作流集成

与 Coder Agent 配合

"Hey coder, apply brutalist style to the dashboard components"
→ Coder applies brutalist tokens systematically

与 Reviewer Agent 配合

"Reviewer, check if components follow art-deco style guide"
→ Reviewer validates token usage and style consistency

与 Planner Agent 配合

"Planner, create a style migration plan from material to glassmorphism"
→ Planner breaks down token replacement strategy

命令速查

检查风格

• "list all available styles" - 显示所有 50 多种风格
• "describe {style-name}" - 获取详细的风格信息
• "show {style-name} tokens" - 显示令牌值

应用风格

• "apply {style-name}" - 设置当前风格
• "use {style-name} for {component}" - 为特定组件设置风格
• "restyle {component} as {style-name}" - 转换现有组件的风格

混合风格

• "blend {style-a} with {style-b}" - 按 50/50 比例混合
• "blend {style-a} with {style-b} {ratio}" - 自定义比例
• "what would {style-a} + {style-b} look like?" - 预览混合效果

生成组件

• "create {component} in {style-name}" - 创建新的样式化组件
• "generate {component-set} using current style" - 生成多个组件
• "build {layout} with {style-name} tokens" - 构建复杂布局

成功技巧

1. 描述具体：与其说“让它更华丽”，不如说“应用装饰艺术风格”
2. 保持一致：每个项目部分使用一种风格（或融合风格）
3. 信任设计令牌：没有充分理由时，不要覆盖令牌值
4. 尽早测试：在开发早期应用样式，不要等到事后
5. 记录选择：在提交消息中注明使用了哪些风格以及原因
6. 拥抱限制：限制能推动更好的设计决策

资源

• 风格指南：@references/style-guide.md - 详细的美学规则
• 提示词模板：@references/prompt-templates.md - 可直接使用的提示词
• 令牌架构：@references/token-schema.md - 令牌结构参考

---

最后更新：2025-12-03 版本：1.0.0 可用风格：50+