可视化网页布局设计
在画布中绘制和调整页面区域，再直接放置组件，表达目标页面结构。
核心产品能力
用视觉方式准确表达设计意图
VisCtrl 是用于帮助用户通过视觉方式向 AI 准确表达网页设计意图的工具。它记录用户希望得到的页面设计，并把这些设计信息整理成可执行的开发上下文。
VisCtrl 是什么
VisCtrl 在设计想法与代码实现之间提供一个专注的可视化画布。用户直接控制目标效果，正式网站仍由 AI 编程工具或开发者实现。
核心能力
网页组件编辑
编辑真实的文字、按钮、图片、图标、卡片和输入组件等内容，而不是只做抽象描述。
精确视觉控制
设置尺寸、位置、间距、颜色、字体、边框、圆角和不透明度等已支持的设计属性。
图层与父子结构
在页面图层中管理区块、组件、编组以及父子关系。
多端响应式设计
在同一页面设计基础上，分别生成并调整电脑、平板和手机端效果。
预览与设计检查
打开不含编辑辅助元素的网页预览，并在交付前检查设计问题。
结构化设计交付
导出人类可读的设计规范、机器可读的 design.json 和 AI Instructions。
完整 AI 设计交付包
把所选设计文档、视觉参考、功能语义和可用项目素材整理进一个 ZIP。
本地项目备份
无需账号即可导出 .visctrl 备份，方便用户自行保管和再次导入。
简短使用流程
- 创建本地项目。
- 在画布中完成页面设计。
- 调整布局、真实内容与视觉样式。
- 检查多端页面和设计问题。
- 导出 AI 设计交付包。
- 把导出资料交给 Codex、Claude、Cursor 等 AI 编程工具实现。
完整操作说明与工作流请查看 使用指南页面.
从你希望 AI 实现的页面开始
开始设计把视觉意图变成可执行的开发上下文
无需登录即可在本地开始设计。
开始设计