Back to Details

design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

AI Design System Skill

AI Design System 技能

You have access to an AI-powered design system with 50+ professionally curated visual styles. This skill enables you to apply cohesive, distinctive aesthetics to components and interfaces while avoiding generic "AI slop" patterns.
你可以使用一个包含50+专业精选视觉风格的AI驱动设计系统。该技能能让你为组件和界面应用连贯、独特的美学风格，同时避免通用的「AI同质化」模式。

Core Capabilities

核心功能

1. Style Application

1. 风格应用

Apply any of 50+ curated styles to components:
"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"
为组件应用50+精选风格中的任意一种：
"apply art-deco style"
"use brutalist aesthetic"
"make it look cyberpunk"

2. Style Blending

2. 风格混合

Combine multiple styles with weighted blending:
"blend japandi with scandinavian 80/20"
"mix brutalist with glassmorphism 60/40"
"combine art-deco with cyberpunk 50/50"
按权重比例混合多种风格：
"blend japandi with scandinavian 80/20"
"mix brutalist with glassmorphism 60/40"
"combine art-deco with cyberpunk 50/50"

3. Component Generation

3. 组件生成

Generate styled components with current active style:
"create button with current style"
"generate card component in art-deco style"
"build navigation bar using brutalist tokens"
使用当前激活的风格生成带样式的组件：
"create button with current style"
"generate card component in art-deco style"
"build navigation bar using brutalist tokens"

4. Token Management

4. 令牌管理

Access and apply design tokens:
"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"
访问并应用设计令牌：
"show available tokens for art-deco"
"list all minimalist styles"
"what colors are in cyberpunk theme?"

Style Categories (50+ Styles)

风格分类（50+种风格）

1. Minimalist & Modern (5 styles)

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

  • minimalist: Pure simplicity, maximum white space, subtle interactions
  • brutalist: Raw HTML aesthetic, stark typography, intentional "broken" design
  • scandinavian: Light woods, soft colors, cozy functionality
  • japandi: Japanese minimalism meets Scandinavian warmth
  • swiss: Grid-based, sans-serif typography, asymmetric layouts
  • minimalist：极致简洁，最大化留白，微妙交互
  • brutalist：原生HTML美学，鲜明排版，刻意的「破损感」设计
  • scandinavian：浅木色调，柔和色彩，舒适实用
  • japandi：日式极简融合斯堪的纳维亚温暖风格
  • swiss：网格布局，无衬线字体，不对称排版

2. Historical & Classical (5 styles)

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

  • art-deco: Geometric patterns, gold accents, luxury materials
  • art-nouveau: Organic curves, nature motifs, ornamental typography
  • baroque: Ornate details, dramatic contrasts, rich embellishments
  • victorian: Decorative borders, serif typography, vintage colors
  • renaissance: Classical proportions, balanced compositions, refined details
  • art-deco：几何图案，金色点缀，奢华材质感
  • art-nouveau：有机曲线，自然主题，装饰性排版
  • baroque：华丽细节，强烈对比，丰富装饰
  • victorian：装饰性边框，衬线字体，复古色彩
  • renaissance：经典比例，平衡构图，精致细节

3. Retro & Nostalgic (5 styles)

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

  • retro-80s: Neon colors, geometric shapes, synthwave vibes
  • retro-90s: Bold gradients, CD-ROM aesthetics, early web nostalgia
  • vaporwave: Pastel pinks/blues, glitch effects, surreal imagery
  • y2k: Metallic finishes, bubble letters, early 2000s tech aesthetic
  • mid-century: Atomic age design, bold colors, organic shapes
  • retro-80s：霓虹色彩，几何形状，合成波氛围
  • retro-90s：大胆渐变，CD-ROM美学，早期网页怀旧感
  • vaporwave：粉蓝马卡龙色调，故障效果，超现实意象
  • y2k：金属质感，气泡字体，2000年代初科技美学
  • mid-century：原子时代设计，大胆色彩，有机形状

4. Digital UI (5 styles)

4. 数字UI风格（5种）

  • glassmorphism: Frosted glass effects, backdrop blur, transparency layers
  • neumorphism: Soft shadows, subtle depth, tactile surfaces
  • material-design: Elevation system, bold colors, motion principles
  • fluent-design: Acrylic materials, depth layers, light/shadow
  • skeuomorphic: Real-world textures, dimensional shadows, tactile metaphors
  • glassmorphism：毛玻璃效果，背景模糊，透明层次
  • neumorphism：柔和阴影，微妙深度，触感表面
  • material-design：层级系统，大胆色彩，动效原则
  • fluent-design：亚克力材质，深度层次，光影效果
  • skeuomorphic：现实世界纹理，立体阴影，触觉隐喻

5. Futuristic & Sci-Fi (5 styles)

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

  • cyberpunk: Neon against dark, tech grunge, high contrast
  • cybernetic: Chrome finishes, holographic elements, tech interfaces
  • space-age: Cosmic colors, star fields, futuristic typography
  • dystopian: Industrial grays, worn textures, utilitarian design
  • solarpunk: Eco-futurism, green technology, optimistic sustainability
  • cyberpunk：深色背景配霓虹，科技颓废感，高对比度
  • cybernetic：镀铬质感，全息元素，科技界面
  • space-age：宇宙色彩，星场背景，未来感排版
  • dystopian：工业灰色调，磨损纹理，实用主义设计
  • solarpunk：生态未来主义，绿色科技，乐观可持续

6. Nature-Inspired (5 styles)

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

  • organic: Natural forms, earth tones, flowing shapes
  • botanical: Plant motifs, green palettes, growth patterns
  • coastal: Ocean blues, sandy neutrals, weathered textures
  • desert: Warm sands, terracotta, minimalist landscapes
  • forest: Deep greens, wood textures, layered canopy effects
  • organic：自然形态，大地色调，流动形状
  • botanical：植物主题，绿色调色板，生长图案
  • coastal：海洋蓝色，沙色中性色，风化纹理
  • desert：暖沙色调，赤陶色，极简地貌
  • forest：深绿色调，木质纹理，层叠树冠效果

7. Bold & Expressive (5 styles)

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

  • maximalist: Pattern overload, color clashing, intentional chaos
  • pop-art: Bold colors, halftone patterns, comic book aesthetics
  • psychedelic: Swirling patterns, kaleidoscopic colors, optical effects
  • graffiti: Urban textures, spray paint effects, street art energy
  • punk: DIY aesthetic, collage style, rebellious typography
  • maximalist：图案过载，色彩碰撞，刻意的混乱感
  • pop-art：大胆色彩，半色调图案，漫画美学
  • psychedelic：漩涡图案，万花筒色彩，视觉特效
  • graffiti：城市纹理，喷漆效果，街头艺术活力
  • punk：DIY美学，拼贴风格，反叛排版

8. Illustration & Artistic (5 styles)

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

  • hand-drawn: Sketchy lines, imperfect shapes, human touch
  • watercolor: Soft washes, color bleeding, organic textures
  • flat-illustration: Vector art, solid colors, simplified shapes
  • isometric: 3D perspective, technical illustration, game-like views
  • line-art: Minimal strokes, monochrome, elegant simplicity
  • hand-drawn：手绘线条，不规则形状，人文质感
  • watercolor：柔和晕染，色彩渗透，有机纹理
  • flat-illustration：矢量艺术，纯色块，简化形状
  • isometric：3D透视，技术插画，游戏化视角
  • line-art：极简线条，单色调，优雅简洁

9. Cultural & Regional (5 styles)

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

  • mediterranean: Warm blues, terracotta, sun-bleached aesthetics
  • nordic: Cool tones, minimalist patterns, functional beauty
  • asian-zen: Balance, negative space, natural materials
  • tribal: Geometric patterns, earth pigments, cultural motifs
  • moroccan: Rich colors, intricate patterns, ornamental details
  • mediterranean：暖蓝色调，赤陶色，晒旧美学
  • nordic：冷色调，极简图案，功能美学
  • asian-zen：平衡感，留白，天然材质
  • tribal：几何图案，大地颜料，文化主题
  • moroccan：浓郁色彩，复杂图案，装饰细节

10. Special Purpose & Emerging (5 styles)

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

  • dark-mode: True blacks, OLED optimization, reduced eye strain
  • high-contrast: WCAG AAA compliance, accessibility-first, clear hierarchy
  • print-inspired: Newspaper layouts, editorial typography, ink textures
  • terminal: Monospace fonts, CLI aesthetics, hacker green or amber
  • low-fi: Intentional degradation, pixel art, retro computing
  • dark-mode：纯黑色，OLED优化，减少眼部疲劳
  • high-contrast：符合WCAG AAA标准，优先无障碍，清晰层级
  • print-inspired：报纸布局，编辑排版，油墨纹理
  • terminal：等宽字体，CLI美学，黑客绿或琥珀色
  • low-fi：刻意降级，像素艺术，复古计算风格

Token Reference Structure

设计令牌参考结构

Design tokens are organized hierarchically:
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
Each style token file includes:
  • colors: Primary, secondary, accent, surface, text
  • typography: Font families, sizes, weights, line heights
  • spacing: Margin, padding, gap scales
  • borders: Radius, width, styles
  • shadows: Elevation levels, focus states
  • animations: Transitions, durations, easings
设计令牌采用层级化组织：
src/design-system/
  tokens/
    styles/
      {style-name}.json          # 完整风格定义
    core/
      colors.json                # 基础调色板
      typography.json            # 字体定义
      spacing.json               # 间距尺度
      shadows.json               # 阴影令牌
      animations.json            # 动效令牌
每个风格令牌文件包含：
  • colors：主色、辅助色、强调色、背景色、文本色
  • typography：字体族、字号、字重、行高
  • spacing：外边距、内边距、间隙尺度
  • borders：圆角、宽度、样式
  • shadows：层级阴影、聚焦状态
  • animations：过渡效果、时长、缓动函数

Usage Guidelines

使用指南

Anti-AI-Slop Principles

反AI通用化原则

NEVER use these generic patterns:
  • Inter, Roboto, Arial, or Helvetica as primary fonts
  • Purple/blue gradients on white backgrounds (#667eea → #764ba2)
  • Generic rounded corners (border-radius: 8px everywhere)
  • Cookie-cutter card layouts with drop shadows
  • Overused emoji in UI (🚀 ✨ 🎉)
  • Generic "modern" spacing (gap: 1rem)
ALWAYS follow these rules:
  1. Commit fully to a chosen aesthetic - no half measures
  2. Use design tokens for ALL values - no magic numbers
  3. Define hover states - every interactive element needs feedback
  4. Consider dark mode - design for both light and dark from the start
  5. Test accessibility - maintain WCAG AA contrast minimum
  6. Use distinctive fonts - choose typefaces that match the style
  7. Add personality - each style should feel unique and intentional
绝对不要使用这些通用模式：
  • 将Inter、Roboto、Arial或Helvetica作为主字体
  • 白色背景上的紫/蓝渐变（#667eea → #764ba2）
  • 通用圆角（全局border-radius: 8px）
  • 千篇一律的带阴影卡片布局
  • UI中过度使用表情符号（🚀 ✨ 🎉）
  • 通用「现代」间距（gap: 1rem）
务必遵循以下规则：
  1. 完全贯彻所选美学风格，绝不半途而废
  2. 使用设计令牌定义所有数值，禁止魔法数字
  3. 定义悬停状态：每个交互元素都需要反馈效果
  4. 兼顾深色模式：从设计初期就同时考虑亮色和深色模式
  5. 测试无障碍性：保持WCAG AA级对比度最低标准
  6. 使用独特字体：选择与风格匹配的字体
  7. 注入个性：每个风格都应具备独特性和目的性

Style Application Workflow

风格应用工作流

  1. Select Style: Choose from 50+ styles or blend multiple
  2. Load Tokens: Reference token files for the selected style(s)
  3. Apply Systematically: Use tokens for colors, typography, spacing
  4. Add Interactions: Define hover, focus, active, disabled states
  5. Test Cohesion: Ensure all components feel unified
  6. Document Usage: Note which styles are applied where
  1. 选择风格：从50+风格中选择单一风格或混合多种风格
  2. 加载令牌：引用所选风格的令牌文件
  3. 系统应用：使用令牌定义颜色、排版、间距
  4. 添加交互：定义悬停、聚焦、激活、禁用状态
  5. 测试一致性：确保所有组件风格统一
  6. 记录使用：标注各部分应用的风格

Component Generation Best Practices

组件生成最佳实践

When generating components:
  1. Start with semantic HTML structure
  2. Apply style tokens, not hardcoded values
  3. Include all interactive states (hover, focus, active, disabled)
  4. Add ARIA attributes for accessibility
  5. Provide variants (sizes, colors, states)
  6. Include usage examples and documentation
生成组件时：
  1. 从语义化HTML结构开始
  2. 应用风格令牌，而非硬编码数值
  3. 包含所有交互状态（悬停、聚焦、激活、禁用）
  4. 添加ARIA属性以支持无障碍
  5. 提供变体（尺寸、颜色、状态）
  6. 包含使用示例和文档

Blending Formula

风格混合公式

When blending styles with ratios (e.g., 80/20):
  • Dominant style (80%): Core colors, primary typography, main spacing
  • Accent style (20%): Secondary colors, accent fonts, decorative elements
Example blend:
"blend art-deco with cyberpunk 70/30"
→ Art-deco base with cyberpunk accent colors and occasional neon highlights
按比例混合风格时（如80/20）：
  • 主导风格（80%）：核心颜色、主排版、主要间距
  • 辅助风格（20%）：辅助颜色、强调字体、装饰元素
混合示例：
"blend art-deco with cyberpunk 70/30"
→ 以art-deco为基础，搭配cyberpunk的强调色和偶尔的霓虹高光

Integration with Development Workflow

与开发工作流的集成

With Coder Agent

与Coder Agent集成

"Hey coder, apply brutalist style to the dashboard components"
→ Coder applies brutalist tokens systematically
"Hey coder, apply brutalist style to the dashboard components"
→ Coder会系统性地应用brutalist风格令牌

With Reviewer Agent

与Reviewer Agent集成

"Reviewer, check if components follow art-deco style guide"
→ Reviewer validates token usage and style consistency
"Reviewer, check if components follow art-deco style guide"
→ Reviewer会验证令牌使用和风格一致性

With Planner Agent

与Planner Agent集成

"Planner, create a style migration plan from material to glassmorphism"
→ Planner breaks down token replacement strategy
"Planner, create a style migration plan from material to glassmorphism"
→ Planner会分解令牌替换策略

Quick Reference Commands

快速参考命令

Inspect Styles

查看风格

  • "list all available styles"
    - Show all 50+ styles
  • "describe {style-name}"
    - Get detailed style info
  • "show {style-name} tokens"
    - Display token values
  • "list all available styles"
    - 显示所有50+风格
  • "describe {style-name}"
    - 获取风格详细信息
  • "show {style-name} tokens"
    - 显示令牌数值

Apply Styles

应用风格

  • "apply {style-name}"
    - Set active style
  • "use {style-name} for {component}"
    - Style specific component
  • "restyle {component} as {style-name}"
    - Convert existing component
  • "apply {style-name}"
    - 设置激活风格
  • "use {style-name} for {component}"
    - 为特定组件应用风格
  • "restyle {component} as {style-name}"
    - 转换现有组件风格

Blend Styles

混合风格

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

Generate Components

生成组件

  • "create {component} in {style-name}"
    - New styled component
  • "generate {component-set} using current style"
    - Multiple components
  • "build {layout} with {style-name} tokens"
    - Complex layouts
  • "create {component} in {style-name}"
    - 生成新的带风格组件
  • "generate {component-set} using current style"
    - 生成多个组件
  • "build {layout} with {style-name} tokens"
    - 生成复杂布局

Tips for Success

成功使用技巧

  1. Be Specific: "Apply art-deco style" is better than "make it fancy"
  2. Stay Consistent: Use one style (or blend) per project section
  3. Trust the Tokens: Don't override token values without good reason
  4. Test Early: Apply styles early in development, not as afterthought
  5. Document Choices: Note which styles and why in commit messages
  6. Embrace Constraints: Limitations drive better design decisions
  1. 明确具体：「应用art-deco风格」比「让它看起来更精美」效果更好
  2. 保持一致：每个项目区域使用一种风格（或混合风格）
  3. 信任令牌：无充分理由不要覆盖令牌数值
  4. 尽早应用：在开发初期就应用风格，而非后期追加
  5. 记录选择：在提交信息中注明使用的风格及原因
  6. 拥抱约束：限制条件能催生更好的设计决策

Resources

资源

  • Style Guide: 
    @references/style-guide.md
    - Detailed aesthetic rules
  • Prompt Templates: 
    @references/prompt-templates.md
    - Ready-to-use prompts
  • Token Schema: 
    @references/token-schema.md
    - Token structure reference
Last Updated: 2025-12-03 Version: 1.0.0 Styles Available: 50+
  • 风格指南：
    @references/style-guide.md
    - 详细美学规则
  • 提示模板：
    @references/prompt-templates.md
    - 即用型提示语
  • 令牌 schema：
    @references/token-schema.md
    - 令牌结构参考
最后更新：2025-12-03 版本：1.0.0 可用风格数量：50+