VisCtrl 指南
怎样准确告诉 AI 网页应该长什么样？
只用文字提示很难准确表达网页的尺寸、间距、层级和相对位置。更可靠的方式是同时提供视觉布局、结构化参数、真实文案、组件功能语义和每个设备的最终规则。
为什么 Prompt 容易产生歧义？
“按钮大一点”没有说明目标宽高，“留白多一点”没有说明是内边距、外边距还是组件间距，“图片放右边”也没有说明父容器、比例和手机端顺序。AI 只能根据上下文猜测，而不同实现都可能符合这句话。
截图为什么仍然不够？
截图能说明大致外观，但通常不能可靠表达像素尺寸、隐藏状态、组件父子关系、交互目的和响应式变化。截图还可能受缩放、裁剪和字体环境影响。它适合作为视觉参考，不适合单独承担全部实现规则。
一份更明确的设计说明应包含什么？
- 页面与区块的父子结构；
- 组件的实际内容、位置、宽高、颜色、字体和间距；
- 布局模式与坐标参考容器；
- 按钮、输入框等控件的功能语义；
- 电脑、平板和手机端的最终尺寸、顺序和显示状态；
- 实际图片、图标、字体和其他素材。
推荐步骤
- 先用一句话说明页面目标和用户任务。
- 在视觉画布中确定区块与组件关系。
- 使用真实文案与素材，不让 AI 猜占位内容。
- 为关键操作补充“这个按钮做什么”。
- 分别检查多端布局。
- 把结构化资料与截图一起交给 AI，并要求报告冲突。
一个简化示例
组件：主操作按钮
文字：开始设计
父级：Hero 内容组
尺寸：140 × 30px
功能：打开 VisCtrl 编辑器
手机端：宽度 100%，排列顺序 4这是 VisCtrl 所记录信息的简化示意；实际导出字段会根据所选组件和项目而变化。
局限
结构化设计资料仍不能保证任意 AI、任意代码库都一次完成。现有框架约束、字体资源、浏览器差异和代码质量都会影响结果。实现后仍应对照视觉参考进行检查。