如何使用 AI 快速构建基于设计系统的核心组件库 #

解决 UI 开发中样式不统一、硬编码严重的痛点：通过定义一套基于 Design Tokens 的核心组件库规范，让 AI 自动生成符合设计系统标准、且具备高度可维护性的 UI 代码。

为什么需要这个技能 #

在大型项目或团队协作中，如果开发者直接在代码中写死颜色（如 #333333）或间距（如 16px），会导致界面风格碎片化，且在需要全局调整品牌色或间距时，必须手动修改成百上千处代码。

本技能通过引入“设计令牌（Design Tokens）”的概念，将具体的数值抽象为具有语义的变量（如 $textPrimary）。当 AI 遵循这套规范时，它不再是随缘生成样式，而是基于一套标准的设计语言进行构建，确保产品在视觉和交互上的绝对一致性。

适用场景 #

• 从零开始构建项目的 UI 设计系统或组件库。
• 将旧有的硬编码 UI 界面重构为基于 Token 的标准化组件。
• 需要 AI 快速生成符合公司 UI 规范的复杂页面布局（如表单、列表、卡片）。
• 建立统一的组件 Prop 模式，以规范团队内部的组件扩展方式。

核心工作流 #

1. 强制执行 Design Tokens 替换 #

禁止 AI 使用硬编码数值。所有间距、颜色、字体大小必须映射到 Token 矩阵中。

• 错误示例：<Box padding={16} />
• 正确示例：<Box padding="$4" />

2. 使用语义化核心组件 #

弃用平台原生基础组件（如原生的 View 或 div），优先使用封装了 Token 支持的原子组件：

• Box：基础布局容器，支持 padding、margin 和背景色 Token。
• HStack/VStack：标准的水平/垂直 Flex 布局，通过 gap 令牌控制间距。
• Text/Button：预设好字体等级（$xs, $md, $lg）和交互变体（solid, outline, ghost）的组件。

3. 应用标准化布局模式 #

引导 AI 按照既定模式组合组件，例如：

• 页面布局：Screen $\to$ ScreenHeader $\to$ ScreenContent。
• 表单布局：VStack $\to$ Input $\to$ Button。
• 列表项：HStack $\to$ Avatar $\to$ VStack(Text) $\to$ Icon。

4. 定义组件 Prop 约束 #

在创建新组件时，定义受限的 Token 类型而非开放的 string 或 number，从而在编译阶段就强制执行设计规范。

interface CardProps {
  padding?: '$2' | '$4' | '$6'; // 仅允许使用定义好的令牌
  variant?: 'elevated' | 'outlined' | 'filled';
  children: React.ReactNode;
}

下载和安装 #

下载 core-components 中文版 Skill ZIP

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

你可能还需要 #

暂无推荐