skill CX Codex

prototype-prompt-generator — Claude Code skill: what it does & setup

Q: How to install prototype-prompt-generator in Claude Code?

Run `npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-code`. You can also place the skill file into `~/.claude/skills/prototype-prompt-generator/SKILL.md`.

Turns UI requirements into detailed, structured prompts for building HTML, CSS, or React prototypes.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-code

Open on GitHub

What prototype-prompt-generator does

The skill collects product specifications through focused questions. It asks two or three questions at a time to prevent overload. Topics cover application type, user journeys, navigation flow, and target viewports such as 375px for mobile or 1200px for desktop.

Next, it applies a design system matched to your project. Available presets include WeChat Work, iOS Native, Material Design, and Ant Design Mobile. If you do not provide one, the skill chooses a preset based on the platform or target geography.

The generated prompt includes role definitions, component rules, color palettes with hex codes, and Tailwind CSS configurations. It supplies realistic sample text instead of generic placeholders.

What it helps with

generate technical UI prompts for coding assistants
apply system guidelines for iOS, Material, or Ant Design
define hex color palettes and Tailwind CSS configs
structure layouts with realistic text rather than placeholders

Example prompts for the agent

Create a prototype prompt for a mobile app using iOS Native style
Generate UI specifications for an enterprise dashboard in Ant Design Mobile
Write a detailed prompt to prototype an e-commerce page in Tailwind CSS

How to install prototype-prompt-generator

1Skills CLI (Vercel)

npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-code

2Manually: put the files in place

~/.claude/skills/prototype-prompt-generator/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/prototype-prompt-generator/

1Skills CLI (Vercel)

npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a codex

2Manually: put the files in place

.agents/skills/prototype-prompt-generator/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a cursor

2Manually: put the files in place

.cursor/skills/prototype-prompt-generator/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install stellarlinkco/myclaude prototype-prompt-generator

2Manually: put the files in place

.github/skills/prototype-prompt-generator/SKILL.md

1Skills CLI (Vercel)

npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a gemini-cli

2Platform CLI

gemini skills install https://github.com/stellarlinkco/myclaude --path skills/prototype-prompt-generator

Manually: put the files in place

.devin/skills/prototype-prompt-generator/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about prototype-prompt-generator

How to install prototype-prompt-generator in Claude Code?

Run npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-code. You can also place the skill file into ~/.claude/skills/prototype-prompt-generator/SKILL.md.

What design systems are available in this skill?

It includes presets for WeChat Work, iOS Native, Material Design, and Ant Design Mobile.

How does the skill gather project requirements?

It asks targeted questions in batches of two or three, covering viewports, navigation structures, and data states.

Similar skills

Everything for Design →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set3

product-requirements Acts as a product owner, scores your requirements out of 100 and writes a PRD to docs/{feature-name}-prd.md. CX Codex +1 1,300installs test-cases Turns a PRD or a plain description of requirements into structured test cases with steps, expected results and a coverage matrix. Output goes to tests/<name>-test-cases.md. CX Codex +1 1,200installs