Back to skills directory

Design an Interface

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

Design an Interface is an Agent skill for Design. 界面设计工作流技能,从需求拆解到线框图、高保真原型与组件拆分,完整覆盖交互界面设计全流程。 Tags: 界面 · interface · UI · 设计 · 原型 · prototype.

Design102.0k installsAuthor: obraVisit

What is Design an Interface

Design an Interface packages a Design workflow for agents. 界面设计工作流技能,从需求拆解到线框图、高保真原型与组件拆分,完整覆盖交互界面设计全流程。

Install Design an Interface in Cursor / Claude / Codex

Claude Code Install with the command on this page, or place the skill in ~/.claude/skills or project .claude/skills so Claude can detect Design an Interface.

Cursor After the install command writes the skill directory, invoke Design an Interface by name in the Cursor agent.

Codex Install into the Codex skills directory and call it by name. If only a generic command is listed, run it locally and confirm Codex can see the skill.

One-click Install

Run the following command in your terminal to install the skill into your AI agent:

npx skillsadd obra/superpowers

How to Use

Claude Code: Place the skill in ~/.claude/skills (personal) or the project .claude/skills directory, and Claude will auto-detect it.

Cursor / Windsurf: After installing via npx skillsadd, the skill directory is placed in the configured path.

Codex CLI: After installation it loads automatically from the skills directory and is invoked by name.

Tags

界面interfaceUI设计原型prototype线框图wireframe

Similar recommendations

FAQ

What is Design an Interface for?

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

Can Claude, Cursor, and Codex all use Design an Interface?

Yes if the client supports Agent Skills and has loaded the skill directory. Check the project home for compatibility notes.

What similar skills exist?

Related items come from the same Design group so you can pick a closer workflow.