How to use a portfolio prompt with Claude / Claude Code

In Claude, paste the brief with your role, two or three real projects, approved screenshots and the intended audience. Ask for a page outline first, then a working draft. Replace every placeholder and check all claims.

In Claude Code, start in your project directory. Ask it to read repository instructions, inspect the framework and reuse existing components. Build one complete case study before expanding. Run the project checks and review mobile layout, keyboard navigation, asset rights and the contact flow.

Updated

Website prompts Portfolio Product Manager Portfolio
Portfolio Free Copy-ready

Product Manager Portfolio

Build a product manager portfolio that shows product strategy and shipped outcomes.

Product Strategy Case studies

The prompt

Copy, personalize, and paste into your preferred AI tool
Was this useful?

Create a professional portfolio website for a product manager.

PROJECT INPUTS
- Name and short biography: [your details]
- Audience and goal: [hiring teams, collaborators or prospective clients]
- Specialization: [your focus]
- Projects and evidence: [two or three real projects with approved assets]
- Framework and styling: [use the current repository stack, or specify your preference]
- Contact: [public professional address and links]

PAGE STRUCTURE
1. Header: name, Work, About and Contact; visible keyboard focus and mobile menu.
2. Hero: specific specialty, one-sentence value proposition and a link to selected work.
3. Selected work: project cards with context, role, outcome summary and dedicated detail sections.
4. Product launch case: customer problem, research, opportunity sizing, prioritization, scope cuts and launch decision.
5. Roadmap case: competing requests, decision framework, stakeholders, delivery risks and tradeoffs.
6. Results: baseline, time window, metric definition, observed change and what cannot be attributed to the launch.

7. About: concise background and working approach. Show credentials only when supplied.
8. Contact: one primary action with a clear response expectation. If a form is a demo, label it as a demo rather than pretending it sends.

VISUAL DIRECTION
Use a concise editorial layout with project summaries and progressive disclosure; prioritize decisions over decorative mockups.

QUALITY REQUIREMENTS
- Responsive from narrow phones to wide desktop; semantic headings and navigation.
- Accessible contrast, alt text, keyboard controls and reduced-motion behavior.
- Optimized images with fixed dimensions; lazy load below-the-fold media.
- Honest placeholders: never invent clients, testimonials, credentials or success metrics.
- Title, meta description and social preview using supplied identity and project details.
- No API keys, analytics secrets or private documents in browser code.

HOW TO USE WITH CLAUDE / CLAUDE CODE
- Claude: paste this brief with sanitized project notes. Ask for a proposed information hierarchy, then a complete page. Review claims before requesting visual polish.
- Claude Code: read repository instructions, inspect the framework and reuse existing components. Implement one project first, run the existing build/check commands, then expand. Show the changed files and any missing content.

DELIVERABLES
Provide complete source files, instructions to run locally, and a short checklist for mobile, keyboard navigation, links and real form behavior.

FOLLOW-UP PROMPTS
- Review this portfolio from the target audience's perspective. Identify the three places that need stronger evidence and suggest changes using only supplied facts.
- Test the narrow-screen layout and keyboard navigation. Fix overflow, unclear focus, inaccessible media and oversized assets without changing the intended content.

How to use this prompt

  1. 1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
  2. 2 Open ChatGPT, Claude, or your preferred AI assistant
  3. 3 Paste the prompt and customize any placeholder text (like product names or brand colors)
  4. 4 Let the AI generate your website code or design specifications

About this Portfolio Prompt

This Product Manager Portfolio prompt is designed to help you quickly create professional portfolio websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.

Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building product manager portfolio. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.

Compatible AI Tools

  • ChatGPT (GPT-4) - Great for detailed code generation and explanations
  • Claude 3 - Excellent for complex, nuanced website designs
  • v0 by Vercel - Perfect for React and Next.js components
  • Cursor - Ideal for AI-powered coding in your IDE
  • Bolt.new - Quick prototyping and full-stack apps
  • Lovable - User-friendly AI website builder

Tags

Product Strategy Case studies Portfolio AI Prompt Free Template Website Builder Web Design Copy Paste Prompt