在同一工作区整理规范、预览文件与继续修改

OpenDesign

从设计参考到可交接的原型

把简报、参考和设计规范交给已连接的 AI 助手,在 OpenDesign 中生成网页原型或演示稿,边看预览边修改,再把实际文件交给团队。它是带 Skill、模板与模型连接的独立应用。

作者 nexu-io

OpenDesign Studio:左侧对话要求替换背景图片,右侧预览名为 Data Center AI Platform 的网页原型。打开原始图片

左侧保留对话与修改记录,右侧查看同一 HTML 文件;上方可切换代码、预览和导出。

查看作者图片来源

图片来自作者仓库的 Studio 产品演示,展示提供新图片后继续修改原页面。不是本站实测;画面里的客户量与性能数字属于示例页面内容。

应用与连接方式

  • macOS / Windows 桌面应用
  • Linux 可从源码运行
  • 本地编码助手 / 模型服务
  • 外部助手通过 MCP 连接
GitHub Star
104,872
版本
0.26.1
资料核对

先把一页做对,再继续扩展

第一次选 web-prototype 和一个现成设计系统,用一份真实简报完成一页:能预览、能点击、能在窄屏阅读,再导出检查。只有当风格尚未说清时,先整理参考;需要团队接手时,再建立文件交接。

选一个任务,开始使用

先安装应用并确认一个可用的本地文件型助手,再选择任务、模板和设计系统,附上材料。前三项在 OpenDesign 的项目对话中发起;最后一项在已连接 MCP 的外部编码助手中使用。

这次要交付什么?

首次使用可从这里开始。在应用中选能写项目文件的本地助手、web-prototype 模板和一个现成设计系统,附上简报与素材。

  1. 安装应用,再接通模型

    在正式发行页选择 macOS arm64、macOS x64 或 Windows x64 安装包。安装并打开应用后,先在模型设置中确认可用连接,再开始一个项目;桌面包不要求自行准备 Node.js。Linux 和源码运行请按 Quickstart 配置 Node.js 24.x 与 pnpm 10.33.2。

    查看作者安装说明

    先确认助手能在项目中工作

    本地助手先在自己的环境中完成登录,再到 Models & providers → Local CLI 检查与 Rescan。选择一个已就绪的助手后创建小项目,确认生成文件能出现在预览里。需要从其他工具连接时,在 Settings → MCP server 复制该客户端的配置;macOS 的系统 od 命令可能与 OpenDesign 同名,优先使用应用给出的绝对路径配置。

    查看启动与连接排查
  2. 把这段话发给 AI

    以下是本站依据固定提交的技能与实现编写的任务示例。替换输入文件与项目信息后使用;列出的产物是预期交付,不是本站运行所得。

    使用 web-prototype 模板和当前已选的设计系统,为自由职业设计师做一页项目说明原型。请先读取 brief.md 与我提供的 logo、项目图片和联系链接;缺失的材料列出,不编造客户、业绩或评价。先说明页面顺序,再基于模板的 assets/template.html 和 references/layouts.md 生成项目内的 index.html,把实际使用的图片保存为项目相对路径。页面需要项目介绍、三项服务、案例和预约沟通入口;没有案例材料时先省略该区块。沿用设计规范的颜色与字体,说明按钮真实跳转还是演示交互。完成后在预览中检查 1440px 与 390px 宽度、图片比例、键盘焦点和主要链接,并按模板 checklist 复查。返回实际文件、素材清单与检查结果;不能执行的检查标为待检。下一轮修改沿用这份文件,并说明改了哪些部分。

  3. 检查你拿到的结果

    • 项目中的 index.html 与实际素材,能在 Studio 预览并继续修改;内容来自提供的简报。
    • 桌面与窄屏、主要链接、图片比例和交互状态的检查记录;演示状态与真实链接可区分。
    • 交付文件和预览对应一致。导出后另外打开文件检查资源,不以聊天中的“完成”代替验收。
    查看作者对应资料
进一步了解这个 Skill

OpenDesign 是一个围绕项目文件工作的设计应用。桌面界面把对话、文件和预览放在一起,由接入的编码助手或模型生成内容。选择能操作文件的本地助手时,生成结果写入项目,预览随文件变化;纯文本 API 路径则接收完整的 artifact 内容。页面下方的文件任务按前一种路径编写。

它包含几类不同的资料:Skill 规定工作方法,设计模板提供版式与起始文件,设计系统说明视觉规则并可带样式变量和组件,插件再把流程或素材打包。它们可以组合使用,但导入一份 SKILL.md 并不会同时安装桌面应用、模型和整套服务。

参考图的价值在于帮助明确可执行的决定。reference-design-contract 会把参考拆成保留项、调整项和不照搬的内容,产出 DESIGN.md、依据记录与交接说明。完整的设计系统包还需要清单、样式变量等文件;这一步适合在开始生成之前固定方向。

原型与演示稿的结果可以保留为 HTML 和资源文件,再持续修改。Studio 的画布主要用于预览和反馈,实际布局仍由文件决定。导出入口随文件类型变化:HTML 有 PDF、图片、ZIP 和独立 HTML 等选项,识别为演示稿时另有 PPTX。每种格式要按使用目的检查,尤其不要将截图式 PPTX 当成可编辑的文字与形状。

外部编码助手可以通过 MCP 读取 OpenDesign 当前项目的源码,减少反复导出再上传。连接后仍要确认项目和文件范围;读取到设计只是实施的起点,组件拆分、后端数据、完整状态、测试与发布都需要继续完成。

来源与核验

资料核对

已阅读作者文档、任务说明与相关实现,并将本页三项任务所用说明和导出格式代码与 0.26.1 比对。未安装应用、调用模型或执行导出;预览与文件效果仍需在实际环境验收。