MarkupGen 中的 AI：从代码生成到质量评分

MarkupGen 中的 AI 并不是单一功能——它贯穿了整个工作流的三个阶段：根据设计稿构建代码、评估输出质量，以及在结果不够准确时给出改进建议。这篇文章会逐一介绍这三层能力，以及它们为什么是为了支撑开发者的判断力而设计的，而不是要取代它。

根据设计稿的结构构建代码

在第一阶段，AI 并不是从截图"重新画出"设计稿——它读取的是 Figma 插件传来的真实结构：Auto Layout、间距、图层层级、缩放约束。基于这些信息，AI 会直接按照这套结构生成 HTML/CSS，而不是逐像素猜测：

• Auto Layout 属性（方向、间距、内边距、对齐方式）会映射为等效的 CSS Flexbox 规则。
• 布局的缩放约束会转化为响应式断点，而不是单一的固定宽度页面。
• 输出会优先使用有意义的 HTML 元素，而不是深层嵌套、毫无标签的 <div>。

正因为是基于结构构建，而不是从图片猜测，结果才能保留原始设计稿的层级和间距——而不是那种表面看起来"差不多"，但底层 CSS 完全是另一回事的代码。

为任务选择合适的 AI 模型

在选择模型会产生实际影响的场景中——比如在评估之后重新生成代码时——MarkupGen 允许你自行选择 AI 模型。目前提供两档：一个速度快、成本低的模型，适合中小型设计稿；以及一个质量更高的模型，适合组件更复杂的大型设计稿。对于没有手动选择模型的账户，系统会根据当前套餐自动选用合适的模型，在速度和成本之间取得平衡，无需任何额外配置。

自动化输出质量评分

代码生成后，AI 会将实时预览的截图与原始设计稿进行比对，并按 1 到 10 分给出匹配程度评分。这不是一个抽象的数字——它还附带详细的评估说明，指出哪些地方匹配、哪些地方有偏差，让你第一时间知道这次导出是已经可以上线，还是仍需调整。一旦评分达到接近满分的水准，系统就会认为已经没有值得 AI 继续修复的地方，并隐藏不必要的重新生成建议。

反馈闭环：分析与重新生成

如果导出结果不够理想，MarkupGen 不会只给你一个分数就此打住。评估视图会将原始设计稿和实时预览并排对比，支持缩放查看细节，生成具体的改进建议，并且你可以在点击"根据此修改重新生成"之前先编辑这条建议——这样 AI 就会围绕你真正想要的反馈来重建代码，而不是随机地从头再来一次。

为什么这很重要

这三层能力都指向同一个目标：把从设计到代码之间机械式的转换工作去掉，让开发者的精力真正花在需要判断力的地方——交互细节、边界情况，以及把结果整合进更大的代码库中。如果你想在自己的设计稿上体验这三层能力，可以免费试用。