Community寫作與編輯github.com

plugin87/prototype

將概念依循保真度階梯逐步提升(內容優先 → 線稿 → 低保真 → 高保真 → 程式碼),並在各層級搭配驗證計畫,同時納入使用者旅程地圖與易用性測試腳本。適合用於需要製作原型、線稿、繪製使用者流程或規劃與執行易用性測試的情境。

prototype 是什麼?

本技能提供一個結構化的原型設計與研究流程,引導使用者依照「保真度階梯」——從內容優先到線稿、低保真、高保真,最終產出可執行的程式碼——循序漸進地將概念具體化。每個階段都強調驗證計畫、使用者旅程地圖(包含決策點、錯誤路徑與邊緣案例)以及易用性測試腳本(含任務、成功標準與五人測試法則)。它支援從資訊架構到視覺設計與無障礙標準的完整工作,並與現有設計代碼庫、樣式代號及無障礙指南無縫整合,確保產出的一致與品質。透過始終選取能解答當前問題的最低保真度並強制不跳級,此技能能有效降低專案風險,並確保每一步都有明確的「下一步要驗證什麼」的後續規劃。

相容平台~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(5 級保真度階梯、旅程地圖範本、易用性測試腳本、範例資料)。
  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.

相關技能