# web-to-prd

Inspects live web applications using Playwright, drafts PRD documents with user stories, and syncs the backlog into Notion.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 109
- Author: c0x12c
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/c0x12c/ai-toolkit/tree/HEAD/toolkit/skills/web-to-prd/SKILL.md
- Updated: 2026-06-18
- HTML: https://affpapa.org/en/nevibecode/skills/web-to-prd

## What it does

This skill navigates a target web application using Playwright to inspect user interface elements across screens. It arranges discovered capabilities into functional areas, then drafts a PRD alongside epics and prioritized task lists.

Exporting requirements requires the Notion MCP server to build linked databases in your workspace. Firecrawl MCP can optionally replace the initial Playwright crawl if you prefer faster site mapping.

Claude Code only loads MCP servers at startup. Adding an MCP integration during a running session will not expose its tools without a client restart. The workflow defaults to a dedicated profile at `~/.playwright-profile` because everyday Chrome extensions frequently trigger timeout errors during automation.

## Requirements
- Works with: Playwright, Notion

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill web-to-prd -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill web-to-prd -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill web-to-prd -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install c0x12c/ai-toolkit web-to-prd
```

2. **Manually: put the files in place**
- File: `.github/skills/web-to-prd/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill web-to-prd -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/c0x12c/ai-toolkit --path toolkit/skills/web-to-prd
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add c0x12c/ai-toolkit --skill web-to-prd -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/c0x12c/ai-toolkit/tree/HEAD/toolkit/skills/web-to-prd/SKILL.md

## When to use it
- generate a PRD directly from an operational web interface
- break down competitor product workflows into epics and stories
- sync product requirements and backlog databases into Notion
- document web applications without existing specifications

## Example prompts
- /spartan:web-to-prd
- Analyze this running app via Playwright and export the feature backlog to Notion
- Inspect the live web application and generate a PRD with user stories

## Similar
- [agent-browser](https://affpapa.org/en/nevibecode/skills/vercel-labs-agent-browser.md) — skill · 1200000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs
- [computer-use](https://affpapa.org/en/nevibecode/skills/computer-use.md) — skill · 239600 installs
- [browser-use](https://affpapa.org/en/nevibecode/skills/browser-use.md) — skill · 98200 installs
- [playwright-cli](https://affpapa.org/en/nevibecode/skills/playwright-cli.md) — skill · 195700 installs
- [last30days](https://affpapa.org/en/nevibecode/skills/last30days.md) — skill · 53000 installs

From the same set: [c0x12c/ai-toolkit](https://affpapa.org/en/nevibecode/by/c0x12c/ai-toolkit.md) — 33 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