# prototype-prompt-generator

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 393 installs · ★ 2750
- Author: stellarlinkco
- License: AGPL-3.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/stellarlinkco/myclaude/tree/HEAD/skills/prototype-prompt-generator/SKILL.md
- Updated: 2026-05-04
- HTML: https://affpapa.org/en/nevibecode/skills/prototype-prompt-generator

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/prototype-prompt-generator/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/prototype-prompt-generator/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/prototype-prompt-generator/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/prototype-prompt-generator/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install stellarlinkco/myclaude prototype-prompt-generator
```

2. **Manually: put the files in place**
- File: `.github/skills/prototype-prompt-generator/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/stellarlinkco/myclaude --path skills/prototype-prompt-generator
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/prototype-prompt-generator/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add stellarlinkco/myclaude --skill prototype-prompt-generator -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/stellarlinkco/myclaude/tree/HEAD/skills/prototype-prompt-generator/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [grilling](https://affpapa.org/en/nevibecode/skills/grilling.md) — skill · 979543 installs
- [codebase-design](https://affpapa.org/en/nevibecode/skills/codebase-design.md) — skill · 850344 installs

From the same set: [stellarlinkco/myclaude](https://affpapa.org/en/nevibecode/by/stellarlinkco/myclaude.md) — 3 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md