AI 友好组件的建设及使用

一 AI 友好组件核心概念

1.1核心定义

1.2链路闭环

作为核心枢纽，AI 友好组件打通了「标准化资产 — 智能化调度 — 工程化落地（IDE）」的三方链路，实现了从设计定义到代码交付的自动化闭环。

对设计师来说，不再需要手动绘制或标注每个组件的属性和间距，AI 生成即合规，减少设计成本。

对代码交付来说，设计稿结构与代码结构直接映射，D2C 还原度显著提升，研发修改时间缩短。

「AI 友好组件」打通了 AI 对设计稿的智能调度与精准还原全流程，是连接设计意图与代码落地的关键资产，其特点围绕「设计稿调度与代码化还原」展开：

2.1命名注释规范

语义「清晰一致」——决定 AI 能零误差调取「标准设计组件」，与代码组件精准匹配。

2.2全局样式

Design Token 映射机制——AI 可关联设计样式与代码变量，实现语义传达和视觉还原。

2.3规范生成

规范、属性和插槽——以三层「约束 + 开放」机制，构建「合规且灵活」的 AI 组件生成框架。

2.4层级结构

从「视觉层级」转向「逻辑层级」——遵循「先组织容器、后填充内容」的原则，通过容器布局、层级嵌套和精简结构，构建贴合前端工程逻辑的页面框架。