Building a Lead-Gen Funnel Dashboard by Prompting an AI Agent

Part 1 — What It Is

Forgeline is a fictional B2B SaaS developer tool, and the dashboard below is a lead-generation funnel built as if a marketing, product, and sales team all needed the same live picture. It is hand-coded with D3.js v7, packed into a single self-contained HTML file, styled in a dark dashboard treatment, and powered by seeded synthetic data.

The important part is not the fictional product. It is the shape of the question: which leads are merely curious, which ones are close to buying, and how does intent change both the odds and the speed of conversion?

The funnel moves from Lead Submitted 4,200 to Newsletter 2,849 (67.8%), Demo Watched 1,797 (63.1% of newsletter signups), Trial 950, and finally Purchased 507 (53.4% of trials). That gives the top-line 12.1% conversion rate. Useful, but not enough.

The more useful view is the segment split. The dashboard divides the synthetic market into four intent groups:

Customer intent drives both conversion rate and conversion speed.

That is the signature insight. Final-stage referral or demo leads convert in about a week and close at nearly 50%. Lurkers take roughly three months and almost never buy. If you only optimize for lead volume, the 47% researching segment can make the funnel look healthy while hiding where revenue actually comes from.

The dashboard panels are intentionally simple: a KPI row, a conversion funnel, a segment breakdown, time-to-convert box plots split by segment, and a weekly lead-versus-purchase trend. The interaction model is just as focused: multi-select segment filter chips, hover tooltips, and an animated reveal on load — no autoplay, no fake drama.

The related talk deck is here: Forgeline lead-gen slides.

Part 2 — How to Build It by Prompting an AI Coding Agent

The dashboard was the kind of project where an AI coding agent is useful if you do not treat the prompt as a wish. Treat it like a compact spec. Give the agent a domain, constraints, data model, visual order of operations, and verification checklist. Then iterate one panel at a time.

1. Frame the goal in one clear prompt

Start by naming the artifact and the business story. The first prompt should give the agent enough shape to make useful architectural choices without overfitting every pixel.

Build a single-page interactive dashboard for a fictional B2B SaaS developer tool called "Forgeline".

The dashboard should tell a lead-generation funnel story: leads enter, some join the newsletter, some watch a demo, some start a trial, and some purchase.

The main insight should be that customer intent changes both conversion rate and time-to-convert. Use synthetic data only. Make it polished enough to record as a 30–60 second demo clip.

Why this works: it gives the agent a product, a funnel, a core insight, and a quality bar. It does not yet ask for every chart. The agent can set up the page, data pipeline, and rough layout first.

2. Pin the house style and constraints

Agents will happily add build systems, packages, and extra files unless you constrain them. For a portfolio visualization, the constraints are part of the product.

Constraints:
- Create one self-contained HTML file.
- Inline the CSS and JavaScript.
- Use D3.js v7 from the public CDN only.
- Do not add a build step or package manager.
- Use a dark dashboard style: near-black background, slate panels, bright blue / purple / green segment colors.
- Make it fit on a desktop screen and look good in a 30–60 second screen recording.
- No autoplay. Use a short animated reveal on load only.

Why this works: the implementation target is unambiguous. The agent knows not to scaffold an app, and the visual style is pinned before it starts drawing.

3. Specify the synthetic, seeded data model

The data model is where the dashboard becomes believable. The key is to describe both probabilities and timing. Seeded determinism matters because every refresh, screenshot, bug fix, and future edit should show the same story.

Generate deterministic synthetic data with a seeded PRNG, preferably mulberry32.

Create 4,200 leads across four intent segments:
1. Researching / Lurking — highest volume, very low purchase conversion, slow time-to-convert.
2. Actively Scheduling Demos — medium volume, moderate conversion, medium speed.
3. Narrowing (comparing 3 platforms) — smaller volume, high conversion, fast speed.
4. Final-stage (referral/demo) — smallest volume, highest conversion, about one week to convert.

Model monotonic funnel stages:
Lead Submitted → Newsletter Signup → Demo Watched → Trial Started → Purchased.

Each lead should have a segment, created date, channel, stage reached, purchased flag, and time-to-convert in days if purchased.

Why this works: it prevents the agent from drawing charts from hard-coded totals only. You get record-level data that can support filters, box plots, weekly trends, and future panels.

4. Iterate panel by panel

Ask for one visual panel at a time. Review the result in the browser after each step. If the funnel is wrong, fix it before asking for box plots. If the segment colors are unclear, fix them before adding interaction.

First, implement the KPI row and conversion funnel only. The funnel width should represent the number of leads reaching each stage. Add hover tooltips with counts and stage-to-stage conversion.

Now add a by-segment breakdown panel. Show segment volume and lead-to-purchase conversion rate. Use the same segment colors everywhere.

Now add time-to-convert box plots by segment. The box should show the middle 50%, the median line, and whiskers around the 10th to 90th percentiles.

Now add a weekly trend panel showing new leads as an area chart and purchases as a line chart.

Why this works: each prompt has a testable outcome. You can look at one panel and decide whether it supports the story before increasing complexity.

5. Request a feature as a follow-up

Once the static dashboard works, add interaction. In this case, the most useful feature is not a giant settings panel; it is a segment filter that changes every chart together.

Add multi-select segment filter chips above the dashboard.

Requirements:
- One chip per segment, with the segment color and current lead count.
- Clicking a chip toggles that segment on or off.
- All KPI values and all charts must recompute from the active segment set.
- Add a Reset button.
- Keep hover tooltips working after every filter change.

Why this works: it describes state, behavior, recomputation, and regression risk. The agent is less likely to bolt on a visual control that only affects one chart.

6. Add the safety prompt

For demos like this, say the safety requirement plainly. Synthetic data should stay synthetic, and the final file should not accidentally carry real identifiers from prompts, notes, or local examples.

Safety check before finalizing:
- The product name Forgeline is fictional.
- Use no real customer data, no real people, no real organizations, and no private identifiers.
- Verify the file is self-contained except for the D3 CDN.
- Add a small footer note that the data is synthetic, seeded, and reproducible.
- Search the final HTML for accidental PII or private identifiers and report what you checked.

Why this works: it makes the agent verify the artifact, not just generate it. It also documents the disclosure in the page itself.

7. Tune the numbers until the story is visible

Synthetic data usually needs tuning. A perfectly logical model can produce a boring demo if one group has too few conversions to draw. Ask for the adjustment in terms of the story, not just a random probability bump.

The researching segment is converting so rarely that the time-to-convert box plot is almost empty.

Keep researchers as the lowest-converting segment, but bump the purchase probability enough that a few slow conversions appear. The visual story should remain: researchers almost never buy and take about three months when they do.

Why this works: you preserve the narrative hierarchy while making the chart readable. The goal is not statistical realism at any cost; it is an honest synthetic model that demonstrates the analytic point.

8. Publish the artifact

When the dashboard is stable, publishing should be boring. Drop the single HTML file into the visualization folder, add a gallery card, and link to it from the article or talk page.

Publish this as webroot/viz/lead-gen-funnel.html.

Then add a gallery card to webroot/viz/index.html with:
- Title: Forgeline — Lead-Gen Funnel
- Tags: D3.js, Dashboard, Synthetic
- Short excerpt mentioning intent segments, conversion rate, and time-to-convert.
- Link text: Open →

Do not modify any unrelated files.

Tips for Prompting Coding Agents

• Be specific about the artifact. "One self-contained HTML file" gets a very different result than "make a dashboard."
• Give constraints early. Framework, CDN, file count, theme, viewport, and recording needs should be stated before code generation.
• Specify the data model, not only the chart. Record-level synthetic data makes filtering and future panels much easier.
• Iterate in small visible steps. One panel per prompt is easier to review than four charts, filters, tooltips, and animations at once.
• Ask for verification. Tell the agent what to check: no real data, deterministic seed, self-contained file, no broken links.
• Provide reference files for style. If the site already has a house style, point the agent at those files and ask it to match them exactly.

The lesson from the Forgeline dashboard is bigger than lead generation. AI agents are good at producing code quickly. They are much better when the human provides a crisp story, strong constraints, and a review loop that turns each prompt into a testable increment.