VisCtrl 指南
如何把 VisCtrl 与 Codex 配合使用？
可以先让 Codex 根据需求建立网站初版，再用 VisCtrl 明确表达视觉修改，最后把设计规范、语义、参考图和素材交回 Codex 更新代码。VisCtrl 与 Codex 没有官方集成声明，它们通过文件和清晰上下文配合。
工作流
- 描述产品目标：告诉 Codex 页面用途、技术栈和必须保留的功能。
- 建立初版：优先形成结构清晰、可运行的网页。
- 表达视觉目标：在 VisCtrl 中安排区块、真实内容和多端效果。
- 补充语义：说明按钮、搜索、表单等组件的功能。
- 导出并实施：让 Codex 阅读 design.json、设计文档、视觉参考和素材，再修改现有代码。
- 核对：检查视觉与功能，并继续以局部设计包处理后续调整。
给 Codex 的执行说明应该强调什么？
- design.json 是尺寸、间距、结构和状态的主要机器数据；
- 原始文案和导出素材不能自行替换；
- 自由坐标必须相对于指定容器计算；
- 桌面、平板和手机规则分别实现；
- 如果代码约束与设计资料冲突，先报告冲突。
设计资料示例
{
"layoutMode": "hybrid",
"componentType": "button",
"content": "开始设计",
"semantics": { "purpose": "打开编辑器" },
"responsive": { "mobile": { "width": "100%" } }
}这是 VisCtrl 所记录信息的简化示意；实际导出字段会根据所选组件和项目而变化。
这不是官方集成
VisCtrl can be used with Codex，但本页不表示 VisCtrl 与 OpenAI 或 Codex 存在官方合作或内置连接。文件读取、代码修改和权限范围取决于用户使用的 Codex 环境。
什么时候不需要 VisCtrl？
如果修改只有明确文案替换、单个颜色值或已有设计系统中的标准组件变更，直接给 Codex 清晰指令可能已经足够。VisCtrl 更适合涉及布局、视觉关系、多端变化或多个相关属性的任务。