Claude Desktop 的 Imagine 模块——一份藏在 prompt 里的视觉设计系统
写在前面 Claude Desktop 里 “show me how X works” 这种能直接出一张图的体验，背后到底是怎么实现的？很多人第一反应可能是去找渲染器，或者一段调用 mermaid / D3 的中间层。其实不是——撑起这个功能的核心是一份近千行的 prompt：模型负责生成每一个坐标和每一条 <path>，prompt 负责告诉它怎么取舍。 换句话说，“画图"这件事在 Claude Desktop 里是模型 + 一份非常厚的系统提示词的组合。prompt 决定了什么时候用 SVG、什么时候用 mermaid、盒子至少留多宽、箭头从哪儿绕过去，连色板都是固定的 9 条 ramp。 这篇文章过一遍这套设计里我觉得最值得抄走的几个决定。 一、read_me(modules)——把 prompt 切成可按需加载的模块 如果只挂一份完整的 prompt，光视觉部分就要烧掉好几千 token 的上下文。Anthropic 选了另一条路：在 show_widget 工具旁边再挂一个 read_me 工具，让模型先决定这次任务需要哪几块设计指南，再把它们一次性读进来。 工具定义大致长这样（精简过）： { name: "read_me", description: "Returns required context for show_widget...", inputSchema: { type: "object", properties: { modules: { type: "array", items: { enum: ["diagram","mockup","interactive","data_viz","art","chart","elicitation"] } }, platform: { type: "string", enum: ["mobile","desktop","unknown"] } } } } 而顶层 prompt（变量 smr）里第一段就告诉模型这套规矩： Call read_me again with the modules parameter to load detailed guidance: ...