Communityライティング&編集github.com

プロトタイプ&リサーチ

アイデアをコンテンツファーストからワイヤーフレーム、ローファイ、ハイファイ、コードへと段階的に高め、各レベルで検証計画を立てます。ユーザージャーニーマッピングやユーザビリティテストのスクリプトも提供します。プロトタイプ作成、ワイヤーフレーム作成、ユーザーフローのマッピング、ユーザビリティテストの計画や実行に最適です。

プロトタイプ&リサーチ とは?

このスキルは、プロトタイピングとリサーチのプロセスを段階的にガイドします。コンテンツファースト(情報要件)、ワイヤーフレーム(レイアウト/ナビゲーション)、ローファイ(タスク完了度)、ハイファイ(ビジュアル/アクセシビリティ)、コード(実現可能性/パフォーマンス)の5段階の忠実度ラダーを備え、質問に答える最小のレベルから開始し、レベルを飛ばさないことが重要です。ユーザージャーニーマップの作成、意思決定ポイントやエラーパス、エッジケースの特定を支援します。また、ユーザビリティテストのスクリプト(タスク、成功基準、5ユーザールール)を提供し、各段階で「次に何を検証するか」を明確にします。高忠実度やコード段階では、デザインとコードの一貫性を保つためのトークン、コンポーネント、アクセシビリティのルールを適用します。

対応~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に質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

スキル: プロトタイプ&リサーチ

適切な忠実度レベルで作業をガイドし、検証を行います。

手順

  1. workflows/prototyping.md を読み込む(5段階の忠実度ラダー、ジャーニーマッピングテンプレート、ユーザビリティテストスクリプト、サンプルデータを含む)。
  2. 現在のニーズを特定し、それに答える最小の忠実度を選択する — レベルをスキップしないこと:
    • コンテンツファースト(情報要件) → ワイヤーフレーム(レイアウト/ナビ) → ローファイ(タスク完了) → ハイファイ(ビジュアル/a11y) → コード(実現可能性/パフォーマンス)。
  3. フローの場合:意思決定ポイント、エラーパス、エッジケースを含むユーザージャーニーマップを作成する。
  4. 検証の場合:スクリプトを使用してユーザビリティテスト(タスク、成功基準、5ユーザールール)を定義する。
  5. ハイファイ/コードの段階では、トークン(tokens/*)、コンポーネント(components/*)、テイスト(taste/*)、a11y(accessibility/*)を読み込む。

出力

選択された忠実度のアーティファクト + 「次に何を検証するか」を明示した計画。

検証(完了宣言前)

  • 忠実度が回答すべき質問に一致していること — レベルをスキップしていないこと。
  • フローに意思決定ポイント、エラーパス、エッジケース(空、ローディング、オーバーフロー)が含まれていること(ハッピーパスのみではない)。
  • 具体的な検証ステップが明示されていること(タスク + 成功基準)— 「後でテスト」ではない。
  • ハイファイ/コードのアーティファクトが design-code と同じトークンとa11yの基準を満たしていること(ハードコードされた値がない、コントラスト、状態管理)。

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.

関連スキル