AI生成界面

元信息

• 目标：理解 prompt→UI 组件代码的生成范式——prompt 是新的界面描述语言、LLM 是新的"渲染器"；认清生成物质量的分界在使用者能否看懂，前面各周知识从"怎么写"转变为"怎么审"
• 关键概念：prompt、生成式UI、代码审查、组件契约、设计系统、护栏
• 关联阶段：cp4
• 常见误区：以为生成代码的质量取决于模型强弱（分界线在使用者：能看懂、能审查、能改的代码才属于你）；以为 AI 时代前面学的底层知识过时了（DOM/级联/组件契约正是审查生成物的判据）；以为自由生成比约束生成更强大（设计系统+组件库作护栏的约束生成更可靠）

什么是 AI 生成界面

用自然语言 prompt 直接生成 UI 组件代码乃至完整界面——prompt 是新的"界面描述语言"，LLM 是新的"渲染器"。

元问题：质量取决于你能否看懂

生成物是一次性的还是可维护的，分界线不在模型，而在使用者：你能看懂、能审查、能改的代码，才真正属于你。这呼应jQuery 一篇的核心观点——"接入能力"：库/工具再强，边界是开发者自身对底层原理的掌握。

• 看得懂 DOM 与事件，才能判断生成代码的结构是否合理
• 看得懂 CSS 级联，才能修复生成样式"打架"的根因
• 看得懂组件契约（props/events），才能把生成的片段收编为自己的组件

换言之，AI 生成界面的时代，前面十几周的知识不是过时了，而是从"怎么写"变成了"怎么审"。

教学场景中的典型形态

• prompt → 单个组件代码（表单、卡片、导航），人工收编进项目
• 设计稿/截图 → 前端代码（vision 模型 + 组件库约束）
• 对话式迭代界面：描述 → 预览 → 修改，开发循环被压缩

值得讨论的边界

• 生成的代码谁来负责：可访问性、语义化、性能这些"看不见的质量"最容易缺失
• 从"手写代码"到"审查代码"，工程师的核心技能迁移到了哪里？
• 设计系统 + 组件库作为约束生成的"护栏"，为何比自由生成更可靠