Borrowing it
Nothing to install: this file belongs to docs-plus/docs.plus. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/docs-plus/docs.plus/main/.agents/skills/design-an-interface/SKILL.mdgit clone --depth 1 https://github.com/docs-plus/docs.plusWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/docs-plus/docs.plus/design-an-interface)<a href="https://agentmods.dev/skills/docs-plus/docs.plus/design-an-interface"><img src="https://agentmods.dev/badge/skills/docs-plus/docs.plus/design-an-interface/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/docs-plus/docs.plus/design-an-interface"><img src="https://agentmods.dev/badge/skills/docs-plus/docs.plus/design-an-interface.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00043 | $0.00711 |
| Opus 5.5 | $0.00017 | $0.00284 |
| Sonnet 5.5 | $0.00009 | $0.00142 |
| Haiku 4.5 | $0.00004 | $0.00071 |
Grade A, and why
design-an-interface scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
95% identical to api-shape-explorer — 2 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 95 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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:
- Interface signature - types, methods, params
- Usage examples - how callers actually use it in practice
- 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
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 95 lines · 43 tokens per session scan A a2596e9fa2d5
design-an-interface is a skill published in the GitHub repository docs-plus/docs.plus (95 stars, last pushed yesterday), licensed MIT. It adds 43 tokens to every session and 711 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 95% identical to api-shape-explorer, differing in 2 lines, and is treated as a copy.
Other skills, from other repositories
open-pencil
Work with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when asked to open, inspect, export, analyze, or edit .fig files, or to control the running OpenPencil app.
react-artifact
Author app-like designs in React/JSX and bundle them in-sandbox into the same single self-contained HTML artifact Design Studio delivers. Use when the design needs real state, complex interactivity, or component reuse beyond what vanilla JS comfortably handles.
preview-design
Render a real artifact through this branch's local MERIDIAN design code (not the published npm package) so the team can test the new Design Convention on the document / handoff / platform surfaces before it ships. Use for /preview-design, "preview the design convention", "render this with the new design", or Design…
architecture-diagrams
Author architecture, ER, and flow diagrams as hand-written inline SVG inside a self-contained HTML page — no mermaid, no scripts, no CDN.
data-visualization
Design truthful, readable charts, diagrams, dashboards, and metric displays with appropriate encodings, hierarchy, annotation, and responsive behavior.
design-brief
Turn a product or visual request into a concrete interface brief, content hierarchy, user journey, and acceptance checklist before implementing a Design Studio artifact.