frontend-design

前端设计技能

这项技能可指导创建独具特色、适合生产环境的前端界面。它会自动检测项目现有的设计系统和前端框架，优先遵循现有规范，再通过构图、布局和动效发挥创意。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能提供有关用途、受众或技术限制的背景信息。

步骤 1：代码库上下文探索（必须执行）

在编写任何代码或选择任何美学方向之前，请先扫描代码库。 此步骤不可省略，每次都必须执行。

要检测的内容

1. 前端框架 — 检查 package.json（或同类文件）中是否包含：react、vue、angular、svelte、next、nuxt、astro、solid-js
2. 组件库 — 检查依赖项中是否包含：PrimeVue、shadcn/ui、Vuetify、MUI、Chakra UI、Ant Design、Radix、Mantine、Quasar、Element Plus、Headless UI
3. CSS 框架 / 方法论 — 检查以下内容：
   • Tailwind：tailwind.config.* 文件或 @tailwind 指令
   • CSS Modules：*.module.css 文件
   • Styled-components / Emotion：组件文件中的导入
   • SCSS/SASS：*.scss 文件、变量文件
   • CSS-in-JS：检查导入
4. 设计令牌 — 扫描以下内容：
   • CSS 自定义属性文件（variables.css、tokens.css、:root 块）
   • tailwind.config.* 中的 Tailwind 主题扩展
   • SCSS 变量文件（_variables.scss、_tokens.scss）
   • 主题配置文件
5. 现有排版 — 检查以下位置的字体声明：
   • 入口文件（index.html、_app.tsx、layout.tsx、nuxt.config.*、app.vue）
   • 全局 CSS 文件
   • 字体导入语句（Google Fonts、本地字体）
6. 现有配色方案 — 查找主题文件、CSS 变量和 Tailwind 配置中定义的颜色
7. 组件模式 — 检查 2～3 个现有组件，了解：
   • 命名约定（PascalCase、kebab-case）
   • 目录结构
   • 实际使用的样式方案
8. 设计系统规则 — 检查 CLAUDE.md、.cursor/rules 或其他 Agent 配置文件中的设计系统规则（create-design-system-rules 技能会生成这些规则）

上下文摘要

扫描后，在内部将项目归为以下三个级别之一：

级别	条件	行为
级别 1：从零开始	没有框架、组件库或设计令牌（独立 HTML、一次性产物、新项目）	充分发挥创意自由 — 进入步骤 2 的路径 B
级别 2：存在框架	检测到框架和/或 CSS 框架，但没有成熟的设计系统或组件库	遵循框架惯例，通过主题、布局和构图发挥创意
级别 3：存在设计系统	检测到组件库、设计令牌和成熟模式	严格遵循现有系统；仅通过构图、动效和微交互发挥创意

继续之前，请说明你的发现。 示例：“检测到：Vue 3 + PrimeVue + Tailwind CSS，使用自定义主题。级别 3 — 我将使用 PrimeVue 组件和现有设计令牌。”

步骤 2：设计思考

路径 A：在现有系统中进行设计（Tier 2 和 3）

检测到现有设计系统或框架时，应引导创意表达，而不是压制它。

硬性约束（绝不违反）：

• 绝不导入项目字体栈中尚未包含的字体
• 绝不覆盖现有设计令牌（CSS 变量、Tailwind 主题值、SCSS 变量）
• 绝不创建与现有库组件重复的组件（如果库中有 Button，就使用它）
• 绝不引入与项目现有方法不同的 CSS 方法（如果项目使用 Tailwind，就使用 Tailwind，而不是内联样式或 CSS Modules）
• 绝不添加项目尚未使用的样式资源外部 CDN 链接

创意层（独特性所在之处）：

• 空间构图 — 利用现有网格系统打造出人意料的布局：非对称排布、戏剧性的留白、重叠区块、对角线流动、突破网格的主视觉区域
• 动态效果与动画 — 交错显示、滚动触发的过渡效果、悬停状态编排、页面加载编排。使用项目现有的动画方案（CSS transitions、Motion 库、GSAP——无论项目中已安装或适用于该框架的方案是什么）
• 内容层级 — 在现有字体比例中营造鲜明的字号对比，大胆运用不同字重，创意性地调整字间距，并将文本转换作为设计工具
• 色彩强调策略 — 在现有调色板内，有意识地运用主色与强调色的关系。设计系统定义颜色；这项技能决定如何运用它们，以达到最大效果
• 组件组合 — 以出人意料的方式组合现有基础组件：为 DataTable 配上具有编辑质感的表头样式，采用杂志风格布局的 Card 网格，设计具有对话式流程的 Form
• 微交互 — 为每个交互元素提供有目的的反馈：按钮按下效果、输入框聚焦动画、加载状态编排、成功／错误状态过渡
• 将留白作为设计手段 — 宽裕的内边距、区块间的呼吸空间，以及营造视觉节奏的留白

**像在拥有成熟品牌的公司中担任设计师一样思考：**不要替换品牌字体；要通过如何组织现有元素来打造独特性。

路径 B：从零开始设计（Tier 1——Greenfield）

未检测到现有系统时，应采用大胆鲜明的美学方向：

• 目的：此界面解决什么问题？谁会使用它？

• 基调：选择清晰明确的美学方向：

  • 极致极简
  • 极繁混乱
  • 复古未来主义
  • 有机／自然
  • 奢华／精致
  • 活泼／玩具感
  • 编辑／杂志风格
  • 粗野主义／原始
  • 装饰艺术／几何
  • 柔和／粉彩
  • 工业／实用主义

  可借鉴这些方向，但应设计出真正符合所选美学方向的方案。

• 差异化：是什么让它令人难忘？人们会记住的唯一亮点是什么？

至关重要：选择明确的概念方向，并精准执行。大胆的极繁主义和精致的极简主义都行得通——关键在于有意识地设计，而不是追求强烈感。

实施标准

适用于所有等级

实现可运行的代码，并确保：

• 达到生产级标准且功能完整
• 整体协调，拥有鲜明的视觉风格
• 每个细节都经过精心打磨
• 无障碍（合理的对比度、语义化 HTML、键盘导航）

适用于 Tier 2 和 3（现有系统）

• 将项目现有组件库作为主要构建基础
• 遵循项目的文件命名和目录规范
• 仅使用项目现有的 CSS 方法
• 扩展，而不是替换：如果需要某个变体，应扩展现有令牌系统，而不是硬编码数值
• 如果库中没有所需组件，应遵循库的模式和规范来构建

针对 Tier 1（从零开始）

• 选择美观、独特且有趣的字体
• 使用 CSS 变量定义协调统一的色彩系统
• 创建清晰的间距刻度
• 建立一致的组件模式
• 可以考虑推荐 create-design-system-rules 技能，以便将系统规范化

前端美学指南

排版

Tier 2 和 3： 使用项目现有的字体栈。通过以下方式营造区分度：

• 在现有字号刻度范围内，营造鲜明的字号对比
• 灵活运用可变字体字重（如果项目使用可变字体）
• 创造性地调整字间距和文本转换样式
• 调整行高，营造视觉节奏
• 如果项目使用 Inter，就让 Inter 呈现出惊艳的效果——字体选择并非唯一的设计手段

Tier 1（从零开始）：

• 选择美观、独特且有趣的字体
• 避免使用 Arial 和系统默认字体等通用字体
• 将别具一格的展示字体与精致的正文字体搭配使用
• 绝不要选择那些已经泛滥的字体（Space Grotesk、Inter、Roboto）

色彩与主题

Tier 2 和 3： 遵循现有配色方案：

• 有意识地搭配主色与强调色
• 探索现有调色板的完整色域（项目通常已定义某些颜色，却很少使用）
• 使用现有颜色的透明度变化来营造层次感
• 深色／浅色模式：遵循项目的做法

Tier 1（从零开始）：

• 采用协调统一的美学风格
• 使用 CSS 变量保持一致性
• 大胆使用主色并搭配鲜明的强调色，效果胜过谨慎而平均分布的配色
• 在浅色和深色主题之间灵活变化

动效与动画

所有级别（无论设计系统如何，动效都是打造鲜明特色的好机会）：

• 使用动画实现效果和微交互
• 聚焦于影响力大的时刻：通过错开的 animation-delay 展现页面加载动画
• 使用滚动触发动画和令人惊喜的悬停状态
• 为状态变化（加载、成功、错误）设计有明确目的的过渡效果
• 使用项目首选的动画方案（CSS、Motion、GSAP 或框架原生方案）
• 简单的过渡效果优先使用纯 CSS 方案

空间构图

所有级别（任何系统都可以灵活进行构图创作）：

• 尝试出人意料的布局（即便使用标准组件）
• 将对称组件以非对称方式排列
• 通过元素重叠营造层次感
• 打破网格的主视觉区块
• 大量留白或精心控制的紧凑布局——两种方式都可行
• 营造斜向流动感和视觉节奏

背景与视觉细节

Tier 2 和 3： 使用现有设计语言营造氛围：

• 使用现有调色板中的颜色创建微妙渐变
• 使用现有令牌系统构建背景图案
• 使用现有颜色叠加多层透明效果
• 使用符合项目层级系统的阴影

Tier 1（从零开始）：

• 渐变网格
• 噪点纹理
• 几何图案
• 多层透明效果
• 醒目的阴影
• 装饰性边框
• 自定义光标
• 颗粒叠加效果

应避免的做法

所有级别都应避免

• 缺乏视觉节奏、千篇一律的布局
• 毫无变化地堆叠相同组件
• 纯粹为了装饰、毫无实际目的的动画
• 违反无障碍要求（对比度差、缺少标签、不支持键盘操作）

Tier 2 和 3：避免破坏设计系统

• 用硬编码值覆盖设计令牌
• 导入项目字体栈中没有的字体
• 创建与库组件重复的单次使用组件
• 使用与项目不同的 CSS 方法
• 未确认项目现有方案就引入外部依赖
• 忽略现有组件 API 和模式

Tier 1（从零开始）：避免千篇一律的 AI 美学

• 已被过度使用的字体族（Inter、Roboto、Arial、系统字体、Space Grotesk）
• 陈词滥调的配色方案（尤其是白色背景上的紫色渐变）
• 可预测的布局和组件模式
• 缺乏特定场景个性的通用样式

设计变化

• 不同设计的外观不应相同
• 即使在同一设计系统中，也要改变不同页面中组件的组合方式
• 为不同部分采用不同的空间布局
• 创意地诠释需求——仪表盘可以采用编辑式风格，表单可以采用对话式设计，设置页面可以优雅精致
• 设计系统的约束应激发更多创意，而非限制创意

互补技能

• create-design-system-rules — 如果未检测到设计系统（Tier 1），建议先运行此技能来建立设计系统。如果已有设计系统规则，则应遵循这些规则。
• react-best-practices / vue-best-practices — 遵循这些技能提供的框架惯例和组件 API 模式。本技能关注视觉创意，而非框架最佳实践。
• web-design-guidelines — 用于根据质量标准审核和评审现有界面。

请记住

先了解你所处的环境，然后成为其中最具创意的人——但如果有人已经选好了墙壁的颜色，就不要重新粉刷。

在全新项目中：尽情发挥，打造非凡而鲜明的作品。 在现有项目中：在现有体系内打造非凡作品。PrimeVue 仪表盘也能令人惊艳，shadcn/ui 页面也能令人难忘。设计系统不是牢笼，而是一份创意简报。