人工智能AI Agent自主智能体桌面应用MCP Clients【免费下载链接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.项目地址https://gitcode.com/gh_mirrors/de/Kun点击查看免费下载Design mode设计模式是 Kun 桌面端 Codechat工作台内的一类Design 任务类型与顶层Work工作区并列。它的定位不是画图捷径而是 Kun 的需求 → 设计 → 计划 → 代码 → 验证主循环中的设计环节你在右侧面板描述一个 UI设计 Agent 生成一份自包含的 HTML 工件中央画布实时渲染你原地迭代最后通过内置的双向桥梁把成品交给编码 Agent 落地实现。读完本文你将掌握 Design 模式的完整架构、工件模型与持久化机制、设计↔代码集成闭环、节点画布、全部设置项、导出能力以及内置设计系统 skill 的运作原理并能在实际仓库源码中一一验证。1. 设计模式是什么一个内嵌在 IDE 里的 AI 设计工作站Design mode 的完整循环是在右侧面板描述设计需求通过设计上下文表单品牌色、语调、设计系统预设、结构化 tokens设计 Agent将一份自包含的 HTML 文档写入.kun-design/下的保留路径中央画布实时渲染该文档一个webview随 Agent 写入而刷新原地迭代——每一轮对话都会快照出一个新版本把定稿设计交给编码 AgentImplement in code编码 Agent 发布共享设计系统并开启一条全新的代码线程。三种工作模式在 Kun 中分工明确模式主要职责输出Code面向真实仓库工作编辑文件、运行命令、审查变更、交付实现代码 diff、计划、todos、评审、可运行的应用变更Design在实现之前把需求、参考资料或现有 UI 转化为视觉方向UI 草稿、交互式 HTML 原型、图元工件、导出原型、共享DESIGN_SYSTEM.mdWork起草、编辑、润色并导出办公文档文档工作区、内联补全/编辑、HTML / PDF / DOC / DOCX导出设计模式与 Code、Work 共享同一套运行时、提供商配置、审批机制和线程机制——它不是孤岛而是 Kun 工作流中设计与代码天然衔接的那一环。2. 架构三栏工作台与文件地图Design 模式渲染在 Code 的Workbench内与 Work 并列。AppShell只分叉settings与Workbench因此无需改动外壳。整体架构要点路由AppRoute增加designopenDesign/ensureDesignThreadForWorkspace/createDesignThread历史上镜像了内部write导航动作chat-store-navigation-actions.ts。设计线程由轻量注册表design/design-thread-registry.ts追踪。标签页WorkspaceModeTabs渲染 Code / Work共享 composer 选择 Code / Design 任务类型。三栏组件components/design/DesignSidebar——模式标签 工件列表按类型图标、版本数、implement / delete / rename、provenance 与 drift 徽章 New design / New canvasDesignCanvas——实时画布preview / codeshiki 高亮/ live来自代码模式的真实运行应用三种视图、viewport 切换、设备边框、浅色/深色背景、导出、重载graph工件会提前返回DesignGraphViewDesignAgentPanel——composer 可折叠设计上下文表单品牌色选择器、语调 chips、设计系统预设 iterate/new/busy 提示。Storedesign/design-workspace-store.ts一个精简 zustand store持有工件、激活 id、画布/viewport 状态、设计上下文、设置驱动的旋钮、错误横幅与设计系统哈希。它是工件变更与磁盘持久化的唯一所有者。实际仓库中的文件地图相对仓库根目录src/renderer/src/design/ design-types.ts DesignArtifact、DesignArtifactKind (html|canvas|svg)、 DesignCanvasView、viewport、createDesignArtifactId design-context.ts DesignContext、14 个预设、craft 基线、 formatDesignContextLines / formatDesignSystemMarkdown、hashDesignSystem design-turn-prompt.ts buildDesignTurnPrompt / buildDesignFromCodePrompt / buildDesignImageNodePrompt按 target 分叉 design-implement-prompt.ts buildImplementDesignPromptdesign → code design-workspace-store.ts 工作区 storezustand design-workspace-artifact-actions.ts 工件增删改动作 design-workspace-document-actions.ts 设计稿design document动作 design-artifact-persistence.ts meta.json sidecar 磁盘重建 design-thread-registry.ts 设计线程注册表 design-prompt-router.ts / design-turn-dispatch.ts / design-turn-submit.ts 回合分发链路 design-code-roundtrip.ts design ↔ code 往返 design-board.ts / design-board-svg.ts / canvas/ 节点画布/白板引擎graph 工件 src/renderer/src/components/design/ DesignWorkspaceView / DesignSidebar / DesignCanvas / DesignAgentPanel / DesignGraphView 等从源码结构看早期规划中的design-graph.ts/design-graph-run.ts节点画布引擎已演进为design-board.tscanvas/目录下的白板与 ShapeOps 引擎实现同时新增了design-workspace-index-persistence.ts工作区索引持久化与DesignDocument设计稿概念——详见第 6、12 节。3. 工件模型与持久化一个DesignArtifact的核心结构见 design-types.ts{ id: string kind: DesignArtifactKind // html | canvas | svg title: string relativePath: string // workspace-relative 的单文件文档路径当前最新版 createdAt: string updatedAt: string versions: DesignArtifactVersion[] // { id, relativePath, createdAt, summary } designMdPath?: string // 随 HTML/SVG 文档旅行的设计备注 prototypeLinks?: DesignPrototypeLink[] // 与其它 HTML 屏幕工件的计划流转 direction?: DesignDirection // Stitch 式命名探索分支 implementedAt?: string // 交给代码的时间缺失 尚未实现 implementedThreadId?: string // 实现它的代码线程provenance implementedDesignSystemHash?: string // 实现时的设计系统哈希code-drift 基线 }磁盘布局每个工件是一个目录.kun-design/id/HTML 工件v1.html、v2.html、……最新版即当前文档画布/图元工件graph.json或canvasJSON外加nodeId.html/nodeId.png节点输出meta.json——工件元数据的 sidecar 镜像HTML 的meta.json还可能包含prototypeLinks[]即指向其它屏幕工件的计划流转。持久化Durability工件列表曾经只在内存中重载即丢失现在每次变更upsert/addVersion/markImplemented/rename都会写meta.json加载时rehydrateArtifacts()通过window.kunGui.listWorkspaceDirectory(.kun-design)重建列表——逐个读取meta.jsonsidecar 缺失时回退到从磁盘文件重建。removeArtifact会删除整个目录deleteWorkspaceEntry并用会话级removedArtifactIds守卫防止尚未刷盘的删除在下次挂载时复活。工作区索引documents / folders / active id另有design-workspace-index-persistence.ts负责持久化。4. 设计循环单文件 HTML、实时画布与原地迭代回合提示词buildDesignTurnPrompt生成回合指令——把一份独立的 HTML 文档写到精确保留路径增量构建先小骨架再用edit调用每段 payload ~4000 字符以/html收尾。设计上下文 craft 基线见第 10 节会被追加进去。实时画布DesignCanvas监听工件文件startWriteWorkspaceFileWatch文件尚不存在时带重试一旦出现完整文档就重载 webview重载而非重挂载。之所以用webview而不是srcdoc/blob是因为父页面 CSP 会杀掉内联脚本 iframeauthorizeWritePrototype把file://URL 加入允许名单。viewpoint 宽度由源码常量决定design-types.tsmobile 390 / tablet 768 / desktop 全宽。原地迭代Iterate-in-place当工件处于激活状态时下一轮把当前版本作为basePath传给 Agent先读它只做变更而不是从头开始新版本被追加进versions。回合目标解析逻辑见 design-turn-prompt/target.ts按可见目标screen frame / html-element / html-artifact / svg-artifact / canvas-selection逐级解析出artifactRelativePath、basePath、canvasSnapshot等再决定target与nextIntentModegenerate / modify / preview。5. 设计 ↔ 代码集成护城河这是让设计模式有机而非孤立的关键Implement in codeimplementDesignInCode——把共享设计系统发布到.kun-design/DESIGN_SYSTEM.md构建实现提示词开启全新代码线程派发回合并记录 provenancemarkImplemented。共享设计系统——DESIGN_SYSTEM.md是设计 Agent 与编码 Agent共同读取的唯一事实源设计上下文同时注入两者。反向设计sendDesignFromCode——把现有 UI 文件变成可迭代的 HTML mockupimplement 的逆操作闭环往返从文件预览面板Redesign暴露。需求 → 设计exploreSddRequirementInDesign——从 SDD 需求流桥接到设计画布。统一预览——画布live视图显示代码模式 dev server 托管的真实运行应用设计画布与真实产品共享同一表面。双向漂移——provenance 是双向的设计漂移updatedAt implementedAt→ 显示 ⟳ 徽章重新实现代码漂移——implementDesignInCode把发布时DESIGN_SYSTEM.md的哈希快照到工件上加载时 store 重新读取DESIGN_SYSTEM.md并比对因此基于旧版共享设计系统实现的工件会显示 ⚠ 徽章✓ 表示同步。实现提示词模板见 design-implement-prompt.ts先读 HTML mockup视觉契约再读DESIGN_SYSTEM.md复用其颜色/字体/间距/圆角与组件指引不得从生成的交接文件推断竞品主题按stackHint如 React Tailwind shadcn或自动探测项目栈实现跑构建/类型检查最后与设计逐项对照并指出有意偏差。设计上下文与 craft 基线同样会被追加进实现回合。设计↔代码的编排逻辑集中在design-code-roundtrip.ts与useDesignCodeRoundtripActions.ts。6. 节点画布图元工件与顺序执行引擎一个graph类工件是 React Flow 画布DesignGraphView上的小型设计流水线以graph.json持久化。从当前源码看该能力已演进为design-board.ts/canvas/下的白板与 ShapeOps 引擎节点能力包括节点类型prompt——携带文本/上下文design——在.kun-design/graphId/nodeId.html生成 HTML 工件image——在.kun-design/graphId/nodeId.png生成图片多模态。执行引擎runDesignNoderunGraphRun用拓扑排序Kahn 算法环会被拒绝排列节点然后按序执行每个design/image节点——沿入边收集上游节点文本派发一次 Agent 回合等待该节点输出完成后再执行下一个。HTML 节点轮询文件直到以/html结尾图片节点轮询目录直到.png出现。节点状态实时可见running / done / error设计输出在停靠的 webview 面板内联预览图片输出通过readWorkspaceImage→img内联渲染。附带 Minimap 与网格背景、悬停删除节点、空图提示。7. 设置完整的 DesignSettings 切片与九处触碰点Design 设置是完整切片AppSettingsV1.design、DesignSettingsV1以多卡片设置标签页渲染。完整字段定义见 app-settings-types-product.ts分组字段说明工作区defaultWorkspaceRoot/workspaces/activeWorkspaceRoot设计工件根目录空 使用内置 Design 工作区侧边栏可见的工作区列表设计系统brandColor锚点品牌色CSS 颜色注入设计 Agent 上下文tone自由语调 chips如 编辑风 / 专业 / 科技感最多 12 个、每个 ≤32 字符designSystemPreset命名预设none/shadcn/radix/material/ios/fluent/ant/chakra/carbon/polaris/bootstrap/geist/brutalism/editorialdesignType默认表面类型/brand/productdesignGuidelines自由补充设计规则≤4000 字符随预设一起注入并写入DESIGN_SYSTEM.mdradius/density/fontStyle圆角sharp/soft/rounded/pill、密度compact/cozy/spacious、字体system/geometric/humanist/serif/mono结构化 tokens设计 Agentmodel/providerId/reasoningEffort设计回合的模型、提供商与推理力度空 继承运行时默认generationPrompt单文件 HTML 生成契约的自定义覆盖空 内置默认设计→代码implementStackHint实现此设计的目标栈提示≤200 字符如 React Tailwind shadcninjectIntoCode让编码 Agent 遵循已发布的设计系统publishDesignSystem实现时向工作区发布DESIGN_SYSTEM.md画布默认defaultViewport/defaultCanvasView/canvasBackground/liveRefresh/deviceFrame视口、视图、背景、随 Agent 写入自动刷新、移动/平板视口的设备边框地雷警告——新增一个 design 设置字段会触碰 9 处代码否则设置同步会无限循环DesignSettingsV1 patch 类型、defaultDesignSettings/normalizeDesignSettings/mergeDesignSettings、.strict()的designSettingsPatchSchema在app-ipc-schemas.ts、index.ts applySettingsPatch、settings-utils.ts mergeSettings/coerceRendererSettings、store 的loadDesignSettings以及 UI。.strict()必须放在 design 子 schema 上而不是顶层信封上——否则未知顶层键会被拒绝触发保存→拒绝→再保存循环。规范化约束见 app-settings-design.tstone 最多 12 个 chips、每项 ≤32 字符品牌色 ≤32 字符designGuidelines ≤4000generationPrompt ≤6000stackHint ≤200model ≤128reasoningEffort ≤32路径 ≤1024工作区列表 ≤80。8. 导出独立 HTML 与 PDFdesign:export-prototypemain IPC镜像write:export把当前原型导出为独立 HTML或PDF经隐藏BrowserWindowprintToPDF渲染复用内部 Work 导出管线通过原生保存对话框导出默认文件名取工件标题。导出按钮位于画布工具栏。对应组件可见于canvas/目录的canvas-export-tool-replay.ts与导出相关测试。9. 内置 design system craft skillsrc/main/skill-bundled.ts 在首次启动时把内置 skill 种子写入~/.kun/skills/design-system/幂等标记镜像ensureBundledUiPlugins。其SKILL.md携带设计系统优先思维与 anti-AI-slop craft 基线因此 Agent 能自动获得设计指引在设计提示词上触发或通过load_skill手动加载。触发规则包含命令/design与提示词模式design、mockup、prototype、ui、design system、设计、原型、界面、配色。它尊重删除操作下次运行时重启后生效。10. 设计上下文、tokens 与 craft 基线设计上下文 品牌色、语调、设计系统预设、结构化 tokensradius / density / font、自由规则。它被注入设计回合、实现回合与反向设计回合。14 个预设shadcn / radix / material / ios / fluent / ant / chakra / carbon / polaris / bootstrap / geist / brutalism / editorial / none每种预设的中文/英文语义说明见 design-context.ts如material elevation、bold color roles、4dp grid、ripple feedbackcarbon>赞分享人工智能AI Agent自主智能体桌面应用MCP Clients【免费下载链接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.项目地址https://gitcode.com/gh_mirrors/de/Kun点击查看免费下载相关推荐GSD 技能作者指南工作流、验证循环与反馈闭环设计模式GSD 技能作者指南工作流、验证循环与反馈闭环设计模式 导读 本文以 GSDgsd 2仓库中 workflows and validation.md ht人工智能AI Agent代码智能体Agent 编排CLIAI 应用设计代码转换Awesome-Design-Tools设计到代码工具终极指南设计代码转换Awesome Design Tools设计到代码工具终极指南 Awesome Design Tools是一款全面的设计到代码转换工具集合旨在帮文档Kun Design 模式实施蓝图在现有工作区架构上落地第三个顶层设计工作区Kun Design 模式实施蓝图在现有工作区架构上落地第三个顶层设计工作区 Kun 是一个 Local first 的 AI agent 工作区同一套运行人工智能AI Agent自主智能体桌面应用MCP Clients上一篇Slidev Markdown幻灯片工具3条命令跑起来4种格式导出下一篇3步搞定国家中小学智慧教育平台电子课本免费下载终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/9 1:38:04 · 阅读 1.2k Kun Design 模式深度指南：AI 设计工作台与设计→代码一体化闭环
人工智能AI Agent自主智能体桌面应用MCP Clients【免费下载链接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.项目地址https://gitcode.com/gh_mirrors/de/Kun点击查看免费下载Design mode设计模式是 Kun 桌面端 Codechat工作台内的一类Design 任务类型与顶层Work工作区并列。它的定位不是画图捷径而是 Kun 的需求 → 设计 → 计划 → 代码 → 验证主循环中的设计环节你在右侧面板描述一个 UI设计 Agent 生成一份自包含的 HTML 工件中央画布实时渲染你原地迭代最后通过内置的双向桥梁把成品交给编码 Agent 落地实现。读完本文你将掌握 Design 模式的完整架构、工件模型与持久化机制、设计↔代码集成闭环、节点画布、全部设置项、导出能力以及内置设计系统 skill 的运作原理并能在实际仓库源码中一一验证。1. 设计模式是什么一个内嵌在 IDE 里的 AI 设计工作站Design mode 的完整循环是在右侧面板描述设计需求通过设计上下文表单品牌色、语调、设计系统预设、结构化 tokens设计 Agent将一份自包含的 HTML 文档写入.kun-design/下的保留路径中央画布实时渲染该文档一个webview随 Agent 写入而刷新原地迭代——每一轮对话都会快照出一个新版本把定稿设计交给编码 AgentImplement in code编码 Agent 发布共享设计系统并开启一条全新的代码线程。三种工作模式在 Kun 中分工明确模式主要职责输出Code面向真实仓库工作编辑文件、运行命令、审查变更、交付实现代码 diff、计划、todos、评审、可运行的应用变更Design在实现之前把需求、参考资料或现有 UI 转化为视觉方向UI 草稿、交互式 HTML 原型、图元工件、导出原型、共享DESIGN_SYSTEM.mdWork起草、编辑、润色并导出办公文档文档工作区、内联补全/编辑、HTML / PDF / DOC / DOCX导出设计模式与 Code、Work 共享同一套运行时、提供商配置、审批机制和线程机制——它不是孤岛而是 Kun 工作流中设计与代码天然衔接的那一环。2. 架构三栏工作台与文件地图Design 模式渲染在 Code 的Workbench内与 Work 并列。AppShell只分叉settings与Workbench因此无需改动外壳。整体架构要点路由AppRoute增加designopenDesign/ensureDesignThreadForWorkspace/createDesignThread历史上镜像了内部write导航动作chat-store-navigation-actions.ts。设计线程由轻量注册表design/design-thread-registry.ts追踪。标签页WorkspaceModeTabs渲染 Code / Work共享 composer 选择 Code / Design 任务类型。三栏组件components/design/DesignSidebar——模式标签 工件列表按类型图标、版本数、implement / delete / rename、provenance 与 drift 徽章 New design / New canvasDesignCanvas——实时画布preview / codeshiki 高亮/ live来自代码模式的真实运行应用三种视图、viewport 切换、设备边框、浅色/深色背景、导出、重载graph工件会提前返回DesignGraphViewDesignAgentPanel——composer 可折叠设计上下文表单品牌色选择器、语调 chips、设计系统预设 iterate/new/busy 提示。Storedesign/design-workspace-store.ts一个精简 zustand store持有工件、激活 id、画布/viewport 状态、设计上下文、设置驱动的旋钮、错误横幅与设计系统哈希。它是工件变更与磁盘持久化的唯一所有者。实际仓库中的文件地图相对仓库根目录src/renderer/src/design/ design-types.ts DesignArtifact、DesignArtifactKind (html|canvas|svg)、 DesignCanvasView、viewport、createDesignArtifactId design-context.ts DesignContext、14 个预设、craft 基线、 formatDesignContextLines / formatDesignSystemMarkdown、hashDesignSystem design-turn-prompt.ts buildDesignTurnPrompt / buildDesignFromCodePrompt / buildDesignImageNodePrompt按 target 分叉 design-implement-prompt.ts buildImplementDesignPromptdesign → code design-workspace-store.ts 工作区 storezustand design-workspace-artifact-actions.ts 工件增删改动作 design-workspace-document-actions.ts 设计稿design document动作 design-artifact-persistence.ts meta.json sidecar 磁盘重建 design-thread-registry.ts 设计线程注册表 design-prompt-router.ts / design-turn-dispatch.ts / design-turn-submit.ts 回合分发链路 design-code-roundtrip.ts design ↔ code 往返 design-board.ts / design-board-svg.ts / canvas/ 节点画布/白板引擎graph 工件 src/renderer/src/components/design/ DesignWorkspaceView / DesignSidebar / DesignCanvas / DesignAgentPanel / DesignGraphView 等从源码结构看早期规划中的design-graph.ts/design-graph-run.ts节点画布引擎已演进为design-board.tscanvas/目录下的白板与 ShapeOps 引擎实现同时新增了design-workspace-index-persistence.ts工作区索引持久化与DesignDocument设计稿概念——详见第 6、12 节。3. 工件模型与持久化一个DesignArtifact的核心结构见 design-types.ts{ id: string kind: DesignArtifactKind // html | canvas | svg title: string relativePath: string // workspace-relative 的单文件文档路径当前最新版 createdAt: string updatedAt: string versions: DesignArtifactVersion[] // { id, relativePath, createdAt, summary } designMdPath?: string // 随 HTML/SVG 文档旅行的设计备注 prototypeLinks?: DesignPrototypeLink[] // 与其它 HTML 屏幕工件的计划流转 direction?: DesignDirection // Stitch 式命名探索分支 implementedAt?: string // 交给代码的时间缺失 尚未实现 implementedThreadId?: string // 实现它的代码线程provenance implementedDesignSystemHash?: string // 实现时的设计系统哈希code-drift 基线 }磁盘布局每个工件是一个目录.kun-design/id/HTML 工件v1.html、v2.html、……最新版即当前文档画布/图元工件graph.json或canvasJSON外加nodeId.html/nodeId.png节点输出meta.json——工件元数据的 sidecar 镜像HTML 的meta.json还可能包含prototypeLinks[]即指向其它屏幕工件的计划流转。持久化Durability工件列表曾经只在内存中重载即丢失现在每次变更upsert/addVersion/markImplemented/rename都会写meta.json加载时rehydrateArtifacts()通过window.kunGui.listWorkspaceDirectory(.kun-design)重建列表——逐个读取meta.jsonsidecar 缺失时回退到从磁盘文件重建。removeArtifact会删除整个目录deleteWorkspaceEntry并用会话级removedArtifactIds守卫防止尚未刷盘的删除在下次挂载时复活。工作区索引documents / folders / active id另有design-workspace-index-persistence.ts负责持久化。4. 设计循环单文件 HTML、实时画布与原地迭代回合提示词buildDesignTurnPrompt生成回合指令——把一份独立的 HTML 文档写到精确保留路径增量构建先小骨架再用edit调用每段 payload ~4000 字符以/html收尾。设计上下文 craft 基线见第 10 节会被追加进去。实时画布DesignCanvas监听工件文件startWriteWorkspaceFileWatch文件尚不存在时带重试一旦出现完整文档就重载 webview重载而非重挂载。之所以用webview而不是srcdoc/blob是因为父页面 CSP 会杀掉内联脚本 iframeauthorizeWritePrototype把file://URL 加入允许名单。viewpoint 宽度由源码常量决定design-types.tsmobile 390 / tablet 768 / desktop 全宽。原地迭代Iterate-in-place当工件处于激活状态时下一轮把当前版本作为basePath传给 Agent先读它只做变更而不是从头开始新版本被追加进versions。回合目标解析逻辑见 design-turn-prompt/target.ts按可见目标screen frame / html-element / html-artifact / svg-artifact / canvas-selection逐级解析出artifactRelativePath、basePath、canvasSnapshot等再决定target与nextIntentModegenerate / modify / preview。5. 设计 ↔ 代码集成护城河这是让设计模式有机而非孤立的关键Implement in codeimplementDesignInCode——把共享设计系统发布到.kun-design/DESIGN_SYSTEM.md构建实现提示词开启全新代码线程派发回合并记录 provenancemarkImplemented。共享设计系统——DESIGN_SYSTEM.md是设计 Agent 与编码 Agent共同读取的唯一事实源设计上下文同时注入两者。反向设计sendDesignFromCode——把现有 UI 文件变成可迭代的 HTML mockupimplement 的逆操作闭环往返从文件预览面板Redesign暴露。需求 → 设计exploreSddRequirementInDesign——从 SDD 需求流桥接到设计画布。统一预览——画布live视图显示代码模式 dev server 托管的真实运行应用设计画布与真实产品共享同一表面。双向漂移——provenance 是双向的设计漂移updatedAt implementedAt→ 显示 ⟳ 徽章重新实现代码漂移——implementDesignInCode把发布时DESIGN_SYSTEM.md的哈希快照到工件上加载时 store 重新读取DESIGN_SYSTEM.md并比对因此基于旧版共享设计系统实现的工件会显示 ⚠ 徽章✓ 表示同步。实现提示词模板见 design-implement-prompt.ts先读 HTML mockup视觉契约再读DESIGN_SYSTEM.md复用其颜色/字体/间距/圆角与组件指引不得从生成的交接文件推断竞品主题按stackHint如 React Tailwind shadcn或自动探测项目栈实现跑构建/类型检查最后与设计逐项对照并指出有意偏差。设计上下文与 craft 基线同样会被追加进实现回合。设计↔代码的编排逻辑集中在design-code-roundtrip.ts与useDesignCodeRoundtripActions.ts。6. 节点画布图元工件与顺序执行引擎一个graph类工件是 React Flow 画布DesignGraphView上的小型设计流水线以graph.json持久化。从当前源码看该能力已演进为design-board.ts/canvas/下的白板与 ShapeOps 引擎节点能力包括节点类型prompt——携带文本/上下文design——在.kun-design/graphId/nodeId.html生成 HTML 工件image——在.kun-design/graphId/nodeId.png生成图片多模态。执行引擎runDesignNoderunGraphRun用拓扑排序Kahn 算法环会被拒绝排列节点然后按序执行每个design/image节点——沿入边收集上游节点文本派发一次 Agent 回合等待该节点输出完成后再执行下一个。HTML 节点轮询文件直到以/html结尾图片节点轮询目录直到.png出现。节点状态实时可见running / done / error设计输出在停靠的 webview 面板内联预览图片输出通过readWorkspaceImage→img内联渲染。附带 Minimap 与网格背景、悬停删除节点、空图提示。7. 设置完整的 DesignSettings 切片与九处触碰点Design 设置是完整切片AppSettingsV1.design、DesignSettingsV1以多卡片设置标签页渲染。完整字段定义见 app-settings-types-product.ts分组字段说明工作区defaultWorkspaceRoot/workspaces/activeWorkspaceRoot设计工件根目录空 使用内置 Design 工作区侧边栏可见的工作区列表设计系统brandColor锚点品牌色CSS 颜色注入设计 Agent 上下文tone自由语调 chips如 编辑风 / 专业 / 科技感最多 12 个、每个 ≤32 字符designSystemPreset命名预设none/shadcn/radix/material/ios/fluent/ant/chakra/carbon/polaris/bootstrap/geist/brutalism/editorialdesignType默认表面类型/brand/productdesignGuidelines自由补充设计规则≤4000 字符随预设一起注入并写入DESIGN_SYSTEM.mdradius/density/fontStyle圆角sharp/soft/rounded/pill、密度compact/cozy/spacious、字体system/geometric/humanist/serif/mono结构化 tokens设计 Agentmodel/providerId/reasoningEffort设计回合的模型、提供商与推理力度空 继承运行时默认generationPrompt单文件 HTML 生成契约的自定义覆盖空 内置默认设计→代码implementStackHint实现此设计的目标栈提示≤200 字符如 React Tailwind shadcninjectIntoCode让编码 Agent 遵循已发布的设计系统publishDesignSystem实现时向工作区发布DESIGN_SYSTEM.md画布默认defaultViewport/defaultCanvasView/canvasBackground/liveRefresh/deviceFrame视口、视图、背景、随 Agent 写入自动刷新、移动/平板视口的设备边框地雷警告——新增一个 design 设置字段会触碰 9 处代码否则设置同步会无限循环DesignSettingsV1 patch 类型、defaultDesignSettings/normalizeDesignSettings/mergeDesignSettings、.strict()的designSettingsPatchSchema在app-ipc-schemas.ts、index.ts applySettingsPatch、settings-utils.ts mergeSettings/coerceRendererSettings、store 的loadDesignSettings以及 UI。.strict()必须放在 design 子 schema 上而不是顶层信封上——否则未知顶层键会被拒绝触发保存→拒绝→再保存循环。规范化约束见 app-settings-design.tstone 最多 12 个 chips、每项 ≤32 字符品牌色 ≤32 字符designGuidelines ≤4000generationPrompt ≤6000stackHint ≤200model ≤128reasoningEffort ≤32路径 ≤1024工作区列表 ≤80。8. 导出独立 HTML 与 PDFdesign:export-prototypemain IPC镜像write:export把当前原型导出为独立 HTML或PDF经隐藏BrowserWindowprintToPDF渲染复用内部 Work 导出管线通过原生保存对话框导出默认文件名取工件标题。导出按钮位于画布工具栏。对应组件可见于canvas/目录的canvas-export-tool-replay.ts与导出相关测试。9. 内置 design system craft skillsrc/main/skill-bundled.ts 在首次启动时把内置 skill 种子写入~/.kun/skills/design-system/幂等标记镜像ensureBundledUiPlugins。其SKILL.md携带设计系统优先思维与 anti-AI-slop craft 基线因此 Agent 能自动获得设计指引在设计提示词上触发或通过load_skill手动加载。触发规则包含命令/design与提示词模式design、mockup、prototype、ui、design system、设计、原型、界面、配色。它尊重删除操作下次运行时重启后生效。10. 设计上下文、tokens 与 craft 基线设计上下文 品牌色、语调、设计系统预设、结构化 tokensradius / density / font、自由规则。它被注入设计回合、实现回合与反向设计回合。14 个预设shadcn / radix / material / ios / fluent / ant / chakra / carbon / polaris / bootstrap / geist / brutalism / editorial / none每种预设的中文/英文语义说明见 design-context.ts如material elevation、bold color roles、4dp grid、ripple feedbackcarbon>赞分享人工智能AI Agent自主智能体桌面应用MCP Clients【免费下载链接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.项目地址https://gitcode.com/gh_mirrors/de/Kun点击查看免费下载相关推荐GSD 技能作者指南工作流、验证循环与反馈闭环设计模式GSD 技能作者指南工作流、验证循环与反馈闭环设计模式 导读 本文以 GSDgsd 2仓库中 workflows and validation.md ht人工智能AI Agent代码智能体Agent 编排CLIAI 应用设计代码转换Awesome-Design-Tools设计到代码工具终极指南设计代码转换Awesome Design Tools设计到代码工具终极指南 Awesome Design Tools是一款全面的设计到代码转换工具集合旨在帮文档Kun Design 模式实施蓝图在现有工作区架构上落地第三个顶层设计工作区Kun Design 模式实施蓝图在现有工作区架构上落地第三个顶层设计工作区 Kun 是一个 Local first 的 AI agent 工作区同一套运行人工智能AI Agent自主智能体桌面应用MCP Clients上一篇Slidev Markdown幻灯片工具3条命令跑起来4种格式导出下一篇3步搞定国家中小学智慧教育平台电子课本免费下载终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考