7.4
深览指数
科技人人都是产品经理·阿基拉de_Akir··AI 生成
前端与AI工程师：把语义约束写进AI的生成上下文
本文提出Schema-As-Code框架，旨在解决AI生成界面时“语法正确、语义错误”的问题。作者指出，现有工具链（TypeScript、ESLint、组件库）仅保障代码“写得对”，不保障界面“表达的语义对”，导致“余额不足”被渲染成红色报警等语义漂移。框架将设计规范编译为Prompt前缀、JSON Schema和CI规则三项机器可执行资产，在生成、校验、合入三个环节拦截语义偏差。文章以工程师视角，详细阐述了其角色定位、痛点、消费链路及与设计师的协作关系，是一套面向AI工程化场景的语义治理方法论。适合对AI代码生成质量、前端工程化、设计系统有一定了解，并关注如何将设计意图转化为机器可执行约束的工程师阅读。原文 ↗
核心观点
- ▍AI生成界面存在“伪正确”问题：语法通过编译、视觉符合规范，但业务语义表达错误。现有工具链（TypeScript、ESLint、组件库）只保障代码“写得对”，不保障代码“表达的语义对”。
- ▍Schema-As-Code框架通过在语义层建立机器可读的约束契约（Prompt前缀、JSON Schema、CI规则），在生成、校验、合入三个环节拦截语义漂移，是现有AI工具的上游约束层。
- 01文章列举了三个工程侧常见的语义漂移痛点：AI生成界面视觉对了语义错了（如“余额不足”用红色报警）、语义零校验导致漂移上线后才暴露（如“删除账户”按钮无二次确认）、规范更新后AI不知道，需人工复述。
- 02框架的核心产出是三项资产：Prompt前缀（生成前注入AI上下文的约束文本）、JSON Schema（开发中校验组件Props的机器规则）、CI规则（提交时流水线静态检查，违反即阻断）。
- 03YAML契约是机器可读的语义规则来源，包含7个字段（intent_id, description, version, semantic_tokens等），通过编译管线自动翻译为前述三项资产，供不同角色消费。
- 04文章给出了一个具体的协作示例：契约v1.2.0更新“账户注销”语义后，Prompt前缀自动换版，AI工程师注入新版前缀后，AI输出自动区分“可恢复注销”与“永久删除”。
反方 / 局限
- — 框架不替代现有工具（组件库、TypeScript、ESLint、单元测试、人工Review），而是作为上游约束层存在。这意味着，如果现有工具链本身不完善，或团队无法有效维护YAML契约，该框架的落地效果会打折扣。
- — 框架的“语义快照”和“模式诊断”阶段依赖人工观察和结构化记录，对于AI生成的界面，其诊断效率和覆盖度可能受限于观察者的经验。
22 分钟 · 5 卡片 · 14 资料
读原文 →