当用户请求构建、创建、设计或开发任何前端界面、网页、UI组件或视觉元素时使用此技能。
设计样式 Skill : 目的
功能概述
设计样式 Skill : 目的是一项面向实际任务的技能，主要用于这种技能帮助 Claude Code 通过自动检索来自 points/ 目录的设计系统提示来创建美丽而独特的前端界面；Instead。
核心要点
- 它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
使用与执行
从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；
结果检查与注意事项
若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
设计风格技能
目的
该技能通过自动从 prompts/ 目录中检索设计系统提示，帮助 Claude Code 创建美观且富有辨识度的前端界面。它使 Claude 能够构建具有特定设计美学（如新粗野主义、现代暗色、奢华风、赛博朋克等）的界面，而非生成千篇一律的通用 UI。
适用场景
该技能在以下情况下会自动触发：
- 用户要求构建网页、落地页或 Web 应用
- 用户请求带有特定设计风格的 UI 组件
- 用户提及前端、React、Vue 或 Web 开发相关需求
- 用户明确指出某种视觉风格（例如：“让它看起来现代且暗色”或“采用粗野主义风格”）
可用的设计风格
以下设计系统均位于 prompts/ 目录中：
- Academia — 学术化、经典、精致
- ArtDeco — 奢华的 1920 年代复古魅力
- Bauhaus — 功能主义、几何极简主义
- BoldTypography — 以排版为核心的设计
- Botanical — 自然灵感、有机形态
- Claymorphism — 柔和、黏土质感的 3D 元素
- Cyberpunk — 未来感、霓虹灯、高科技感
- Enterprise — 专业、企业级、可扩展
- FlatDesign — 简洁、极简、二维平面
- Fluent2 — 微软 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：理解用户意图
当用户提出前端开发需求时，首先需明确以下三点：
- 技术栈 — 用户使用何种框架？（React、Vue、Next.js 等）
- 设计偏好 — 用户是否提到了特定风格或视觉倾向？
- 组件范围 — 是单个组件、整页，还是整个应用？
步骤 2：选择设计风格
若用户已指定风格：
- 将用户描述匹配至可用风格（例如，“brutalist” → Neo-brutalism）
- 匹配不区分大小写（brutalism、Brutalism、BRUTALISM 均可识别）
若用户未指定风格：
- 现代、专业类项目 → 推荐 ModernDark 或 Professional
- 创意性、大胆类项目 → 推荐 Neo-brutalism 或 BoldTypography
- 极简、干净类项目 → 推荐 FlatDesign 或 Swiss
- 企业/公司级项目 → 推荐 Enterprise
如对适配风格存疑，请主动向用户确认。
步骤 3：获取设计系统
使用 Read 工具加载对应提示文件：
Read: prompts/.md
例如：
prompts/Neo-brutalism.mdprompts/ModernDark.mdprompts/Cyberpunk.md
步骤 4：应用设计系统
加载设计系统提示后，请执行以下操作：
- 内化设计哲学 — 理解其核心原则、视觉特征与差异化要素
- 提取设计令牌（Design Tokens） — 包括颜色、字体、间距、阴影、边框等
- 遵循组件模式 — 使用指定的按钮样式、卡片布局等
- 应用“Bold Factor”（标志性强化要素） — 实现能体现该风格真实性的关键视觉元素
- 规避反模式（Anti-patterns） — 不使用破坏该风格一致性的设计手法
步骤 5：结合上下文构建
编码前：
- 识别用户的现有技术栈
- 理解其组件架构
- 留意任何约束条件（CSS 框架、UI 库等）
编码时：
- 匹配用户已有的编码模式与规范
- 将设计令牌集中定义于 CSS 变量或配置文件中
- 构建可复用、可组合的组件
- 简要说明架构选型依据
质量标准：
- 保持或提升可访问性（Accessibility）
- 确保响应式设计在各类设备上正常运行
- 做出审慎而富有创意的设计决策（避免通用模板化代码）
- 交付比接手时更整洁的代码库
示例
示例 1：用户明确指定风格
用户：“为我的 SaaS 产品创建一个采用新粗野主义风格的落地页”
技能操作：
- 识别关键词：“landing page”、“neo-brutalist”
- 映射 “neo-brutalist” →
prompts/Neo-brutalism.md - 读取该设计系统提示
- 提出澄清问题：“您使用的是哪种技术栈？React、Vue 还是纯 HTML/CSS？”
- 依据新粗野主义原则构建落地页（粗边框、硬阴影、高饱和色彩等）
示例 2：用户未指定风格
用户：“帮我构建一个作品集网站”
技能操作：
- 识别语境：“portfolio website”（属创意类项目）
- 提供选项：“您希望采用哪种设计风格？我可为您实现 Modern Dark（成熟稳重）、Neo-brutalism（大胆创意）或 Swiss（极简干净）。”
- 等待用户确认偏好
- 加载对应提示并开始构建
示例 3：组件级请求
用户：“为我的 Next.js 应用添加一个联系表单，要求现代且专业。”
技能操作：
- 识别关键词：“Next.js”、“modern and professional”
- 选择风格：
ModernDark.md（侧重“现代”）或Professional.md（侧重“专业”） - 读取对应设计系统提示
- 按用户 Next.js 项目的既有模式构建表单组件
- 应用提示中定义的设计令牌（颜色、字体、阴影等）
快速参考命令
实现过程中，可快速定位提示文件中的特定内容：
颜色定义：
Grep: pattern "Token|Value|Usage" path "prompts/