VisCtrl 指南
AI 做网页时，怎样保留对设计的控制？
把 AI 当作代码实现者，同时保留一份由你控制的视觉设计事实来源。用它记录区块、组件、尺寸、间距、响应式规则和功能语义，再要求 AI 按这些信息更新代码。
为什么需要视觉控制层？
Codex、Claude、Cursor 等工具可以理解代码和文字要求，但用户的视觉判断常常发生在看到页面之后。独立视觉层让用户先明确“目标是什么样”，再把结果交给实现工具。
适用场景
- 为产品官网调整 Hero、功能区和 CTA；
- 把桌面页面整理成自然的平板和手机布局；
- 修改后台或多栏 Web 界面的结构；
- 为导航、搜索、表单和按钮补充明确功能；
- 只导出一个需要修改的区块，避免扩大代码变更范围。
基本流程
- 让 AI 建立可运行初版。
- 在 VisCtrl 中维护目标视觉。
- 补充真实素材和组件功能。
- 导出完整或单区块交付资料。
- 由 AI 修改代码并报告冲突。
- 对照预览继续微调。
当前边界
VisCtrl 不运行复杂应用、连接代码仓库、托管成品网站或替代业务测试。对动态系统，它提供设计目标，而不是完整复制运行时状态。