design-style

设计风格技能

用途

此技能会自动从 prompts/ 目录中检索设计系统提示词，帮助 Claude Code 创建精美、独特的前端界面。此技能让 Claude 能够构建具有特定设计美学的界面，例如新粗野主义、现代暗色、奢华、赛博朋克等，避免生成千篇一律的 UI。

何时使用

以下情况会自动调用此技能：

• 用户要求构建网页、着陆页或 Web 应用程序
• 用户要求使用特定设计风格制作 UI 组件
• 用户提到前端、React、Vue 或 Web 开发
• 用户要求采用特定美学风格（例如“让它看起来现代且暗色”或“使用粗野主义风格”）

可用设计风格

prompts/ 目录中提供以下设计系统：

• Academia - 学术、经典、精致
• ArtDeco - 20 世纪 20 年代的奢华魅力
• Bauhaus - 功能主义、几何极简主义
• BoldTypography - 以字体为核心的设计
• Botanical - 自然灵感、有机风格
• Claymorphism - 柔和、黏土质感的 3D 元素
• Cyberpunk - 未来主义、霓虹、高科技
• Enterprise - 专业、企业化、可扩展
• FlatDesign - 简洁、极简、二维
• Fluent2 - Microsoft Fluent 2 设计系统
• HumanistLiterary - 温暖、文学性、对话式（Claude 美学）
• Industrial - 粗犷、机械、实用主义
• Kinetic - 动态、注重动效
• Luxury - 高端、优雅、精致
• Material - Google Material Design
• Maximalism - 大胆、富有表现力、丰富
• MinimalDrak - 极简暗色主题（注意：原名称有拼写错误）
• ModernDark - 现代暗色 UI，富有层次感
• Monochrome - 黑白、高对比度
• Neo-brutalism - 大胆、粗犷、色彩鲜明的粗野主义
• Neumorphism - 柔和 UI、新拟物风格
• Newsprint - 报纸风格
• Organic - 自然、流畅的形态
• PlayfulGeometric - 趣味几何图形
• Professional - 简洁、以商务为导向
• Retro - 复古、怀旧
• Saas - 现代 SaaS 美学
• Sketch - 手绘、艺术风格
• Swiss - 国际主义平面设计风格
• TerminalCLI - 命令行界面美学
• Vaporwave - 80、90 年代美学，怀旧风格
• Web3 - 去中心化、加密货币风格

工作原理

第 1 步：理解用户意图

当用户要求进行前端开发时，首先确定：

1. 技术栈 - 他们使用什么框架？（React、Vue、Next.js 等）
2. 设计偏好 - 他们是否提到了特定风格或美学？
3. 组件范围 - 单个组件、完整页面，还是整个应用程序？

第 2 步：选择设计风格

如果用户指定了风格：

• 将用户的要求与可用风格匹配（例如，“brutalist” → Neo-brutalism）
• 匹配时不区分大小写（brutalism、Brutalism、BRUTALISM 均可）

如果用户未指定：

• 对于现代、专业的项目 → ModernDark 或 Professional
• 对于创意、大胆的项目 → Neo-brutalism 或 BoldTypography
• 对于极简、简洁的项目 → FlatDesign 或 Swiss
• 对于企业/公司项目 → Enterprise

如果不确定哪种风格适合用户的需求，请询问用户。

第 3 步：检索设计系统

使用 Read 工具加载相应的提示词文件：

Read: prompts/<StyleName>.md

例如：

• prompts/Neo-brutalism.md
• prompts/ModernDark.md
• prompts/Cyberpunk.md

第 4 步：应用设计系统

加载设计系统提示词后：

1. 领会设计理念 - 了解核心原则、视觉特征和差异化因素
2. 提取设计令牌 - 颜色、字体、间距、阴影、边框
3. 遵循组件模式 - 使用指定的按钮样式、卡片布局等
4. 应用“大胆因素” - 实现标志性元素，让设计更具真实感
5. 避免反模式 - 不要使用破坏该美学风格的技巧

步骤 5：结合上下文构建

编写代码前：

• 确认用户现有的技术栈
• 了解其组件架构
• 留意各种限制（CSS 框架、设计库等）

编写代码时：

• 遵循现有的模式和约定
• 将设计令牌集中在 CSS 变量或配置文件中
• 创建可复用、可组合的组件
• 简要说明架构选择

质量标准：

• 保留或提升无障碍性
• 确保在各种设备上都能自适应
• 做出审慎且有创意的设计选择（避免通用模板）
• 让代码库比接手时更加整洁

示例

示例 1：用户指定风格

用户：“为我的 SaaS 产品创建一个采用新粗野主义设计的落地页”

技能操作：

1. 检测关键词：“落地页”、“新粗野主义”
2. 将“新粗野主义”映射到 prompts/Neo-brutalism.md
3. 阅读设计系统提示词
4. 提出澄清问题：“你使用什么技术栈？React、Vue，还是纯 HTML/CSS？”
5. 遵循新粗野主义原则构建落地页（粗边框、硬阴影、醒目色彩等）

示例 2：用户未指定风格

用户：“帮我构建一个作品集网站”

技能操作：

1. 检测：“作品集网站”（创意类场景）
2. 提供选项：“你想要特定的设计风格吗？我可以采用现代暗色（精致）、新粗野主义（大胆且有创意）或瑞士风格（极简且简洁）来创建。”
3. 用户回复偏好
4. 加载相应的提示词并开始构建

示例 3：组件请求

用户：“在我的 Next.js 应用中添加一个联系表单。让它看起来现代、专业。”

技能操作：

1. 关键词：“Next.js”、“现代、专业”
2. 选择：ModernDark.md（现代）或 Professional.md（专业）
3. 阅读设计系统
4. 遵循用户的 Next.js 模式构建表单组件
5. 使用提示词中的设计令牌（颜色、字体排版、阴影等）

快速参考命令

实现时，可以快速参考特定章节：

颜色：

Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"

字体排版：

Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"

组件模式：

Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"

最佳实践提示

1. 阅读完整提示词——不要只是略读。设计理念和差异化章节至关重要。
2. 实现标志性元素——每个设计系统都有一个“大胆因子”章节。这些元素能让设计真正体现其风格。
3. 避免反模式——每份提示词都会列出不该做的事。请严格遵循这些规则。
4. 提出问题——如果用户的需求不明确，请在构建前询问。
5. 匹配现有代码——不要与用户的技术栈对着干。将设计系统融入现有模式。

备注

• 所有设计系统提示词都遵循相同的结构：<role> 和 <design-system> 章节
• 提示词包含详细的调色板、字体排版比例、组件模式和实现示例
• 每种风格都可用于生产环境，并经过精心设计，具有鲜明的视觉辨识度
• 这些提示词旨在避免生成看起来千篇一律、带有 AI 风格的界面

后续改进

此技能的潜在改进：

• 支持组合风格（例如，“赛博朋克 + 极简”）
• 自定义风格创建工作流
• 将设计令牌提取为 JSON/CSS
• 根据提示词生成组件库