design
GitHub指导视觉与交互设计,以用户场景为核心分配注意力,提供从页面到原型的风格定义及创意方向,避免常见设计错误。
Trigger Scenarios
Install
npx skills add doodledood/manifest-dev --skill design -g -y
SKILL.md
Frontmatter
{
"name": "design",
"description": "Guide visual and interaction design from the person, moment, and subject, with composable guidance for artifacts and creative directions. Use when creating or restyling a page, app, document, presentation, graphic, or prototype, or choosing how it should look and feel.",
"argument-hint": "<artifact, brief or existing file>",
"user-invocable": true
}
Design for a person in a moment: who is here, what they came to do, and how long they'll stay — a first glance, a meeting, a working day. Know what we want from them too — to understand something, act, trust us, come back — and make the design serve both at once. Make them feel what that moment wants, as strongly as it wants — quiet to spectacular — unless the request says otherwise. Find the visual idea in the subject and in their world, and take palette, type and texture from there rather than from a house style.
The person's attention is the budget. At each moment — a first screen, a slide, the step of a task — decide what matters most for what they came to do and what we want from them, and give it the most, boldly where the moment wants it; everything else supports it or waits. Find those moments by walking the person's journeys first: each scenario they arrive with — the first time, the everyday task, something gone wrong — and the steps it takes. Each step shows what that step needs; the rest stays one step away. Designs most often go wrong in the ways below: spending attention badly, or giving the idea too thin a form. These are defaults to avoid, not rules: use one whenever the request asks for it or the subject and moment call for it.
- Prose, including instructions, where a visual, a single line or the design itself would carry the point.
- Saying a thing twice: a second chart, count, button or section that repeats the first.
- Motion that keeps going after it has landed, plays on its own instead of answering the person, or pulls the eye away from what matters.
- A page that sits completely still, or changes that snap: content that appears without settling in, a view, value or state that jumps instead of moving there, a touch or hover that gets no answer.
- Effects (glow, texture, overlays) that make the content harder to see.
- Drawn stand-ins for imagery: people, plants, objects or scenes built from vector shapes, which read as clip art. Depth and richness come from photography, 3D models, light and material, or from type and space alone.
- More parts than the moment needs: sections, cards, badges, pills and small charts a designer would cut.
- Everything visible at once: every panel, filter, stat and action on screen together, instead of what this step needs with the rest a tap away.
- Decoration standing in for hierarchy: coloured pills, icon tiles, emoji, avatars and tinted badges on every row, doing the work that size, weight, position and space should do.
- Every surface on one plane: panels of equal weight side by side, with no layering, light or depth to say what is in front, active or secondary.
- The same ground every time: cream, linen, warm brown or terracotta, or their dark espresso inversion, chosen by habit rather than from the subject.
- Spectacle before the point for someone arriving cold or working a shift.
It's done when, looking once as that person at each of those moments, they get what they came for, we get what we wanted, it feels the way the moment asks, and nothing is left whose removal they'd miss. Stop there; further passes are refinement the requester can ask for.
Establish the intended use, supported claims, available assets, and constraints from the request, conversation, and project. Fill these in where the evidence is clear. State reasonable assumptions for minor gaps and proceed. Choose visual techniques that suit the concept and the constraints.
Explicit requirements and an existing design system outrank this. Make any proposed departure explicit. When refining existing work, keep what works and change what the feedback names.
Choose before composing
Before composing a new artifact or substantially redesigning one, identify its uses and choose the creative direction or combination that serves its goal. Infer these choices from the request and context, honoring explicit preferences. Use the indexes to select and read only the relevant guides. For substantial work, briefly state the chosen approach and why.
Ask focused questions when missing information or unresolved alternatives would materially change the design. For creative choices, offer concrete options. Wait for those answers before committing to affected choices; otherwise proceed. Keep narrow refinements within their existing direction, reading only guidance bearing on the change.
| Question | Index |
|---|---|
| How will someone use the artifact? | Artifact guides |
| What feeling and visual character will serve that use? | Creative directions |
These are non-exhaustive repertoires, not required categories. Combine or invent approaches when the brief calls for them. In a blend, give the design a coherent center and use supporting qualities where they help; do not stack every guide's instructions as independent obligations. Different parts of an artifact can serve different moments while sharing a visual identity.
Version History
-
d76241f
Current 2026-09-28 09:22
新增注意力预算概念、用户旅程分析及12项常见设计缺陷清单(defaults to avoid),优化完成标准描述。
- 3fc997a 2026-09-22 22:25


