Community写作与编辑github.com

原型与用户研究

将一个想法按照内容优先 → 线框图 → 低保真 → 高保真 → 代码的保真度阶梯逐步推进,并在每一级附带验证计划,同时包含用户旅程映射和可用性测试脚本。适用于用户需要进行原型设计、线框图绘制、用户流程映射,或计划/执行可用性测试的场景。

原型与用户研究 是什么?

该技能定义了从初级想法到最终代码的多阶段保真度提升流程,确保每一步都经过验证。首先,技能引入一个五级保真度阶梯:内容优先(信息需求)、线框图(布局/导航)、低保真(任务完成)、高保真(视觉/可访问性)、代码(可行性/性能),并强调绝不能跳过任何级别。其次,对于用户流程,技能要求输出包含决策点、错误路径和边界情况的用户旅程地图。此外,每个阶段都必须附带一个具体的验证计划,包括可用性测试任务、成功标准和“五用户规则”。最后,高保真和代码步骤会强制引用设计令牌、组件、视觉品味和可访问性指南,确保输出与设计系统的一致性和可访问性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/prototype

Installed? Explore more 写作与编辑 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

技能:原型与用户研究

在合适的保真度级别引导工作,并附带验证。

步骤

  1. 读取 workflows/prototyping.md(五级保真度阶梯、用户旅程映射模板、可用性测试脚本、示例数据)。
  2. 识别当前需求,并选择能够回答该需求的最低保真度——绝不可跳过任何级别:
    • 内容优先(信息需求)→ 线框图(布局/导航)→ 低保真(任务完成)→ 高保真(视觉/可访问性)→ 代码(可行性/性能)。
  3. 对于流程:制作一份用户旅程地图,包含决策点、错误路径和边界情况。
  4. 对于验证:使用脚本定义可用性测试(任务、成功标准、五用户规则)。
  5. 高保真/代码步骤会提取令牌(tokens/*)、组件(components/*)、品味(taste/*)和可访问性(accessibility/*)。

输出

所选保真度级别的制品 + 一份明确的“我们下一步要验证什么”的计划。

验证(在声明完成之前)

  • 保真度匹配所回答的问题——没有跳过任何级别。
  • 流程包含决策点、错误路径和边界情况(空状态/加载状态/溢出状态),而不仅仅是正常路径。
  • 指定了一个具体的验证步骤(任务 + 成功标准),而不是“以后再测试”。
  • 高保真/代码制品通过了与 design-code 相同的令牌和可访问性标准(没有硬编码值、对比度、状态)。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

相关技能