VisCtrl 指南
什么是 VisCtrl？
VisCtrl 是一个面向 AI 编程场景的轻量级视觉设计表达工具。它让用户直接画出网页结构、调整组件样式并补充功能语义，再把这些信息导出为 AI 编程工具更容易准确执行的设计资料。
VisCtrl 解决什么问题？
AI 可以快速写出网页代码，但文字很难精确描述“标题离左边多少”“两张卡片间隔多少”“手机端先显示文字还是图片”。当用户不断使用“再大一点”“向右一点”修改时，双方缺少共同的视觉坐标和结构定义。
VisCtrl 把这些模糊描述变成可见布局、明确尺寸、父子结构、响应式规则和组件语义。它不替 AI 写代码，而是减少设计意图在传递过程中的损失。
它怎样工作？
典型流程由四步组成：
- 在画布中创建页面区域并表达整体结构；
- 添加文字、图片、按钮、表单等真实组件；
- 检查电脑、平板和手机布局，并说明重要组件的功能；
- 导出设计规范、语义、视觉参考与素材，交给 AI 编程工具实施。
适合谁？
VisCtrl 适合正在用 Codex、Claude、Cursor 或其他 AI 编程工具制作网页，但发现纯文字难以表达视觉细节的人。使用者不需要会写代码，也不要求掌握完整的专业 UI 设计流程。
- 希望控制 AI 生成网页外观的产品或内容创作者；
- 需要把现有页面修改意见准确交给 AI 的用户；
- 希望给开发者或 AI 提供更明确界面说明的小团队。
VisCtrl 不是什么？
VisCtrl 不是 AI 网站生成器、托管平台、CMS、无代码发布平台或 AI 模型，也不以替代 Figma 为目标。它位于设计想法与代码实现之间，是 AI coding workflow 中的 visual control / design intent layer。
VisCtrl 输出什么？
完整 AI 交付包可以包含设计规范、机器可读的 design.json、功能语义、页面视觉参考和项目使用的素材。游客仍可使用编辑器并导出本地 .visctrl 备份；完整交付包按账号状态与额度处理。