延伸阅读
Reasonix 延伸阅读
使用 Reasonix 进行设计的教程、文档和演练，均列在已发布的指南中。
Reasonix 
OpenDesign 用 Reasonix
在 OpenDesign
做设计。
如何在 OpenDesign 中用 DeepSeek Reasonix 设计界面：用你自己的 DeepSeek key 进行简短、低成本的迭代，从 brief 到审阅完成的文件，完成一个预约排班任务，以及开始前需要了解的限制。
从 brief 到界面01 / Reasonix
您带来想法↗
“一个预订日程表，
低成本反复迭代直到满意为止。”
一个完整的 Reasonix 设计任务
一个 Reasonix 设计任务：从 brief 到界面
完整展示一个任务：你交付的 brief 与约束条件、返回的产物，以及在完成前你仍需运行的检查。下方界面是为本页面制作的示例，并非记录下来的 Reasonix 运行结果。
1设计 Brief 与约束条件
Brief为一家小型诊所设计预约排班：按医生查看的五日视图、空闲时段、已预约和已锁定的时间，以及手机上的日列表。以简短迭代逐步推进。桌面端与手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互切换医生、打开时段、锁定时间、日期导航
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2工作分工：你、Reasonix 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Reasonix
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Reasonix 产物：1440px 与 390px 下的预约排期页面
4交付前审查
Layout
网格与间距
按 8px 网格划分的半小时行；锁定时间以斜纹条带呈现，而非作为一个事件。
Hierarchy
视觉层级
空闲时段优先显示，方便前台接待；强调色仅标注空闲时段。
Responsive
移动端布局
日期条加时段列表，附预约操作；顶部为医生切换。
Interaction
交互检查
切换医生、打开时段、锁定一小时、切换日期。
Fit
Reasonix 适合哪些任务，不适合哪些任务
Reasonix 适合以下场景
- 经济、紧凑的迭代。 围绕 DeepSeek 的前缀缓存构建，因此在长时间的设计会话中，构建-验证-优化循环仍保持经济实惠。
- 感知仓库的编辑。 通过带审查门控的编辑器直接编辑你仓库中的文件，从而复用你真实的组件和 token。
- Skill + MCP。 Markdown skill 承载你的约定；MCP 服务器以文本形式引入设计上下文，例如 Figma 源文件。
- 开放且 BYOK。 采用 MIT 许可、开源，运行在 DeepSeek 模型上，使用你自己的 DeepSeek API 密钥。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 你没有此 Agent 所需的凭证。 需要：你自己的 DeepSeek API 密钥（自带密钥）。OpenDesign 不提供也不代理凭证。
- 你的团队使用 DeepSeek 或 DeepSeek Harness 工作。 这些 Agent 有各自的页面；工作区相同，设置方式不同。参见相关 Agent。
兼容性
开始之前，Reasonix 的必要条件
本指南介绍通过 OpenDesign 桌面应用连接的 Reasonix。已核实的公开参考资料截至 2026 年 9 月 6 日。
工具范围Reasonix，由 Community / esengine 提供
DeepSeek Reasonix 是一款开源（MIT 许可）的终端 AI 编程 Agent，由 DeepSeek 模型驱动。它由 GitHub 作者 esengine 以社区形式构建——并非 DeepSeek 官方产品——并围绕 DeepSeek 的 prefix cache 进行工程设计，使长时间会话保持低成本。本页面介绍的是通过 OpenDesign 使用 Reasonix 设计界面，而非 Reasonix 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证你自己的 DeepSeek API key（BYOK）
你自己的 DeepSeek API key（BYOK）。使用你自己的 DeepSeek API key（BYOK）进行身份验证——凭证保留在你的机器上。本页面不承诺任何配额或价格。
系统与版本桌面应用或源码
请查看下载页面获取桌面版构建。源码 quickstart 中列出的 Node.js 和 pnpm 要求适用于从源码运行，而非安装桌面版软件包。最低兼容的 Reasonix 版本：此处未验证。
连接检查成功的标志
按照你所安装版本显示的连接说明进行操作，然后运行一个小任务。确认 Reasonix 已处理该任务，并且产物可以打开。仅下载并不能建立可用的连接。
从桌面应用开始
三步完成 Reasonix 设置
先下载，为你所安装的版本完成 Reasonix 设置，然后检查一个小结果。按此流程操作，你不需要从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备你的 Reasonix 连接
按照你所安装版本中的 Reasonix 说明进行操作。使用你自己的 DeepSeek API key（BYOK）进行身份验证——凭证保留在你的机器上。
# 1. Install DeepSeek Reasonix (Node 22+) — see the repo README npm install -g reasonix # 2. Bring your own DeepSeek API key (BYOK) # Reasonix reads it from your environment, not from config files. export DEEPSEEK_API_KEY=sk-... # your DeepSeek key摘自已发布指南中的 Reasonix 设置说明；请查阅供应商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Reasonix 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Reasonix 设计工作流
五步完成的 Reasonix 设计工作流
同一个预约排期任务，从 brief 到可验证文件的完整流程。每一步列出你提供的内容、Reasonix 完成的工作、OpenDesign 贡献的部分，以及你需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Reasonix读取 brief 和项目的指令文件；遇到模糊之处会提出询问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Reasonix在写下任何一行代码之前，将 DESIGN.md 中的 token 和风格规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Reasonix 会写出一个独立的 HTML 文件：布局、样式、交互和稳定的 hooks。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Reasonix规划各个区块，编写 HTML、CSS 和 JavaScript，运行该文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Reasonix读取你在预览上的评论，并准备下一轮修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Reasonix就地应用更改并重新运行该文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Reasonix 设计资源
限制
Reasonix 的局限、人工检查与后备方案
- 范围它会读取你的代码库，通过带审阅关卡的编辑器修改文件，运行命令，并支持 Markdown skill 和 MCP。它的 DeepSeek 模型（如 deepseek-v4-pro 和 deepseek-v4-flash）仅支持文本，因此设计循环是通过描述引用并在浏览器中验证来完成的。本页面介绍的是作为 Agent 连接到 OpenDesign 的 Reasonix，而非 Reasonix 的全部功能。
- 使用限额使用限额和费用取决于你所使用的凭证（你自己的 DeepSeek API key）。本页面不对免费额度做任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Reasonix 与 OpenDesign 的常见问题
DeepSeek Reasonix 真的能做设计工作吗？
可以——只要有审美 skill、设计系统，以及上下文中精确描述的参考，DeepSeek Reasonix 就能在你自己的仓库中生成生产级、响应式的 UI，你可以在真实浏览器中验证输出。它的 DeepSeek 模型仅支持文本，因此该循环依赖描述与验证参考，而非直接读取图像。如果缺少这些上下文，它往往会默认使用通用外观，而这正是 OpenDesign 所填补的空白。
使用 DeepSeek Reasonix 进行设计需要付费吗？
你需要自带 DeepSeek API key，因此使用费用由你支付给 DeepSeek（BYOK）——但该 Agent 围绕 DeepSeek 的前缀缓存构建，以便在长会话中保持低成本。Reasonix 本身免费且采用 MIT 许可。OpenDesign 从不代理你的凭证。
DeepSeek Reasonix 是 DeepSeek 官方产品吗？
不是。DeepSeek Reasonix 是由 esengine 这位 GitHub 作者构建的社区开源项目——它运行在 DeepSeek 的模型之上，并使用 DeepSeek API key，但并非由 DeepSeek 公司制作或认可。DeepSeek 是其各自所有者的商标。
前端设计该选 DeepSeek Reasonix 还是 Claude Code？
两者都能完成真正的设计工作。Claude Code 以具体、了解代码库的设计决策而闻名；DeepSeek Reasonix 的优势在于开源且成本高效，能够以你自己的 key 在 DeepSeek 模型上进行低成本、高频次的迭代。很多团队会同时使用多个 Agent——OpenDesign 让你可以切换 Agent 而不必改变设计工作流。
如何将 DeepSeek Reasonix 连接到像 Figma 这样的设计源？
Reasonix 支持 MCP 服务器，因此你可以按照仓库文档添加一个设计源 MCP（例如 Figma MCP 服务器）。这样 Agent 就能以可操作的文本形式获取真实的设计上下文——组件、变量、布局数据——从而使生成的代码与源保持一致，而不是仅仅近似还原。
用 Reasonix 开始第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。