prd-vibe · idea → HTML PRD
GitHub
A Claude Code skill · v1

Idea → HTML PRD
in one shot.

A slash command that turns a one-line idea into an agent-ready Product Requirements Document. Single HTML file. 13 essential sections. No build step. Drops into ~/.claude/skills/.

$ /prd-vibe 10-streak-app "a tool that tracks my matcha streak"
Install in 10 seconds View live example ↗

What's in the box

Each PRD is built from these 13 custom components. The HTML viewer renders fenced markdown blocks into styled cards, charts, and diagrams — no images, no screenshots needed.

01
Hero + spec strip
Display title, status pills, 4-tile metric strip across the top
02
Persona card
ICP with channel + watering-holes. Quote that sounds like a real DM
03
Positioning quote
April Dunford one-liner with all 7 fields filled, rendered as a quote card
04
Launch tweet
Twitter-styled card with the actual draft tweet, paste-ready <280 chars
05
Feature cards
Trigger / behavior / result / acceptance. Optional user-story prefix
06
Mermaid diagrams
User flow, ERD, sitemap, state machine — auto-rendered from fenced code
07
Storyboard frames
First-60-seconds journey, numbered with timecodes
08
Funnel bars
Proportional-width acquisition funnel, each row a PostHog event
09
Color swatches
Hex / oklch / rgb tokens rendered as actual swatches
10
NON-GOALS grid
Struck-through pills — the things you're explicitly NOT building
11
Risk matrix
Probability × impact table with color-coded score cells
12
Milestones timeline
Vertical timeline with dated dots and status pills
13
Metrics framework
AARRR / HEART / OKR rendered as a labeled metric card grid

Install in 10 seconds

One curl pipe. Drops the skill into ~/.claude/skills/prd-vibe/. Works with any Claude Code session.

curl -sSL https://prd.midcurved.com/install.sh | bash

Or install manually

mkdir -p ~/.claude/skills/prd-vibe/templates
curl -o ~/.claude/skills/prd-vibe/SKILL.md https://prd.midcurved.com/SKILL.md
curl -o ~/.claude/skills/prd-vibe/templates/prd-template.md https://prd.midcurved.com/templates/prd-template.md
curl -o ~/.claude/skills/prd-vibe/templates/prd-template.html https://prd.midcurved.com/templates/prd-template.html
curl -o ~/.claude/skills/prd-vibe/templates/prd-example.md https://prd.midcurved.com/templates/prd-example.md
curl -o ~/.claude/skills/prd-vibe/templates/prd-example.html https://prd.midcurved.com/templates/prd-example.html

Then in any Claude Code session

/prd-vibe my-app "a one-line idea"

Why HTML beats Markdown

Markdown was the right format when agents wrote 50 lines. Now they write 500. Nobody reads 500-line Markdown files.

  • →Color, diagrams, tables, interactive elements — for free
  • →Sticky table of contents, P0-only mode, theme toggle
  • →One file. Drop on S3 / Cloudflare R2. Send a link
  • →Two-way: edit → click "Copy CLAUDE.md" → paste back to your agent
"I have stopped using markdown altogether for almost everything. With HTML, I feel more in the loop with Claude than ever before." — Thariq, "The Unreasonable Effectiveness of HTML"

The 13 sections

Lean by default. Plus an Extended Planning collapsible group for depth when the build warrants it.

P0 — every PRD

  1. 01TL;DR + spec strip
  2. 02ICP card (persona)
  3. 03Positioning (Dunford one-liner)
  4. 04Launch copy pack (the gate)
  5. 05Activation event + magic moment
  6. 06Core flow + user-flow diagram
  7. 07Functional requirements & user stories
  8. 08Tech stack — LOCKED
  9. 09NON-GOALS
  10. 10Build verification (checkboxes)
  11. 11Launch metrics (AARRR / HEART / OKR)
  12. 12Open questions
  13. 13Decisions log + CLAUDE.md block

P1 — Extended Planning (collapsible)

  1. +Competitive alternatives
  2. +Distribution plan
  3. +First 60 seconds storyboard
  4. +Acquisition funnel
  5. +Non-Functional Requirements
  6. +Risks & Mitigations matrix
  7. +Timeline & Milestones
  8. +Telemetry contract
  9. +Retention loop, content angle, pricing
  10. +Data model, sitemap, state diagram
  11. +Design direction + swatches
  12. +Locked surfaces, file structure

Built on shoulders of giants

Studied the most-starred PRD repos on GitHub. Took the best of each. Compressed it into one skill.

ugur10/prd-template
Best all-around reusable template. 10-year PM checklist, MVP focus, living-doc discipline.
booya1986/PRD_Tamplet
Practical with complete worked example. Easy DOCX/Markdown customization.
TechNomadCode/AI-Toolkit
Guided PRD creation — interactive prompt that builds the PRD conversationally.
jamesrochabrun/skills
Production-ready PRD skill with validation scripts, user-story templates, metrics frameworks.