项目案例 / AI 实践
设计 Skill 构建与应用
设计体系建设与团队 AI 协作转型
将团队设计资源，转化为 AI 可调用的设计依据
让设计资源从人工查阅的参考，进一步成为 AI 执行任务时能够使用的依据。
基于团队已有的 Figma 设计资源，使用 AI 搭建 Skill 生成平台，探索将设计规范与经验转化为可调用的 Skill，为 AI 生成界面与执行设计任务提供依据。
已有的颜色、Token、组件和页面实例，是团队积累的设计基础。我重点推进两件事：将规范整理为具体的使用规则，并借助 AI 搭建支持生成、编辑与维护的工具流程。
团队已有设计资源
Skill 规则片段
平台界面
颜色与 Token · 组件 · 页面实例
适用条件 · 默认行为 · 场景差异
生成 · 编辑 · 维护
工作内容 & 产出
01 / 设计经验提炼
将分散在规范与页面中的设计判断，整理为有条件、有例外、可检查的规则。
02 / 工具落地
将设计团队的规范整理需求，转化为可运行、可维护的工具流程。
03 / 应用判断
判断偏差来自哪里，并将一次修改沉淀为后续任务可以复用的设计依据。
Skill 平台搭建
01 搭建 Skill 生成与管理平台，支持规范持续维护
根据设计资料整理的实际需求，我借助 AI 搭建 Skill 生成与管理平台，串联资料输入、规则生成、内容编辑与版本维护，让团队能够持续整理和更新设计依据。
平台核心功能简介
01 / 资料输入
集中关联参考文件与文本，为生成提供明确依据。
02 / 生成与编辑
结合资料和整理要求生成内容，通过 Markdown 编辑与实时预览检查、修改规则。
03 / 版本维护
保留历史内容，支持查看与恢复，为持续调整提供回退方式。
04 / 导出工作包让模型按任务调用
将整理好的 Skill 导出为完整工作包，交给 AI 使用。工作包包含统一入口和分类索引，AI 根据当前页面的设计任务，读取相关规范，并结合对应的变量、资产和组件生成页面，无需每次手动挑选、逐条复制规则。
本阶段产出：Skill Studio 品牌知识工作台
将设计团队的规范整理需求，转化为可运行、可维护的工具流程。 全屏查看
工作台示例，可点击试用
设计规则整理
02 如何将设计规范，整理为 AI 能执行的规则
颜色、字号和组件样式定义了界面的基本外观。要指导 AI 完成具体任务，还需要说明：什么场景使用什么组件、默认如何操作，以及哪些情况需要例外处理。
我结合组件说明与实际页面，梳理规则的适用条件、默认行为与场景差异，让 AI 复用组件时，也能遵循对应的交互逻辑。
实践案例
定义同类弹窗在不同场景下的交互规则：
添加设备
我的 空间
新建空间
Q4 2025 Earnings Call Transcripts
12/50
2025-12-31
Global Macro Outlook & Research
24/50
2025-12-03
M&A Due Diligence Materials for Pro
6/50
2025-09-11
HNW Client Portfolio Reviews
40/50
2025-09-08
SEC Filings & Compliance Policies
33/50
2025-08-20
Tech Sector Investment Strategies
18/50
2025-07-12
ESG Market Trends & Analysis
27/50
2025-02-14
The Insight Beacon
40/50
2025-07-07 13:59
记录
空间
Vitana
我的
Edit space
Work space
Confirm
9:41
添加设备
我的 空间
新建空间
Q4 2025 Earnings Call Transcripts
12/50
2025-12-31
Global Macro Outlook & Research
24/50
2025-12-03
M&A Due Diligence Materials for Pro
6/50
2025-09-11
HNW Client Portfolio Reviews
40/50
2025-09-08
SEC Filings & Compliance Policies
33/50
2025-08-20
Tech Sector Investment Strategies
18/50
2025-07-12
ESG Market Trends & Analysis
27/50
2025-02-14
The Insight Beacon
40/50
2025-07-07 13:59
记录
空间
Vitana
我的
新建空间
输入名称
Confirm
Q
W
E
R
T
Y
U
I
O
P
A
S
D
F
G
H
J
K
L
Z
X
C
V
B
N
M
123
spac
e
return
9:41
创建空间
编辑空间
Prd交互规则
创建：空间标题是必填项，自动聚焦输入框；
编辑：输入非必要或已有默认值时，点击输入框后再弹出键盘；
其他交互细节：输入与选择并存时，支持点击弹窗内空白处收起键盘。
| 编号 | 使用条件 | 对应规则 |
|---|---|---|
| 01 | 输入是必要操作时 | 自动聚焦输入框 |
| 02 | 输入非必要或已有默认值时 | 点击输入框后再弹出键盘 |
| 03 | 输入与选择并存 | 支持点击弹窗内空白处收起键盘 |
本阶段产出
将分散在规范与页面中的设计判断，整理为有条件、有例外、可检查的规则。
设计研发协作
03 设计 & 研发共同维护规范指导 AI 页面生成
设计 Skill 与研发组件 Agent、Skill 共同作用,将设计要求落实到页面生成,让视觉与交互更接近设计师手搓完成的的高保真效果。
设计侧
将设计规范与场景经验整理为可调用的依据，让设计要求进入 AI 的组件选用、页面组织与结果评审，使设计经验能够在生成过程中持续发挥作用。
研发侧
研发侧通过组件 Agent 与 Skill，指导 AI 读取项目规范、调用已有组件并正确配置参数。
组件 Agent 提供任务执行与资料读取指引，配套 Skill 补充具体的组件使用规则。它们与真实组件实现配合，减少 AI 临时重画控件、自行猜测样式和行为带来的偏差。
两侧配合，让设计要求从文档延续到具体页面。
设计侧
设计 Skill
明确呈现与交互要求
说明信息如何组织、组件如何选择、
状态怎样反馈，以及具体场景下的
使用条件与例外
研发侧
研发组件 Agent / Skill
指导正确调用
引导 AI 查找适用的组件与资源，
按项目规则选择变体、传入参数
并处理状态，使已有设计要求
落实到代码
AI 页面生成
协作方式
以主按钮为例，设计侧明确主要操作的视觉层级、按钮样式与状态表达；研发侧指导 AI 选用对应实现，并配置尺寸、文字和交互状态。页面生成后，再依据设计稿检查比例、密度、对齐与操作表现。
页面生成
设计要求
Figma 组件原稿 · 设计 Skill
主按钮
操作层级
样式
状态
明确主要任务，匹配主按钮的
使用场景、样式与交互状态。
调用依据
研发组件 Agent / Skill
复用项目已有的组件与资源，
按规则配置变体、参数和状态。
实现示例
VIBaseButton
有了 Skill 和真实组件，页面也不一定能直接交付。信息主次、内容密度、组件组合和操作反馈，仍需要结合具体场景判断。
发现偏差后，要先分清是设计规则不明确、组件调用有误，还是页面组织不合理，再调整对应内容。这也是设计经验在 AI 工作中的价值：判断问题出在哪里，并将有效的修改沉淀为后续可用的依据。
成果价值
04 让设计规范，成为跨团队 AI 创作的共同依据
这套依据也为产品、运营和研发开展 AI 界面创作提供了支持，让更多同事能够沿用已有的品牌风格、组件规范与交互经验。
本阶段产出
我将这次实践中的问题、判断与迭代思路整理成文。有兴趣了解更完整的分析，可以继续阅读这篇经验总结。
