Mihua Design 生成框架：怎样适配企业组件体系？
范米花儿
三栖 Designer
👋 嗨，我是范米花儿。前面几篇，我们依次讲了页面生成为什么不等于产品生成、怎样建立稳定的产品事实，以及组件和规则怎样进入生成过程。
本篇继续讨论 Mihua Design 的生成框架怎样接入企业现有技术栈、组件和设计规范。重点回答四个问题：技术栈不同能否接入、企业组件如何进入生成、持续生成如何避免偏离规范，以及缺少组件时如何创建并回流。
一、技术栈不同，还能接入吗？
可以。生成框架需要保留的是产品层的事实与页面任务，实现层则根据企业技术栈重新适配。换句话说，业务结构不需要推倒重来，但组件名称、接口和工程规则要换成项目真实使用的方式。
| 继续保留 | 重新适配 |
|---|---|
| 页面角色与主要任务 | 组件名称和导入方式 |
| 业务对象、状态与操作结果 | Props、Events、Slots 与状态模型 |
| 主视图、辅助视图与页面关系 | 表单、弹层、表格和布局组合 |
| 关键流程与验收要求 | Token、响应式、构建与验证方式 |
Mihua Design 已经分别验证过 shadcn、Ant Design React 和 Ant Design Vue。变化的是组件实现和工程入口，不变的是页面任务、业务状态和验收标准。
二、企业自己的组件和样式，怎样接入？
接入方式取决于企业手里已有的资产。已有前端组件库时，重点是把代码能力整理成 AI 可读取的组件目录；主要资产在 Figma 时，则需要先补齐设计语义，再生成工程资产。
路径一：从现有前端组件进入
| 企业已有资产 | 需要整理出的信息 |
|---|---|
| 组件代码与类型 | Props、Events、状态和组合方式 |
| 组件文档 | 适用场景、避免方式和关键差异 |
| 设计 Token | 颜色、间距、圆角、密度和语义状态 |
| 业务组件 | 页面任务、依赖关系和复用边界 |
路径二：从 Figma 组件进入
- 先整理颜色、间距、字号、圆角和密度等 Token。
- 补齐组件状态、Variant、交互语义和命名。
- 生成组件代码、类型、文档和使用规则。
- 放进真实页面验证布局、状态和响应式表现。
- 把验证通过的边界写回规则与组件索引。
在 Arco 适配中，这套流程覆盖了 64 类组件、67 个前端组件和 12 个后台页面。重点不在数量本身，而在于从设计资产到工程能力之间形成可验证的转换链。
| Figma 中的信息 | 进入工程后的资产 |
|---|---|
| 颜色、间距、字号、圆角 | Token 与主题变量 |
| Variant、状态与命名 | 组件 API、类型与状态模型 |
| 页面组合与布局 | 业务组件和页面模板 |
| 交互说明与使用边界 | 文档、规则、示例与测试 |
一次真实的 Arco 适配记录
三、页面持续生成，会不会偏离规范？
不会让模型无限自由发挥。组件目录、Token 和规则定义了可用能力，生成过程再通过页面清单和运行结果做前后校验。
| 01 生成前 | 02 生成中 | 03 生成后 |
|---|---|---|
| 确定页面任务与组件边界 | 按清单选择、组合组件并绑定状态 | 核对代码、运行结果与验收要求 |
| 阶段 | 主要依据 | 系统处理 | 阶段输出 |
|---|---|---|---|
| 生成前 | 产品事实、页面清单、组件文档和 Rules | 提取页面任务、主表达、多端要求与必需能力 | 页面生成清单 |
| 生成中 | 可用组件、Token 与项目规则 | 选择并组合组件，保留来源，绑定状态与交互 | 可运行页面 |
| 生成后 | 真实代码、运行结果和验收标准 | 检查组件来源、业务区域、交互、流程、视觉与多端表现 | 通过门禁或形成修复项 |
这样做的目的，是让每次生成都能解释组件从哪里来、为什么这样组合，以及最后是否真正符合业务和设计规范。
四、现有组件不够，AI 能不能自己创建并回流？
可以，但新组件不能一生成就直接进入公共组件库。它要先作为项目级组件在真实页面中接受验证，再决定是否值得复用和回流。
| 现有能力满足 | 现有能力不足 |
|---|---|
| 直接复用已有组件或组合 | 创建项目级组件，经过页面验证、文档和测试后再回流 |
- 先搜索现有组件和组合，避免重复创建。
- 确实不满足时，由 AI 创建项目级组件。
- 在真实页面验证状态、交互和响应式表现。
- 评估是否具有跨页面、跨业务的复用价值。
- 补齐 API、文档、示例、规则、测试和索引，通过门禁后回流组件库。
结语
生成框架真正要解决的，不是套用某一套固定组件，而是让不同技术栈、已有组件、Figma 资产和企业规则都能进入同一条可追踪、可验证的生成链。Mihua Design 把产品事实留在上层，把实现方式交给适配层，再通过规则与门禁保证持续生成不会失控。