在用 AI 生成 UI 时，我会找那些支持上传 Design.md 的工具，比如谷歌的Stitch、国内的Paico，能在设计规范约束下生成界面，后期返工量会小很多。
这次我用Paico AI 生成了一个运营后台，输入的是一份薄荷绿主题的设计规范文件，AI 输出的后台 UI 包含仪表盘、订单、商品等页面。生成之后怎么验收和检查？这篇文章就来讨论一下能从规范文件和预览页面直接核对的内容。
一、先看 Design.md 到底规定了什么
这份文件给出了主色 #2AAD6C、页面背景 #F7FAF8、深色侧栏 #1E2E28，以及卡片、边框、图表等颜色。布局写得也明确：固定深色侧栏，右侧为可滚动的浅色内容区。默认圆角为 0.625rem，约 10px。卡片阴影带一点品牌绿色，图表使用由深到浅的薄荷绿序列。
这些规则足够确定后台的视觉方向，但还不能代替完整组件规范。比如文件没有给订单表格的行高、筛选控件的尺寸、按钮变体或表单间距定义专门的 token；"待发货""运输中"等业务状态应该用什么颜色，也没有逐项写明。上传前先划清这个范围，后面就不会把所有生成细节都算作遵循了设计系统。
二、对着页面核对，别只看首页像不像
AI 生成的后台页面里，仪表盘左侧是深绿导航，右侧浅色区域放了指标卡、年度营收趋势、渠道占比、订单状态和近期订单。订单管理页继续沿用这套结构，有状态切换、搜索、筛选、导出、新建订单和订单明细表。商品页则提供列表与卡片视图切换，能看到 SKU、库存、销量、折扣和状态。
从这些页面能确认，在大布局和主色使用上跟输入方向接近。咱们检查时可以看侧栏是否始终使用 #1E2E28 一类深色、主要操作是否保持绿色、浅色内容区和卡片能否分清层级。很多设计师或者开发者只用肉眼判断色值是不精确的，要确认具体 hex 或组件是否引用了 token，还得查看设计属性或代码。
主按钮、筛选输入框、状态标签和表格隔行是后台最容易露出不一致的地方。比如订单页的"新建订单"与商品页的操作按钮，是否用了同一套主操作样式；同一类状态标签在不同表格里，颜色和文案是否一致。这些地方最好在交付前做一次逐页检查。
三、规范没写清的状态色，AI 会自己补
订单页中，"运输中"用了蓝色，"待发货"用了黄色，"退款中"用了红色。它们有助于区分状态，但原始 Design.md 只明确了危险操作使用暖红色，并没有给每个业务状态指定语义色。规范同时要求装饰色尽量留在薄荷绿和鼠尾草绿范围内。那这里就出现了一个需要设计师拍板的问题：状态色是允许按行业习惯扩展，还是必须严格控制在现有色板？
如果是允许扩展的，那就建议在规范里补一张状态映射表，至少写明状态名称、前景色、背景色及使用场景。如果不允许扩展，就要重新检查这些蓝黄标签的对比度和识别方式，不能简单把所有状态改成同一种绿色。
另外，文件开头的结构化字段写的是 NotoSansSC，正文又写英文用 Inter、中文在不同系统用 PingFang SC 或 Microsoft YaHei。两段信息不一致，在预览里看着顺眼，不等于跨系统的字体回退已经按预期工作。所以在制作正式设计系统时，应把字体栈统一成一处可执行的规则，并检查数字、英文 SKU 和中文表头混排时的宽度。
四、界面完整，不代表业务数据可信
商品页的折扣列出现了 1000%、800%、500%、1500% 等数值。即便这是演示数据，也不能直接带进评审截图或需求文档。常见的折扣表达是"8 折"或"优惠 20%"，折扣字段究竟表示折扣率、优惠比例还是活动系数，需要先定口径，再给合理的取值范围与显示规则。
仪表盘的趋势图写着"2024 全年月度营收与订单量"。如果这个页面用于当前项目评审，也要确认年份是历史数据、默认筛选结果，还是生成时留下的占位内容。年度、金额单位、订单口径都应跟数据来源对上。Design.md 只是负责视觉规则，它不会替业务方考虑这些数字正确不正确。
所以实际验收可以先抽查三种数据：一条有单位的指标、一列有范围约束的字段、一组带时间条件的图表。发现异常后，回到字段定义和样例数据修正，再检查页面上的文案与格式。
五、上传 Design.md 前，记得补四类信息
本次案例中值得复用的方法，是输入规范与输出验收之间的对照方法。下次在准备设计系统文件时，我就会优先补下面几项：
- 业务状态：成功、处理中、警告、失败、禁用分别用什么颜色；同一状态在标签、提示和图表中怎样复用。
- 组件细节：按钮、输入框、表格、卡片的尺寸、间距、圆角和状态变体。只写"宽松""清晰"很难验收。
- 字体规则：结构化字段与文字说明保持一致，说明中文、英文、数字的字体栈和回退顺序。
- 样例数据：字段含义、单位、取值范围和日期口径。折扣、库存、营收这类数字最好给一组经过核对的样例。
等 AI 生成后再按页面核对一次：先看整体布局和颜色，再看跨页面组件，最后检查状态语义和数据。目前看预览已经能把一个电商后台的主要页面与信息层级铺出来；订单状态色、字体冲突和折扣异常，在提醒我们要注意是否能最终交付。