30 Claude Prompts That Build Visual Roadmaps

You are a senior product manager who builds clear, opinionated roadmaps. <context> I need a now-next-later product roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should be a real board with named initiatives, not a blank template. </context> <inputs> - Product and stage: [WHAT IT IS, EARLY / GROWTH / MATURE] - North-star goal this period: [E.G. ACTIVATION, RETENTION, EXPANSION REVENUE] - Known initiatives or asks: [LIST OF FEATURES / BETS] - Team capacity and squads: [HOW MANY ENGINEERS / TEAMS] - Hard dates or constraints: [LAUNCHES, COMPLIANCE, EVENTS] - Themes I care about: [E.G. ONBOARDING, MOBILE, AI] </inputs> <task> Build a three-column now-next-later board grouped by theme. Each card has a title, the problem it solves, the target outcome metric, an owner placeholder, a t-shirt size (S/M/L), and a confidence tag. Fill every column with realistic, specifically named initiatives derived from my inputs (do not leave placeholders for the work itself). Add a top bar with the north-star goal and the period, and a small legend explaining the tags. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Cards are color-coded by theme with accessible contrast; columns scroll independently on mobile. - Each initiative ties to an outcome, not just a feature name; no filler cards. </constraints> <format> Return the full roadmap as an artifact, then explain how you decided what is Now vs Later and which two bets you would cut if capacity dropped. </format>

You are a product operations lead who turns plans into readable timelines. <context> I need a quarter-by-quarter feature timeline built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should look like a clean horizontal Gantt with bars spanning weeks. </context> <inputs> - Period to cover: [E.G. Q1-Q4 2026 OR NEXT 6 MONTHS] - Features and rough durations: [FEATURE -> WEEKS / MONTHS] - Dependencies: [X MUST FINISH BEFORE Y] - Teams or owners: [WHO OWNS WHAT] - Fixed milestones: [BETA, GA, LAUNCH EVENT] </inputs> <task> Build a horizontal timeline with a month/quarter axis across the top and one row per feature. Render each feature as a labeled bar positioned and sized by its duration, colored by owning team, with milestone diamonds for the fixed dates. Show dependency arrows or a clear note where one bar must precede another. Add a sticky left column of feature names and a legend mapping colors to teams. </task> <constraints> - One self-contained responsive HTML file using CSS grid or flex for the bars; Google Fonts only. - Bars must be proportional to duration and aligned to the axis; no overlap glitches. - Accessible labels on every bar and milestone; horizontal scroll on small screens. </constraints> <format> Return the full timeline as an artifact, then list the critical path and the one dependency most likely to slip the launch. </format>

You are a staff engineer who plans low-risk migrations. <context> I need a phased technical migration roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should sequence the work to keep production safe at every step. </context> <inputs> - What we are migrating from and to: [E.G. MONOLITH -> SERVICES, DB X -> DB Y] - Why now: [DRIVER, E.G. SCALE, COST, EOL] - Systems and surfaces affected: [LIST] - Risk tolerance and downtime budget: [E.G. ZERO-DOWNTIME REQUIRED] - Team and timeframe: [PEOPLE, TARGET DATE] </inputs> <task> Build a phased roadmap with columns for Prep, Parallel-Run, Cutover, and Cleanup. Under each phase, list concrete steps with an owner placeholder, a rollback note, and a risk level. Include a strangler-fig or expand-and-contract sequence where relevant, explicit go/no-go checkpoints, and a verification step per phase. Add a phase summary bar showing duration and the single biggest risk in each phase. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Every phase has a rollback path and a measurable exit criterion; no step lacks an owner slot. - Color-code by risk level with accessible contrast; mobile-stackable phases. </constraints> <format> Return the full migration roadmap as an artifact, then name the riskiest step and the cheapest test that would de-risk it before cutover. </format>

You are a platform product lead who sequences infrastructure investments. <context> I need a platform roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should map capabilities across maturity stages, not just dates. </context> <inputs> - Platform or API: [WHAT IT IS] - Current pain for internal or external developers: [TOP COMPLAINTS] - Capabilities to deliver: [E.G. WEBHOOKS, RATE LIMITS, SDKS, SANDBOX] - Consumers to serve: [INTERNAL TEAMS / PARTNERS / PUBLIC] - Horizon: [NEXT 2-4 QUARTERS] </inputs> <task> Build a maturity-stage roadmap with columns for Foundational, Self-Serve, Scalable, and Ecosystem. Place each capability under the stage it unlocks, with a card showing the developer outcome, the dependency it requires, and the consumer it serves. Add a header strip describing the end-state developer experience and a legend mapping card colors to consumer type. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Each capability states the developer outcome it produces, not just its name. - Accessible color coding; columns reflow vertically on mobile. </constraints> <format> Return the full platform roadmap as an artifact, then explain which foundational capability gates the most downstream work. </format>

You are an SRE lead who plans reliability work that leadership will fund. <context> I need a reliability hardening roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should turn vague tech-debt into a sequenced, defensible plan. </context> <inputs> - Current reliability pain: [OUTAGES, SLOW PAGES, FLAKY TESTS, ALERTS] - SLO targets we want: [E.G. 99.9% UPTIME, P95 LATENCY] - Known weak spots: [SERVICES / AREAS] - Capacity for this work: [PERCENT OF TEAM TIME] - Timeframe: [E.G. NEXT QUARTER] </inputs> <task> Build a roadmap with swimlanes for Observability, Resilience, Performance, and Toil Reduction. In each lane, list specific initiatives with the SLO or metric they improve, an effort estimate, and an owner placeholder, ordered by risk-reduction-per-effort. Add a header showing current vs target SLOs and a callout box for the top three fire-now items. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Every initiative ties to a measurable reliability metric; no generic refactor cards. - Accessible contrast; lanes stack on mobile. </constraints> <format> Return the full reliability roadmap as an artifact, then explain how you would pitch the top three items to a skeptical exec in one sentence each. </format>

You are a delivery-focused project manager who builds realistic plans. <context> I need a project delivery roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should show phases, milestones, and owners on one timeline. </context> <inputs> - Project goal and definition of done: [WHAT SUCCESS LOOKS LIKE] - Start date and deadline: [DATES] - Major phases: [E.G. DISCOVERY, BUILD, TEST, LAUNCH] - Workstreams and owners: [STREAM -> OWNER] - Key milestones: [SIGN-OFFS, DEMOS, GO-LIVE] - Known risks: [LIST] </inputs> <task> Build a horizontal timeline with a date axis and one row per phase, each shown as a labeled bar sized to its duration. Mark milestones as diamonds with dates and add an owner badge per phase. Include a thin risk row flagging where buffers should sit. Add a summary header with start, deadline, and overall duration, plus a legend for milestone vs phase vs buffer. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Bars proportional to real durations; milestones aligned to the axis. - Accessible labels; horizontal scroll on mobile; no overlapping bars. </constraints> <format> Return the full delivery roadmap as an artifact, then identify the tightest milestone and where to add buffer to protect the deadline. </format>

You are a program manager coordinating multiple teams toward one launch. <context> I need a cross-team swimlane roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. Each team gets a lane and their work aligns to a shared timeline. </context> <inputs> - The shared goal or launch: [WHAT EVERYONE IS BUILDING TOWARD] - Teams involved: [E.G. ENG, DESIGN, MARKETING, LEGAL, SALES] - What each team must deliver: [TEAM -> DELIVERABLES] - Cross-team dependencies: [A NEEDS B BY DATE] - Timeframe and the launch date: [DATES] </inputs> <task> Build a swimlane chart with a shared date axis across the top and one horizontal lane per team. Place each team's deliverables as positioned bars or cards on their lane, with handoff markers where one team's output feeds another. Highlight the launch date as a vertical line crossing all lanes. Add a legend and a dependencies callout listing the riskiest handoffs. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Lanes align to the same axis so dependencies read visually; accessible color per lane. - Mobile: lanes stack but keep their date labels. </constraints> <format> Return the full swimlane roadmap as an artifact, then list the three cross-team handoffs most likely to cause a slip and who owns each. </format>

You are an agile delivery lead planning several sprints toward a release. <context> I need a sprint-by-sprint release roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should map epics to sprints with capacity in mind. </context> <inputs> - Release goal: [WHAT WE SHIP AT THE END] - Sprint length and count: [E.G. 2 WEEKS, 6 SPRINTS] - Epics and rough sizes: [EPIC -> STORY POINTS OR T-SHIRT] - Team velocity: [POINTS PER SPRINT] - Fixed dates: [DEMO, RELEASE, FREEZE] </inputs> <task> Build a roadmap with one column per sprint and dated headers. Allocate epics into sprints respecting velocity, showing a capacity bar per sprint (planned vs available) so over-allocation is obvious. Mark the release and code-freeze sprints, and add a backlog column for what did not fit. Color cards by epic and add a legend plus a velocity summary. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Sprint capacity bars must reflect the points assigned vs velocity; flag any over-filled sprint in red. - Accessible contrast; columns scroll on mobile. </constraints> <format> Return the full sprint roadmap as an artifact, then explain which epic to cut or split if velocity comes in 20% lower. </format>

You are an event producer who runs tight launch countdowns. <context> I need a countdown roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It works backward from a fixed event date. </context> <inputs> - The event and date: [WHAT AND WHEN] - Workstreams: [E.G. VENUE, CONTENT, MARKETING, LOGISTICS] - Must-hit pre-event milestones: [E.G. SPEAKERS LOCKED, TICKETS LIVE] - Owners: [STREAM -> OWNER] - Lead time available: [WEEKS UNTIL EVENT] </inputs> <task> Build a backward-planned timeline anchored on the event date at the right edge, with week markers counting down (T-8, T-7, ... T-0). Place each workstream as a lane with milestone cards positioned at the week they must complete, an owner badge, and a status placeholder. Add a header with a live countdown framing and a legend, plus a day-of checklist block at T-0. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Time axis reads right-to-left toward the event; milestones snap to week markers. - Accessible labels; lanes stack on mobile while keeping week markers. </constraints> <format> Return the full countdown roadmap as an artifact, then list which milestone, if missed, forces moving the event date. </format>

You are a delivery manager who plans for what can go wrong. <context> I need a roadmap with a built-in RAID overlay (Risks, Assumptions, Issues, Dependencies), built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. </context> <inputs> - Project and phases: [NAME, PHASES] - Timeframe: [DATES] - Known risks and likely impact: [LIST] - Key assumptions: [WHAT WE ARE BETTING ON] - External dependencies: [VENDORS, APPROVALS, OTHER TEAMS] </inputs> <task> Build a two-part artifact: a top phase timeline with milestones and owners, and a synced RAID panel below where each risk, assumption, issue, and dependency is tagged to the phase it threatens, with severity, likelihood, and a mitigation or owner. Draw a visual link (matching color or label) between a RAID item and the phase it endangers. Add a heat indicator for the riskiest phase. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Every RAID item references a specific phase and has a mitigation; no orphan risks. - Accessible color severity coding; sections stack cleanly on mobile. </constraints> <format> Return the full risk-aware roadmap as an artifact, then name the top mitigation that buys the most schedule safety. </format>

You are a head of marketing who sequences campaigns across channels. <context> I need a multi-channel marketing roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should show channels as lanes against a calendar. </context> <inputs> - Marketing goal this period: [E.G. PIPELINE, SIGNUPS, AWARENESS] - Channels in play: [E.G. EMAIL, PAID, SEO, SOCIAL, EVENTS, PARTNERSHIPS] - Campaigns or moments to support: [LAUNCHES, SEASONS, WEBINARS] - Budget weighting by channel: [ROUGH SPLIT] - Timeframe: [E.G. NEXT 2 QUARTERS] </inputs> <task> Build a swimlane calendar with one lane per channel and a month axis. Place named campaigns as bars on each lane, color-coded by the goal they serve, sized by duration. Mark big moments (launches, events) as vertical markers crossing all lanes so channels can rally around them. Add a header with the goal and a legend, plus a budget-weight bar per channel. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Campaigns are specifically named and tied to a goal, not generic 'post a blog'. - Accessible color coding; lanes stack on mobile with their month labels. </constraints> <format> Return the full marketing roadmap as an artifact, then explain which channel carries the launch and where the calendar is over-crowded. </format>

You are a content strategist who plans output around topic pillars. <context> I need a content roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It maps content pieces to pillars and a publishing cadence. </context> <inputs> - Audience and the action I want from them: [WHO, DESIRED ACTION] - Topic pillars: [3-5 THEMES] - Formats: [BLOG, VIDEO, NEWSLETTER, SOCIAL, GUIDE] - Cadence and capacity: [E.G. 2 PIECES/WEEK] - Timeframe: [E.G. NEXT QUARTER] - Key dates: [LAUNCHES, SEASONS] </inputs> <task> Build a calendar-style roadmap with weeks across the top and a row per pillar. Place specific, titled content pieces in the right week, tagged by format and funnel stage (TOFU/MOFU/BOFU), with an owner placeholder. Balance pillars and stages so no week is lopsided. Add a header showing the audience and goal, a legend for format and funnel stage, and a per-pillar count summary. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Every slot has a real working title, not 'blog post'; funnel coverage is balanced. - Accessible tags; rows stack on mobile keeping week labels. </constraints> <format> Return the full content roadmap as an artifact, then explain the pillar/funnel balance and which week to prioritize if capacity is cut. </format>

You are a product marketing lead who runs end-to-end GTM launches. <context> I need a GTM launch roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It sequences pre-launch, launch, and post-launch work across functions. </context> <inputs> - What we are launching and its date: [PRODUCT, DATE] - Target segment and core message: [WHO, THE ONE PROMISE] - Functions involved: [PMM, SALES, SUPPORT, CONTENT, PAID, PARTNERS] - Launch tier: [SOFT / TIER-1 BIG BANG] - Success metric: [E.G. QUALIFIED PIPELINE, SIGNUPS] </inputs> <task> Build a three-phase roadmap (Pre-Launch, Launch Week, Post-Launch/Scale) with a swimlane per function inside each phase. Fill each lane with concrete activities (enablement decks, PR, email blasts, demos, ads), each with an owner placeholder and a due offset relative to launch day (e.g. L-14, L-Day, L+7). Add a top banner with the message and metric, a launch-day marker, and a legend by function. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Every activity has an owner slot and a launch-relative date; nothing generic. - Accessible color by function; phases stack on mobile. </constraints> <format> Return the full GTM roadmap as an artifact, then list the three must-not-slip launch-week activities and who owns each. </format>

You are a startup growth advisor who sequences early go-to-market motions. <context> I need a startup GTM roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should take us from first customers to repeatable traction in stages. </context> <inputs> - Product and ICP: [WHAT IT IS, WHO BUYS] - Current stage: [PRE-LAUNCH / FIRST USERS / EARLY REVENUE] - Channels we can test: [E.G. OUTBOUND, COMMUNITY, CONTENT, PARTNERSHIPS] - Resources: [HEADCOUNT, BUDGET] - Traction goal and horizon: [E.G. 50 PAYING CUSTOMERS IN 6 MONTHS] </inputs> <task> Build a stage-based roadmap with columns for Validate, Channel-Fit, Repeatable, and Scale. In each stage list the experiments and motions to run, the metric that graduates us to the next stage, an owner placeholder, and a kill-criteria note for failing channels. Add a header with the ICP and traction goal, and a legend mapping card colors to channel. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Each stage has an explicit graduation metric; experiments are specific, not 'do marketing'. - Accessible contrast; columns stack on mobile. </constraints> <format> Return the full GTM roadmap as an artifact, then explain which single channel to bet on first and the metric that proves channel-fit. </format>

You are a marketing director balancing long-term brand and short-term demand. <context> I need a quarterly marketing roadmap built as one self-contained HTML file with inline CSS, previewable instantly as an artifact. It should split effort between brand-building and demand capture each quarter. </context> <inputs> - Annual marketing goal: [E.G. 2X PIPELINE, BRAND AWARENESS LIFT] - The brand narrative this year: [POSITIONING] - Demand programs available: [SEO, PAID, ABM, EVENTS, NURTURE] - Brand programs available: [THOUGHT LEADERSHIP, PR, COMMUNITY] - Quarters to plan: [E.G. Q1-Q4] </inputs> <task> Build a four-quarter roadmap where each quarter has a theme and two stacked tracks: a Brand track and a Demand track. Fill each track with named initiatives, a target metric, and an owner placeholder. Show a brand-vs-demand effort split bar per quarter. Add a header with the annual goal and narrative, and a legend distinguishing the two tracks. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Each initiative names a real program and a metric; the effort split is explicit per quarter. - Accessible color tracks; quarters stack on mobile. </constraints> <format> Return the full brand/demand roadmap as an artifact, then explain how the brand-vs-demand split shifts across the year and why. </format>