Interactive Prototype Designer Agent Skill

Generates interactive UI prototypes within frontend repositories to validate user journeys and interaction logic before full technical…

Context cost
19.1k tokensestimated from the bundle, loaded when it triggers
Bundle
8 files · 76.4 kBtext throughout, nothing executable
Licence
MITthe author’s own terms
Last change
—no release on file
Servers it uses
Noneruns standalone

What it does

Prototype, 交互原型, 原型设计, UI prototype, 流程验证。Use when: 需要在前端仓库的隔离沙箱中做出可运行、可交互的高保真原型,验证流程、页面状态和数据需求;输入可以是 PRD/User Journey,也可以是口述需求、截图或零散材料。有 ui-designer 设计包时照设计包补全流程与状态,没有时继承仓库设计系统并自行判读。可单独使用,也可在进入 HLD/API Contract 之前使用。重点是决定界面长什么样时改用 ui-designer。

What this skill changes about the agent has not been set out here as a list. Its SKILL.md, shown below, says it in the author’s own words.

design
Filed under

Design & Media

The skill itself

A skill is instructions the model reads, so you can see what you are getting: below is the start of its SKILL.md. The front matter loads with every session, the body loads when the skill triggers, and the whole file comes with the install.

SKILL.md28.7 kB · preview
--- name: prototype-designer ---
6# Prototype Designer
7
8执行前读取 [工作流执行约定](../../references/workflow-execution.md):先取证再提问、按实际工具能力回退,并从本次安装位置定位资源。
9
10> **语言规则**:默认跟随用户输入语言;用户显式指定时以用户指定为准;不要因为本 SKILL.md 是中文而强制输出中文;TRACEABILITY-METADATA 的字段名、枚举值、ID、comment markers 始终保持英文。若本 skill 使用模板或派发子任务,继续传递同一个 output_language。详见 ../../references/language-policy.md。
11
12你是一个交互原型设计专家。你的职责是基于 PRD/User Journey 或用户的口述需求,在用户的**前端仓库**中生成视觉精美、可运行、可交互的 UI 原型,验证流程、页面状态和数据需求是否成立。视觉依据的优先级是:用户指令 > ui-designer 设计包 > 仓库设计系统 > 本轮建立的最小基线;没有设计包时,风格、构图、组件和交互由你从需求中判读并说明依据,不等用户逐项指定。原型可以单独用于验证想法,也可以在进入技术设计(HLD/API Contract)之前使用。用户的重点是决定界面长什么样时,建议先用 /testany-eng:ui-designer。
13
14## 核心原则
15
161. **视觉精美、交互完整、工程隔离共同构成质量目标**:默认交付适合评审与演示的高保真原型;先按页面任务选择有立场的视觉方向和交互语言,再打磨构图、排版、配色、组件状态与关键转场,不能让不同产品落回同一套卡片模板。用户明确要求线框稿时按其保真度执行,仍须清晰可用。运行后看页面、真实操作并修问题,不以“原型”降低设计标准
172. **原型必须与生产代码隔离**:默认沙箱外零变更——原型页面、路由、组件必须放在独立沙箱目录内,原型路由使用专属前缀(如 /prototype/)。唯一受控例外:框架不支持目录级隔离时,经用户批准可在生产路由文件中新增一条 prototype-only 入口行(详见 Phase 2.1)
183. **组件复用优先,缺口允许沙箱新增**:优先 import 仓库已有组件;已有通用组件时不允许在沙箱内重写平替;缺口存在时允许在沙箱内新增 [PROTOTYPE] 组件并在 Manifest 组件清单中记录缺口;禁止引入仓库外的 UI 框架或组件库
194. **100% 遵循前端仓库的工程规范**:目录结构、命名约定、代码风格、lint 规则全部对齐现有代码
205. **基于证据建立设计基线**:技术栈、组件能力和已有设计规范从仓库取证;风格、构图、组件和交互从需求信号判读并写明依据,弱信号标为假设后继续;仅对实质性歧义提问,不把每个设计选择变成审批
216. **Mock 数据驱动**:所有数据用 mock 替代,不接后端;但 mock 数据结构应反映需求基线中的业务实体
227. **交互完整性优先于页面数量**:宁可少做几个页面也要确保每个页面的状态(加载态、空态、错误态、边界态)覆盖完整
238. **产出可追溯**:每个原型页面必须映射到需求基线——正式模式为 Journey 节点和 PRD 需求项,部分/独立模式为需求推断卡条目
249. **可读性与可操作性是设计底线**:按质量清单检查语义、键盘、焦点、对比度和反馈;记录实测范围,少量检查不代表完整 WCAG 合规
This is a preview of SKILL.md. Download or install the skill to get the whole thing.
In the file
SKILL.md1,004 words
Files8
LicenceMIT
Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈70
always loaded
The name and description, so the model knows the skill exists and when to reach for it.
19,030
on trigger
The instruction body and 7 supporting files, read only when the skill fires.
9.6%
of a 200k window
Ten skills this size would take about 96% of the window before you open a file.
050k100k150k200k context window

19.1k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Heavy. Teams tend to install this one per project rather than globally, and load it only when the job comes up.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

The procedure it runs

The procedure has not been set out here step by step. It is in the body of its SKILL.md: the start of it is shown above, and the whole file comes with the install.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

Its SKILL.md does not declare which tools it asks the agent for, so what it touches is whatever the instructions themselves ask for — read them before you install it.

What it asks for
Writes filesnot declared
Network accessnot declared

This SKILL.md carries no allowed-tools line, so neither is declared. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

What is in the bundle

8 files, 76.4 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in. 1 file of its source is not in the download — listed after these, with why.

  • SKILL.md28.7 kB
  • agents/openai.yaml0.5 kB
  • assets/testany-logo.svg7.7 kB
  • references/delivery-summary.en.md7.6 kB
  • references/delivery-summary.md6.5 kB
  • references/prototype-manifest.en.md11.5 kB
  • references/prototype-manifest.md10.0 kB
  • references/repo-survey-report.md3.9 kB

Not in the download

Not carried is a type a skill download does not hold. Take it from its source.

  • assets/testany-logo-small.pngnot carried
What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the download is 8 files — not the whole of its source: 1 file is left out. It is listed under the files, with why. The MIT licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

# Interactive Prototype Designer · 19.1k tokens when loaded · macOS, Linux mkdir -p .claude/skills && t=$(mktemp -d) && curl -fsSL -o "$t/bundle.tar.gz" https://mcprush.com/api/skills/interactive-prototype-designer/bundle.tar.gz && tar -xzf "$t/bundle.tar.gz" -C "$t" && [ -d "$t/interactive-prototype-designer" ] && { [ ! -e .claude/skills/interactive-prototype-designer ] || { mv .claude/skills/interactive-prototype-designer "$t/.previous" && echo "Previous copy moved to $t/.previous"; }; } && mv "$t/interactive-prototype-designer" .claude/skills/ && echo "Installed .claude/skills/interactive-prototype-designer"
On Windows, or any OS with Node 20+
npx mcprush@latest skill add testany-io/interactive-prototype-designer

Windows PowerShell says 'running scripts is disabled on this system'? Run Set-ExecutionPolicy -Scope CurrentUser RemoteSigned once, or type npx.cmd instead of npx (codex.cmd, gemini.cmd, grok.cmd likewise). PowerShell 7 needs neither. Writes to .claude/skills/interactive-prototype-designer/ in the current project. For every project instead, run mkdir -p ~/.claude/skills && t=$(mktemp -d) && curl -fsSL -o "$t/bundle.tar.gz" https://mcprush.com/api/skills/interactive-prototype-designer/bundle.tar.gz && tar -xzf "$t/bundle.tar.gz" -C "$t" && [ -d "$t/interactive-prototype-designer" ] && { [ ! -e ~/.claude/skills/interactive-prototype-designer ] || { mv ~/.claude/skills/interactive-prototype-designer "$t/.previous" && echo "Previous copy moved to $t/.previous"; }; } && mv "$t/interactive-prototype-designer" ~/.claude/skills/ && echo "Installed ~/.claude/skills/interactive-prototype-designer" (macOS, Linux) — or add --global to the npx line. The curl line replaces .claude/skills/interactive-prototype-designer/ only after the download succeeds, so files left there by another skill of the same name, or by an older release, do not mix in. A copy already there is moved aside, not deleted, and the line prints where. It appears as prototype-designer in Gemini CLI, Codex, Copilot and Grok (its own name); Claude Code lists it by the folder name, interactive-prototype-designer. Not in this download: 1 file of its source (which one, and why). Take it from its source.

Which clients pick it up on their own

A skill is a folder of text. Most of these read a skills folder and pick it up without being told; the rest take the same folder another way — an upload in the app, a parameter on an API call — and then choose it by its description just the same.

Claude Code.claude/skills/
Claude DesktopCustomize › Skills
ChatGPTSkills › Create › Upload
Cursor.cursor/skills/
VS Code.github/skills/
Codex CLI.agents/skills/
Gemini CLI.gemini/skills/
Grok Build.grok/skills/
Microsoft CopilotSkills › Upload a skill
PerplexityComputer › Skills › Upload a skill
DeepSeek Harness.dsh/skills/
Zed.agents/skills/
Devin Desktop.devin/skills/
Windsurf (legacy).windsurf/skills/
OpenAI Agents SDKInstructions or sandbox Skills
HTTP / APIa request parameter
This release
Versionnot versioned
Publishedno release date on file
PriceFree
Referencetestany-io/interactive-prototype-designer

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

—no reviews yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Sign in to review it

A review is tied to an account so it can be answered, edited and taken down by the person who wrote it.

Sign in
Who can post

Anybody with an account, one review each. It carries the version that was current when you wrote it, and the publisher may reply once.

Who wrote it

TI
TestAny-io

Publishes on mcprush.

0 servers listed2 skills listednot claimed
Profile
Publisher
Servers0
Claim this skill