前言¶
AI 寫前端代碼最常見的問題是“能跑，但醜”，通常表現爲默認字體、紫色漸變、全居中佈局、使用 emoji 作爲圖標等。dsh-web-artifact-designer 是 DeepSeek Harness (DSH) 的一個 skill，它將 Anthropic 官方的 canvas-design / web-artifacts-builder 設計方法論適配到 DSH。它提供了一套可重複的流程和硬性質量門檻，將視覺設計需求轉化爲可直接雙擊打開、視覺上真正像樣的自包含 HTML / SVG 設計稿。
核心能力¶
- 零依賴，即裝即用：純提示詞 skill，無需 Playwright 或構建鏈。
- 設計方法論：強調字體排印、配色系統、留白和細節完成度。
- 反模式清單：列出 9 個常見的“AI 味”問題，幫助模型避坑。
- 自包含 HTML 交付：生成可雙擊離線打開、可分享、可迭代的 HTML。
- 硬性質量清單：交付前逐條自檢，確保質量達標。
- DSH 原生工作流：整合
write、edit、read、open、web_search等原生能力。 - 附贈示例：提供設計標杆示例。
安裝與依賴¶
該插件依賴 yaml (^2.4.2)。安裝方式如下：
dsh plugin --profile web add github:xulelenlp/dsh-web-artifact-designer#main
安裝完成後，skill 以 provider 形式隨 profile 掛載，重啓會話即生效。
使用方式¶
輸入示例：“幫我做一張 Q3 銷售數據的信息圖，風格簡潔專業。”
模型加載該 skill 後的行爲流程如下：
- 澄清 brief：確認受衆、核心信息、尺寸及風格（如有必要）。
- 定概念與骨架：確定設計概念、字體、配色及佈局骨架。
- 輸出設計稿：使用
write命令輸出單個自包含 HTML（數據圖表通常使用內聯 SVG 手繪）。 - 自查與修正：逐條對照質量清單自查並修正。
- 交付：告知文件路徑，提示
open xxx.html，並邀請迭代。
適用場景與區別¶
該插件適用於海報、信息圖、落地頁、數據圖表、Banner、UI 組件稿等網頁視覺設計需求。
與 DSH 社區的 DSH-Office / PPT / 可視化插件不同，本插件專注於網頁/視覺設計稿（HTML/SVG），產出自包含文件；Office 插件則面向辦公文檔（PPTX/DOCX/XLSX/PDF）與圖表庫。兩者互補不重疊。
生態背景¶
DeepSeek Harness (DSH) 理念是“一切皆插件”。該插件由 xulelenlp 維護，開源協議爲 MIT。社區目錄與 DeepSeek / 幻方無官方從屬關係。
