首页/UI/UX 设计/design-an-interface
D

design-an-interface

by @mattpocockv
4.5(40)

生成多种截然不同的界面设计方案,提供创新视角,满足多样化用户需求。

ui/ux-designinterface-designuser-experienceprototypingGitHub
安装方式
npx skills add mattpocock/skills --skill design-an-interface
compare_arrows

Before / After 效果对比

1
使用前

界面设计思路受限,难以快速产出多样化设计方案。设计迭代效率低下,无法满足快速变化的需求。

使用后

通过并行设计生成多套差异化界面方案。拓宽设计思路,加速设计迭代,为产品提供丰富创意选择。

SKILL.md

Design an Interface

Based on "Design It Twice" from "A Philosophy of Software Design": your first idea is unlikely to be the best. Generate multiple radically different designs, then compare.

Workflow

1. Gather Requirements

Before designing, understand:

  • What problem does this module solve?
  • Who are the callers? (other modules, external users, tests)
  • What are the key operations?
  • Any constraints? (performance, compatibility, existing patterns)
  • What should be hidden inside vs exposed?

Ask: "What does this module need to do? Who will use it?"

2. Generate Designs (Parallel Sub-Agents)

Spawn 3+ sub-agents simultaneously using Task tool. Each must produce a radically different approach.

Prompt template for each sub-agent:

Design an interface for: [module description]

Requirements: [gathered requirements]

Constraints for this design: [assign a different constraint to each agent]
- Agent 1: "Minimize method count - aim for 1-3 methods max"
- Agent 2: "Maximize flexibility - support many use cases"
- Agent 3: "Optimize for the most common case"
- Agent 4: "Take inspiration from [specific paradigm/library]"

Output format:
1. Interface signature (types/methods)
2. Usage example (how caller uses it)
3. What this design hides internally
4. Trade-offs of this approach

3. Present Designs

Show each design with:

  1. Interface signature - types, methods, params
  2. Usage examples - how callers actually use it in practice
  3. What it hides - complexity kept internal

Present designs sequentially so user can absorb each approach before comparison.

4. Compare Designs

After showing all designs, compare them on:

  • Interface simplicity: fewer methods, simpler params
  • General-purpose vs specialized: flexibility vs focus
  • Implementation efficiency: does shape allow efficient internals?
  • Depth: small interface hiding significant complexity (good) vs large interface with thin implementation (bad)
  • Ease of correct use vs ease of misuse

Discuss trade-offs in prose, not tables. Highlight where designs diverge most.

5. Synthesize

Often the best design combines insights from multiple options. Ask:

  • "Which design best fits your primary use case?"
  • "Any elements from other designs worth incorporating?"

Evaluation Criteria

From "A Philosophy of Software Design":

Interface simplicity: Fewer methods, simpler params = easier to learn and use correctly.

General-purpose: Can handle future use cases without changes. But beware over-generalization.

Implementation efficiency: Does interface shape allow efficient implementation? Or force awkward internals?

Depth: Small interface hiding significant complexity = deep module (good). Large interface with thin implementation = shallow module (avoid).

Anti-Patterns

  • Don't let sub-agents produce similar designs - enforce radical difference
  • Don't skip comparison - the value is in contrast
  • Don't implement - this is purely about interface shape
  • Don't evaluate based on implementation effort

用户评价 (0)

发表评价

效果
易用性
文档
兼容性

暂无评价

统计数据

安装量7.7K
评分4.5 / 5.0
版本
更新日期2026年5月21日
对比案例1 组

用户评分

4.5(40)
5
40%
4
48%
3
13%
2
0%
1
0%

为此 Skill 评分

0.0

兼容平台

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

时间线

创建2026年3月17日
最后更新2026年5月21日