让 AI 遵循 StyleSeed 规范快速生成 UI 组件

解决 AI 生成前端组件时样式随意、不符合设计规范的问题：通过引入 StyleSeed Toss 约定，强制 AI 使用语义化 Token 和标准结构，确保新组件与现有设计系统完美融合。

为什么需要这个技能

在开发复杂前端项目时，直接让 AI 写 UI 组件往往会导致其“随机发挥”，产生硬编码的颜色值、不统一的间距以及不可预测的类名。这不仅增加了维护成本，还破坏了产品视觉的一致性。

本技能将 AI 的生成逻辑与 StyleSeed（基于 Toss 设计语言）绑定。它要求 AI 在编写代码前先读取本地设计上下文，使用语义化 Token（如 bg-card 而非 #ffffff），并严格遵守无障碍（Accessibility）标准，从而产出可以直接进入生产环境的工业级组件。

适用场景

在基于 StyleSeed 构建的项目中需要创建新的 UI 基础组件（Primitives）。
需要快速组合多个基础组件构建复杂的功能区块（Patterns）。
希望组件具备严格的类型定义（TypeScript）和可维护的变体（Variants）。
需要确保移动端交互体验，如触控目标尺寸和键盘聚焦状态。

核心工作流

读取设计上下文：AI 需首先分析 CLAUDE.md 约定、css/theme.css 中的语义 Token 以及 components/ui/ 下的现有组件示例。
确定组件定位：
- 基础构建块 $\to$ src/components/ui/
- 复合功能模式 $\to$ src/components/patterns/
执行结构化编码：
- 优先使用函数声明，支持 React.ComponentProps 类型定义。
- 使用 cn() 实用函数处理类名合并，通过 data-slot 标识组件部分。
- 仅在确实需要多种形态时引入 CVA（Class Variance Authority）。
应用语义 Token：禁止硬编码视觉值，必须使用如 text-muted-foreground、border-border 等标准 Token。
注入无障碍增强：确保交互元素触控区域 $\geq 44 \times 44 px$ ，且 aria-* 属性正确透传。

下载和安装

下载 ui-component 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐

让 AI 遵循 StyleSeed 规范快速生成 UI 组件 #

为什么需要这个技能 #

适用场景 #

核心工作流 #