Reasonix OpenDesign

用 Reasonix
在 OpenDesign
做设计。

如何在 OpenDesign 中用 DeepSeek Reasonix 设计界面:用你自己的 DeepSeek key 进行简短、低成本的迭代,从 brief 到审阅完成的文件,完成一个预约排班任务,以及开始前需要了解的限制。

从 brief 到界面01 / Reasonix
您带来想法↗

“一个预订日程表,
低成本反复迭代直到满意为止。”

示意性界面 · 非实际产品录屏
本页内容 示例
  1. 示例
  2. 适用场景
  3. 兼容性
  4. 环境搭建
  5. 工作流
  6. 资源
  7. 局限性
  8. 常见问题

一个完整的 Reasonix 设计任务

一个 Reasonix 设计任务:输入简报,输出经过审查的 HTML

一个任务,完整走一遍:你交付的简报与约束、返回的产物,以及完成前你仍要执行的检查。下面的界面是为本页构建的示意性示例,并非 Reasonix 的实际运行记录。

1设计 Brief 与约束条件

Brief

为一家小型诊所设计预约排班:按医生查看的五日视图、空闲时段、已预约和已锁定的时间,以及手机上的日列表。以简短迭代逐步推进。桌面端与手机端。

  • 设计系统OpenDesign 纸感画布:Albert Sans,单一绿色强调色
  • 断点1440px 桌面端与 390px 移动端,无横向滚动
  • 交互执业者切换、打开时段、锁定时间、日期导航
  • 输出一个自包含的 HTML 文件,带有稳定的 data-od-id 挂钩

2谁做什么:你、Reasonix 与 OpenDesign

  • 你

    撰写简报、选定设计系统并设定验收标准。

  • Reasonix

    规划布局,将 HTML、CSS 和 JavaScript 写入你的代码仓库,并按需修改。

  • OpenDesign

    提供设计系统与技能,渲染预览,并把每个版本作为文件保存在项目中。

  • 审查

    交付前检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。

3Reasonix 产物:1440px 与 390px 下的预约排期页面

Reasonix 产物:1440px 与 390px 下的预约排期页面 — 桌面端
示意性示例

4交付前审查

Layout

网格与间距

8px 网格上的半小时行;锁定时间显示为斜线填充的条带,而不是一个事件。

Hierarchy

视觉层级

空闲时段优先显示,方便前台接待;强调色仅标注空闲时段。

Responsive

移动端布局

一条日视图条带,加上带预约操作的时段列表;顶部是执业者切换。

Interaction

交互检查

切换医生、打开时段、锁定一小时、切换日期。

Fit

Reasonix 适合哪些任务,不适合哪些任务

Reasonix 适合以下场景

  • 低成本、紧凑的迭代。 围绕 DeepSeek 的前缀缓存而设计,因此构建—验证—改进的循环在漫长的设计会话中依然经济。
  • 仓库感知的编辑。 通过受审查门控的编辑器编辑你仓库中的文件,因此它会复用你真实的组件与 token。
  • 技能 + MCP。 Markdown 技能承载你的约定;MCP 服务器以文本形式引入设计上下文,例如 Figma 源文件。
  • 开放且 BYOK。 采用 MIT 许可、开源,运行在 DeepSeek 模型上,使用你自己的 DeepSeek API 密钥。

选择其他工作流的场景

  • 你需要可编辑的矢量文件。 产物是 HTML,而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
  • 你既没有参考,也没有约束。 没有设计系统或示例,输出就会滑向通用外观;请先写好简报。
  • 你没有此 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 密钥(BYOK)。使用你自己的 DeepSeek API 密钥(BYOK)进行身份验证 —— 凭据保留在你本机。本页不承诺任何额度,也不承诺任何价格。

系统与版本桌面应用或源码

请查看下载页面获取桌面版构建。源码 quickstart 中列出的 Node.js 和 pnpm 要求适用于从源码运行,而非安装桌面版软件包。最低兼容的 Reasonix 版本:此处未验证。

连接检查成功的标志

按照你所安装版本显示的连接说明进行操作,然后运行一个小任务。确认 Reasonix 已处理该任务,并且产物可以打开。仅下载并不能建立可用的连接。

从桌面应用开始

三步完成 Reasonix 设置

先下载,针对你安装的版本完成 Reasonix 配置,然后检查一个小结果。此路径不需要从源码构建 OpenDesign。

  1. 1

    下载 OpenDesign 桌面应用

    选择适合你电脑的安装包,安装并打开应用。

    下载 OpenDesign
    检查点
    桌面应用打开。已经装好了?可直接跳到后面;无需再次下载。
  2. 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. 3

    运行一个小型 Reasonix 任务

    让第一份简报足够小,以便能评判整个循环,包括一次修订。

    入门 brief

    构建一个设置页面,包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。

    检查点
    打开结果,测试保存状态,并提出一处具体修改。第一个文件只是启动审查循环,并不代表完成。

若要从源代码运行 OpenDesign,请参阅技术快速入门。

Reasonix 设计工作流

Reasonix 设计工作流,共五个阶段

一个诊所预约排班表走完整个循环,从书面简报一直到浏览器验证过的文件。每个阶段包括:你的输入、Reasonix 的动作、OpenDesign 的贡献,以及你应对预览做的检查。

  1. 1

    设计 Brief

    保持简洁:三到六行。说明谁使用这个界面、它完成什么任务,以及它必须支持哪些平台。

    • 您自己起草简报,如有参考截图就一并附上。
    • Reasonix解析简报和项目的指令文件,只要仍有歧义就提出问题。
    • OpenDesign提供项目上下文、提示界面,以及与产物类型相匹配的技能。
    • 检查确保简报一开始就写明验收标准。在生成前写好比事后补写代价更低。
  2. 2

    设计约束

    设计系统加上明确的约束。正是这种组合让输出保持品牌一致,而不会滑向默认外观。

    • 您选定设计系统,然后列出断点以及必须出现的组件。
    • Reasonix在生成任何标记之前,把 DESIGN.md 的 token 和姿态规则加载进上下文。
    • OpenDesign提供设计系统库,并将所选系统接入技能模板。
    • 检查检查 token 是否与你的品牌一致:一个强调色、正确的字体、正确的圆角。
  3. 3

    生成界面

    Reasonix 的输出是一个自包含的 HTML 文件 —— 包含布局、样式、交互和稳定的钩子。

    • 您你等待,或回答一个澄清问题。没有什么需要配置。
    • Reasonix规划各部分,然后编写 HTML、CSS 和 JavaScript;运行文件并修复失败。
    • OpenDesign把产物存入项目文件夹并建立索引,以便预览能读取它。
    • 检查先别急。等文件渲染出来再评判,而不是读源码。
  4. 4

    预览

    文件在你要求的宽度下于 OpenDesign 中打开 —— 这是评判设计质量的关键时刻。

    • 你切换宽度、试用交互,并对单个元素附加评论。
    • Reasonix接收你的预览评论,并准备下一次修订。
    • OpenDesign渲染预览并暴露 data-od-id 目标,以便附加评论和编辑。
    • 检查检查层级、对比度、390px 下的溢出、焦点状态,以及强调色是否克制使用。
  5. 5

    修订与验证

    通过指向预览中的元素来提出修改。每次修订都落为一个新文件;不会有静默覆盖。

    • 你把评论转换为具体请求,并决定任务何时完成。
    • Reasonix就地应用所请求的修改并重新运行文件。
    • OpenDesign并列保留各个版本,并在你完成时导出图像或 HTML。
    • 检查只重新检查改动的区域,然后在每个断点完整审查页面一次。

资源

Reasonix 设计资源

限制

Reasonix 的局限、人工检查与备选方案

  • 范围Reasonix 会读取你的仓库,通过受审查门控的编辑器修改文件,执行命令,并接受 Markdown 技能与 MCP。其 DeepSeek 模型(包括 deepseek-v4-pro 和 deepseek-v4-flash)仅处理文本,这意味着设计循环依赖描述性引用与浏览器验证。本指南涵盖的是连接到 OpenDesign 的 Reasonix,而非该代理的全部功能。
  • 使用限额使用限制与费用取决于你自带的凭证(你自己的 DeepSeek API 密钥)。本页面不对免费额度作任何承诺。
  • 网络本地项目文件并不意味着离线推理。在发送敏感输入之前,请检查你的代理的提供商设置与数据政策。
  • 输出为 HTML产物以 HTML 文件形式交付,而非矢量设计文件。
  • 人工审查你在预览中审查无障碍性、真实内容、品牌契合度与交互正确性。代理执行的任何自检都只能算作第一遍检查。
  • 后备方案当代理不可用或任务失败时,请查阅所安装版本的连接说明与身份验证。在更改配置之前,保存错误信息和最后一个可用的产物。

常见问题

关于 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 就能以可操作的文本形式获取真实的设计上下文——组件、变量、布局数据——从而使生成的代码与源保持一致,而不是仅仅近似还原。
DeepSeek Reasonix 究竟是什么
DeepSeek Reasonix 是一个开源的(MIT)终端 AI 编程智能体,由 esengine 的 GitHub 作者与社区共同构建。它是 DeepSeek 原生的:围绕 DeepSeek 的前缀缓存机制进行工程化设计,使漫长、反复迭代的会话保持低成本。它会读取你的代码仓库,通过带评审门控的 SEARCH/REPLACE 编辑器编辑文件,运行 shell 命令,并能从自然语言任务出发工作——不只是补全代码行,而是进行规划与验证。必须明确一点:这是一个社区项目,而非 DeepSeek 公司的官方产品。

对于设计工作而言,关键在于它是一个能力出色、具备仓库感知能力的编程智能体,能以低成本运行在强大的 DeepSeek 模型上。它使用的 DeepSeek 模型是纯文本的——本身并不读图——因此实际的设计闭环是参考驱动的,并在真实浏览器中验证,而不是让智能体直接“看到”截图。成本效率才是与设计相关的优势:你可以对 UI 反复迭代多次,而不会产生那种通常会让人不敢做紧密循环的账单。

DeepSeek 原生,BYOK:Reasonix 运行在 deepseek-v4-pro 和 deepseek-v4-flash 等 DeepSeek 模型上。你需要自备 DeepSeek API 密钥——凭证存放在你的环境里,而不是智能体的配置里。

仓库感知编辑:它使用带评审门控的编辑器读取并编辑你项目中的文件,并运行 shell 命令,因此它能在你自己的代码仓库中构建并迭代真实的 UI 代码。

技能 + MCP:它支持以 Markdown 编写的技能和 MCP 服务器,因此你可以赋予它持久生效的约定,并连接诸如设计源之类的外部上下文。

供应商:社区 / esengine 的 GitHub 作者(并非 DeepSeek 公司)

凭证:你自己的 DeepSeek API 密钥(BYOK),通过环境变量提供

许可:MIT,开源
为什么高成本效益的 DeepSeek 智能体适合设计
DeepSeek Reasonix 在设计上的优势,与其说来自某一项炫目的能力,不如说来自让迭代式 UI 工作变得廉价且可重复——但和每一个智能体一样,品味仍然必须由你来提供。

廉价而紧密的迭代:由于它围绕 DeepSeek 的前缀缓存进行工程化设计,长时间的设计会话依然负担得起——因此你可以多次运行“构建—验证—优化”循环,而不必精打细算。

仓库感知的复用:它直接在你的仓库中编辑文件,因此只要你把它指向现有的组件和设计 token,它就能复用它们,而不是另造一次性的样式。

技能中的约定:Markdown 技能与项目配置让你可以把设计 token、组件和评审规则编码进去,使智能体按照你的品牌工作,而不是套用默认外观。

品味来自你提供的三项输入:一套设计系统、一个技能,以及真实的参考图。

这个教训是每个智能体都会教的同一个:DeepSeek Reasonix 默认并没有品味。当你给它约束——一套设计系统、一个美学技能,以及向它描述的具体参考——再加一个可供验证的浏览器,它才能产出好的设计。OpenDesign 恰好打包了这些输入,这也是两者相契合的原因(详见下文)。
从零开始为设计工作配置 DeepSeek Reasonix
以下是从一台干净的机器到一个能够构建并验证 UI 的 DeepSeek Reasonix 的路径。由于它是一个社区项目,请始终遵循仓库 README 中的安装说明;下面的概要只是大致的轮廓。

配置顺序:安装 → 添加你的 DeepSeek API 密钥 → 编码约定 → 添加一个技能 → 启用浏览器验证。

编码你的设计规则:将你的 token、基础组件和约定放入技能或项目配置中,并让 Reasonix 指向它们,这样输出就能匹配品牌,而不是默认呈现通用外观。

添加浏览器验证:由于 DeepSeek 模型仅支持文本,接入 Playwright 或浏览器 MCP,让智能体在真实浏览器中渲染,并跨断点检查其输出,而不是仅确认构建通过。

使用当前的配置章节获取命令和特定版本的细节,这些内容可能会变化。

# 1. 安装 DeepSeek Reasonix(Node 22+)——参见仓库 README npm install -g reasonix # 2. 自带你的 DeepSeek API 密钥(BYOK) # Reasonix 从环境变量读取,而不是从配置文件。 export DEEPSEEK_API_KEY=sk-... # 你的 DeepSeek 密钥 # 3. 在你的项目中启动它 cd your-project reasonix # 具体子命令参见 README # 4. 通过 MCP 添加设计来源(可选) # 例如 Figma MCP 服务器,按仓库文档配置
来自上一份指南的历史命令示例;请在所链接的供应商文档中核实当前语法。
将参考转化为 UI
使用 DeepSeek Reasonix 时,最具杠杆效应的设计循环是将清晰的参考转化为可运行、响应式的 UI,并不断迭代直到匹配。由于 DeepSeek 模型仅支持文本,参考以详细描述和规格的形式提供——而非原生读取图像——匹配度通过在真实浏览器中渲染来确认。

将你的参考转化为具体的规格——用文字描述布局、间距、层级和状态(桌面端和移动端、悬停、空状态、加载中),因为模型读取的是文本,而不是像素。

在提示中要具体;即使模型很强,含糊的提示也会产生通用的 UI。

将你的设计系统和约定放在技能或项目配置中,并告诉 Reasonix token 和规范基础组件所在的位置。

运行开发服务器并在真实浏览器中验证结果,调整到各个断点——接入浏览器 MCP,让智能体能够自行检查。

通过在浏览器中将渲染出的 UI 与你的参考进行对比来迭代——而不仅仅是确认它能构建。

在提示中给智能体具体的约束,而不是含糊的简述:

保持提示简短且聚焦,提交好的迭代并回退差的迭代(回退时告知 Reasonix),这样每一轮都建立在干净的基础上——也让这条低成本、对缓存友好的循环保持高效。

reasonix # 在提示中: > 用 React + Vite + Tailwind + TypeScript 实现此设计。 参考:双栏 hero、48px 垂直节奏、品牌青色 强调色、system-ui 字体——桌面端和移动端在 DESIGN.md 中描述。 复用我现有的设计系统组件和 token。 匹配间距、布局和层级;使其响应式。 在浏览器中渲染并迭代,直到它在各断点下 都符合规格。
来自上一份指南的历史命令示例;请在所链接的供应商文档中核实当前语法。
技能、MCP 与配置
有几个扩展点让 DeepSeek Reasonix 在持续的设计工作中真正可用,并且它们能清晰地对应到一套开放的设计工作流。

Markdown 技能:Reasonix 支持以 Markdown 编写的技能——这是你存放设计规范、token 与评审清单的持久归宿,并在每次运行时应用。

MCP 服务器:它集成了 MCP 服务器,这是引入设计上下文与外部工具的可移植方式——其中最相关的是像 Figma MCP 服务器这样的设计源——它们可跨智能体工作,而不只限于 Reasonix。

项目配置与内置工具:按项目划分的配置,加上内置的文件、shell 和 web 工具,让它无需离开终端就能收集上下文并运行验证循环。具体配置路径请查阅仓库 README。

这些是可移植、多智能体的能力——正是 OpenDesign 旨在编排的那类东西,而不是为每个项目重新造一遍。
面向设计的 DeepSeek Reasonix vs Codex vs Claude Code vs Cursor vs Gemini CLI
设计工作没有唯一的赢家——每个智能体各有不同的强项,经验丰富的团队会把它们叠加使用。一个公允的总结:

DeepSeek Reasonix —— 开源且由 DeepSeek 驱动;通过前缀缓存实现成本效益,BYOK 并使用你自己的 DeepSeek 密钥(社区构建,纯文本模型)—— 在自己仓库中对 UI 进行廉价、大批量的迭代

Codex —— 借助前端技能实现出色的视觉打磨;沙箱化异步构建 —— 委派式异步构建与可移植的 AGENTS.md 规则

Claude Code —— 具体的设计决策(十六进制色值、间距、字体排印)以及具备代码库感知的 UX —— 前端推理与大型上下文重构

Cursor —— 可视化“构建并查看”循环,带实时预览与内联编辑 —— 在 IDE 内部进行紧密的“迭代并观察”式 UI 工作

Gemini CLI —— 强大的多模态图像理解能力与 1M token 上下文;开源并提供免费额度 —— 大量依赖截图的工作,以及把整套设计系统保持在上下文中

社区反复得出的结论是:品味来自人类:在没有技能、参考与约束的情况下,它们全都会默认落到一种通用化的审美上。那才是真正需要解决的问题——而它属于设计工具范畴的问题,而非模型范畴的问题。

智能体 — 设计强项 — 最适合
陷阱,以及避免“AI Slop”外观
关于 AI 生成设计最常见的抱怨是它看起来很泛泛——柔和的渐变、悬浮面板、过大的圆角、夸张的阴影,一种 Inter 配紫色的调调,一眼就“大喊着这是 AI 做的”。其他被报告的问题还包括移动端布局错乱,以及指令泄漏进 UI 文案。这些都不是 DeepSeek Reasonix 独有的;任何智能体在没有经过精心组织的设计上下文的情况下运行时都会如此——而且由于它的模型仅支持文本,精确描述参考对象就更加重要。

添加美学技能:经过精心组织的设计技能会迫使智能体确定一个真正的方向,而不是采用默认外观。

在真实浏览器中验证:由于模型无法看见,因此要在真实浏览器中跨断点渲染并自检,以免布局在移动端悄悄失效。

提供 token 与描述清楚的参考:真实的设计 token 和精确描述的参考状态,是影响纯文本智能体输出质量的最大杠杆。

把规则写进技能或配置:将“不要 hero 卡片、最多两种字体、品牌优先的层级”这类规则放在智能体每次运行都会读取的地方。

注意,每一项缓解措施都是在为智能体提供经过精心组织的设计上下文。按项目手动维护这份上下文,正是 OpenDesign 所消除的苦差事。
在 OpenDesign 中使用 DeepSeek Reasonix 做设计
OpenDesign 正是上述工作流一直在要求的那层开源设计层。它把 DeepSeek Reasonix 当作一方适配器,并用经过精心组织的技能与设计系统库、结构化的渲染管线以及本地桌面 UI 将其包裹起来——因此,让 Reasonix 表现出色的设计上下文从首次运行起就已就位,无需每次手动拼装。两者都是开源且本地优先,这让它们的组合成为自然之选。

安装 OpenDesign 并选择 DeepSeek Reasonix 作为你的智能体。

使用你自己的 DeepSeek API key(BYOK)进行身份验证——凭据始终留在你的机器上,绝不会经由我们代理。

选择一个设计系统和一项技能,然后以一致的品味生成演示文稿、原型和落地页。

每个产物和 DESIGN.md 文件都存放在你自己的仓库中,而不是托管云上。

同样的 DeepSeek Reasonix 智能体,同样的 key——外加围绕它的真实、可移植、开源的设计工作流。它本地优先且开源,因此你的工作内容和凭据都不会离开你的机器。
OpenDesign 是否与 DeepSeek 或 Reasonix 有关联?
不。OpenDesign 既独立于 DeepSeek 公司,也独立于 Reasonix 维护者。DeepSeek 是其各自所有者的商标。

用 Reasonix 开始第一个设计任务

从一个小任务开始,评判完整的往返流程,然后再带来真正的需求简报。选择符合你设置的选项;本页面不会自动检测。

你处于哪个设置阶段?
下载 OpenDesign 查看安装清单