Communitygithub.com

superdesigndev/superdesign

Superdesign 是一个专注于前端 UI/UX 设计的设计代理。在需要设计思考的任何 UI 实现之前,请使用此技能。

superdesign 是什么?

Superdesign 是一个专门用于前端 UI/UX 设计的设计代理技能。它旨在帮助开发人员和 AI 代理在进行 UI 实现之前进行设计思考,从而提升设计质量和效率。该技能支持项目初始化、设计草稿的创建与迭代、页面流程扩展、组件提取与更新等核心功能。用户可以通过一系列命令如 `superdesign create-project`、`superdesign create-design-draft`、`superdesign iterate-design-draft` 等来管理设计流程。它支持通过 `--context-file` 参数引用组件文件,并可指定行范围(如 `path:startLine:endLine`),以便精确传递上下文。Superdesign 适用于各种 AI 代理平台(如 Claude Code、Cursor、Codex 等),是前端开发和设计流程中不可或缺的辅助工具。

兼容平台~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

相关技能