Design an Interface

界面设计工作流技能，从需求拆解到线框图、高保真原型与组件拆分，完整覆盖交互界面设计全流程。

设计102.0k 次安装作者: obra访问

一键安装

在终端运行以下命令安装技能到你的 AI Agent：

npx skillsadd obra/superpowers

Claude Code：将技能放入 ~/.claude/skills（个人）或项目 .claude/skills 目录，Claude 会自动识别。

Cursor / Windsurf：通过 npx skillsadd 安装后，技能目录会被放入配置路径。

Codex CLI：安装后在技能目录中自动加载，通过名称调用。

Anthropic 官方品牌规范技能，根据品牌色板、字体、Logo 与视觉语言生成符合设计规范的页面与素材。

Anthropic 官方画布设计技能，使用 HTML5 Canvas API 绘制图表、插画与交互式可视化，适合数据呈现与创意表达。

视觉设计指导技能，涵盖配色理论、排版层级、间距系统与视觉一致性原则，帮助 Agent 输出专业级界面。

Web 设计规范技能，汇总现代网页设计最佳实践，涵盖布局栅格、交互反馈、加载体验与移动端适配。

主题工厂技能，快速生成明暗双模配色方案、CSS 变量与设计令牌，输出可直接套用的主题系统。