New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Prototype

by plugin87 in plugin87/ux-ui-agent-skills

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts.

MITAuto-check passedFrontend & Design

Install Prototype

skills CLI
$ npx skills add plugin87/ux-ui-agent-skills --skill prototype -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install plugin87/ux-ui-agent-skills prototype --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/prototype .claude/skills/prototype && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
prototype
GitHub stars
1.6k
Token cost
~614 tokens
SKILL.md length
233 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts.

  • Works in 5 steps: Read… → Identify the current need and pick the… → For flows: produce a user-journey map… → …
  • The user wants to prototype
  • SKILL.md covers Steps, Output and Verification (before declaring…
  • Calls npx

What it does

Prototype is an agent skill from plugin87/ux-ui-agent-skills. Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

Its SKILL.md is about 610 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design, User research and Customer journey mapping. The repository describes itself as: Turn Claude into a senior design architect: DTCG tokens, 52 components, WCAG 2.2 AA-AAA, 138 design systems, any-framework code, and 50 objective gates that fail the build… The licence is MIT.

When your agent uses it

  • The user wants to prototype
  • Map a user flow
  • Plan/run usability testing

Example prompts

  • “/prototype”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Read ${CLAUDE_SKILL_DIR}/../../../workflows/prototyping.md (5-level fidelity ladder, journey mapping template, usability-testing script…
  2. Identify the current need and pick the lowest fidelity that answers it — never skip levels
  3. For flows: produce a user-journey map with decision points, error paths, and edge cases.
  4. For validation: define the usability test (tasks, success criteria, 5-user rule) using the script.
  5. High-fi/code steps pull tokens (${CLAUDE_SKILL_DIR}/../../../tokens/*), components (${CLAUDE_SKILL_DIR}/../../../components/*), taste…

What it can do on your machine

Read from SKILL.md and the folder at commit 9f40d9b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Prototype loads about 614 tokens when it runs. Until then it costs about 73 tokens; SKILL.md has 233 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~73
When it runs · the whole SKILL.md, loaded when a task matches
~614

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from plugin87/ux-ui-agent-skills at commit 9f40d9b, republished under its MIT licence (© plugin87). 233 words, ~614 tokens.

Download SKILL.mdSave it as .claude/skills/prototype/SKILL.md (or your agent's skills folder).
name
prototype
description
Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.
disable-model-invocation
true

Skill: Prototype & Research

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Guide work through the right fidelity level with validation.

Steps

  1. Read ${CLAUDE_SKILL_DIR}/../../../workflows/prototyping.md (5-level fidelity ladder, journey mapping template, usability-testing script, sample data).
  2. Identify the current need and pick the lowest fidelity that answers it — never skip levels:
    • Content-first (info needs) → Wireframe (layout/nav) → Low-fi (task completion) → High-fi (visual/a11y) → Code (feasibility/perf).
  3. For flows: produce a user-journey map with decision points, error paths, and edge cases.
  4. For validation: define the usability test (tasks, success criteria, 5-user rule) using the script.
  5. High-fi/code steps pull tokens (${CLAUDE_SKILL_DIR}/../../../tokens/*), components (${CLAUDE_SKILL_DIR}/../../../components/*), taste (${CLAUDE_SKILL_DIR}/../../../taste/*), and a11y (${CLAUDE_SKILL_DIR}/../../../accessibility/*).

Output

The artifact at the chosen fidelity + an explicit "what we validate next" plan.

Verification (before declaring done)

  • The fidelity matches the question being answered — no level skipped.
  • Flows include decision points, error paths, and edge cases (empty/loading/overflow), not just the happy path.
  • A concrete validation step is named (tasks + success criteria), not "test later".
  • High-fi/code artifacts pass the same token + a11y bar as design-code (no hardcoded values, contrast, states).

© plugin87, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/prototype of plugin87/ux-ui-agent-skills.

Open the folder on GitHubat commit 9f40d9b

Compare with similar skills

Prototype next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Prototype compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Prototype this skillplugin87/ux-ui-agent-skills1.6k—~614Automated safety check: PassMIT
Product Designerborghei/Claude-Skills886—~3.1kAutomated safety check: PassMIT
Bmad UXaj-geddes/claude-code-bmad-skills488—~2kAutomated safety check: NotesCustom licence
Product UX Expertmajiayu000/spellbook287—~3.1kAutomated safety check: PassMIT
HTML Feature Mocksimbue-ai/bouncer400—~677Automated safety check: PassAGPL-3.0
Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas401—~9kAutomated safety check: PassNone

Similar skills

  • Product Designer

    borghei/Claude-Skills

    Product design across UI/UX, design systems, prototyping, and user research.

    886 GitHub stars~3.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Bmad UX

    aj-geddes/claude-code-bmad-skills

    Solutioning-phase UX planning skill (optional; activate when the project has a UI).

    488 GitHub stars~2k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check: notes

  • Product UX Expert

    majiayu000/spellbook

    Product interaction and UX expert. An agent skill from majiayu000/spellbook.

    287 GitHub stars~3.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • HTML Feature Mocks

    imbue-ai/bouncer

    Explores a feature idea through HTML mocks that match the project's existing UI, keeping every earlier version and logging each requested tweak in a context file.

    400 GitHub stars~677 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Super UI UX Design

    syahiidkamil/Software-Engineer-AI-Agent-Atlas

    Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…

    401 GitHub stars~9k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Product Design Workflow Bundle

    XiaomiMiMo/MiMo-Code

    Entry point to a bundle of product design workflows covering context, research, audits, ideation, URL or image to code, design QA and sharing a prototype.

    14k GitHub stars~721 tokensUpdated today
    Frontend & DesignAuto-check passed

More from plugin87/ux-ui-agent-skills

All 23 skills in this repo

  • Data-Dense Dashboard Designer

    plugin87/ux-ui-agent-skills

    Lays out dense analytics or trading-terminal screens in banded sections with hand-drawn SVG charts, instead of a wall of identical stat cards.

    1.6k GitHub stars~2.6k tokensUpdated yesterday
    Auto-check passed

  • UI Component Spec Designer

    plugin87/ux-ui-agent-skills

    Writes a complete UI component spec with anatomy, variants, sizes, eight interaction states, design-token mapping and accessibility notes before or alongside code.

    1.6k GitHub stars~2.8k tokensUpdated yesterday
    Auto-check passed

  • Design Project Scaffold

    plugin87/ux-ui-agent-skills

    Creates a new design-product project from the kit's product-design template, then installs the engine folders and the Playwright dependency that the quality gates need.

    1.6k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Accessibility Audit

    plugin87/ux-ui-agent-skills

    Audits a UI or design against WCAG 2.2 and ARIA patterns and returns findings with the criterion, severity and a specific fix for each.

    1.6k GitHub stars~542 tokensUpdated yesterday
    Auto-check passed

  • Apply Aesthetic

    plugin87/ux-ui-agent-skills

    Applies a chosen visual direction, an archetype or one of 138 named design systems, by remapping design tokens, then checks contrast before it finishes.

    1.6k GitHub stars~597 tokensUpdated yesterday
    Auto-check passed

  • Brand Kit Design Tokens

    plugin87/ux-ui-agent-skills

    Builds a from-scratch brand design system as three-tier DTCG tokens plus one theme.css with light and dark modes, checked against WCAG contrast rules.

    1.6k GitHub stars~809 tokensUpdated yesterday
    Auto-check passed

Categories

Questions about Prototype

What does Prototype do?

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Prototype is an agent skill from plugin87/ux-ui-agent-skills. Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts.

When should I use Prototype?

Prototype fits situations like: the user wants to prototype; map a user flow; plan/run usability testing.

How do I install Prototype in Claude Code?

Run `npx skills add plugin87/ux-ui-agent-skills --skill prototype -a claude-code`. Or copy the skill folder (.claude/skills/prototype in plugin87/ux-ui-agent-skills) into .claude/skills/prototype in your project. Claude Code loads it when a task matches its description.

How do I install Prototype in Codex?

Run `npx skills add plugin87/ux-ui-agent-skills --skill prototype -a codex`. Or copy the skill folder (.claude/skills/prototype in plugin87/ux-ui-agent-skills) into .agents/skills/prototype in your project. Codex loads it when a task matches its description.

Can I use Prototype in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add plugin87/ux-ui-agent-skills --skill prototype -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prototype, .gemini/skills/prototype, .github/skills/prototype and .opencode/skills/prototype in your project.

What does Prototype need to run?

Going by SKILL.md and its folder, Prototype needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Prototype access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Prototype safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Prototype use?

Prototype is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Prototype use?

About 614 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Prototype?

Skills that share tags, products or a category with Prototype: Product Designer (borghei/Claude-Skills, 886 stars), Bmad UX (aj-geddes/claude-code-bmad-skills, 488 stars), Product UX Expert (majiayu000/spellbook, 287 stars) and HTML Feature Mocks (imbue-ai/bouncer, 400 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Prototype?

plugin87 (a GitHub user) maintains it in plugin87/ux-ui-agent-skills, which has 1,558 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on October 8, 2026.

Source: plugin87/ux-ui-agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.