CommunityRédaction et éditiongithub.com

plugin87/prototype

Faites monter une idée dans l'échelle de fidélité (contenu d'abord → maquette filaire → basse-fidélité → haute-fidélité → code) avec un plan de validation à chaque niveau, ainsi que la cartographie du parcours utilisateur et des scripts de tests d'utilisabilité. À utiliser lorsque l'utilisateur souhaite prototyper, réaliser des maquettes, cartographier un flux utilisateur ou planifier/exécuter des tests d'utilisabilité.

Qu'est-ce que prototype ?

Cette compétence aide les agents IA à guider un projet à travers une échelle de fidélité en cinq niveaux (contenu → maquette filaire → basse-fidélité → haute-fidélité → code), avec un plan de validation explicite à chaque étape. Elle est idéale pour les designers, chefs de produit et développeurs qui veulent prototyper rapidement, cartographier des parcours utilisateurs ou préparer des tests d'utilisabilité. La compétence s'appuie sur des workflows structurés (workflows/prototyping.md), des composants réutilisables (components/*), des tokens de design (tokens/*), des préférences esthétiques (taste/*) et des règles d'accessibilité (accessibility/*) pour les étapes haute-fidélité et code. Elle garantit qu'aucun niveau n'est sauté et que chaque niveau répond à une question précise, en produisant un artefact accompagné d'un plan de validation concret (tâches + critères de succès) et en incluant les chemins d'erreur, les cas limites et les décisions du parcours utilisateur.

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

Installed? Explore more Rédaction et édition skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Compétence : Prototype & Recherche

Guide le travail au bon niveau de fidélité avec validation.

Étapes

  1. Lire workflows/prototyping.md (échelle de fidélité en 5 niveaux, modèle de cartographie de parcours, script de test d'utilisabilité, données d'exemple).
  2. Identifier le besoin actuel et choisir le niveau de plus basse fidélité qui y répond — ne jamais sauter de niveau :
    • Contenu d'abord (besoins info) → Maquette filaire (disposition/navigation) → Basse-fidélité (accomplissement de tâche) → Haute-fidélité (visuel/accessibilité) → Code (faisabilité/performances).
  3. Pour les flux : produire une carte de parcours utilisateur avec points de décision, chemins d'erreur et cas limites.
  4. Pour la validation : définir le test d'utilisabilité (tâches, critères de succès, règle des 5 utilisateurs) à l'aide du script.
  5. Les étapes haute-fidélité et code utilisent les tokens (tokens/*), les composants (components/*), le style (taste/*) et l'accessibilité (accessibility/*).

Résultat

L'artefact au niveau de fidélité choisi + un plan explicite « ce que nous validons ensuite ».

Vérification (avant de déclarer terminé)

  • La fidélité correspond à la question à laquelle on répond — aucun niveau sauté.
  • Les flux incluent les points de décision, les chemins d'erreur et les cas limites (vide, chargement, débordement), pas seulement le chemin nominal.
  • Une étape de validation concrète est nommée (tâches + critères de succès), pas « tester plus tard ».
  • Les artefacts haute-fidélité et code respectent la même rigueur concernant les tokens et l'accessibilité que design-code (pas de valeurs codées en dur, contraste, états).

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.

Skills associés