人工智能AI Agent自主智能體桌面應(yīng)用MCP Clients【免費(fèi)下載鏈接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.項(xiàng)目地址https://gitcode.com/gh_mirrors/de/Kun點(diǎn)擊查看免費(fèi)下載Design mode設(shè)計(jì)模式是 Kun 桌面端 Codechat工作臺(tái)內(nèi)的一類Design 任務(wù)類型與頂層Work工作區(qū)并列。它的定位不是畫(huà)圖捷徑而是 Kun 的需求 → 設(shè)計(jì) → 計(jì)劃 → 代碼 → 驗(yàn)證主循環(huán)中的設(shè)計(jì)環(huán)節(jié)你在右側(cè)面板描述一個(gè) UI設(shè)計(jì) Agent 生成一份自包含的 HTML 工件中央畫(huà)布實(shí)時(shí)渲染你原地迭代最后通過(guò)內(nèi)置的雙向橋梁把成品交給編碼 Agent 落地實(shí)現(xiàn)。讀完本文你將掌握 Design 模式的完整架構(gòu)、工件模型與持久化機(jī)制、設(shè)計(jì)?代碼集成閉環(huán)、節(jié)點(diǎn)畫(huà)布、全部設(shè)置項(xiàng)、導(dǎo)出能力以及內(nèi)置設(shè)計(jì)系統(tǒng) skill 的運(yùn)作原理并能在實(shí)際倉(cāng)庫(kù)源碼中一一驗(yàn)證。1. 設(shè)計(jì)模式是什么一個(gè)內(nèi)嵌在 IDE 里的 AI 設(shè)計(jì)工作站Design mode 的完整循環(huán)是在右側(cè)面板描述設(shè)計(jì)需求通過(guò)設(shè)計(jì)上下文表單品牌色、語(yǔ)調(diào)、設(shè)計(jì)系統(tǒng)預(yù)設(shè)、結(jié)構(gòu)化 tokens設(shè)計(jì) Agent將一份自包含的 HTML 文檔寫(xiě)入.kun-design/下的保留路徑中央畫(huà)布實(shí)時(shí)渲染該文檔一個(gè)webview隨 Agent 寫(xiě)入而刷新原地迭代——每一輪對(duì)話都會(huì)快照出一個(gè)新版本把定稿設(shè)計(jì)交給編碼 AgentImplement in code編碼 Agent 發(fā)布共享設(shè)計(jì)系統(tǒng)并開(kāi)啟一條全新的代碼線程。三種工作模式在 Kun 中分工明確模式主要職責(zé)輸出Code面向真實(shí)倉(cāng)庫(kù)工作編輯文件、運(yùn)行命令、審查變更、交付實(shí)現(xiàn)代碼 diff、計(jì)劃、todos、評(píng)審、可運(yùn)行的應(yīng)用變更Design在實(shí)現(xiàn)之前把需求、參考資料或現(xiàn)有 UI 轉(zhuǎn)化為視覺(jué)方向UI 草稿、交互式 HTML 原型、圖元工件、導(dǎo)出原型、共享DESIGN_SYSTEM.mdWork起草、編輯、潤(rùn)色并導(dǎo)出辦公文檔文檔工作區(qū)、內(nèi)聯(lián)補(bǔ)全/編輯、HTML / PDF / DOC / DOCX導(dǎo)出設(shè)計(jì)模式與 Code、Work 共享同一套運(yùn)行時(shí)、提供商配置、審批機(jī)制和線程機(jī)制——它不是孤島而是 Kun 工作流中設(shè)計(jì)與代碼天然銜接的那一環(huán)。2. 架構(gòu)三欄工作臺(tái)與文件地圖Design 模式渲染在 Code 的Workbench內(nèi)與 Work 并列。AppShell只分叉settings與Workbench因此無(wú)需改動(dòng)外殼。整體架構(gòu)要點(diǎn)路由AppRoute增加designopenDesign/ensureDesignThreadForWorkspace/createDesignThread歷史上鏡像了內(nèi)部write導(dǎo)航動(dòng)作chat-store-navigation-actions.ts。設(shè)計(jì)線程由輕量注冊(cè)表design/design-thread-registry.ts追蹤。標(biāo)簽頁(yè)WorkspaceModeTabs渲染 Code / Work共享 composer 選擇 Code / Design 任務(wù)類型。三欄組件components/design/DesignSidebar——模式標(biāo)簽 工件列表按類型圖標(biāo)、版本數(shù)、implement / delete / rename、provenance 與 drift 徽章 New design / New canvasDesignCanvas——實(shí)時(shí)畫(huà)布preview / codeshiki 高亮/ live來(lái)自代碼模式的真實(shí)運(yùn)行應(yīng)用三種視圖、viewport 切換、設(shè)備邊框、淺色/深色背景、導(dǎo)出、重載graph工件會(huì)提前返回DesignGraphViewDesignAgentPanel——composer 可折疊設(shè)計(jì)上下文表單品牌色選擇器、語(yǔ)調(diào) chips、設(shè)計(jì)系統(tǒng)預(yù)設(shè) iterate/new/busy 提示。Storedesign/design-workspace-store.ts一個(gè)精簡(jiǎn) zustand store持有工件、激活 id、畫(huà)布/viewport 狀態(tài)、設(shè)計(jì)上下文、設(shè)置驅(qū)動(dòng)的旋鈕、錯(cuò)誤橫幅與設(shè)計(jì)系統(tǒng)哈希。它是工件變更與磁盤持久化的唯一所有者。實(shí)際倉(cāng)庫(kù)中的文件地圖相對(duì)倉(cāng)庫(kù)根目錄src/renderer/src/design/ design-types.ts DesignArtifact、DesignArtifactKind (html|canvas|svg)、 DesignCanvasView、viewport、createDesignArtifactId design-context.ts DesignContext、14 個(gè)預(yù)設(shè)、craft 基線、 formatDesignContextLines / formatDesignSystemMarkdown、hashDesignSystem design-turn-prompt.ts buildDesignTurnPrompt / buildDesignFromCodePrompt / buildDesignImageNodePrompt按 target 分叉 design-implement-prompt.ts buildImplementDesignPromptdesign → code design-workspace-store.ts 工作區(qū) storezustand design-workspace-artifact-actions.ts 工件增刪改動(dòng)作 design-workspace-document-actions.ts 設(shè)計(jì)稿design document動(dòng)作 design-artifact-persistence.ts meta.json sidecar 磁盤重建 design-thread-registry.ts 設(shè)計(jì)線程注冊(cè)表 design-prompt-router.ts / design-turn-dispatch.ts / design-turn-submit.ts 回合分發(fā)鏈路 design-code-roundtrip.ts design ? code 往返 design-board.ts / design-board-svg.ts / canvas/ 節(jié)點(diǎn)畫(huà)布/白板引擎graph 工件 src/renderer/src/components/design/ DesignWorkspaceView / DesignSidebar / DesignCanvas / DesignAgentPanel / DesignGraphView 等從源碼結(jié)構(gòu)看早期規(guī)劃中的design-graph.ts/design-graph-run.ts節(jié)點(diǎn)畫(huà)布引擎已演進(jìn)為design-board.tscanvas/目錄下的白板與 ShapeOps 引擎實(shí)現(xiàn)同時(shí)新增了design-workspace-index-persistence.ts工作區(qū)索引持久化與DesignDocument設(shè)計(jì)稿概念——詳見(jiàn)第 6、12 節(jié)。3. 工件模型與持久化一個(gè)DesignArtifact的核心結(jié)構(gòu)見(jiàn) design-types.ts{ id: string kind: DesignArtifactKind // html | canvas | svg title: string relativePath: string // workspace-relative 的單文件文檔路徑當(dāng)前最新版 createdAt: string updatedAt: string versions: DesignArtifactVersion[] // { id, relativePath, createdAt, summary } designMdPath?: string // 隨 HTML/SVG 文檔旅行的設(shè)計(jì)備注 prototypeLinks?: DesignPrototypeLink[] // 與其它 HTML 屏幕工件的計(jì)劃流轉(zhuǎn) direction?: DesignDirection // Stitch 式命名探索分支 implementedAt?: string // 交給代碼的時(shí)間缺失 尚未實(shí)現(xiàn) implementedThreadId?: string // 實(shí)現(xiàn)它的代碼線程provenance implementedDesignSystemHash?: string // 實(shí)現(xiàn)時(shí)的設(shè)計(jì)系統(tǒng)哈希code-drift 基線 }磁盤布局每個(gè)工件是一個(gè)目錄.kun-design/id/HTML 工件v1.html、v2.html、……最新版即當(dāng)前文檔畫(huà)布/圖元工件graph.json或canvasJSON外加nodeId.html/nodeId.png節(jié)點(diǎn)輸出meta.json——工件元數(shù)據(jù)的 sidecar 鏡像HTML 的meta.json還可能包含prototypeLinks[]即指向其它屏幕工件的計(jì)劃流轉(zhuǎn)。持久化Durability工件列表曾經(jīng)只在內(nèi)存中重載即丟失現(xiàn)在每次變更upsert/addVersion/markImplemented/rename都會(huì)寫(xiě)meta.json加載時(shí)rehydrateArtifacts()通過(guò)window.kunGui.listWorkspaceDirectory(.kun-design)重建列表——逐個(gè)讀取meta.jsonsidecar 缺失時(shí)回退到從磁盤文件重建。removeArtifact會(huì)刪除整個(gè)目錄deleteWorkspaceEntry并用會(huì)話級(jí)removedArtifactIds守衛(wèi)防止尚未刷盤的刪除在下次掛載時(shí)復(fù)活。工作區(qū)索引documents / folders / active id另有design-workspace-index-persistence.ts負(fù)責(zé)持久化。4. 設(shè)計(jì)循環(huán)單文件 HTML、實(shí)時(shí)畫(huà)布與原地迭代回合提示詞buildDesignTurnPrompt生成回合指令——把一份獨(dú)立的 HTML 文檔寫(xiě)到精確保留路徑增量構(gòu)建先小骨架再用edit調(diào)用每段 payload ~4000 字符以/html收尾。設(shè)計(jì)上下文 craft 基線見(jiàn)第 10 節(jié)會(huì)被追加進(jìn)去。實(shí)時(shí)畫(huà)布DesignCanvas監(jiān)聽(tīng)工件文件startWriteWorkspaceFileWatch文件尚不存在時(shí)帶重試一旦出現(xiàn)完整文檔就重載 webview重載而非重掛載。之所以用webview而不是srcdoc/blob是因?yàn)楦疙?yè)面 CSP 會(huì)殺掉內(nèi)聯(lián)腳本 iframeauthorizeWritePrototype把file://URL 加入允許名單。viewpoint 寬度由源碼常量決定design-types.tsmobile 390 / tablet 768 / desktop 全寬。原地迭代Iterate-in-place當(dāng)工件處于激活狀態(tài)時(shí)下一輪把當(dāng)前版本作為basePath傳給 Agent先讀它只做變更而不是從頭開(kāi)始新版本被追加進(jìn)versions?；睾夏繕?biāo)解析邏輯見(jiàn) design-turn-prompt/target.ts按可見(jiàn)目標(biāo)screen frame / html-element / html-artifact / svg-artifact / canvas-selection逐級(jí)解析出artifactRelativePath、basePath、canvasSnapshot等再?zèng)Q定target與nextIntentModegenerate / modify / preview。5. 設(shè)計(jì) ? 代碼集成護(hù)城河這是讓設(shè)計(jì)模式有機(jī)而非孤立的關(guān)鍵Implement in codeimplementDesignInCode——把共享設(shè)計(jì)系統(tǒng)發(fā)布到.kun-design/DESIGN_SYSTEM.md構(gòu)建實(shí)現(xiàn)提示詞開(kāi)啟全新代碼線程派發(fā)回合并記錄 provenancemarkImplemented。共享設(shè)計(jì)系統(tǒng)——DESIGN_SYSTEM.md是設(shè)計(jì) Agent 與編碼 Agent共同讀取的唯一事實(shí)源設(shè)計(jì)上下文同時(shí)注入兩者。反向設(shè)計(jì)sendDesignFromCode——把現(xiàn)有 UI 文件變成可迭代的 HTML mockupimplement 的逆操作閉環(huán)往返從文件預(yù)覽面板Redesign暴露。需求 → 設(shè)計(jì)exploreSddRequirementInDesign——從 SDD 需求流橋接到設(shè)計(jì)畫(huà)布。統(tǒng)一預(yù)覽——畫(huà)布live視圖顯示代碼模式 dev server 托管的真實(shí)運(yùn)行應(yīng)用設(shè)計(jì)畫(huà)布與真實(shí)產(chǎn)品共享同一表面。雙向漂移——provenance 是雙向的設(shè)計(jì)漂移updatedAt implementedAt→ 顯示 ? 徽章重新實(shí)現(xiàn)代碼漂移——implementDesignInCode把發(fā)布時(shí)DESIGN_SYSTEM.md的哈?？煺盏焦ぜ霞虞d時(shí) store 重新讀取DESIGN_SYSTEM.md并比對(duì)因此基于舊版共享設(shè)計(jì)系統(tǒng)實(shí)現(xiàn)的工件會(huì)顯示 ? 徽章? 表示同步。實(shí)現(xiàn)提示詞模板見(jiàn) design-implement-prompt.ts先讀 HTML mockup視覺(jué)契約再讀DESIGN_SYSTEM.md復(fù)用其顏色/字體/間距/圓角與組件指引不得從生成的交接文件推斷競(jìng)品主題按stackHint如 React Tailwind shadcn或自動(dòng)探測(cè)項(xiàng)目棧實(shí)現(xiàn)跑構(gòu)建/類型檢查最后與設(shè)計(jì)逐項(xiàng)對(duì)照并指出有意偏差。設(shè)計(jì)上下文與 craft 基線同樣會(huì)被追加進(jìn)實(shí)現(xiàn)回合。設(shè)計(jì)?代碼的編排邏輯集中在design-code-roundtrip.ts與useDesignCodeRoundtripActions.ts。6. 節(jié)點(diǎn)畫(huà)布圖元工件與順序執(zhí)行引擎一個(gè)graph類工件是 React Flow 畫(huà)布DesignGraphView上的小型設(shè)計(jì)流水線以graph.json持久化。從當(dāng)前源碼看該能力已演進(jìn)為design-board.ts/canvas/下的白板與 ShapeOps 引擎節(jié)點(diǎn)能力包括節(jié)點(diǎn)類型prompt——攜帶文本/上下文design——在.kun-design/graphId/nodeId.html生成 HTML 工件image——在.kun-design/graphId/nodeId.png生成圖片多模態(tài)。執(zhí)行引擎runDesignNoderunGraphRun用拓?fù)渑判騅ahn 算法環(huán)會(huì)被拒絕排列節(jié)點(diǎn)然后按序執(zhí)行每個(gè)design/image節(jié)點(diǎn)——沿入邊收集上游節(jié)點(diǎn)文本派發(fā)一次 Agent 回合等待該節(jié)點(diǎn)輸出完成后再執(zhí)行下一個(gè)。HTML 節(jié)點(diǎn)輪詢文件直到以/html結(jié)尾圖片節(jié)點(diǎn)輪詢目錄直到.png出現(xiàn)。節(jié)點(diǎn)狀態(tài)實(shí)時(shí)可見(jiàn)running / done / error設(shè)計(jì)輸出在?？康?webview 面板內(nèi)聯(lián)預(yù)覽圖片輸出通過(guò)readWorkspaceImage→img內(nèi)聯(lián)渲染。附帶 Minimap 與網(wǎng)格背景、懸停刪除節(jié)點(diǎn)、空?qǐng)D提示。7. 設(shè)置完整的 DesignSettings 切片與九處觸碰點(diǎn)Design 設(shè)置是完整切片AppSettingsV1.design、DesignSettingsV1以多卡片設(shè)置標(biāo)簽頁(yè)渲染。完整字段定義見(jiàn) app-settings-types-product.ts分組字段說(shuō)明工作區(qū)defaultWorkspaceRoot/workspaces/activeWorkspaceRoot設(shè)計(jì)工件根目錄空 使用內(nèi)置 Design 工作區(qū)側(cè)邊欄可見(jiàn)的工作區(qū)列表設(shè)計(jì)系統(tǒng)brandColor錨點(diǎn)品牌色CSS 顏色注入設(shè)計(jì) Agent 上下文tone自由語(yǔ)調(diào) chips如 編輯風(fēng) / 專業(yè) / 科技感最多 12 個(gè)、每個(gè) ≤32 字符designSystemPreset命名預(yù)設(shè)none/shadcn/radix/material/ios/fluent/ant/chakra/carbon/polaris/bootstrap/geist/brutalism/editorialdesignType默認(rèn)表面類型/brand/productdesignGuidelines自由補(bǔ)充設(shè)計(jì)規(guī)則≤4000 字符隨預(yù)設(shè)一起注入并寫(xiě)入DESIGN_SYSTEM.mdradius/density/fontStyle圓角sharp/soft/rounded/pill、密度compact/cozy/spacious、字體system/geometric/humanist/serif/mono結(jié)構(gòu)化 tokens設(shè)計(jì) Agentmodel/providerId/reasoningEffort設(shè)計(jì)回合的模型、提供商與推理力度空 繼承運(yùn)行時(shí)默認(rèn)generationPrompt單文件 HTML 生成契約的自定義覆蓋空 內(nèi)置默認(rèn)設(shè)計(jì)→代碼implementStackHint實(shí)現(xiàn)此設(shè)計(jì)的目標(biāo)棧提示≤200 字符如 React Tailwind shadcninjectIntoCode讓編碼 Agent 遵循已發(fā)布的設(shè)計(jì)系統(tǒng)publishDesignSystem實(shí)現(xiàn)時(shí)向工作區(qū)發(fā)布DESIGN_SYSTEM.md畫(huà)布默認(rèn)defaultViewport/defaultCanvasView/canvasBackground/liveRefresh/deviceFrame視口、視圖、背景、隨 Agent 寫(xiě)入自動(dòng)刷新、移動(dòng)/平板視口的設(shè)備邊框地雷警告——新增一個(gè) design 設(shè)置字段會(huì)觸碰 9 處代碼否則設(shè)置同步會(huì)無(wú)限循環(huán)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 上而不是頂層信封上——否則未知頂層鍵會(huì)被拒絕觸發(fā)保存→拒絕→再保存循環(huán)。規(guī)范化約束見(jiàn) app-settings-design.tstone 最多 12 個(gè) chips、每項(xiàng) ≤32 字符品牌色 ≤32 字符designGuidelines ≤4000generationPrompt ≤6000stackHint ≤200model ≤128reasoningEffort ≤32路徑 ≤1024工作區(qū)列表 ≤80。8. 導(dǎo)出獨(dú)立 HTML 與 PDFdesign:export-prototypemain IPC鏡像write:export把當(dāng)前原型導(dǎo)出為獨(dú)立 HTML或PDF經(jīng)隱藏BrowserWindowprintToPDF渲染復(fù)用內(nèi)部 Work 導(dǎo)出管線通過(guò)原生保存對(duì)話框?qū)С瞿J(rèn)文件名取工件標(biāo)題。導(dǎo)出按鈕位于畫(huà)布工具欄。對(duì)應(yīng)組件可見(jiàn)于canvas/目錄的canvas-export-tool-replay.ts與導(dǎo)出相關(guān)測(cè)試。9. 內(nèi)置 design system craft skillsrc/main/skill-bundled.ts 在首次啟動(dòng)時(shí)把內(nèi)置 skill 種子寫(xiě)入~/.kun/skills/design-system/冪等標(biāo)記鏡像ensureBundledUiPlugins。其SKILL.md攜帶設(shè)計(jì)系統(tǒng)優(yōu)先思維與 anti-AI-slop craft 基線因此 Agent 能自動(dòng)獲得設(shè)計(jì)指引在設(shè)計(jì)提示詞上觸發(fā)或通過(guò)load_skill手動(dòng)加載。觸發(fā)規(guī)則包含命令/design與提示詞模式design、mockup、prototype、ui、design system、設(shè)計(jì)、原型、界面、配色。它尊重刪除操作下次運(yùn)行時(shí)重啟后生效。10. 設(shè)計(jì)上下文、tokens 與 craft 基線設(shè)計(jì)上下文 品牌色、語(yǔ)調(diào)、設(shè)計(jì)系統(tǒng)預(yù)設(shè)、結(jié)構(gòu)化 tokensradius / density / font、自由規(guī)則。它被注入設(shè)計(jì)回合、實(shí)現(xiàn)回合與反向設(shè)計(jì)回合。14 個(gè)預(yù)設(shè)shadcn / radix / material / ios / fluent / ant / chakra / carbon / polaris / bootstrap / geist / brutalism / editorial / none每種預(yù)設(shè)的中文/英文語(yǔ)義說(shuō)明見(jiàn) design-context.ts如material elevation、bold color roles、4dp grid、ripple feedbackcarbon>贊分享人工智能AI Agent自主智能體桌面應(yīng)用MCP Clients【免費(fèi)下載鏈接】KunLocal-first AI agent workspace for coding, writing, design, research, and automation — one runtime for desktop GUI and TUI.項(xiàng)目地址https://gitcode.com/gh_mirrors/de/Kun點(diǎn)擊查看免費(fèi)下載相關(guān)推薦GSD 技能作者指南工作流、驗(yàn)證循環(huán)與反饋閉環(huán)設(shè)計(jì)模式GSD 技能作者指南工作流、驗(yàn)證循環(huán)與反饋閉環(huán)設(shè)計(jì)模式 導(dǎo)讀 本文以 GSDgsd 2倉(cāng)庫(kù)中 workflows and validation.md ht人工智能AI Agent代碼智能體Agent 編排CLIAI 應(yīng)用設(shè)計(jì)代碼轉(zhuǎn)換Awesome-Design-Tools設(shè)計(jì)到代碼工具終極指南設(shè)計(jì)代碼轉(zhuǎn)換Awesome Design Tools設(shè)計(jì)到代碼工具終極指南 Awesome Design Tools是一款全面的設(shè)計(jì)到代碼轉(zhuǎn)換工具集合旨在幫文檔Kun Design 模式實(shí)施藍(lán)圖在現(xiàn)有工作區(qū)架構(gòu)上落地第三個(gè)頂層設(shè)計(jì)工作區(qū)Kun Design 模式實(shí)施藍(lán)圖在現(xiàn)有工作區(qū)架構(gòu)上落地第三個(gè)頂層設(shè)計(jì)工作區(qū) Kun 是一個(gè) Local first 的 AI agent 工作區(qū)同一套運(yùn)行人工智能AI Agent自主智能體桌面應(yīng)用MCP Clients上一篇Slidev Markdown幻燈片工具3條命令跑起來(lái)4種格式導(dǎo)出下一篇3步搞定國(guó)家中小學(xué)智慧教育平臺(tái)電子課本免費(fèi)下載終極指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考