前置思考

设计稿不会消失，但它的角色正在从“交付物”转变为“低成本认知与决策介质”

设计稿是低成本的“试错沙盒”，修改 demo 或代码的成本依然高于修改像素
设计稿是“思考介质”，即使 AI 能生成 UI，但“外化思考”的需求依然存在，我们需要把复杂决策外化、需要进行多方案对比，需要让思考可回溯...
设计稿是“沟通媒介”，在投入高昂资源前，我们依然需要一个低成本且直观的载体进行意图对齐

把设计师从“机械拼装”中解放出来：在实际项目中，设计师有相当部分时间消耗在搭页面骨架、对齐组件、套用规范... 这些工作重要但不创造差异化价值；借助 AI 可以让设计师专注在更关键和更有价值的体验决策上
减少“从 0 到 1 ”的启动成本：即使有组件库，从空白画布开始依然成本较高；借助 AI 可以快速得到符合规范的设计初稿，再在此基础上进行完善、迭代和延伸
降低对“记忆和经验”的依赖：传统方式下设计质量依赖你是否记得有哪些组件、是否熟悉规范细节、是否知晓最佳实践...借助 AI 可以自动匹配合适组件、自动应用 design tokens、自动遵循 UI 规则

适合：
- 结构稳定性高 / 组件依赖度高 / 规模复用性强的场景
- 前提是已经具备成熟的设计系统和规范
不适合：
- 强视觉创新/品牌表达的场景
- 高复杂度/定制化的场景

实践过程

基于前面的思考，我尝试以 AI 侧边栏这一高结构化、强组件依赖的场景作为实验场，试图通过解构已有的组件系统与设计规范，探索如何将经验性的设计实践转化为可被复用与调用的 design skill，从而在 AI 参与生成的工作流中，让设计能力以“规则”和“系统”的形式重新发挥作用。

—

阶段一：理想假设

一开始，我对这件事的设想非常理想化。

既然已经有成熟的组件库、规范和一批典型界面，那么只要把这些“喂给 AI”，它理应可以像一个成熟的设计师一样：理解这些资源、在需要的时候调取，并根据需求拼出一个合理的界面。

在这个假设下，我开始了第一次尝试，得到的结果是：

核心问题

AI 自由发挥严重、生成结果不可控、无法稳定复用已有设计资产

反思

问题的关键并不在 AI 能力，而在输入方式本身

整体输入颗粒度过粗，缺乏清晰的结构拆解与明确约束，导致 AI 无法建立稳定的执行路径

更本质的问题在于我给的是“资源”，试图让 AI 像人一样“理解”。然而人可以从资源中归纳规则，但 AI 不会，它本质上更擅长在明确约束下执行，而不是在模糊信息中推理

于是我尝试收紧控制，不再让 AI“自由生成”，而是让它直接复用已有设计资产，比如从典型界面中复制图层、拼装页面。

这个方向在逻辑上是对的，但很快被工具能力卡住：

过程中遇到的限制

无法跨文件复制
截图也无法作为可靠输入

经验&认知

“复制式复用”的路径走不通

—

阶段二：结构化生成

我重新整理了思路，不再从“界面长什么样”出发，而是从“界面由什么构成”出发。页面被拆解成稳定结构，再进一步拆成模块，再为这些模块定义边界和规则。

这个过程可以简单概括为三步：先确定骨架（页面结构），再填充模块（功能单元），最后补充规则（布局、间距、状态等）

1 确定骨架	我先把页面拆分成稳定结构：page header、page content、AI side bar
2 填充模块	接下来，我不再给 AI“页面”，而是给它“模块”： page content → table / dashboard / form / workflow 业务模块 empty / filled / loading 页面状态 sidebar → header / conversation / input conversation → UI part 分类 + 组合规则
3 补充规则	当 AI 能完成基础拼装后，我开始补充细节规则： auto-layout / constrain 间距 / 描边文案生成方式图标替换逻辑

当输入变成结构化之后，AI 的行为开始发生变化。它不再随意生成，而是开始在给定范围内进行组合。界面不一定完美，但至少是“可预期”的。

经验 & 认知

基于已有组件和规范生成设计稿，本质上不是“生成界面”，而是在既定设计系统约束下进行结构化编排与参数化组合。
设计资产如果只是“结果”，对 AI 是不可用的；只有当它变成“结构”，才可能被调用。

—

阶段三：规则强化

在实现基本的模块拼装后，我希望 AI 能够更智能，开始尝试引入更细颗粒度的规则，比如：根据具体情景自动替换文案、状态和局部结构。

但新的问题浮现 —— AI 想完成细化任务，必须先打散组件。从结果上看，AI 完成了任务，但从系统角度看，组件被破坏，失去了复用和迭代的能力。

同时，即使在 skill 中已经定义了文案替换规则，实际执行仍然频繁失效。

问题本质

很多真实文案和元素藏在 slot、嵌套实例、隐藏状态层内，AI 往往只做外层或可见层的替换，导致替换不完整、不准确。而进一步看，这反映出组件“可操作性”的不足：

组件本身的灵活度不足，AI 只能打散组件
组件属性暴露不足，高频编辑项没有暴露成 property，AI 需要深挖内部结构
组件图层和属性语义不清，AI 只能靠猜测

反思

高质量的组件资源不仅是设计师提效工具，更是 AI 实现设计自动化的核心输入。

从“像素拼接”转向“属性驱动”：传统的组件如果层级混乱或结构松散，AI 在调用时往往只能通过“打散 (Detach)”来满足需求。
构建 AI 友好的设计资产：标准化的颗粒度与属性化的状态，能够让 AI 更精准地理解 UI 的结构和约束，从而实现从“AI 绘图”向“AI 组装、AI 决策”的跨越。

经验

参数驱动：通过参数化设计支持内容与状态的灵活替换，避免通过打散组件实现修改
属性前置：将高频编辑项显式暴露成组件 property，降低对内部结构的依赖
语义对齐：图层和属性命名清晰可识别，便于 AI 理解、执行与校验

于是在这个过程中，我也持续去完善组件资产 —— 而这件事情不仅是让 AI 更好地调用组件，同时也在让人更好的理解和使用组件。这意味着：AI 友好的组件，本质上也是对“人”友好的、成熟度更高的组件。

我开始让 AI 生成流程上的关键界面，通过调试和修正已经能实现比较稳定的拼装效果

在反复调试的过程中，我也发现一个有意思的现象：

明明可以使用 design token，但它直接写入色值
明明可以引用字体样式，但修改文案后会 fallback 到默认字体
即使被要求使用 token，也可能先“本地新建一个 token”来应付

一开始我误以为是能力限制，比如不支持引用样式库，因此一度搁置了这个问题。

但在处理颜色问题时，通过不断追问和明确约束，最终发现：AI 实际上具备完整的 token 引用能力，只是默认不会使用。

经验 & 认知

AI 能力 ≠ AI 默认行为，AI 会默认选择“最省力”的实现路径
当 AI 行为不符合预期时，更有效的思路是：不要先怀疑“它做不到”，而要追问“它为什么这么做”

—

阶段四：跨文件复用

当大部分问题逐渐被解决后，生成效果在当前文件中看似已经趋于稳定。但一旦切换到新的文件，情况却迅速倒退—— AI 又开始自由发挥，之前调试过的问题再次出现。

甚至在同一文件中也会出现类似现象——即使更新了规则，下一次生成的结果也只是“部分修复”，而不是完整遵循。让人产生一种错觉 —— AI 好像“刚教过就忘了”。

问题本质

跨文件无法复制（一开始踩过的坑又忘了），而 page content 并没有封装成组件，因此 AI 缺乏可调用的资产只能自行发挥
在同一文件中，AI 倾向复用已有设计稿降低偏差，从而导致历史问题被一并继承，新的生成任务只做了局部修补（就近原则，比如重点修复你上一个对话提到的问题）

经验 & 认知

可复用能力必须被“封装”，如果希望某些能力在不同场景中稳定生效，不能依赖 AI 记住，而必须把它固化为结构化资产
约束必须足够具体且强制，减少建议语气和模糊描述，明确 always 和 never

总结

对 AI 能力的认识
AI 在结构与参数层面更稳定可靠，比如：layout、spacing、auto-layout、图层命名...；但在语义与决策层面并不稳定，需要更多输入和反复尝试，比如：内容替换、token 引用、条件判断...
也正是在这种反复之中，一个更重要的问题逐渐浮现出来：AI 的稳定性不一定来自更好的提示，而来自更清晰的设计结构。问题并不在于 AI 是否足够聪明，而在于我们是否真正为它准备好了“可以被执行的设计系统”。
Design skill 的演进
Skill 是在错误中长出来的，很多规则并不是一开始就能定义清楚，而是在反复出错中被补全
构建 Skill 的过程，本质上是一个持续的“结构化劳动”过程——包括拆解结构、定义模块、强化约束与反复调试。这些前置投入，直接决定了最终输出结果的上限与稳定性。
实验的阶段性结果
目前，通过 AI 已经可以实现基本的结构拼装能力，但在内容表达与细节控制上，仍然存在较多不稳定性。
那意味着这次实验失败了吗？不然。AI 产出仍然展现出一些明确价值：
- 输出结果更规范自律，图层结构清晰、命名标准、不再出现 Frame 1234567 和冗余隐藏层，有效降低了设计稿的“维护成本”
- 预设的 auto-layout 约束，确保了生成稿并非一张“死图”，而是具备弹性、可二次编辑的稳定结构，为人工介入提供了有力基础
- 自动应用预设的 UI 规则（如间距、色彩、组件变体），节省翻找查阅规范的时间
- 整体有效降低从 0 开始的启动成本
从设计生产力角度来看，有提升，但不是质变式的替代。对于熟悉设计系统的人来说手动拼装仍然更快更可控，AI 在当前阶段的价值更多体现在降低起稿成本。

—

这次实践的核心收获并不是构建了一个“自动设计系统”，而是验证了一种新的设计工作模式：设计能力需要被结构化为组件与规则，AI 才能参与执行；而设计师的角色，也从“绘制界面”，逐渐转向“定义结构与约束，并在生成结果上做判断与优化”。