How We Built 12 Product Management Tools in One Week with Claude Code

Quick Answer

We built 12 interactive product management tools in one week using Claude Code (AI-assisted development), Astro, and Tailwind CSS. Total development time: 8 hours. Total cost: $17. The workflow: write detailed specs (5 min) → Claude Code generates code (20 min) → review and iterate (10 min) → ship. This approach enabled us to build production-ready tools 10x faster than traditional development.

---

I just shipped 12 free product management tools in one week of work. Not “one week of sprinting” - 8 hours total, spread across 7 days.

The flagship tool (Feature Prioritization Matrix) is 1,081 lines of TypeScript. It would’ve taken me 4-6 hours to build manually. Claude Code built it in 20 minutes.

Here’s the complete story: the tech stack, the workflow, the mistakes, and the metrics.

Why I Built This

I spent 6 months as a solo product manager and got frustrated by every PM tool I found:

• Paywall hell: $99/mo for CSV export (seriously?)
• Freemium limits: “3 projects max, then pay”
• Enterprise bloat: Built for 50-person orgs, not solo makers

I wanted tools I could use right now. No signup. No trial. No credit card.

So I built them.

The 12 Tools (What I Shipped)

Prioritization Tools

1. Feature Prioritization Matrix - Compare RICE, ICE, Kano, MoSCoW, and Impact-Effort side-by-side
2. Impact-Effort Matrix 2.0 - Quadrant visualization with AI suggestions and industry templates
3. RICE/ICE Calculator - Quick scoring with instant results

Planning Tools

4. PRD Generator - AI-powered product requirements document generator (Claude API)
5. MVP Scope Calculator - Feature list builder with timeline estimation
6. OKR Template Builder - Generate customized OKRs by team type and company size
7. SaaS Onboarding Timeline Builder - Week-by-week onboarding plan generator

Strategy Tools

8. Jobs-to-Be-Done Canvas - Interactive JTBD mapping with outcome statements
9. JTBD Statement Builder - Template-based JTBD statement generator
10. Product Positioning Generator - Geoffrey Moore positioning framework tool
11. Lean Canvas Template - Interactive canvas with export to Notion/CSV
12. Idea Validation Quiz - Quick assessment of product-market fit potential

All free. No signup. Export to CSV, Markdown, PNG, Notion, Google Sheets.

Tech Stack (What I Used)

Here’s the complete stack:

Frontend

• Astro - Static site generator with component islands
• Tailwind CSS - Utility-first styling
• React - For interactive tool components (in Astro islands)
• TypeScript - Type safety for complex tool logic

Libraries

• html2canvas - PNG export functionality
• Claude API - AI-powered PRD generation
• DataFast - Privacy-first analytics (no cookies, no PII)

Infrastructure

• Cloudflare Pages - Hosting (free tier, auto-deploy on push)
• GitHub - Version control
• Claude Code - AI-assisted development (the secret weapon)

Total Monthly Cost

• Domain: $12/year ($1/mo)
• Hosting: $0 (Cloudflare free tier)
• Analytics: $0 (DataFast free tier)
• Claude API: ~$5/mo (mostly for PRD generator usage)

Total: ~$6/month

Why This Stack?

Astro Over Next.js/Gatsby

Astro wins for content + tools hybrid sites:

1. Zero JS by default → Fast page loads, excellent SEO
2. Component islands → Add interactivity only where needed
3. Built-in TypeScript → No config needed
4. Static export → Deploy anywhere, no server
5. MDX support → Blog posts in Markdown with React components

The tools are React components in Astro islands. Pages load instantly (static HTML), then React hydrates just the tool component.

Tailwind Over CSS/Styled Components

Tailwind = consistent design system without context switching:

• No naming classes (“is this button-primary or btn-primary?”)
• Responsive modifiers built-in (md:grid-cols-3)
• Dark mode ready (dark:bg-gray-800)
• No CSS file bloat (PurgeCSS removes unused styles)

Every tool uses the same blue accent (#3b82f6), same button styles, same spacing scale. Copy-paste consistency.

Client-Side Over Backend

All tools run 100% in the browser:

• No database needed
• No authentication needed
• No server costs
• Export happens client-side (no uploads)
• Works offline after first load

The only server call is Claude API for the PRD Generator. Everything else is pure JavaScript.

The Claude Code Workflow (10x Multiplier)

This is what made “12 tools in 8 hours” possible.

Traditional development workflow:

1. Design the UI (30 min)
2. Write the HTML structure (20 min)
3. Write the JavaScript logic (60 min)
4. Style with Tailwind (30 min)
5. Debug edge cases (60 min)
6. Test exports (30 min)

Total: 4-5 hours per tool

Claude Code workflow:

1. Write detailed spec (5 min)
2. Claude Code generates code (10-20 min)
3. Review generated code (10 min)
4. Iterate on edge cases (10 min)
5. Test and ship (10 min)

Total: 30-45 min per tool

Example: Feature Prioritization Matrix

My spec to Claude Code:

Build a feature prioritization tool that supports 5 frameworks:
- RICE (Reach × Impact × Confidence ÷ Effort)
- ICE (Impact × Confidence × Ease)
- Kano (Must-have, Delighters, Performance, Indifferent)
- MoSCoW (Must, Should, Could, Won't)
- Impact-Effort (2x2 quadrant matrix)

UI:
- Tab-based interface (one tab per framework)
- Input table for feature scoring
- Sortable results table
- Consensus ranking view (shows agreement across frameworks)
- Warning callout when frameworks disagree
- Export to CSV and Markdown

State:
- localStorage persistence
- URL hash for sharing (base64 encoded state)

Styling: Tailwind with blue accent (#3b82f6)

Claude Code output:

• 1,081 lines of working TypeScript/Astro/React
• All 5 frameworks implemented correctly
• Tab UI with state management
• Export functions (CSV, Markdown)
• localStorage + URL hash persistence
• Tailwind styling

Time: 20 minutes of AI generation, 30 minutes of my review and iteration

Manual coding time estimate: 6-8 hours

What Claude Code Is Good At

✅ Excellent:

• Implementing well-defined algorithms (RICE calculation, sorting logic)
• Creating UI structure (tables, forms, tabs)
• Handling state management (useState, useEffect)
• Writing export functions (CSV generation, Markdown templates)
• Styling with Tailwind (applying consistent design systems)

⚠️ Okay:

• Edge case handling (needs prompting: “what if user enters negative numbers?”)
• Complex UI interactions (drag-and-drop, multi-select)
• Performance optimization (may not use useMemo/useCallback by default)

❌ Not Great:

• Vague requirements (“make it look good” → you get generic styling)
• Novel UX patterns (it defaults to familiar patterns)
• Accessibility (needs explicit prompting for ARIA labels, keyboard nav)

The Real Skill: Writing Specs

Claude Code is only as good as your specifications.

Bad spec:

“Build a prioritization tool”

Good spec:

“Build a RICE prioritization tool with 4 numeric inputs (Reach 1-1000, Impact 1-10, Confidence 0-100%, Effort 1-10). Calculate score as (Reach × Impact × Confidence) ÷ Effort. Display results in a sortable table. Export to CSV with headers: Feature Name, Reach, Impact, Confidence, Effort, RICE Score. Use Tailwind with blue accent color.”

Good specs have:

• Exact input types and ranges
• Precise calculation formulas
• UI component descriptions
• Export format specifications
• Styling guidelines
• Edge case handling

My “8 hours of work” was actually:

• 2 hours writing specs
• 3 hours reviewing/iterating on generated code
• 2 hours testing edge cases
• 1 hour final polish

The Build Timeline (Day by Day)

Day 1 (Monday): Foundation

Time: 1 hour

• Set up Astro project
• Configure Tailwind
• Create base layout component
• Add DataFast analytics
• Deploy to Cloudflare Pages

Claude Code generated the Astro config, Tailwind setup, and Layout component in 15 minutes.

Day 2-3 (Tuesday-Wednesday): First 4 Tools

Time: 2.5 hours

Built:

1. SaaS Onboarding Timeline Builder
2. Product Positioning Generator
3. MVP Scope Calculator
4. OKR Template Builder

Claude Code generated each tool in 20-30 min. I spent 15-20 min per tool reviewing and iterating.

Day 4 (Thursday): Next 2 Tools + AI Integration

Time: 2 hours

Built: 5. PRD Generator (with Claude API integration) 6. Jobs-to-Be-Done Canvas

The PRD Generator required custom Claude API integration. Wrote the API wrapper myself (30 min), then Claude Code built the UI around it (20 min).

Day 5 (Friday): Final 2 Tools + Rebuild

Time: 1.5 hours

Built: 7. Impact-Effort Matrix 2.0 (full rebuild of existing tool) 8. Feature Prioritization Matrix (flagship, 1,081 lines)

The Feature Prioritization Matrix spec was the most detailed (took 15 min to write), but Claude Code nailed it in 20 min.

Day 6-7 (Weekend): Polish + 4 Bonus Tools

Time: 1 hour

Built: 9. RICE/ICE Calculator 10. JTBD Statement Builder 11. Lean Canvas Template 12. Idea Validation Quiz

These were simpler tools (200-400 lines each). Claude Code built each in 10-15 min.

Total development time: 8 hours

What I Learned (Mistakes & Insights)

Mistake #1: Vague Specs = Generic Output

Early on, I told Claude Code: “Build a positioning generator.”

It created a basic form with text inputs and a “Generate” button. Generic. Boring.

Then I rewrote the spec:

“Build a product positioning generator using Geoffrey Moore’s framework. Inputs: target customer, problem solved, competitors, unique value. Outputs: 5 sections: 1) Positioning statement template, 2) Elevator pitch (15s, 30s, 60s variants), 3) Comparison table (you vs 2 competitors), 4) Messaging hierarchy (company → product → feature), 5) Value proposition canvas. Include Stripe, Notion, and Figma examples. Export to PDF and Notion.”

Result: A comprehensive, useful tool in 25 minutes.

Lesson: Specificity = quality. Spend time on specs.

Mistake #2: Not Testing Edge Cases

The MVP Scope Calculator had a bug: if a user entered 0 developers, it divided by zero and crashed.

Claude Code didn’t handle this because I didn’t specify it.

After that, I added edge case handling to every spec:

“Validation: Effort must be > 0. If user enters 0 or negative, show error message and disable calculation.”

Lesson: Explicitly specify validation and edge cases.

Mistake #3: Skipping Accessibility

First version of the tools had no ARIA labels, no keyboard navigation, no screen reader support.

I added this to all subsequent specs:

“Accessibility: Add ARIA labels to all inputs. Ensure keyboard navigation works (tab through inputs, press Enter to submit). Use semantic HTML (button elements, not div with onClick).”

Lesson: AI won’t add accessibility unless you ask. Always ask.

Insight #1: Tools > Blog Posts (65x Better Conversion)

I tracked CTA clicks (to app.rocknroll.build) using DataFast goal events.

Results:

• Blog posts: 0.04% CTR (40 clicks per 100,000 page views)
• Tools: 2.61% CTR (2,610 clicks per 100,000 page views)

Tools convert 65x better than content.

People remember tools. People bookmark tools. People share tools.

Blog posts are forgettable. Tools are sticky.

Insight #2: AI Search > Google (Already)

Traffic sources after 1 week:

• Bing AI: 50 citations/day
• ChatGPT: 40 referrals
• Copilot: 6 referrals
• Google: 3.4% of total traffic (9th place!)

AI search is already outperforming Google 5-10x.

ChatGPT cites the JTBD page when users ask “What is Jobs-to-Be-Done?” They click through. They use the tools.

AI search is not the future. It’s the present.

Insight #3: France Loves OKRs (Geographic SEO Win)

13% of traffic is from France. Why?

Top page for French visitors: /p/okr-examples/ (82 French visitors)

Hypothesis: French product management community has strong OKR adoption. Product Hunt shared the site to French PM audiences.

Accidental geographic SEO win. Now considering French language version of OKR content.

Insight #4: Multi-Framework > Single Framework

The Feature Prioritization Matrix (5 frameworks in one tool) gets 3x more usage than single-framework calculators.

People don’t want to “pick a framework.” They want to:

1. See where frameworks agree (high confidence)
2. See where frameworks disagree (needs discussion)
3. Show data to stakeholders (“RICE says X, but Kano says Y - let’s discuss”)

Multi-framework tools have more utility.

Business Model (Why Free?)

“How do you make money if tools are free?”

Three-part answer:

1. Tools Are the Onramp, Not the Product

The tools are free forever. No limits. No paywall.

Revenue comes from app.rocknroll.build (the workspace product).

Tools build trust → word of mouth → workspace signups.

2. Free Is a Moat

Every competitor gates basic features:

• Export to CSV? $99/mo
• More than 3 projects? $199/mo
• Team collaboration? Enterprise pricing

Rock n Roll: Everything free. Export to wherever.

Competitors can’t match this UX without killing revenue.

We can. Because tools aren’t the business model.

3. Workspace Revenue (The Actual Business)

app.rocknroll.build is a full product management platform:

• Roadmap planning
• PRD management
• Stakeholder collaboration
• Integration with Linear/Jira/Notion

Pricing: $15/mo (solo), $49/mo (team)

Conversion rate goal: 3-5% of tool users

If 1,000 people use the tools, 30-50 sign up for the workspace. That’s $450-750/mo recurring.

Free tools → trust → workspace signups.

What’s Next (Roadmap)

Based on feedback from early users, here’s the roadmap:

Week 2-3 (Collaborative Features)

• Share links for team prioritization
• Multi-user voting on impact/effort scores
• Real-time consensus calculation

Week 4-5 (Integrations)

• Export to Linear (create issues directly)
• Export to Jira (create epics)
• Export to ProductBoard
• Export to Google Sheets (live sync)

Week 6+ (Advanced Features)

• Template library expansion (50+ templates by industry)
• AI-powered feature suggestions (“Based on your inputs, consider…”)
• Historical tracking (see how priorities change over time)
• Stakeholder voting mode (weighted scoring by role)

Long-Term (Platform)

• Workspace product integration (save tools to projects)
• Team accounts (shared templates, voting)
• API for programmatic access
• White-label version for agencies

Metrics (First Week)

Here’s the complete data dump from the first week:

Traffic

• Total visitors: 884 (all-time)
• Visitors (last 30 days): 450
• Average session duration: 3:42 (high engagement)
• Bounce rate: 35% (good for tools)

Traffic Sources

1. Product Hunt: 298 visitors (34%)
2. ChatGPT.com: 40 visitors (5%)
3. Toolify: 28 visitors (3%)
4. Direct/organic: ~400 visitors (45%)
5. Other: 118 visitors (13%)

AI Search (Confirmed)

• Bing AI: 50 citations/day
• ChatGPT: 40 referrals (first week)
• Copilot: 6 referrals
• Perplexity: 1 referral

Total AI-driven traffic: ~50 visitors/week (growing)

Tool Usage

• Total tool uses (first week): 127
• Average uses per tool: 10-12
• Top tool: Feature Prioritization Matrix (28 uses)
• CTA click rate: 2.61% (tools) vs 0.04% (blog posts)

Geographic Distribution

• United States: 45%
• France: 13% (!!!)
• United Kingdom: 8%
• Germany: 6%
• Canada: 5%
• Other: 23%

Content Performance (Top 5 Pages)

1. Homepage (/): 415 visitors
2. /p/jobs-to-be-done-framework/: 132 visitors (JTBD page, 1,178 Bing AI citations)
3. /p/okr-examples/: 98 visitors (82 from France!)
4. /tools/feature-prioritization-matrix/: 34 visitors
5. /p/customer-pain-points/: 28 visitors

Conversion

• Workspace signups: 12 (first week)
• Conversion rate: 1.36% (below 3-5% goal, but early)
• Email signups: 45 (for template downloads)

Cost Breakdown (Actual Numbers)

Here’s what it actually cost to build and run this:

Development Costs

• Domain (rocknroll.dev): $12/year
• Claude API (development): ~$3 (one-time)
• Claude API (PRD generator, ongoing): ~$2/month
• My time: 8 hours (~$400 value at $50/hr freelance rate)

Total development cost: $415

Monthly Operating Costs

• Hosting: $0 (Cloudflare Pages free tier)
• Analytics: $0 (DataFast free tier)
• Claude API: ~$2/month (PRD generator usage)
• Domain: ~$1/month

Total monthly operating cost: ~$3/month

Break-Even Analysis

12 workspace signups × $15/mo = $180/mo revenue

Operating cost: $3/mo

Break-even: Month 1 ✅

(Technically in profit from day 1 - didn’t count my time as cost)

Tools You Can Copy

Here’s my open-source toolkit for building fast:

Development

• Claude Code - AI-assisted development (claude.ai)
• Cursor - AI-first code editor (alternative to Claude Code)
• v0.dev - UI component generator by Vercel

Stack

• Astro - Static site generator (astro.build)
• Tailwind CSS - Utility-first CSS (tailwindcss.com)
• shadcn/ui - Copy-paste Tailwind components (ui.shadcn.com)

Hosting & Infrastructure

• Cloudflare Pages - Free static hosting with CDN (pages.cloudflare.com)
• Vercel - Alternative to Cloudflare (also free tier)
• DataFast - Privacy-first analytics (datafast.dev)

Libraries

• html2canvas - HTML to PNG export (html2canvas.hertzen.com)
• jsPDF - PDF generation in JavaScript
• React - UI library (but Next.js, Vue, Svelte also work)

Lessons for Builders

If you’re building something similar, here’s what I’d do differently:

1. Start with 3 Tools, Not 12

I built 12 in week 1 because I had AI assistance. But if doing it manually, start with 3:

1. One prioritization tool (RICE or Impact-Effort)
2. One planning tool (PRD generator or OKR builder)
3. One strategy tool (JTBD canvas or Lean Canvas)

Validate usage before building more.

2. Optimize for AI Search from Day 1

Don’t wait for “Google to index.” Optimize for AI citations:

• Quick Answer boxes (50-75 words)
• Question-based headlines
• FAQ schema (structured data)
• Name real companies (“Stripe uses…”)
• Update dates (“in 2026…”)

AI search drives traffic faster than Google.

3. Track Conversions, Not Just Traffic

Traffic is a vanity metric. What matters:

• CTA click rate (visitor → product)
• Tool usage (how many people actually use the tools)
• Workspace signups (revenue)

I track all three with DataFast goal events.

4. Tools > Blog Posts (Always)

If you have 8 hours, build 2 great tools instead of writing 5 blog posts.

Tools convert 65x better. People remember tools. Tools get shared.

Blog posts are SEO fodder. Tools are products.

5. Free Is a Moat (If You Have a Backend Product)

Free tools only work if you have a paid product to convert to.

Don’t build free tools and hope to “monetize later.” Have the paid product ready.

6. Use AI for 80%, Do 20% Yourself

Claude Code gets you to 80% in 20% of the time.

The remaining 20% is where you add value:

• Edge case handling
• Accessibility
• Performance optimization
• UX polish

Don’t try to prompt AI to do everything. Review and iterate.

Try It Yourself

Want to build something similar? Here’s a starter spec for Claude Code:

Copy-paste this into Claude Code:

Build an interactive RICE prioritization calculator using React and Tailwind CSS.

Features:
- Add/remove features with text input
- Score each feature on: Reach (1-1000), Impact (1-10), Confidence (0-100%), Effort (1-10)
- Calculate RICE score: (Reach × Impact × Confidence) ÷ Effort
- Display results in sortable table (sort by score, name, or any dimension)
- Export to CSV with headers: Feature, Reach, Impact, Confidence, Effort, RICE Score
- localStorage persistence (save/restore state)
- Tailwind styling with blue accent (#3b82f6)

Validation:
- Effort must be > 0 (show error if 0 or negative)
- Confidence must be 0-100%

Accessibility:
- ARIA labels on all inputs
- Keyboard navigation (tab through, Enter to submit)
- Semantic HTML (button elements, not div with onClick)

UI:
- Mobile-responsive (stack on small screens)
- "Add Feature" button with + icon
- Delete button for each row (trash icon)
- Export button (download icon)
- Clear styling with hover states

Create as a single .astro file with embedded React component.

Claude Code will generate a working tool in 10-20 minutes.

Review it. Test edge cases. Ship it.

Final Thoughts

12 tools in 8 hours. $17 total cost. 127 uses in the first week.

This wouldn’t have been possible 2 years ago. AI-assisted development is a cheat code.

But the real unlock isn’t the AI. It’s the shift in thinking:

From: “I need to write every line of code”

To: “I need to architect the experience and review the implementation”

Your job becomes:

• Product thinking (what should this do?)
• Specification writing (how should this work?)
• Quality assurance (does this handle edge cases?)

The AI handles the implementation details.

This is the future of building. Not “AI will replace developers.” But “AI will 10x developers who know how to architect.”

If you’re building, use AI. If you’re not using AI, you’re competing with people who are.

Try the tools: rocknroll.dev/tools

See the code: github.com/heliocentrist/rnr-seo

Questions? Drop a comment. I’ll answer everything.

— Lyra