我试了 OpenDesign:它不是画图软件,更像一个 AI 设计工作台

我一开始对 OpenDesign 的理解有点偏。

看到它能生成网页、PPT、App 原型、海报、数据看板，很容易把它归到「AI 版 Figma」或者「网页生成器」那一类。这个判断不能说错，但有点浅。

真正上手之后，我更愿意把它理解成一个 AI 设计工作台。

你不是打开一块空白画布，然后让 AI 随便画个页面。更准确的动作是：先告诉它你要做什么类型的产物、给谁看、需要多少页面、有什么限制，再让它进入对应的设计流程。

这件事很关键。

因为 OpenDesign 的好坏，不完全取决于模型聪不聪明，而取决于你有没有把任务放进正确的 use case 里。

它的入口不是画布，而是任务

OpenDesign 是一个开源的 AI 设计工具。它可以把 Codex、Claude Code、Cursor、Gemini 这类 agent 当成设计引擎，用来生成网页原型、幻灯片、移动端界面、数据看板、营销图文等内容。

但它和传统设计软件的入口不一样。

传统设计软件的入口是画布、图层、组件。OpenDesign 的入口更像一个任务分诊台：你先选择要做的东西，再补充目标用户、品牌方向、页面数量和限制条件。它会根据这些信息，把需求送进不同的工作流。

所以学习 OpenDesign，第一步不是研究源码，也不是一上来问「怎么做得更漂亮」。

第一步应该是理解：它到底适合做哪些事。

目前比较常见的 use case，大概可以分成几类：

• 网页原型：产品官网、SaaS landing page、工具站、文档页、定价页。
• 移动 App 原型：登录流程、onboarding、首页、详情页、收藏页。
• 数据看板：运营后台、实时数据页、项目状态页、财务报表。
• 汇报材料：weekly update、网页 PPT、项目进展、产品发布 deck。
• 产品文档：PRD、会议纪要、OKR、工程 runbook。
• 营销内容：社媒 carousel、海报、邮件模板、电子指南。

你会发现，它覆盖的不是「设计师的全部工作」，而是一批非常具体的数字产物。

换句话说，OpenDesign 的核心不是画图，而是把一个模糊需求变成可展示、可讨论、可继续修改的 artifact。

第一个坑：你以为在做单页，它以为在做产品

我这次拿了一个很典型的新手练习题：

做一个 AI 工具导航站的 landing page，面向独立开发者和内容创作者，核心内容包括搜索、分类、收藏、每日推荐，风格参考 Linear + 少数派，输出一个桌面端和移动端都适配的网页原型。

这个需求看起来已经很清楚了。但一放进 OpenDesign，就会遇到一个问题：

它到底是一个 landing page，还是一个带功能的多页面产品原型？

搜索、分类、收藏、每日推荐，这些已经不只是营销页模块了。它们更像一个产品的核心功能。OpenDesign 很自然地把它理解成「我要做一个可以演示的网页原型」，于是除了入口页，还补出了分类搜索页、每日推荐页、收藏工作台。

这不是坏事。

但它说明了一件事：在 OpenDesign 里，「产物类型」和「数量约束」非常重要。

如果你只想要单页，就要明确说：

只做单页 landing page，不要创建子页面。

如果你想要多页面原型，就要明确说：

入口是 landing page，另外包含分类搜索、每日推荐、收藏工作台。

这就是 OpenDesign 入门第一课：不要只描述灵感，要描述产物边界。

表单不是手续，是方向盘

OpenDesign 开始设计前，会先问几个问题。新手最容易在这里随便填，后面生成出来的东西就开始跑偏。

第一项是「What should I build?」

如果你要做网页原型，选 Prototype。如果你要做数据看板、交互工具、实时页面，选 Live artifact。如果你要做 PPT，选 Slide deck。如果你要做海报、社媒图、封面图，选 Image。

这一步不是形式，它决定了 OpenDesign 用什么工作流理解你的需求。

第二项是「Who is this for?」

这里不要写「所有人」。越具体越好。

比如这次可以写：

独立开发者、内容创作者、AI 工具爱好者，他们需要快速发现、比较和收藏适合自己工作流的 AI 工具。

这句话比「普通用户」有用得多。因为它会影响信息密度、文案语气、功能排序和视觉风格。

第三项是「Brand context」。

新手可以先选「Pick a direction for me」，让它自己给方向。但如果你已经有参考，最好直接说出来。

比如：

风格参考 Linear 的克制 SaaS 感，以及少数派的中文科技媒体编辑感。

这里有个小坑：只写「Linear + 少数派」还不够。模型可能只抓到 Linear 的浅色、圆角、干净布局，却没有抓到少数派那种中文编辑感、精选感和内容判断感。

更好的写法，是把风格拆开：

Linear：克制、清爽、SaaS、低装饰。 少数派：中文科技媒体、精选推荐、编辑判断、信息可信。

第四项是「Roughly how much?」

这里要写清楚页面数量。

如果你想做单页：

1 个单页 landing page，包含首屏、搜索入口、分类模块、每日推荐、收藏能力介绍、移动端适配。

如果你想做多页面：

1 个 landing page + 3 个子页面：分类搜索、每日推荐、收藏工作台；桌面端和移动端都适配。

第五项是「Any important constraints?」

这里最好写「不要什么」。

比如：

不要泛 AI 风渐变，不要空洞营销话术，不要做成只有视觉效果的模板。中文界面。移动端可用。搜索、分类、收藏、每日推荐都要有清楚入口。

很多时候，限制条件比需求本身更能决定成品质量。

这次结果的问题，反而很有教学价值

这次 OpenDesign 输出了一个入口文件 `retry-index.html`，还配套生成了分类搜索、每日推荐、收藏工作台几个页面，并共享 `retry-styles.css` 和 `retry-app.js`。

从结构上看，它是合格的。

首页承担 landing page 的作用，子页面分别承接功能演示。搜索、分类、收藏、每日推荐这些核心内容都被拆出来了，脚本里也有搜索、tab 切换、收藏按钮等基础交互。

但从原始 prompt 来看，它也暴露了一个典型问题：

我说的是 landing page，但我给的内容更像产品功能列表。

于是 OpenDesign 做了一个小型多页面产品原型，而不是严格意义上的单页 landing page。

这其实是一次很好的入门案例。它告诉我们，OpenDesign 并不是「生成错了」，而是根据需求里的功能信号，主动扩展了产物范围。

如果我的目标是真正的单页 landing page，prompt 应该改成这样：

做一个 AI 工具导航站的单页 landing page，不要创建子页面。 面向独立开发者和内容创作者。 页面需要在一个首页里展示：搜索入口、工具分类、收藏能力、每日推荐模块。 风格参考 Linear 的克制 SaaS 感 + 少数派的中文科技媒体编辑感。 输出一个桌面端和移动端都适配的网页原型。 要求首页搜索框、分类卡片、每日推荐卡片、收藏按钮都放在同一个页面中。 不要生成分类页、每日推荐页、收藏页。

如果目标是多页面原型，prompt 应该改成这样：

做一个 AI 工具导航站的多页面网页原型。 入口是 landing page，另外包含分类搜索页、每日推荐页、收藏工作台。 面向独立开发者和内容创作者。 核心功能包括搜索、分类筛选、收藏工具、每日推荐。 风格参考 Linear + 少数派。 要求桌面端和移动端适配，交互可以用静态数据模拟。

这两个 prompt 的区别，不是文字长短，而是任务边界不同。

新手最该学的不是 prompt，而是判断

很多人学 AI 工具，会急着收集 prompt 模板。但用 OpenDesign，我觉得更重要的是判断。

你要先判断自己要的是什么产物：

• 是一个能对外展示的产品官网？
• 是一个给团队讨论的 App 原型？
• 是一个每周例会要用的 deck？
• 是一个运营每天看的 dashboard？
• 还是一个公众号、小红书、邮件营销用的视觉内容？

判断完，prompt 才有意义。

一个好用的 OpenDesign prompt，可以按这个结构写：

我要做一个 [具体产物]， 面向 [目标用户]， 使用场景是 [用户在什么情况下使用]， 核心内容包括 [信息/功能列表]， 风格参考 [品牌/关键词/案例]， 输出要求 [页面数量/尺寸/交互/适配方式]， 请避免 [不想要的风格或问题]。

比如：

我要做一个 B2B SaaS 的 pricing page， 面向正在比较工具的创业团队， 核心内容包括三个套餐、功能对比、FAQ、客户案例和购买按钮， 风格参考 Stripe + Linear， 输出要求桌面和移动端适配， 请避免夸张渐变、过大的空白和营销套话。

这比「帮我做一个高级感页面」有效得多。

我建议这样学 OpenDesign

不要一上来研究源码，也不要马上改 skill。

先按 use case 学。

第一天，只做一件事：跑通软件，生成第一个 landing page。

第二天，打开 Skills Catalog，看 10 个你工作里可能用到的场景。不要看代码，只看它们分别解决什么问题。

第三天，用同一个主题练三遍：网页原型、移动 App、数据看板。比如都围绕「AI 工具导航站」。

第四天，练 weekly update、PM spec、social carousel。你会发现 OpenDesign 不只是做页面，也能把信息整理成汇报、文档和传播素材。

第五天，不要重新生成，专门练修改指令。

比如：

保留整体结构，只把首屏改得更像成熟 SaaS 官网。

移动端现在太拥挤，请优化间距和信息层级。

这个 dashboard 太像展示页，请改成真实运营人员每天会看的后台。

这一步很重要。真实工作里，AI 第一版很少直接可用。真正省时间的，不是一次生成完美，而是你能不能把第一版改到可用。

我的判断

OpenDesign 适合的人，不是只想让 AI「帮我画个好看的图」的人。

它更适合这几类用户：

• 独立开发者：快速做产品首页、功能原型、演示页面。
• 内容创作者：做选题页、工具导航、社媒图文、文章配图和资料页。
• 产品经理：做 PRD、流程页、App 原型、功能说明。
• 小团队：做周报、deck、dashboard、内部工具原型。

它不适合什么人？

如果你已经有成熟设计系统、复杂交互规范、严格组件库，OpenDesign 不能替代专业设计流程。它更适合从 0 到 1，把一个模糊需求变成能看的东西。

所以我对它的定位是：

OpenDesign 不是帮你完成最终设计稿的工具，而是帮你更快进入设计讨论的工具。

它最有价值的地方，不是生成某个漂亮页面，而是让你在十几分钟内看到一个方向，然后开始判断：这个产品应该长什么样，这个页面该讲什么，这个功能是不是值得做。

这也是新手学习 OpenDesign 时最应该记住的一句话：

先选对 use case，再写 prompt。先明确边界，再追求好看。

否则你以为自己在做 landing page，它可能已经认真地帮你做了一个小产品。

一句话总结：OpenDesign 的关键不是让 AI 画得更漂亮，而是让需求先进入正确的产物类型和设计边界。