20:"$Sreact.view_transition" 21:I[9754,["/_next/static/chunks/2t36f5p4pjzlb.js","/_next/static/chunks/1gyqeidjm5eoa.js","/_next/static/chunks/0_fjnxc4tt_l_.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/3kv2zf0i7s2wc.js","/_next/static/chunks/1vs_3g_g75zmk.js","/_next/static/chunks/2g4dh802s8oz3.js","/_next/static/chunks/1bc3f0shukf1j.js","/_next/static/chunks/192kgs9v_t14j.js","/_next/static/chunks/0z6pw0v5c_lx5.js","/_next/static/chunks/08r60e6icmtkc.js","/_next/static/chunks/3trx6c0i7_x-3.js","/_next/static/chunks/40sro5bzp9bi_.js","/_next/static/chunks/1wgf3tk38y6cf.js"],"ProjectDetail"] 22:T5ac2, Open Design · 一次简报，多种真实文件产物

Open Design · desktop-app · BYOK

一条本地管道，
把一次简报变成多种真实文件

Open Design 是一款本地优先的桌面应用：你输入一份需求简报，编码代理便接管为设计引擎，逐段解析、按技能路由，最终扇出为可交付的原型、页面、仪表盘与幻灯片。

1 简报原型 → 落地页 → 仪表盘 → 幻灯片 HTML / PDF / PPTX / MP4

IN OUT

同一个意图

一份简报，逐段解析成不同产物

需求不会只有一个答案。管道在技能层按目标路由：同一份输入，按用途拆成多类真实可交付文件，而不是锁死在单一路径。

原型

快速验证交互与结构的可运行原型。

来源 ↗

落地页

面向展示与转化的完整页面。

来源 ↗

仪表盘

数据驱动的实时看板界面。

来源 ↗

幻灯片

杂志风、周报或提案型演示。

来源 ↗

拆分子

除四类页面产物外，管道同样覆盖图片与视频，以及 HyperFrame 动态图形——都由同一个 Studio 项目迭代产出。

prototype landing page dashboard slides

每个分支一个出口

四种导出文件面，收束在纸面上

管道末端是真实文件，而非预览框。每个产物都落到一个可交付的格式面，随取随用。

HTML

web

原型与页面导出为可部署、可离线保存的网页文件，无需运行环境。

PDF

document

落地页与文档产出为高保真的 PDF，适合分发与打印。

PPTX

deck

幻灯片以 PPTX 形式交付，可直接在演示工具中继续编辑。

MP4

video

动态图形与视频产物输出为 MP4，面向需要的演示场景。

导出坚持离线安全：HTML 可脱离第三方服务独立打开，产物归属本地。

管道里的品牌契约

DESIGN.md：让产物守住一套设计语言

可组合的技能与一份品牌级 DESIGN.md 设计系统，把风格约束写进管道。每个分支沿用同一套令牌，产物在沙箱 iframe 中预览，设计与实现对齐。

composable skills DESIGN.md system plugins sandboxed preview

design-system
  tokens:    color · type · space
  skills:     prototype · pages · slides
  contract:   one voice, every surface
  preview:    sandboxed iframe

接入你已有的代理

Bring Your Own Key：任选你的编码代理

不需要更换工具栈。通过 BYOK，把 Claude Code、Codex、Cursor、DeepSeek Harness、OpenCode 等 20 多种 CLI 编码代理接进这条管道，作为设计引擎驱动。

deepseek-harness claude codex cursor opencode reasonix kimi cline trae + 20+ CLIs

桌面应用支持 macOS 与 Windows；模型密钥由你在本地自行配置。项目以 Apache-2.0 开源，主语言 TypeScript，由 nexu-io 维护。

GitHub 仓库 ↗ Apache-2.0 · nexu-io

23:T576c, Open Design · A local pipe from one brief to many real files

Open Design · desktop-app · BYOK

One local pipe turns a single brief into real files

Open Design is a local-first desktop app. You feed it a brief, and your coding agent becomes the design engine, parsing the request, routing it through a skill layer, and fanning out into prototype, page, dashboard, and deck deliverables.

1 brief prototype · page · dashboard · deck HTML / PDF / PPTX / MP4

IN OUT

One intent, several artifacts

A brief is parsed into different deliverables

A requirement rarely has a single answer. The pipe routes it through the skill layer by goal, splitting the same input into multiple real, shippable files instead of locking it onto one path.

Prototypes

Runable prototypes to test interaction and structure.

source ↗

Landing pages

Complete pages built for presentation and conversion.

source ↗

Dashboards

Data-driven boards for real-time overview.

source ↗

Decks

Magazine-style, weekly, or pitch presentations.

source ↗

Splits further

Beyond the four page deliverables, the same pipe also covers images and video, plus HyperFrame motion graphics, all iterated within a single Studio project.

prototype landing page dashboard slides

An exit at every branch

Four export file faces, delivered on paper

The pipe ends in real files, not a preview frame. Each deliverable lands on a shippable format surface, ready when you are.

HTML

web

Prototypes and pages export as deployable, offline-safe web files with no runtime dependency.

PDF

document

Pages and documents ship as high-fidelity PDF for distribution and print.

PPTX

deck

Decks are delivered as PPTX, ready to keep editing in your presentation tool.

MP4

video

Motion graphics and video output as MP4 for the demos where they belong.

Export stays offline-safe: HTML opens independently of third-party services, and artifacts stay local to you.

The brand contract inside the pipe

DESIGN.md keeps every artifact on one design language

Composable skills and one brand-grade DESIGN.md design system write the style constraints into the pipe. Every branch follows the same tokens, and artifacts preview in a sandboxed iframe so design and implementation align.

composable skills DESIGN.md system plugins sandboxed preview

design-system
  tokens:    color · type · space
  skills:     prototype · pages · slides
  contract:   one voice, every surface
  preview:    sandboxed iframe

Bring your own agents

Bring Your Own Key: pick the coding agent you already use

No need to change your stack. With BYOK, plug 20+ CLI coding agents — Claude Code, Codex, Cursor, DeepSeek Harness, OpenCode and more — into the pipe as the design engine driving it.

deepseek-harness claude codex cursor opencode reasonix kimi cline trae + 20+ CLIs

The desktop app supports macOS and Windows; model keys are configured locally by you. The project is open source under Apache-2.0, written in TypeScript, and maintained by nexu-io.

View on GitHub ↗ Apache-2.0 · nexu-io

a:[["$","$20",null,{"enter":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-enter","default":"none"},"exit":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-exit","default":"none"},"update":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-update","default":"none"},"default":"none","children":["$","$L21","cmsn447ba000e1s16t1246i53:zh-CN:beautified",{"project":{"id":"cmsn447ba000e1s16t1246i53","slug":"nexu-io-open-design","name":"open-design","description":"本地优先的桌面应用，用编码代理生成设计产物。","authorName":"nexu-io","authorVerification":{"verified":false,"verifiedAt":null},"category":"development_tools","subcategory":"data_ai_tools","experienceUrl":"https://open-design.ai/","qualityScore":100,"featured":false,"officialSite":null,"views":{"original":{"available":true},"official":{"available":false,"reason":"disabled_by_policy"},"beautified":{"available":true,"reason":null},"defaultView":"beautified"},"beautifiedView":{"revisionId":"cmt2zh1x5017w6271q3zkeb5g","kind":"artifact","artifact":{"schemaVersion":"localized-static-html-v4","kind":"static_html","locales":["zh-CN","en"],"defaultLocale":"zh-CN","documents":{"zh-CN":"$22","en":"$23"},"designDirections":{"schemaVersion":"dodot-design-directions-v1","directions":[{"id":"signal-funnel","name":"Signal Funnel","projectMetaphor":"一个需求简报进入一个本地管道，被逐段解析、被技能层路由，最终扇出为多种真实文件产物。焦点是单点输入到多路产出的因果流，而非工作台界面。","signatureVisual":"一条紧凑的横向管线：最左侧一个“简报输入”节点，逐级分解为原型/落地页/仪表盘/幻灯片四个选择分支，末端扇出 HTML/PDF/PPTX/MP4 四个文件面；各分支以实线连接，末端以不同文件品类标签收束，表达“一次意图，多种真实产物”。","heroGeometry":"横向流向的节点-边线图：左侧单点输入，向右逐级分叉为四条平行轨道，再汇聚为四个文件输出片。顶对齐，留白收窄，管线贯穿全宽。","sectionSequence":["funnel-hero","artifact-splitting","export-surfaces","design-system-contract","byok-agents"],"surfaceModel":"扁平文档面：用纸面/画布隐喻而不是窗口壳；各产物以说明性的文件面（色块+品类标签+格式角标）呈现，无真实截图。","palette":"暖纸底 #f7f4ee，墨色文字 #1c1a17，管线主色陶土 #c2553a，强调青绿 #1f8a70，弱化线 #dcd6ca，格式角标用墨绿。","typography":"衬线标题（Georgia/宋体感）+ 无衬线正文，管线节点用等宽标注格式名。段落密集、纸感背景、留白克制。","desktopComposition":"全宽横向管线为主视觉居上；下方按“分支→输出”两栏强调：左列出四类产物及其流向，右列出四个导出格式及可用性说明；底部为设计系统契约与 BYOK 代理行。","mobileTransformation":"横向管线折叠为纵向分段漏斗：输入节点置顶，四条分支改为竖排卡片逐层向下，最终在底部收束为一行四个文件格式标签；非简单堆叠，路径感保留。","mediaStrategy":"无真实媒体；全部为说明性的管线节点与文件面（derived_visual），用排版与流向关系表达机制，不伪造产品截图。","forbiddenPatterns":["通用 SaaS Hero + 三卡指标","终端/编辑器/浏览器壳主视觉","发光网格或粒子作为标志视觉","伪造产品截图或界面控件","桌面列直接竖向堆叠为手机版"],"compositionFingerprint":"single-intent-multi-file pipeline"},{"id":"design-system-ledger","name":"Design System Ledger","projectMetaphor":"设计系统作为团队品牌契约的账本：DESIGN.md 是登记在册的核心条目，编码代理是一排可调用的登记代理，每生成一份产物就在账本上做一次记账。焦点是契约化、可追溯的资产账目。","signatureVisual":"一张横向“账本页”：上方一行 DESIGN.md 作为总账条目，下方多行列示流水——每次请求被代理处理并落账为一行（原型/落地页/幻灯片…），每一行在右侧盖上一个导出格式戳（HTML/PDF/PPTX/MP4）。表达品牌契约 + 可追溯产出。","heroGeometry":"表格账本布局：顶部主账条目，下方多行记录，每行右侧对齐格式戳；以细横线分隔行，行内纵向对齐形成账目节奏。","sectionSequence":["ledger-hero","contract-rows","format-stamps","composable-skills","twenty-plus-agents"],"surfaceModel":"桌面排版面：整页表现为一张可读的长账本纸 — 单色背景、明确的网格行、窄间距、右侧齐平的戳记；无卡片墙，无窗口壳。","palette":"深底但不发光：墨青 #0e1a1a，羊皮账页浮层 #f2eddf，主字暖白 #f6f2e6，账目红 #b5462e，戳记灰绿 #7a8a75，行线 #2a3a38。","typography":"无衬线大标题 + 细正文；行标签用等宽、格式戳用大写等宽；账本式右对齐数字感，密度高、节奏规律。","desktopComposition":"全宽账本表为主视觉居上，标题行随后；中部为“契约条目 + 可组合技能”与“20+ 代理”两表对称；底部收束为一排聚合导出格式；整个页面保持账本通透感。","mobileTransformation":"账本宽表在手机端拆为纵向条目流：每一条目占一行，右侧戳记仍保留；顶部 DESIGN.md 总账缩为可横向滚动的单行，各表改为单列记录，保留账目横线节奏。","mediaStrategy":"无真实媒体；标志视觉为说明性账本表（derived_visual），用行与戳记的关系表达设计与代理的可追溯契约，不伪造截图。","forbiddenPatterns":["通用 SaaS Hero + 三卡指标","发光渐变/粒子作为标志视觉","伪造终端或窗口截图","假图表、假客户 logo","桌面宽表在手机端仅缩小不重组"],"compositionFingerprint":"design-contract-as-ledger-rows"},{"id":"skill-ring","name":"Skill Ring Agency","projectMetaphor":"编码代理不是工具而是一群可编排的机构：本地代理群接收同一份简报，各自以可组合技能接管一种产物（原型、页面、仪表盘、幻灯片、图片、视频），一个 DESIGN.md 统筹风格，最终产出多类真实文件。焦点是可编排、多角色协作的代理群。","signatureVisual":"一组围成扇环的角色节点：中心是“DESIGN.md 统筹”，周围按工种分布的代理技能节点（原型/落地页/仪表盘/幻灯片/图片/视频），每个角色扇出对应的导出格式；以明确的角色标识与格式圆标表达分工而非界面。","heroGeometry":"扇形编组：中心一根统筹轴，外围沿圆弧排布六个角色节点，各向外发出一条指向半透明文件面的轨道；弧形而非直线，强调编排协作。","sectionSequence":["ring-hero","division-of-labor","style-hub","offline-export","bring-your-own-key"],"surfaceModel":"空间轨道面：以同心圆/扇形轨道组织视觉，中心统筹、外围角色、最外文件面；层次用轨道与半透明文件面分离，非框格卡片。","palette":"中深中性底 #141318，轨道线 #3a3546，统筹中心暖琥珀 #e0a53c，角色色阶（青/紫/绿/橙穿插）、导出面透明白 #efeaff 低不透明度，弱化字 #8b86a0。","typography":"无衬线大标题 + 突出编号的工种标签；角色名用大写短词，导出格式用等宽角标；标题紧凑、空间多。","desktopComposition":"环形编排为主视觉居上，中心统筹 + 六角色辐射；中部为“分工”与“风格统筹”并排两段；底部“离线导出 + BYOK”以横向轨道呈现，收束全页的编组隐喻。","mobileTransformation":"环在手机端展开为辐射列表：中心统筹置顶，六个角色改为按工种纵排的卡片，每个下方内联导出格式角标；弧形简化为半圆段与分段线，编排层次保留。","mediaStrategy":"无真实媒体；标志视觉为说明性扇环角色图（derived_visual），表达代理分工与风格统筹关系，不伪造截图。","forbiddenPatterns":["通用 SaaS Hero + 三卡指标","发光网格/粒子作为标志视觉","伪造编辑器/终端/浏览器窗口","假图表与假控件","手机端仅做桌面堆叠"],"compositionFingerprint":"agent-ensemble-orchestrated-ring"}],"selectedDirectionId":"signal-funnel","selectionRationale":"需求是'一次简报，多种真实文件产物'，其核心机制是单点意图经技能层路由后扇出为多路真实文件。signal-funnel 的'单点输入→并行分支→四个导出文件面'横向管线，最直接地表达了这一因果机制，且 evidence 完全支撑：摘要证实生成原型/落地页/仪表盘/幻灯片等产物并以 HTML/PDF/PPTX/MP4 导出。该方向不依赖界面壳，用流向关系形成可读的 derived_visual，无外部媒体与伪造截图，桌面横向管线与手机纵向分段漏斗也提供了真正不同的空间重组。同时避开与 historicalSeed 的'三栏工作台 + 五步循环'雷同的工作台隐喻，选择了按产物输出面组织的管道隐喻。"},"designBrief":{"schemaVersion":"dodot-design-brief-v1","selectedDirectionId":"signal-funnel","projectMetaphor":"一个需求简报进入一个本地管道，被逐段解析、被技能层路由，最终扇出为多种真实文件产物。焦点是单点输入到多路产出的因果流，而非工作台界面。","signatureVisual":"一条紧凑的横向管线：最左侧一个“简报输入”节点，逐级分解为原型/落地页/仪表盘/幻灯片四个选择分支，末端扇出 HTML/PDF/PPTX/MP4 四个文件面；各分支以实线连接，末端以不同文件品类标签收束，表达“一次意图，多种真实产物”。","compositionFingerprint":"single-intent-multi-file pipeline","heroGeometry":"横向流向的节点-边线图：左侧单点输入，向右逐级分叉为四条平行轨道，再汇聚为四个文件输出片。顶对齐，留白收窄，管线贯穿全宽。","sectionSequence":["funnel-hero","artifact-splitting","export-surfaces","design-system-contract","byok-agents"],"surfaceModel":"扁平文档面：用纸面/画布隐喻而不是窗口壳；各产物以说明性的文件面（色块+品类标签+格式角标）呈现，无真实截图。","palette":"暖纸底 #f7f4ee，墨色文字 #1c1a17，管线主色陶土 #c2553a，强调青绿 #1f8a70，弱化线 #dcd6ca，格式角标用墨绿。","typography":"衬线标题（Georgia/宋体感）+ 无衬线正文，管线节点用等宽标注格式名。段落密集、纸感背景、留白克制。","desktopComposition":"全宽横向管线为主视觉居上；下方按“分支→输出”两栏强调：左列出四类产物及其流向，右列出四个导出格式及可用性说明；底部为设计系统契约与 BYOK 代理行。","mobileTransformation":"横向管线折叠为纵向分段漏斗：输入节点置顶，四条分支改为竖排卡片逐层向下，最终在底部收束为一行四个文件格式标签；非简单堆叠，路径感保留。","mediaStrategy":"无真实媒体；全部为说明性的管线节点与文件面（derived_visual），用排版与流向关系表达机制，不伪造产品截图。","evidencePlan":["用描述事实：本地优先桌面应用、编码代理变设计引擎（evidence: repository.description）","用摘要事实：生成原型/落地页/仪表盘/幻灯片/图片/视频（evidence: summary claim）","用摘要事实：HTML/PDF/PPTX/MP4 导出（evidence: summary claim）","用摘要事实：支持 BYOK 连接 20+ CLI 代理（evidence: summary claim and repository.description）","用 readme 事实：可组合技能、DESIGN.md 设计系统、沙箱预览（evidence: summary claim / readme headings）","避免无支撑的具体指标与客户/定价/测试性陈述"],"localeContract":{"zh-CN":"中文按摘要本地化文案（slogan/oneLine/overview/highlights）自然措辞，段落密度适中，突出“一次简报多种文件产物”的因果叙事。","en":"英文按 summary.localizations.en 措辞，保持同一节序与结构，自然密度，强调 single brief → multiple real artifacts 的 flow。"},"forbiddenPatterns":["通用 SaaS Hero + 三卡指标","终端/编辑器/浏览器/仪表盘壳主视觉","发光网格或粒子作为标志视觉","伪造产品截图、假图表、假控件、假客户 logo","桌面列直接竖向堆叠为手机版","与 antiTemplateContext 或 historicalSeed 的三栏工作台隐喻重复"],"historicalReuse":{"sourceAssetId":"HEAD:deepseek-v1/nexu-io-open-design","decision":"rebuild","rationale":"旧资产以“三栏暗色工作台 + agent-native 五步循环”为主视觉，强调的是工具界面而非产品机制。当前事实的核心是“单点简报扇出多种真实文件”，用管道隐喻更能直接表达该因果机制；保留其 dark/paper 之外的风格方向会与工作台套壳雷同并贴近 Forbidden 默认。故重建视觉语言，仅提炼底层可行的排版关系。","reusedElements":["窄留白、紧凑管道式分段节奏可作为排版参考","用线条/标签表达过程关系的思路（以管线方式延续）","derived_visual 自包含、无外部媒体、无伪造截图的原则"],"discardedElements":["三栏暗色工作台界面壳（left lib / center canvas / right surfaces）","agent-native 五步循环的横向流程叙事（改为产物输出面的管线）","#0b0a0f 暗底 + 紫绿 palette（改为暖纸面与陶土/青绿）","原 index.html 的既有一切 HTML/文案，不作为 V4 产物"]}},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现 signal-funnel 专属 Brief：五节序与 brief.sectionSequence 完全一致（funnel-hero/artifact-splitting/export-surfaces/design-system-contract/byok-agents）。横向右向管线主视觉真实存在——桌面 SVG 呈现简报输入→四分支（原型/落地页/仪表盘/幻灯片）→末端 HTML/PDF/PPTX/MP4 四个文件面；手机端存在独立的 pipe-mobile SVG（viewBox 320x516），将横向管线真正重构为纵向分段漏斗（输入置顶→四条分支竖排卡片逐层向下→底部收束一行四个格式标签），兑现了 brief.mobileTransformation 契约，非桌面等比缩小更非简单堆叠。全部叙事均有材料依据（repository.description/readme/summary），无假指标、假控件、定价或伪造截图。暖纸底/陶土/青绿 palette、衬线标题+等宽格式标注与 brief 一致，未回退通用 Hero、三卡、设备壳、发光网格或工作台隐喻。双语结构等价、内容自然。唯 en 一处轻微拼写错误，不足以阻塞。","checks":{"projectFit":{"passed":true,"evidence":"五节 data-dodot-section = funnel-hero, artifact-splitting, export-surfaces, design-system-contract, byok-agents，与 brief.sectionSequence 逐项匹配；主视觉为输入节点→四条并行分支→四文件面的横向节点-边线图；桌面两栏'分支→输出'、底部设计系统契约与 BYOK 均按 brief.desktopComposition 落地；palette(#f7f4ee/#1c1a17/#c2553a/#1f8a70/#dcd6ca/墨绿格式角标)、衬线标题+等宽格式标注与 brief 一致。"},"evidenceBound":{"passed":true,"evidence":"本地优先桌面应用、生成原型/落地页/仪表盘/幻灯片/图片/视频、HTML/PDF/PPTX/MP4 导出、BYOK 连接 20+ CLI 代理（Claude Code/Codex/Cursor/DeepSeek Harness/OpenCode）、可组合技能/DESIGN.md/沙箱 iframe 预览，全部可在 material.summary.evidence 与 repository.description/readme.headings 寻得；GitHub 来源链接触达真实仓库；无未支撑指标、定价、客户或测试性陈述。"},"signatureVisual":{"passed":true,"evidence":"signatureVisual 真实存在：桌面 pipe-desktop(viewBox 0 0 520 320)绘制左侧简报节点，向右经 split 点分叉为四条分支分别指向原型/落地页/仪表盘/幻灯片，末端扇出 HTML/PDF/PPTX/MP4 四个文件面（face 色块+品类标签+格式角标），带 role=img aria-label；均为自包含说明性 SVG（derived_visual），无伪造产品截图。"},"mobileTransformation":{"passed":true,"evidence":"@media(max-width:840px) 将 .pipe-desktop display:none 并切换到独立 pipe-mobile SVG(viewBox 0 0 320 516)：简报输入节点置顶，四条分支改竖排卡片逐层向下，最终收束为底部一行 HTML/PDF/PPTX/MP4 四个格式标签，保留路径线与分段线；这是横向向纵向的真正重构（与桌面横排是两个不同的 SVG 变体），非等比缩小亦非简单堆叠，兑现 brief.mobileTransformation。export surfaces 在 840/520px 分二列/单列属常规卡片流式重排，不影响主视觉重构判定。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 均为五节同序、同结构、信息等价：h1（一条本地管道/one local pipe）、四分支与四导出面、图片视频与 HyperFrame、BYOK 20+、DESIGN.md 契约逐节对应；文案各自自然达意（zh 按摘要中文化，en 按 summary.localizations.en 措辞与密度），无漏译或错位；仅 en 一处拼写小瑕，见 issues。"},"antiTemplate":{"passed":true,"evidence":"主视觉为横向管道节点-边线图，非通用 SaaS Hero+三卡指标；无终端/编辑器/浏览器/仪表盘窗口壳，产物以纸面/文件面呈现，无手机壳；无发光网格或粒子标志；export 四格式面与 split 分支列表均为 brief.desktopComposition 明示的'分支→输出'结构而非模板式三卡/卡片墙；管道隐喻避开 historicalSeed 的三栏工作台隐喻雷同。"},"noFakeUi":{"passed":true,"evidence":"页面含实 source 的 SVG 与文本，无

一条本地管道，把一次简报变成多种真实文件

一份简报，逐段解析成不同产物

拆分子

四种导出文件面，收束在纸面上

DESIGN.md：让产物守住一套设计语言

Bring Your Own Key：任选你的编码代理

One local pipe turns a single brief into real files

A brief is parsed into different deliverables

Splits further

Four export file faces, delivered on paper

DESIGN.md keeps every artifact on one design language

Bring Your Own Key: pick the coding agent you already use

一条本地管道，
把一次简报变成多种真实文件