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:T59aa, OpenPencil · 开源 AI 原生矢量设计工具

openpencil · zseven-w

同一份 .op 源码，
双面化为一幅活的矢量画布

开源 AI 原生矢量设计工具。你在无限画布上用自然语言下达提示词，OpenPencil 实时把界面生成出来——而这一切的底层，是一个可 diff、Git 友好、JSON 格式的 Design-as-Code 源文档。代码这一面与画布那一面，始终由同一条数据索引线同步。

01 / root

一个 .op 源节点，两副面孔

在最上层没有“设计文件”和“代码”之分——只有一棵源文档。每个 JSON 键既是一段可以审查、diff、回滚的记录，也是一条可以实时渲染出来的矢量路径。它是同一个数据的两面，而不是两份需要同步的副本。

"shape": {
"type": "circle",
"cx": 612, "cy": 205,
"r": 26,
"fill": "source"
}
"style": { "accent": "indigo" }

◎ circle · cx=612 cy=205 r=26
● fill = source
↗ live on canvas
▣ selectable node 0x01
… rendered from JSON

02 / mechanism

Design-as-Code：JSON 本身就是画布

因为画布就是 JSON，所以“可设计的东西”和“可 diff 的东西”是同一件事。每一次编辑都落在同一棵结构里，编辑器与数据模型之间没有翻译层，也就没有不同步的可能。

Git 友好

源文档是纯文本 JSON，能一条龙进入版本控制、diff 审查与历史回滚。

可审查

属性改动逐键可见，设计决策变成可读、可批注、可引用的一行。

单一真源

渲染从不复制数据，而是实时读取同一份结构，杜绝双份漂移。

.op {
"meta" : {...},
"root" : { ... },
}

＋ same file
▸ one live canvas
⌁ one sync-line

03 / prompt

提示词一笔落成新节点

你在画布上输入一句自然语言，OpenPencil 把它化作一条实时流式渲染的修改——在无限画布上，文字直接长成可编辑、可继续提示的矢量内容。

"> talk" : "做一个浅色的状态卡片，圆角，左上角一行内置 MCP 提示"
"@agent" : "team:ui"

>>> drop StateCard
>>> ring card / radius=14
>>> set fill=paper, accent=amber

04 / agents

并发 Agent Teams：提示词上分叉出分支

多个生成智能体组成一个团队，同时在同一个源文档上协作分支——每个 agent 拥有自己的职责枝干，产出合并回同一棵树，把一次设计变成一场并行的构造。

root · openpencil.op

─ branch team:canvas ·layout

─ branch team:style ·color/font

node accent ← merged amber

─ branch team:mcp ·bridge

node server ← merged on

─ branch team:export ·renderers

05 / export

一套源码，多平台导出

同一棵源文档直接投影到不同渲染器，从 Web 组件到移动端，随时生成可用代码——而不是从头再画一遍。

React + Tailwind

组件化输出，直接进入前端工程。

HTML + CSS

纯净标记，零依赖即可运行。

Vue

响应式组件，与既有生态衔接。

Flutter

跨平台 UI 骨架，移动端就绪。

06 / bridge

内置 MCP 服务器：CLI 终端桥

内置 MCP 服务器可一键安装进 Claude Code、Codex、OpenCode 等 CLI，让你在终端里读写 .op 文件——把设计工具挂进你的 agent 工作流。

$ op mcp install --claude
[ok] server added to Claude Code

$ op file read ./ui.op --node card
→ {"type":"card","radius":14,...}

$ op agent @team:style --accent amber

不用离开命令行，就能读取节点、下发提示词、触发代码生成。源文档的接口就是你的协作接口。

Claude Code Codex OpenCode MCP Server .op read / write

07 / together

实时协作 + MIT 开源

通过认证的 P2P 会话与公共中继实时协作，用配对码加入，实时远程光标并自动解决冲突。整套核心以 Rust 构建，MIT 许可，可自建 Web 与桌面端。

桌面端覆盖 macOS、Windows、Linux，支持 .op 文件关联双击打开；也有 Web 版本随时可用。所有核心代码开源，改装与自托管自由。

作者 zseven-w · Rust 核心 · MIT · stars 5515 · forks 488 · open issues 13

$ cargo run -p op-host-desktop
$ op collab --pair <code>
[ok] relay · P2P · live cursors
$ cargo test --workspace

openpencil · zseven-w Rust · MIT · Design-as-Code op.zseven.tech github.com/zseven-w/openpencil

23:T5481, OpenPencil · Open-source AI-native vector design tool

openpencil · zseven-w

One .op source,
two faces of a live canvas

The open-source, AI-native vector design tool. Describe an interface in natural language on an infinite canvas and OpenPencil renders it in real time — backed underneath by one diffable, Git-friendly, JSON Design-as-Code document. The code face and the canvas face are kept in sync by a single shared data index.

01 / root

One .op node, two faces

At the top there is no separate “design file” and “code” — only one source document. Every JSON key is both a record you can review, diff, and roll back, and a vector path that renders live. It is one piece of data wearing two faces, not two copies that must stay in step.

"shape": {
"type": "circle",
"cx": 612, "cy": 205,
"r": 26,
"fill": "source"
}
"style": { "accent": "indigo" }

◎ circle · cx=612 cy=205 r=26
● fill = source
↗ live on canvas
▣ selectable node 0x01
rendered from JSON

02 / mechanism

Design-as-Code: JSON that is a canvas

Because the canvas is JSON, what can be designed and what can be diffed are the same thing. Every edit lands in the same structure, with no translation layer between editor and data model — so there is nothing to fall out of sync.

Git-friendly

The source document is plain-text JSON, so it drops straight into version control, diff review, and safe rollback.

Auditable

Property changes stay visible key by key, turning design decisions into readable, commentable, citable lines.

Single source

Rendering never copies the data — it reads the one structure live, so there is no drift to chase.

.op {
"meta" : {...},
"root" : { ... },
}

＋ same file
▸ one live canvas
⌁ one sync-line

03 / prompt

A prompt stroke lands a new node

Type a plain-language instruction on the canvas and OpenPencil folds it into a live, streaming edit — text grows directly into editable, re-promptable vector content right on the infinite canvas.

"> talk" : "make a light status card, rounded corners, a built-in MCP hint in the top-left"
"@agent" : "team:ui"

>>> drop StateCard
>>> ring card / radius=14
>>> set fill=paper, accent=amber

04 / agents

Concurrent Agent Teams: forks on a prompt

A team of generation agents work concurrently on the same source document — each takes its own branch of responsibility and merges back into one tree, turning a single design into a parallel construction.

root · openpencil.op

─ branch team:canvas ·layout

─ branch team:style ·color/font

node accent ← merged amber

─ branch team:mcp ·bridge

node server ← merged on

─ branch team:export ·renderers

05 / export

One source tree, exported everywhere

The same source document projects directly onto different renderers — from web components to mobile — producing usable code on demand rather than redrawing it by hand.

React + Tailwind

Component output, ready for the front end.

HTML + CSS

Clean, dependency-free markup that just runs.

Vue

Reactive components that meet an existing stack.

Flutter

Cross-platform UI skeletons, mobile-ready.

06 / bridge

Built-in MCP server: the CLI terminal bridge

A built-in MCP server installs into CLIs like Claude Code, Codex, and OpenCode in one step, letting you read and write .op files from the terminal — wiring the design tool into your agent workflow.

$ op mcp install --claude
[ok] server added to Claude Code

$ op file read ./ui.op --node card
→ {"type":"card","radius":14,...}

$ op agent @team:style --accent amber

Read nodes, send prompts, and trigger code generation without leaving the command line. The source document's contract is your collaboration interface.

Claude Code Codex OpenCode MCP Server .op read / write

07 / together

Real-time collaboration, MIT open source

Collaborate live over authenticated P2P sessions with a public relay — join with a pairing code, see remote cursors in real time, and resolve conflicts automatically. The whole core is built in Rust and released under MIT, so you can self-host web and desktop builds.

Desktops cover macOS, Windows, and Linux with .op file association for double-click open, plus a web build that is always at hand. Every core piece is open source — ready to modify and self-host.

by zseven-w · Rust core · MIT · stars 5515 · forks 488 · open issues 13

$ cargo run -p op-host-desktop
$ op collab --pair <code>
[ok] relay · P2P · live cursors
$ cargo test --workspace

openpencil · zseven-w Rust · MIT · Design-as-Code op.zseven.tech github.com/zseven-w/openpencil

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","cmt2xbull00rwj9djyim93jv7:zh-CN:beautified",{"project":{"id":"cmt2xbull00rwj9djyim93jv7","slug":"zseven-w-openpencil","name":"openpencil","description":"用提示词在画布上直接生成 UI 的设计工具","authorName":"zseven-w","authorVerification":{"verified":false,"verifiedAt":null},"category":"development_tools","subcategory":"data_ai_tools","experienceUrl":"https://op.zseven.tech/","qualityScore":78,"featured":false,"officialSite":null,"views":{"original":{"available":true},"official":{"available":false,"reason":"disabled_by_policy"},"beautified":{"available":true,"reason":null},"defaultView":"beautified"},"beautifiedView":{"revisionId":"cmt2y49tn005owg4m9mewuuum","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":"dir-source-document","name":"Living Source Document","projectMetaphor":"The .op design file as a living source document — one data structure that renders two faces: raw JSON nodes on one side and live vector canvas on the other, kept in sync by Design-as-Code.","signatureVisual":"A root-node graph that unfolds outward like a tree, where each JSON key fractures into a rendered vector path; a single sync-line rides the same indices on both the code face and the canvas face, so every node is provably the same data.","heroGeometry":"Radial unfold: one source root at center, code-nodes and canvas-paths nesting in concentric offset rings that open with depth from a single seed node.","sectionSequence":["source root (one .op node, two faces)","Design-as-Code: JSON that is a canvas","prompt stroke → live node drop (Prompt-to-Canvas)","concurrent agent teams as forking branches","export renderers: react / html+css / vue / flutter","MCP server + CLI terminal bridge","collaboration relay & license strip"],"surfaceModel":"Nested, offset articulating planes — each section is a thin card-surface that stacks in code-depth, sharing one baseline grid so the 'data is a layer' idea is spatial, not decorative.","palette":"Warm paper tint #F7F5F0 base with ink #1B1A17 text; one accent pair of 'source' deep indigo #3B3F66 and 'render' signal amber #C06A2C, reserved for the code/canvas duality.","typography":"Editorial mono-led: a compact monospace for node identifiers and key labels, paired with a clean humanist for prose — the type itself distinguishes code-facts from narrative.","desktopComposition":"Full-height unfolded tree as the hero centerpiece, left rail of node index, prose blocks interleaved with exploded node diagrams; sections track the two-face sync-line down the page.","mobileTransformation":"The radial tree collapses into a collapsible accordion root: a single seed chip first, tap to expand branches stacked vertically; the sync-line becomes a connecting rail on the left gutter.","mediaStrategy":"No media region — no usable local assets. The node-graph unfold and the two-face sync-line form the signature visual in pure HTML/CSS with real project structure.","forbiddenPatterns":["browser/editor/terminal shell that fakes a product screenshot","three metric cards under a slogan","feature-card wall with interchangeable copy","decorative particle/glow field used as a substitute for structure"],"compositionFingerprint":"a radial source-root tree unfolding into coupled code-face and canvas-face rings with one shared data-index sync-line"},{"id":"dir-forged-stroke","name":"Forged Stroke Constellation","projectMetaphor":"Prompt, brush and code are one continuous gesture — a single forged line that is simultaneously a pencil path, a code expression, and the route a generated UI travels.","signatureVisual":"A single unbroken stroke drawn from a starting prompt dot, swerving through a constellation of agent-team stations (each a small node where the line forks into one exported grammar), before landing as a rendered vector shape.","heroGeometry":"One continuous curve threading a sparse constellation — the stroke loops around stations rather than reading as a tree or rail.","sectionSequence":["one gesture: prompt to shape","agent team constellation: concurrent forks on the line","multi-model intelligence switching along the route","MCP server as a side-channel bridge","export renderers spiral out from junctions","style-guide library as a held palette","collaboration & license strip"],"surfaceModel":"Confetti-scale floating sheets scattered across a deep neutral field, each sheet a translucent catch-point; the stroked line passes over/through them giving a fluid, motion-led surface rather than stacked layers.","palette":"Deep calm graphite #0F1110 field with a luminous single-accent mint #4EDCA6 for the stroke and stations; secondary muted clay #C4713B for export forks only.","typography":"Expressive high-contrast display for gesture statements, geometric sans throughout; the stroke-narrative, not code, is typographically privileged.","desktopComposition":"Floating canvas as the hero: the forged stroke crossing freely over scattered translucent sheets; sections hang as itinerary stops along the curve rather than rigid rows.","mobileTransformation":"The constellation unstrings into a vertical route — the stroke redraws top to bottom as a stepped connector, stations become tappable nodes, sheets stack into full-width panels beneath each stop.","mediaStrategy":"No media region; the live continuous stroke crossing agent-station nodes is the signature visual, realized in SVG motion with real project junctures.","forbiddenPatterns":["a generic glowing/pulse particle field with no structural meaning","phone/browser shell wrapping fake artboards","interchangeable feature-card grid","fake testimonial or customer-logos band"],"compositionFingerprint":"a single free-roving forged stroke threading a sparse constellation of concurrent agent-team stations in a deep float field"},{"id":"dir-diff-river","name":"Auditable Diff River","projectMetaphor":"Because .op files are plain JSON, every design edit is a reviewable diff — the product is a river of reversible commits whose current course renders a living canvas.","signatureVisual":"A horizontal river of version nodes; selected commits separate into a paired 'old/new' JSON diff sheet whose edited keys echo down into the rendered vector delta below — the audit trail and the art are the same line.","heroGeometry":"A horizontal flowing river with commit-stones; at the 'now' bend it splits into two mirrored banks showing the diff against the render delta.","sectionSequence":["current state at the river's now-bend",".op diff ledger: git-friendly audit","prompt-driven fork tributaries (agent teams)","real-time collaboration convoy","export render streams across platforms","MCP / CLI terminal docks along the bank","license & signal strip"],"surfaceModel":"Two mirrored river banks in perspective receding to a vanishing point; banks are thin ruled planes, giving the page a long-form audit-timeline depth instead of stacked cards.","palette":"Cool slate paper #EDEEF2 with ink #181A1E; river accent is a stable teal #1E7F8E for movement, with a strict red-green pair (#B4412E / #2E7D4F) used only inside diff hunk sheets.","typography":"Dual-axis: a tabular mono for diff hunks and version ids, a serif-tilt heading for the narrative — authority on the audit side, warmth on the story side.","desktopComposition":"Full-width receding river as the hero with mirrored diff banks; sections flow downstream as the page scrolls, each section a bend in the river carrying its own evidence ledger.","mobileTransformation":"The perspective river flattens to a vertical timeline spine; commit-stones stack on the spine, diff sheets expand into full-width tapped hunks, mirrored banks become side-by-side panels that stack.","mediaStrategy":"No media region; the receding diff-river with mirrored old/new banks and render-delta echo is the signature visual built from the project's core JSON fact.","forbiddenPatterns":["dashboard/admin shell with charts and fake KPI tiles","three-item metric band","editor mockup that impersonates a screenshot","decorative perspective grid with no relationship"],"compositionFingerprint":"a perspective-creased audit river whose mirrored old/new .op diff banks echo their edits as rendered vector deltas along a downstream flow"}],"selectedDirectionId":"dir-source-document","selectionRationale":"The project's defining, provable mechanism is Design-as-Code: a .op file is at once a JSON document and a live vector canvas. dir-source-document makes that duality the actual page structure — a rooted node-tree whose code-face and canvas-face are kept in sync by one data-index line — which is both the most evidence-true claim and the most structurally original composition. It avoids the two recent antiTemplate fingerprints (the relay/spine rail and the translucent screen pile), uses no media region because no safe local asset exists, and satisfies all four sections by real features rather than marketing grammar. dir-forged-stroke expresses prompt-to-UI fluidly but risks decorative stroke grammar; dir-diff-river is strong on the git claim but leans into audit-sheet UI. The source-document direction holds the tightest coupling between the hero geometry, the sync-line compositionFingerprint, and the product's verifiable core fact."},"designBrief":{"schemaVersion":"dodot-design-brief-v1","selectedDirectionId":"dir-source-document","projectMetaphor":"The .op design file as a living source document — one data structure that renders two faces: raw JSON nodes on one side and live vector canvas on the other, kept in sync by Design-as-Code.","signatureVisual":"A root-node graph that unfolds outward like a tree, where each JSON key fractures into a rendered vector path; a single sync-line rides the same indices on both the code face and the canvas face, so every node is provably the same data.","compositionFingerprint":"a radial source-root tree unfolding into coupled code-face and canvas-face rings with one shared data-index sync-line","heroGeometry":"Radial unfold: one source root at center, code-nodes and canvas-paths nesting in concentric offset rings that open with depth from a single seed node.","sectionSequence":["source root (one .op node, two faces)","Design-as-Code: JSON that is a canvas","prompt stroke → live node drop (Prompt-to-Canvas)","concurrent agent teams as forking branches","export renderers: react / html+css / vue / flutter","MCP server + CLI terminal bridge","collaboration relay & license strip"],"surfaceModel":"Nested, offset articulating planes — each section is a thin card-surface that stacks in code-depth, sharing one baseline grid so the 'data is a layer' idea is spatial, not decorative.","palette":"Warm paper tint #F7F5F0 base with ink #1B1A17 text; one accent pair of 'source' deep indigo #3B3F66 and 'render' signal amber #C06A2C, reserved for the code/canvas duality.","typography":"Editorial mono-led: a compact monospace for node identifiers and key labels, paired with a clean humanist for prose — the type itself distinguishes code-facts from narrative.","desktopComposition":"Full-height unfolded tree as the hero centerpiece, left rail of node index, prose blocks interleaved with exploded node diagrams; sections track the two-face sync-line down the page.","mobileTransformation":"The radial tree collapses into a collapsible accordion root: a single seed chip first, tap to expand branches stacked vertically; the sync-line becomes a connecting rail on the left gutter.","mediaStrategy":"No media region — no usable local assets. The node-graph unfold and the two-face sync-line form the signature visual in pure HTML/CSS with real project structure.","evidencePlan":["Signature visual: a rooted source-tree whose code-face nodes and canvas-face paths are joined by a single data-index line — constructed from the real Design-as-Code claim, not a product screenshot.","Section-driven evidence: each of Prompt-to-Canvas, concurrent Agent Teams, export renderers, and the built-in MCP/CLI bridge is drawn from verified summary claims and rendered as mechanism, not marketing copy.","Locale contract: zh-CN and en share the brief and section sequence; node labels and diff/export vocabulary are keyed as data so both languages read naturally with matching density."],"localeContract":{"zh-CN":"zh-CN 为默认语言；层级节点、字段与章节沿用同一 source-tree 顺序；代码/画布双面用成对 (code/render) 与源码术语表达，保持与英文一致的机制叙述节奏。","en":"en mirrors the exact source-tree section order and node grammar; the code/canvas duality and all mechanism vocabulary (Design-as-Code, MCP, export renderers) are rendered as data keys for natural parity."},"forbiddenPatterns":["browser/editor/terminal shell that fakes a product screenshot","three metric cards under a slogan","feature-card wall with interchangeable copy","decorative particle/glow field used as a substitute for structure","a composition fingerprint or section sequence already used in the two recent antiTemplateContext pages (request spine / resting dot relay; translucent screen-pile with per-layer scroll tracks)"]},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现了被选中的 dir-source-document 方向：以径向 source-root 树作为核心签名视觉，code-face 节点与 canvas-face 矢量路径由一条共享 data-index sync-line 贯穿；7 个章节严格按照 brief 的 sectionSequence 组织，机制均由真实材料支撑；手机端 CSS 形成明确的重新布局，中英双语章节结构等价且各自自然；未回退到通用 Hero/三卡/卡片墙，也未使用无依据设备壳或装饰性渐变网格，无假控件。","checks":{"projectFit":{"passed":true,"evidence":"页面首屏是一棵 radial source-root 树，左为 code-face（JSON 键节点），右为 canvas-face（矢量路径），共享 sync-line 贯穿，正中 brief 的 selectedDirectionId=dir-source-document 与 heroGeometry=Radial unfold。Section 按 data-dodot-section 依次为 source-root、design-as-code、prompt-to-canvas、agent-teams、export-renderers、mcp-cli、collaboration-license，与 brief.sectionSequence 一一对应（7 节，落在 4-7 范围内）。"},"evidenceBound":{"passed":true,"evidence":"所有关键机制均有材料依据：Rust 核心、MIT 许可、Design-as-Code / JSON .op / Git-friendly / diffable（material.summary 与 readme）；prompt 直接在无限画布实时生成 UI；内置 MCP 服务器一键装进 Claude Code / Codex / OpenCode 并读写 .op（summary claim 3）；导出 React+Tailwind / HTML+CSS / Vue / Flutter（claim 4）；桌面 macOS/Windows/Linux + Web 及 .op 文件关联双击打开（claim 5）；P2P 认证会话 / 公共中继 / 配对码 / 远程光标 / 冲突解决（claim 6）；页脚 stars 5515 / forks 488 / open issues 13 亦与 repository 字段一致。未见任何无材料支撑的主张。"},"signatureVisual":{"passed":true,"evidence":"hero 内为真实内联 SVG（.sig），左柱绘制 .op/root/nodes/record/vector/style/sync 节点环并带轴线与同心圆，右柱绘制 shape/path/fill/curve 矢量路径，中间一条 path（M150 205 C 205 205 ... 410 205）作为 sync-line 贯穿两面的 shared index，末端 render 色圆点。这正是 brief.signatureVisual 所述'root-node graph ... 同一 syncy-line'的忠实实现。"},"mobileTransformation":{"passed":true,"evidence":"max-width:640px 与 900px 两档媒体查询形成重构而非缩放：duplex pane 的 .body 由双列改单列并将上下两副 face 上下堆叠、exportgrid 逐级塌陷到 1fr、dock 改单列、sig 更改 aspect-ratio、隐藏背景装饰环、收紧 padding；QA 报 zh-CN/en 移动端 scrollWidth=390=clientWidth，无横向溢出，构成真正的重新布局。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 共享同一节顺序、同一节点语法与机制词汇（Design-as-Code / MCP / code-face / canvas-face / sync-line / export renderers），代码、终端、SVG 结构完全同构；两版叙述均自然流畅，密度匹配，无丢失或杜撰内容。"},"antiTemplate":{"passed":true,"evidence":"未回退通用 Hero/三卡/卡片墙：hero 为径向树签名而非标语+三指标；Design-as-Code 节的三 stop 是 brief 下该节的实际机制，而非口号下指标带；无浏览器/编辑器壳冒充产品截图；无装饰性粒子/光晕场，背景仅极淡同心圆环呼应径向主题并 aria-hidden。构成指纹为'radial source-root 树 + 双面 sync-line'，与 antiTemplateContext 中两条近指纹（request spine 中继 rail；半透明 screen-pile）均不同。"},"noFakeUi":{"passed":true,"evidence":"终端块（$ op mcp install --claude 等）与 pane topbar（Editor.LOAD('document.op')）均为静态说明性内容，与 brief 明确列入的 mcp-cli / terminal-bridge 环节的机制呈现一体，不冒充产品真实截图或可交互控制；无按钮/输入/可点击假控件（.node cursor:default 取消交互暗示），QA fakeControlCount=0。"}},"issues":[{"code":"mobile-accordion-not-literal","severity":"warning","locale":"all","description":"brief.mobileTransformation 契约写明径向树应在手机端塌缩为'可展开的 accordion root：单个 seed chip，点击后分支纵向堆叠，sync-line 化为左侧 gutter 的连接轨'；页面在 640px 下仅将树等比缩小并堆叠 duplex 面，未实现 accordion 交互折叠，也未显式保留左侧连接轨。","repairInstruction":"可保留现有断点重构（已正确），如需完全贴合契约，可增加轻量交互（如仅视觉呈现、无需脚本的 seed→branch 纵向展开层级，或左侧 gutter 对齐 rail），否则维持现状即可——仅为契约字面差异，不影响通过。"}]},"repairEvidence":[],"provenance":{"executor":"opencode","model":"deepseek/deepseek-v4-flash","opencodeVersion":"1.1.58","promptVersion":"dodot-showcase-deepseek-v4","inputHash":"4c0f0de3ecb8ad067bcb45967b707547b35fafd2a1902261ac2c43e620c30544","artifactHash":"b677f982c241a68ff8134b78ad1bf60a0f38d82003ba7fcdf3034df651407a58","designSkill":"dodot-showcase-design"},"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":7,"sectionCount":7,"textLength":2708,"cjkCount":765,"latinLetterCount":1169,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":5581,"h1Top":208.59375,"bottomInset":79.90625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"32b472316afec55de4219afc556ed8f41ea04242150193c13411818406a9735b","middle":"d08552a3d149abfad21525030f2c50303ba918335bb008b00ca04c28a8df5520","bottom":"57d7373ccb3a592f4c560ccdee31f5cd14914dca71766542bfb91dc9b32167b9"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":7,"sectionCount":7,"textLength":2641,"cjkCount":765,"latinLetterCount":1122,"scrollWidth":390,"clientWidth":390,"scrollHeight":6250,"h1Top":136.59375,"bottomInset":79.921875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"825ce065fd851edff706541863243f1446761b09c74c14726e83bca4dc035669","middle":"2984d8c52b4254c83b8741595d5bf95e291d1ba43e40860ec5f9d07230251f08","bottom":"6945d0e9ab6fa2b01e451713b77ea4cdb3f474b166a61afa292f4947edb6d7d5"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":7,"sectionCount":7,"textLength":4676,"cjkCount":0,"latinLetterCount":3475,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":5787,"h1Top":208.59375,"bottomInset":80.203125,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"5872d17952c91dc976bdde6a9f0637e18a0f13393f447631f001136385e5b5d3","middle":"f2a34b781bede12d9cd4d8c2bcae03f43454ac5aea5d9c915aaeb59832fd3acd","bottom":"6921c5995c4b01512656a0af8e7a175dc5cd56b78dcd87ece937ce0ffc7e815c"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":7,"sectionCount":7,"textLength":4609,"cjkCount":0,"latinLetterCount":3428,"scrollWidth":390,"clientWidth":390,"scrollHeight":6783,"h1Top":136.59375,"bottomInset":80.0625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"30c88cbf08eabfa5f94d2d0a85eade04ab91aab9a8972e514ead8396e0e66910","middle":"6c2db9d88b627be03ee86147807caf4b41f812726dbde0260d3f25f7c47f7ebc","bottom":"a137e76b09dcb435349ea5f1e7e27106402f64a0a2f90e10bcf0a41ae7a17ca7"},"consoleErrors":[],"networkRequests":[]}]}},"generatorVersion":"opencode-1.1.58:deepseek/deepseek-v4-flash:dodot-showcase-deepseek-v4","publishedAt":"2026-08-21T12:48:56.471Z"},"rawExtraction":{"projectRevisionId":"cmt2xbunm00s4j9dj4xz0bu4w","projectVersion":1,"sources":[{"canonicalKey":"github:zseven-w/openpencil","role":"primary","revisionVersion":1,"url":"https://github.com/ZSeven-W/openpencil"}],"facts":[{"key":"repository_owner","value":"zseven-w","evidence":[{"path":"repository.owner","excerpt":"zseven-w"}]},{"key":"repository_name","value":"openpencil","evidence":[{"path":"repository.name","excerpt":"openpencil"}]},{"key":"description","value":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.","evidence":[{"path":"repository.description","excerpt":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil."}]},{"key":"primary_language","value":"Rust","evidence":[{"path":"repository.language","excerpt":"Rust"}]},{"key":"license","value":"MIT","evidence":[{"path":"repository.license","excerpt":"MIT"}]},{"key":"topics","value":"agent, agent-team, ai, claude, claude-code, codex, dsh-plugin, fimga, flutter, mcp, opencode, openpencil, pencil, react, react-native, rust, skill, ui, vibecoding, vibedesign","evidence":[{"path":"repository.topics","excerpt":"agent, agent-team, ai, claude, claude-code, codex, dsh-plugin, fimga, flutter, mcp, opencode, openpencil, pencil, react, react-native, rust, skill, ui, vibecoding, vibedesign"}]},{"key":"source_count","value":"1","evidence":[{"path":"projectRevision.sources","excerpt":"github:zseven-w/openpencil"}]}],"taxonomy":{"category":"development_tools","subcategory":"data_ai_tools","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil."}]},"lifecycle":{"stage":"prototype","confidence":0.65,"evidence":[{"path":"readmeExcerpt","excerpt":"

$\"OpenPencil\"$

OpenPencil

The world's first open-source AI-native vector design tool.
_{Concurrent Agent Teams • Design-as-Code • Built-in MCP Server • Multi-model Intelligence}

English · 简体中文 · 繁體中文 "}]},"userIntents":[{"slug":"build_software","label":"构建或改进软件","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil."}]},{"slug":"automate_work","label":"自动化工作流程","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil."}]},{"slug":"create_content","label":"创作内容或设计","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil."}]},{"slug":"analyze_data","label":"分析与理解数据","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil."}]},{"slug":"learn_explore","label":"学习与探索","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil."}]}],"readme":{"headings":["Why OpenPencil","🎨 Prompt → Canvas","🤖 Concurrent Agent Teams","🧠 Multi-Model Intelligence","🔌 MCP Server","🎨 Style Guides","📦 Design-as-Code","🖥️ Runs Everywhere","⌨️ CLI — `op`","🎯 Multi-Platform Code Export","🧩 Embeddable SDK","🛡️ Design System Kit","👥 Real-Time Collaboration","Install","Cloning (with submodules)","Or already cloned — sync first so stale submodule URLs pick up .gitmodules changes:","Quick Start (Development)","Web dev server (builds the CanvasKit wasm bundle, then runs the headless web host)","Docker","AI-Native Design"],"commands":["cargo run -p op-host-desktop","docker run -d -p 3100:3100 \"ghcr.io/zseven-w/openpencil-web:v${VERSION}\"","docker build -f Dockerfile.web-rust -t openpencil-web-rust .","docker run -p 3100:3100 openpencil-web-rust","cargo build --workspace # Build all crates (add --release for prod)","cargo test --workspace # Run all tests","cargo check --workspace # Type check","cargo clippy --workspace --all-targets -- -D warnings # Lint","cargo fmt --all # Format","cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop)","cargo run -p op-cli -- # CLI (binary: op)","cargo check --workspace","cargo test --workspace","cargo clippy --workspace --all-targets -- -D warnings","cargo check --target wasm32-unknown-unknown -p op-collab --no-default-features","cargo check --target wasm32-unknown-unknown -p op-host-web --no-default-features --features web # kickoff §1.2 wasm32 invariant","cargo deny check && cargo deny --target wasm32-unknown-unknown check bans # cargo-deny (native + wasm32 bans; CI uses cargo-deny-action@v2)"]},"changeSet":[{"field":"authorName","beforeHash":"74234e98afe7498fb5daf1f36ac2d78acc339464f950703b8c019892f982b90b","afterHash":"a6aa529e5579740efeb70eaedd75428f96cd9cb4ae81bdb553adbfa402158d27"},{"field":"description","beforeHash":"74234e98afe7498fb5daf1f36ac2d78acc339464f950703b8c019892f982b90b","afterHash":"5958045a1700eda9449b2a4674264aff77a11934995bed34c858c7865575c975"},{"field":"experienceUrl","beforeHash":"74234e98afe7498fb5daf1f36ac2d78acc339464f950703b8c019892f982b90b","afterHash":"d6f75cc229bd84ea310cf537101aaf32ec26b6044980e8d415940ea7ab114304"},{"field":"name","beforeHash":"74234e98afe7498fb5daf1f36ac2d78acc339464f950703b8c019892f982b90b","afterHash":"43fa502de710be60940f5a8bfa24df41f87f2b86017ae39a08cb697a9277e8d2"},{"field":"repository","beforeHash":"74234e98afe7498fb5daf1f36ac2d78acc339464f950703b8c019892f982b90b","afterHash":"11bd515c54c927b9c560e735985864012f61b3d2df17c7c4853995e388aa77c3"},{"field":"sourceCount","beforeHash":"74234e98afe7498fb5daf1f36ac2d78acc339464f950703b8c019892f982b90b","afterHash":"6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b"}]},"publishedAt":"2026-08-21T12:39:53.347Z","updatedAt":"2026-08-21T12:39:53.420Z","summary":{"id":"cmt2xsmrd0028wg4mqt2dxm1w","projectType":"product","oneLine":"用提示词在画布上直接生成 UI 的设计工具","overview":"OpenPencil 是一款开源 AI 原生矢量设计工具，支持并发 Agent Teams 和 Design-as-Code。用户可以用自然语言描述界面，在无限画布上实时生成 UI，并支持多模型智能适配、内置 MCP 服务器、样式指南库和多种代码导出。提供桌面端和 Web 端，支持实时协作。","highlights":["提示词生成 UI","并发 Agent Teams","内置 MCP 服务器","多平台代码导出"],"bestFor":["设计师","开发者","Vibe Coding 爱好者"],"caveats":["AI 生成效果依赖模型能力","桌面端需下载安装","实时协作需网络连接"],"categorySuggestion":"design_creation","subcategorySuggestion":"ui_ux_design","lifecycleStages":["idea_requirements","product_design","frontend"],"audienceIntents":["create","build","evaluate","integrate"],"confidence":0.85,"evidence":[{"claim":"OpenPencil 自称是首个开源 AI 原生矢量设计工具，支持并发 Agent Teams 和 Design-as-Code。","sourceType":"description","locator":"https://github.com/ZSeven-W/openpencil"},{"claim":"支持自然语言提示词直接在无限画布上生成 UI，并实时流式渲染。","sourceType":"readme","locator":"https://github.com/ZSeven-W/openpencil"},{"claim":"内置 MCP 服务器，可一键安装到 Claude Code、Codex、OpenCode 等 CLI 中，通过终端读写 .op 文件。","sourceType":"readme","locator":"https://github.com/ZSeven-W/openpencil"},{"claim":".op 文件是 JSON 格式，支持 Git 友好、可 diff，并可导出为 React+Tailwind、HTML+CSS、Vue、Flutter 等多种代码。","sourceType":"readme","locator":"https://github.com/ZSeven-W/openpencil"},{"claim":"提供桌面应用（macOS、Windows、Linux）和 Web 应用，基于 Rust 核心，支持 .op 文件关联双击打开。","sourceType":"readme","locator":"https://github.com/ZSeven-W/openpencil"},{"claim":"支持实时协作，通过认证的 P2P 会话和公共中继，使用配对码加入，显示远程光标并解决冲突。","sourceType":"readme","locator":"https://github.com/ZSeven-W/openpencil"}],"publishedAt":"2026-08-21T12:39:53.347Z"},"github":{"url":"https://github.com/ZSeven-W/openpencil","ownerAvatarUrl":"https://avatars.githubusercontent.com/u/218180147?v=4","starsCount":5515,"forksCount":488,"language":"Rust","syncedAt":"2026-08-21T12:26:44.718Z","license":"MIT","defaultBranch":"main","archived":false,"disabled":false,"lastChangedAt":"2026-08-21T12:03:06.000Z","missing":false},"tags":[],"updates":[]},"entryPoint":"discovery","claim":{"state":"unclaimed","verified":false},"initialView":"beautified","community":{"viewer":null,"state":{"likesCount":0,"creativeCount":0,"followersCount":0,"commentsCount":0,"liked":false,"creative":false,"followed":false},"comments":{"comments":[],"nextCursor":null}}}]}],"$L24"]