让 AI 沿着设计系统构建页面

小店广告已有一套设计规范，也积累了不少组件和页面。让 AI 参与新需求时，我们需要解决一个问题：怎样让它找到并用好这些已有实现，让新页面延续产品原有的样式和使用方式？

XD Ad UI 为此把规范整理成可复用的代码，并提供两种使用入口：工作台让人浏览和选择组件、模块与页面；Skill 为 Agent 提供使用规则和构建步骤。

项目的核心思路是：把确定的规范和通用行为做成可复用资产，让 Agent 先读取已有实现，再根据业务需求选择、组合和补充。设计师则把更多注意力放在任务是否合理、信息如何组织，以及新问题需要怎样解决上。

01　把设计规范落实到代码

第一步是把设计规范落实为代码。项目以全域通设计组件库为依据，将颜色、字体、圆角和阴影整理成统一变量，并在组件和布局中实现对应规格。新页面可以直接使用这些约定。

例如，颜色按用途命名：主题、成功、错误、警告、正文、辅助文字。页面需要提示错误时使用错误色，需要强调主要操作时使用主题色。Agent 可以根据用途选颜色，减少重新猜测数值带来的偏差。

组件把这些规范变成可直接使用的控件。以按钮为例，主次样式、尺寸，以及悬停、按下、禁用、焦点和加载状态，都由组件统一实现。业务页面只需定义按钮做什么、何时可用，以及操作后的反馈。

页面外框也由公共布局统一处理，包括顶部导航、侧边栏、内容宽度和间距。例如，侧边栏会随视口宽度切换形态。新页面沿用这些布局，就能把设计工作集中在业务内容上。

这样，已经明确的设计决定有了可调用的实现，Agent 在构建新页面时也有了具体依据。

02　把页面经验组织成可复用的资产

按钮和输入框解决的是单个控件的问题，业务页面还需要组织多个控件之间的关系。因此，我们把可复用的代码分成三层：基础组件、业务模块和完整页面。

基础组件提供按钮、输入、选择、提示等通用能力。业务模块把相关组件组合起来，例如数据概览、趋势图和宽表格。完整页面则保留这些模块如何排列、操作如何衔接，以及状态如何变化。

三段表格就是一个业务模块。广告管理需要同时查看对象、指标和操作：左侧固定对象信息，中间横向滚动查看指标，右侧固定操作入口。模块统一处理滚动、阴影和选择行为，业务页面继续定义自己的列、数据与操作。

完整页面保留了更具体的业务经验，例如商品托管、直播创建和订单详情。新需求与已有场景接近时，可以沿用页面结构，调整字段和操作；差异较大时，则选取适用模块，重新组织业务区域。

分层也明确了复用的边界：跨页面稳定存在的能力进入公共组件或模块；只服务某个任务的流程和规则，先保留在具体页面中。

03　让资产能够被找到、理解和调用

有了代码，还需要让人和 Agent 找得到、用得对。例如，面对“创建一场直播投放”的需求，Agent 要知道哪个页面适用、源码在哪里、哪些部分可以调整。资产目录和使用规则负责提供这些线索。

资产工作台是浏览这些实现的可视化入口。使用者可以查看组件、模块和页面的效果与示例，也可以按商品托管、直播投放、资金、工具等业务分类查找页面，了解用途和可调整内容。

选中资产后，用户可以复制它的用途、调用方式、源码位置和使用示例，再附上本次需求交给 Agent。页面还会提供路由和复用要求。用户也可以只描述需求，由 Agent 查阅目录，选择适用实现。

预览帮助选择，目录帮助定位，规则帮助判断，源码承载实现。几类信息共同说明一份资产适用于什么场景，以及怎样把它用进新页面。

04　用 Skill 串起一次完整的页面构建

Skill 把资产目录、设计规则、源码和交付工具串成一套工作步骤。需求可以来自文字、产品需求文档（PRD）、截图或工作台复制的信息。Agent 先理清业务对象、操作和状态，再决定复用哪些内容、补充哪些实现。

其中一项关键要求是：实现前先读相关源码。组件支持哪些状态、表格如何滚动、布局如何变化，都要从实际实现中确认。交付时还要说明读取和复用了什么，以及为什么需要新增，方便评审。

用一个假设需求说明：“为商品托管页增加一个金额指标。”Agent 先确认指标含义和统计口径，再读取原页面与表格规则，确定新列的位置、金额格式、对齐和排序方式。实现后还要检查固定列、汇总与空状态，确认新增内容没有影响原有使用方式。

交付时先构建实际的 React 页面，再从同一份实现导出 HTML 展示文件。HTML 便于阅读和分享；筛选、弹窗、提交及状态切换，需要在运行中的页面里验收。代码能构建、画面正确、操作符合预期，是三项分别检查的内容。

项目还提供 Skill 资产打包方式，并将基础组件和业务模块做成可安装的代码包。接入其他项目时，可以阅读参考源码、调用组件包，再在目标项目中完成业务实现。

05　稳定设计语言，让结构回应需求

新业务未必有现成模板。已有页面不能完整承载任务时，Agent 可以依据需求和设计规范，构建新的页面结构、局部组件和必要交互。

需要延续的是颜色、字体、状态含义、控件行为，以及金额和日期格式等共同规范。业务内容如何分组、任务分几步、信息怎样关联，则要根据当前需求重新判断。

例如，新的配置流程可以沿用输入、选择、校验和反馈方式，同时围绕新的业务对象安排步骤。如果现有组件缺少必要能力，可以在目标项目中补充，并验证它是否符合规范、能否完成任务。

模板提供成熟的组织方式，帮助 Agent 开始设计。遇到新的图表、拖拽或多步骤任务时，仍应先理解任务，再选择合适的结构和交互。

新增能力先服务当前需求；当它在多个场景中表现出稳定共性，再纳入公共组件、模块或规则，供后续项目复用。

06　设计交付，也包含构建方法

这套项目连接了三件事：把设计规范做成代码，说明这些代码适合什么场景，再用工作台和 Skill 支持页面构建。Agent 因此有了查找实现、判断用法和完成交付的依据。

其中需要把握的，是哪些决定可以复用，哪些仍需判断。明确的视觉规范和通用行为由公共实现延续；业务目标、信息组织和新交互，则由人和 Agent 结合具体任务设计。

设计交付由此包含页面方案，也包含可复用的组件、选择规则和构建流程。设计师既要判断当前需求是否被解决，也要把可以继续使用的经验留给后续项目。