Communitygithub.com

superdesigndev/superdesign

Superdesign 是一個專精於前端 UI/UX 設計的設計代理。在實作任何需要設計思考的 UI 之前,請使用此技能。

superdesign 是什麼?

Superdesign 是一個專門用於前端 UI/UX 設計的 AI 代理技能,旨在協助開發者進行有設計思維的 UI 實作。它支援多種平台,如 Claude Code、Cursor 和 Codex,並提供一系列命令來管理設計專案、建立設計草稿、迭代設計變化、擴展頁面流程,以及建立與更新可重複使用的元件。此技能的核心優勢在於讓 AI 能夠忠實地複製現有 UI、根據提示產生設計變化、並將單一頁面設計擴展到多頁面流程。開發者可以透過指定上下文檔案與行範圍,讓設計代理精準理解待修改的程式碼區塊。Superdesign 支援的常見命令包括 create-project、create-design-draft、iterate-design-draft、execute-flow-pages、create-component 與 update-component,並且接受 --context-file 參數中的行範圍(如 src/Component.tsx:10:20)來聚焦設計範圍。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/superdesigndev/superdesign-skill/tree/main/skills/superdesign

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

superdesign 是做什麼的?

Superdesign 是一個專精於前端 UI/UX 設計的設計代理。請在實作任何需要設計思考的 UI 之前使用此技能。常用命令:

  • superdesign create-project --title "X":設定專案
  • superdesign create-design-draft --project-id <id> --title "Current UI" -p "忠實重現..." --context-file src/Component.tsx:忠實重現
  • superdesign iterate-design-draft --draft-id <id> -p "暗色主題" -p "極簡" --mode branch --context-file src/Component.tsx:設計變化
  • superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx:擴展至更多頁面
  • superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]':提取可重複使用元件
  • superdesign update-component --component-id <id> --html-file /tmp/navbar.html:更新現有元件
  • superdesign list-components --project-id <id>:列出現有元件

支援行範圍:--context-file path:startLine:endLine

相關技能