前言¶
用 DeepSeek Harness（DSH）或 Cursor、Claude Code 寫前端時，邏輯往往很快落地，界面卻容易陷入「AI slop」：默認 shadcn 堆疊、千篇一律的佈局、缺少產品氣質。社區插件庫 SkillHub 上收錄的 superdesigndev/superdesign-skill（GitHub 約 446 stars、31 forks，MIT 許可證，分類：工作流）正是針對這一痛點的方案。它由 superdesigndev（Superdesign dev, Inc.）維護，底層能力來自 superdesign.dev，既能把設計判斷力注入編碼智能體，也可作爲 DSH 的 skill bundle 安裝進 profile。
需要說明的是：SkillHub 是面向中國用戶的 DSH 社區插件目錄，與 DeepSeek / 幻方無官方從屬關係；安裝前請自行審閱源碼與許可證，插件隨當前 DSH 進程權限運行。
這是什麼¶
superdesign-skill 一句話定位：面向 Claude Code、Cursor、Codex 等編碼智能體的產品設計 skill，讓智能體在無限畫布上完成 UI、演示文稿與營銷圖形的方向探索、迭代與分支，最終產出可上線的前端，而不是「能跑但難看」的界面。
它與已歸檔的舊開源項目 superdesigndev/superdesign（VS Code 擴展）是不同產品線；當前維護的是本 skill 與 superdesign.dev 網頁端。
與單純換主題 preset 不同，Superdesign 會讀你現有代碼庫提取設計系統上下文，蒐集真實風格參考，產出可分支的設計草稿供你挑選細化，並在跨會話中記住項目、草稿與組件上下文，減少重複掃描倉庫。
核心功能與亮點¶
1. 五大核心場景¶
官方 README 歸納了 skill 覆蓋的主線能力：
- 設計或改進 UI（功能頁、整頁、流程）
- 創建演示文稿（可先審批大綱再生成）
- 創建圖形素材（海報、封面、社媒圖、廣告等）
- 建立或從代碼庫提取設計系統
- 生成配套圖片或視頻
2. 靈感與風格工具（CLI）¶
通過全局安裝的 @superdesign/cli，智能體可調用：
- 搜索提示詞庫：
superdesign search-prompts --query "<keyword>"或按--tags "style"篩選 - 讀取提示詞詳情：
superdesign get-prompts --slugs "<slug>"（可加--full展開全文） - 從 URL 提取設計 DNA：
superdesign extract-website --url https://example.com --design-md
網頁端還可瀏覽完整 Prompt Library。
3. 畫布設計與迭代¶
CLI 側支持創建項目、基於 HTML 模板播種基準草稿、分支/替換式迭代、多頁流程編排、拉取設計 HTML 等。典型命令包括 create-project、iterate-design-draft、execute-flow-pages、get-design 等，輸出面向智能體閱讀的緊湊格式，必要時可加 --json 或 --full。
4. 與現有應用協同的設計約定¶
在真實代碼庫上改 UI 時，skill 約定：
- 設計系統文件：
.superdesign/design-system.md（缺失時應先完成設計系統搭建） - 當前 UI 像素級復刻：
.superdesign/replica_html_template/<頁面>.html（只描述現狀，不在此文件中做設計） - 復刻模板按路由命名（如
settings-profile.html），便於複用與更新
這套流程讓 Superdesign 畫布上的智能體獲得「改之前長什麼樣」的上下文，因爲畫布本身無法直接訪問你的倉庫。
5. DSH 側：skill provider 打包¶
倉庫 package.json 聲明包名 superdesign-dsh（當前版本 0.6.0），通過 dsh/index.js 向 DSH 註冊 ctx.skills provider，發佈內置的 skills/superdesign/ 目錄。dsh/cordis.patch.yml 將 bundle 插入 profile，無需額外 MCP 或安裝期配置；首次使用由 skill 引導完成 superdesign login。
安裝與啓用¶
方式一：安裝爲 DeepSeek Harness 插件（推薦本文讀者）¶
在包含目標 profile 的環境下執行（將 demo 換成你的 profile 名）：
dsh plugin --profile demo add github:superdesigndev/superdesign-skill
該包刻意不包含 prepare 構建步驟，dsh plugin add 拉取源碼即可啓用，符合 DSH 對 git 依賴的安裝預期。若需鎖定版本，可使用 github:superdesigndev/superdesign-skill#<commit-sha>。
方式二：安裝到 Cursor 等通用編碼智能體¶
SkillHub 目錄頁與 README 給出的通用安裝命令爲：
npx skills add superdesigndev/superdesign-skill
適用於 vercel-labs/skills 所支持的 70+ 編碼智能體生態。
方式三：Claude Code 插件市場¶
/plugin marketplace add superdesigndev/superdesign-skill
/plugin install superdesign@superdesign
安裝後以 /superdesign:superdesign 調用。官方提醒：不要在 Claude Code 中再執行 npx skills add，否則會裝出第二份未命名空間的重複 skill。
安裝 Superdesign CLI 並登錄¶
無論上述哪種入口，都需要全局 CLI 驅動畫布與賬號：
npm install -g @superdesign/cli@latest
superdesign login
典型用法示例¶
在對話中直接喚起¶
安裝 skill 後，用自然語言或斜槓命令即可，例如：
/superdesign help me redesign this settings page so it doesn't look like default AI slop
/superdesign set up a design system from my current codebase
/superdesign create an 8-slide presentation about our product launch
智能體會按 skill 流程讀代碼、搜參考、產出可分支草稿。
在已有頁面上加功能的完整鏈路（摘要）¶
- 調研現有 UI 與工作流，向用戶確認需求與審美偏好
- 確認
.superdesign/design-system.md是否存在，否則先搭建或從代碼庫提取 - 爲相關頁面編寫像素級
replica_html_template（僅復刻現狀） - 創建項目並播種基準草稿：
superdesign create-project \
--title "<feature>" \
--template .superdesign/replica_html_template/<file>.html
- 從返回的
draftId分支探索多個方向：
superdesign iterate-design-draft \
--draft-id <draftId> \
-p "Dark theme with neon accents" \
-p "Minimal with more whitespace" \
-p "Bold gradients and shadows" \
--mode branch \
--context-file .superdesign/design-system.md
- 分享預覽鏈接收集反饋，繼續迭代；滿意後將 HTML 參考落回工程實現。
拉取草稿 HTML 示例：
superdesign get-design --draft-id <draftId> --output ./design.html
適用場景與注意事項¶
適合誰：
- 用 DSH / Cursor / Claude Code 做產品原型或正式前端的開發者、獨立黑客
- 希望智能體參與 UI 方向探索，又不想離開終端工作流的產品 / UI 設計師
- 需要快速產出演示文稿、營銷圖，且希望與代碼庫設計系統保持一致的團隊
注意事項：
- Superdesign 依賴
@superdesign/cli與superdesign login；未登錄時畫布相關能力不可用 replica_html_template必須是當前 UI 的忠實復刻，不要在其中預畫「待設計區域」- 插件 / skill 以當前智能體或 DSH 進程權限運行，安裝前請閱讀 GitHub 倉庫 與 MIT 許可證
- 除 skill / DSH bundle 外，也可直接使用 superdesign.dev 網頁端，兩條入口共享同一產品能力
結尾¶
如果你厭倦了「AI 寫碼、人類補審美」的循環，superdesign-skill 把設計方向、設計系統與可迭代畫布接進 DSH 與主流編碼智能體，讓界面從 demo 質感走向可交付。不妨從 SkillHub 目錄頁瞭解收錄信息，再到 GitHub 閱讀完整 README，在本地 profile 執行 dsh plugin add 或 npx skills add，裝 CLI 登錄後即可用一句話發起第一次改版。
