← 返回教程 新手入门指南——在你的电脑上安装 Open Design 并构建第一个页面 的视频封面
入门

新手入门指南——在你的电脑上安装 Open Design 并构建第一个页面

一份零术语的新手指南——把 Open Design 作为应用下载到 Windows 或 Mac 上(无需终端),一键连接模型,再用探索表单和调整控件构建你的第一个真实网页。无需订阅,完全在你的电脑上运行。基于 Where Do I Click 的实操演示。

Where Do I Click 2026年5月8日 10:06 在 YouTube 打开 ↗

本指南面向纯新手:不用终端,没有术语。你将把 Open Design 当作一个普通应用下载下来,一键连接模型,并构建你的第一个真实网页——全部都在你自己的电脑上运行,无需订阅。它参考了 Where Do I Click他们的视频里给出的友好演示,并按当前版本重写、更新到最新。可观看上方视频看实时操作,或继续阅读文字版。

Open Design 工作区——描述你想要的内容并选择一个模式。 Open Design 工作区:描述你想构建的内容,选择一个模式,剩下的交给你的智能体完成。

Open Design 是什么(用大白话说)?

Open Design 是一款免费、开源的设计应用,运行在你自己的电脑上。你描述你想要的内容——一个落地页、一个应用界面、一份演示文稿——然后由 AI 为你构建出一个真实、可编辑的版本。与付费云端工具最大的不同在于:它免费、在本地运行(你的文件留在你的机器上),并且支持你自选任意 AI 模型,而不是把你锁死在某一个上。正如 Where Do I Click 所说,付费云端工具固然惊艳但限制重重——你需要订阅,做一两个项目后额度就用光了。Open Design 把这两道墙都拆掉了。

第 1 步——安装它(最简单的方式:直接下载应用)

你不需要熟悉终端。最简单的路径是:

  1. 前往 open-design.ai/download
  2. 点击下载并选择你的操作系统——提供 WindowsmacOS 两种版本。
  3. 像安装任何普通应用一样运行安装程序。(在 Windows 上你可能会看到“Windows 已保护你的电脑”的提示——点击更多信息 → 仍要运行;这只是一个未签名的独立开发版本。)
  4. 始终获取最新版本——这个项目更新频繁,新版本修复了更多 bug。

(如果你确实想走开发者路线,GitHub 仓库的 Quick Start 提供了可复制粘贴的命令——但对大多数人来说,下载就足够了。)

第 2 步——一键连接模型

首次打开时,Open Design 会自动检测你电脑上已有的 AI 工具——比如 Claude Code、Codex、Gemini 或 Qwen——并把它们列出来。点击其中一个,然后点 Get started

没装任何编程工具?没关系:改选 API provider,粘贴一个来自 Anthropic、OpenAI、Azure 或 Google Gemini 的密钥。无论哪种方式,你都能在几秒钟内准备就绪。之后你可以从同一个按钮切换模型,设置里还能添加媒体提供商、更改语言、选择浅色/深色模式,甚至领养一只待在角落里的桌面宠物

Open Design 插件库,含可安装的技能。 插件库:直接从注册表安装技能——包括反“水货”设计技能。

第 3 步——四处看看(示例和模板)

开始构建之前,点击 Examples 预览用这款工具做出的真实设计——带动画和特效的复杂界面。喜欢某一个?点 use this prompt 从它开始。Design systemsimagevideo 模板标签页用法相同:先预览,再复用。这是一种友好的方式,让你在不面对空白页的情况下看到能做出什么。

第 4 步——构建你的第一个页面

  1. 选择 Prototype,给它起个名字(Where Do I Click 构建的是一个房地产中介页面)。
  2. 挑一个设计系统(或保持 free),并选择高保真
  3. 点击 Create,粘贴你的提示词,然后发送。
  4. Open Design 会问几个探索性问题(桌面端还是移动端?语气如何?要写实图片吗?),以便它第一次就构建出正确的东西——回答这些问题后发送。
  5. 选择一个视觉方向,它就会构建出你的页面:一个简洁的界面,配有 AI 生成的图片、真实的文案和动画——质量真的接近付费工具。

Open Design 的幻灯片模式,含示例演示文稿。 幻灯片模式:选择一个演示文稿类别,并以一个示例为起点进行复刻。

第 5 步——无需写代码即可修改

打开调整控件,点击任何你想修改的地方——比如你中介公司的名称。会弹出一个提示框;用大白话输入你想要的改动,它就会被应用。整个循环就是这样:描述、生成、点选并微调。满意之后,你可以导出,也可以继续迭代——而且在此过程中你永远不会撞上每周的额度上限。

小贴士

  • 下载应用——这是无需终端的路径,支持 Windows 和 macOS。
  • 没有编程工具?用 API provider 选项,配上 Anthropic/OpenAI/Azure/Gemini 的密钥。
  • 先浏览 Examples,复用一个提示词以跳过空白页。
  • 回答探索性问题——它们正是让它第一次就精准命中你想要的内容的关键。
  • 使用调整控件,用大白话修改文本和元素,无需写代码。

常见问题

我需要会写代码吗? 不需要。下载应用,点击你的模型(或粘贴一个 API 密钥),然后用大白话提示词和点选式调整来构建。

它真的在我自己的电脑上运行吗? 是的——它在 Windows 或 macOS 上本地安装,你的项目留在你的机器上。

我需要订阅吗? 不需要。Open Design 是免费的;你只需为你所连接的那个智能体或 API 密钥的 AI 模型用量付费——而且没有单独的每周设计额度上限。

它是免费且开源的吗? 是的——Apache-2.0。免费本地运行;你只需为你所连接内容的模型/媒体用量付费。


这份文字版指南基于 Where Do I Click 的实操演示。请观看上方的完整视频,并订阅 Where Do I Click 以获取更多适合新手的 AI 工具指南。