1. 用 JSON Schema 定义组件规格，props 类型、枚举与必填约束如何驱动运行时校验、文档生成与 AI 生成约束？
问题
用 JSON Schema 定义组件规格时，props 的类型、枚举与必填约束是如何同时驱动运行时校验、文档生成与 AI 生成约束的？
考察点
- JSON Schema 作为单一事实源描述组件 props 契约
- 类型、枚举、必填约束的声明方式与校验语义
- 校验器、文档生成器与 AI 提示词三路消费方的协同
答案
JSON Schema 用 type（string/number/boolean/object/array）、enum、required 等关键字把组件 props 契约声明式地描述出来，这份规格成为"单一事实源"，可被多个消费方复用。运行时侧，前端用 Ajv 或 Zod（通过 zod-to-json-schema 互转）编译 schema 校验传入的 props，非法值在渲染前被拦截，开发环境还能给出精确的错误路径；文档侧，遍历 schema 的 properties 自动生成 Storybook controls、API 表格与 props 类型提示，保证文档与实现永不漂移；AI 侧，把 schema 序列化进 prompt，让模型只能产出符合契约的 props 与调用方式，显著抑制幻觉字段。工程上通常将 schema 收敛为组件库公共元数据，一次定义、多处消费，实现"校验、文档、生成"三处口径一致。
解析
本题的得分点是"单一事实源"思维：传统做法把类型（TS）、文档（MDX）、校验（手写）分散在三处，必然漂移；JSON Schema 让一份声明式契约同时喂给校验器、文档生成器与 AI 提示词，正是 Spec-Driven UI 的核心骨架。回答时按"运行时校验、文档生成、AI 约束"三条消费路径展开即可。
示例代码
const buttonSpec = {
type: "object",
additionalProperties: false,
properties: {
variant: { type: "string", enum: ["primary", "secondary", "ghost"] },
disabled: { type: "boolean", default: false },
label: { type: "string", minLength: 1 },
},
required: ["label"],
};
import Ajv from "ajv";
const validate = new Ajv().compile(buttonSpec); // 运行时校验
// 文档侧：遍历 properties 生成 Storybook controls 与 API 表格
// AI 侧：将 buttonSpec 注入 prompt，约束模型只能产出契约内的 props