企业官网建设流程全解析

界面生成先过设计系统的静态检查

模型生成 UI 代码时，最常见的问题不是语法错误，而是悄悄绕开设计系统：把颜色、间距写成字面量，或引入不存在的组件属性。Prompt 能提示规范，却不能替代检查。我的做法是把生成结果当作待审补丁，先过 AST 和类型检查，再进入人工评审。

规则要围绕团队真正能维护的约束来写。例如只禁止组件源码里出现硬编码颜色，而测试夹具和图表数据可以豁免：

import { types as t } from '@babel/core'; const hex = /^#(?:[\da-f]{3}|[\da-f]{6})$/i; export default () => ({ visitor: { StringLiteral(path: { node: t.StringLiteral; buildCodeFrameError: (m: string) => Error }) { if (hex.test(path.node.value)) { throw path.buildCodeFrameError('请使用语义化颜色 Token，而非字面量颜色。'); } } } });

不要把失败结果直接回灌模型无限重试。给出文件、行号和规则名，设定有限次数；仍不符合时转人工。AST 只能检查结构，视觉一致性、可访问性和产品语义仍需要人来判断。