你脑子里有个页面的大致样子，或者有个产品的构思。两种方式都能让 Agent 帮你变成画面。
自己使用。打开应用，描述你要什么页面：「画一个电商首页，顶部搜索栏，中间轮播图，下面商品网格。」应用内的 Agent 直接出一版可预览的原型。
在 Agent 对话里带着素材说。你手头有一份 PRD（AI Doc 文档），想在对话里直接基于它生成原型。@ 引用这份 PRD，告诉 Agent「基于需求文档生成页面原型」。Agent 读完文档，@ 调用原型设计应用生成设计稿。你还可以 @ AI Canvas 生成的品牌图，让 Agent 把这些素材综合进设计里。
让 Codex @ 调用原型设计，就像让 Codex 拥有了 Claude design 的能力。
应用均使用你已有的 Agent 订阅，不需要额外付费。
从画面到代码：设计和开发连起来
原型调好了，下一步往往是开发。
你在 Claude Code 的对话框里 @ 引用这份原型，告诉它「基于这个原型开发前端页面，用 React 组件实现」。原型成了代码的上下文。
反过来也成立：你在原型设计应用里改了某个组件的结构，切到 Agent 对话，Agent 基于更新后的原型调整对应代码。
这个联动也适用于文档。你在 Agent 对话里 @ 引用调好的原型，让 Agent 调用 AI Doc 生成一份前端开发文档。设计师看原型，开发看文档，两边基于同一份设计产出。
