design

GitHub

指导视觉与交互设计,基于用户场景和注意力分配原则,提供从页面到原型的风格、布局及创意方向建议。

claude-plugins/manifest-dev/skills/design/SKILL.md doodledood/manifest-dev

触发场景

创建或重设计页面、应用、文档、演示文稿、图形或原型 决定产品的外观和感觉

安装

npx skills add doodledood/manifest-dev --skill design -g -y
更多选项

非标准路径

npx skills add https://github.com/doodledood/manifest-dev/tree/main/claude-plugins/manifest-dev/skills/design -g -y

不安装直接使用

npx skills use doodledood/manifest-dev@design

指定 Agent (Claude Code)

npx skills add doodledood/manifest-dev --skill design -a claude-code -g -y

安装 repo 全部 skill

npx skills add doodledood/manifest-dev --all -g -y

预览 repo 内 skill

npx skills add doodledood/manifest-dev --list

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. Take that look as a squint, blurred or shrunk: what the eye lands on first, and the path it follows from there, is what that moment needs, for them and for us, with nothing secondary louder. 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. Ask focused questions when missing information or unresolved alternatives would materially change the design, offering concrete options for creative choices; wait for those answers before committing to affected choices, and proceed with the rest. When the open alternative is an experience choice — where something lives, how the person moves through it, what each step asks — show two or three variants that differ on that choice, made from the product's existing patterns, and let the requester choose by looking, rather than asking about it in prose. 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; keep a narrow refinement within its existing direction, reading only guidance bearing on the change.

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.

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.

Consult an instrument when it helps

For a concrete question about the design, the optional instrument index offers measurements of supplied artifacts and observations. Read it when such evidence would help; choose only what fits the person, moment and subject, and keep judgment over the result.

版本历史

  • 927bf32 当前 2026-11-03 11:10

    新增旅程驱动的关卡检查、体验选项变体、品味挖掘及成本感知多轮驱动功能;重构技能状态管理。

  • 5d3a066 2026-10-19 18:05

    新增可选的设计校准工具和盲审功能,支持对真实网站进行图像估算校准,并记录设计优化经验。

  • d76241f 2026-09-28 09:22

    新增注意力预算概念、用户旅程分析及12项常见设计缺陷清单(defaults to avoid),优化完成标准描述。

  • 3fc997a 2026-09-22 22:25

同 Skill 集合

.claude/skills/auto-optimize-prompt/SKILL.md
.claude/skills/compress-prompt/SKILL.md
.claude/skills/harden-task-file/SKILL.md
.claude/skills/learn-from-session/SKILL.md
.claude/skills/optimize-prompt-token-efficiency/SKILL.md
.claude/skills/sync-claude-code-plugins/SKILL.md
.claude/skills/sync-tools/SKILL.md
claude-plugins/manifest-dev-tools/skills/babysit-pr/SKILL.md
claude-plugins/manifest-dev-tools/skills/eli5/SKILL.md
claude-plugins/manifest-dev-tools/skills/handoff/SKILL.md
claude-plugins/manifest-dev-tools/skills/manifest-to-goal/SKILL.md
claude-plugins/manifest-dev-tools/skills/prompt-engineering/SKILL.md
claude-plugins/manifest-dev-tools/skills/re-pitch/SKILL.md
claude-plugins/manifest-dev-tools/skills/review-pr-holistic/SKILL.md
claude-plugins/manifest-dev-tools/skills/review-pr-judgment/SKILL.md
claude-plugins/manifest-dev-tools/skills/review-pr-thread-verify/SKILL.md
claude-plugins/manifest-dev-tools/skills/review-pr/SKILL.md
claude-plugins/manifest-dev-tools/skills/review-prompt/SKILL.md
claude-plugins/manifest-dev-tools/skills/walk-pr/SKILL.md
claude-plugins/manifest-dev-tools/skills/write-goal/SKILL.md
claude-plugins/manifest-dev/skills/auto/SKILL.md
claude-plugins/manifest-dev/skills/check-pr/SKILL.md
claude-plugins/manifest-dev/skills/define/SKILL.md
claude-plugins/manifest-dev/skills/do/SKILL.md
claude-plugins/manifest-dev/skills/done/SKILL.md
claude-plugins/manifest-dev/skills/escalate/SKILL.md
claude-plugins/manifest-dev/skills/figure-out-team/SKILL.md
claude-plugins/manifest-dev/skills/figure-out/SKILL.md
claude-plugins/manifest-dev/skills/init-context/SKILL.md
claude-plugins/manifest-dev/skills/just-auto/SKILL.md
claude-plugins/manifest-dev/skills/just-do/SKILL.md
claude-plugins/manifest-dev/skills/next-ticket/SKILL.md
claude-plugins/manifest-dev/skills/poll-slack/SKILL.md
claude-plugins/manifest-dev/skills/review-design/SKILL.md
claude-plugins/manifest-dev/skills/review-writing/SKILL.md
claude-plugins/manifest-dev/skills/run-ticket/SKILL.md
claude-plugins/manifest-dev/skills/sweep-tickets/SKILL.md
claude-plugins/manifest-dev/skills/ticket-up/SKILL.md
claude-plugins/PLUGIN_TEMPLATE/skills/example/SKILL.md
claude-plugins/manifest-dev-tools/skills/teach-me/SKILL.md
claude-plugins/manifest-dev/skills/chat-surface/SKILL.md
claude-plugins/manifest-dev/skills/manifest-dev-help/SKILL.md
claude-plugins/manifest-dev/skills/orchestrate/SKILL.md
claude-plugins/manifest-dev/skills/review-code/SKILL.md
claude-plugins/manifest-dev/skills/setup-project/SKILL.md

元信息

文件数
0
版本
927bf32
Hash
ad01ff50
收录时间
2026-09-22 22:25

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.156.0. UTC+08:00, 2026-11-06 01:27
浙ICP备14020137号-1