From Idea to an IBCS Custom Power BI Visual — in 5 Prompts

Hochschul-Insights report landing page showing the IBCS integrated variance bar visual with AC, PY, delta and delta-percent tiers

Q: Can you build a real, IBCS-compliant Power BI custom visual without writing the TypeScript yourself?
A: Yes. I built two of them — a vertical integrated variance column chart and its horizontal bar sibling (AC vs PY/PL/BU with Δ and Δ% tiers, semantic green/red, IBCS scenario notation) — by driving an AI coding agent through five focused prompts: research → scaffold → core implementation → IBCS polish → format pane + packaging.

The result is a working, packageable .pbiviz you can drop into any report. Code, plan, and self-test strategy are public in the repo.

And the kicker: the whole thing took no more than an hour. That’s the real headline — not that an agent can build a custom visual, but that it can do it in the time it takes to drink a coffee and read your email. Imagine what’s possible with a full day, or a few of them.

Honest disclaimer: “5 prompts” is the shape of the journey, not a literal keystroke count. Each prompt kicked off a chunk of work that I reviewed, corrected, and iterated on. The point is the workflow, not a magic one-shot.

Why build this at all?

The IBCS “integrated variance” layout — Actual vs. a reference (PY / PL / BU) with the absolute delta (Δ) and the relative delta (Δ%) stacked as separate tiers on a shared category axis — is the single most useful chart in management reporting. The established commercial custom visuals do it beautifully, and they’re the de-facto gold standard.

But I wanted to understand how much of that chart an AI agent could build from scratch, as an open, inspectable reference: pure-TypeScript variance math, IBCS scenario notation (AC solid, PY outlined, PL/BU hatched, FC dotted), semantic positive/negative color, and two orientations sharing ~90% of the code.

So the goal was never “replace the commercial visuals.” It was: prove the build path, and end up with a clean, hackable visual.

The 5 Prompts

Prompt 1 — Research & plan (no code yet)

“Here’s an IBCS integrated-variance reference image and a research doc. Produce a build plan: define what ‘multi-tier’ means, map the feature set against the leading commercial IBCS visuals as the north star, and split it into MVP / Phase 2 / out-of-scope.”

This produced PLAN.md — including a 28-row capability map (researched against the established commercial IBCS visual providers) and a strict v0.1 subset. Planning before coding is the highest-leverage prompt of the five. It locks scope so the later prompts don’t sprawl.

Key MVP decision: ship AC + PY/PL/BU with Δ and Δ% tiers, semantic colors, two orientations. Push FC notation, axis break, small multiples, drill, and theme-JSON import to Phase 2.

Prompt 2 — Scaffold the two visuals + a shared core

“Scaffold ibcsMultiTierColumn and ibcsMultiTierBar as pbiviz projects plus a shared TypeScript module for the variance math, wired via a tsconfig @shared/* path alias.”

The two visuals differ only in axis orientation, so the agent factored the variance calculations, scenario styling, and types into a shared/ module consumed by both. One core, two thin orientation wrappers. This is exactly the kind of boring-but-correct structure an agent gets right when you ask for it explicitly.

Prompt 3 — Implement the integrated variance chart

“Implement the v0.1 integrated variance layout: three tiers on a shared category axis — base (AC overlaid with the reference), absolute Δ, and Δ% — for both orientations.”

This is the headline feature. The agent rendered the three-tier layout, computed Δ and Δ% per category, and overlaid the reference bar on the actual. First working draft of both the column and the bar variant.

Prompt 4 — IBCS notation & correctness polish

“Apply IBCS conventions: AC solid black, PY outlined, PL/BU hatched; semantic green/red variance; per-tier independent scales; share the base-tier pixels-per-unit with the absolute-Δ tier so the Δ bars are visually honest; add a scrollbar when categories exceed the viewport.”

This was the longest stretch — the difference between “a chart” and “an IBCS chart.” Highlights:

  • Share base-tier scaling with the absolute-Δ tier (IBCS-correct magnitude).
  • Pin/needle style for the Δ% tier.
  • Clamp labels inside tier bounds so AC labels never overlap variance values.
  • Deterministic sorting (never trust input order), default sort = actual descending.
  • Scroll behavior: vertical-only for bar, horizontal-only for column, with reserved scrollbar width so the layout doesn’t jump.

Lesson: the agent nails the 80% layout fast, but the IBCS correctness details (honest scaling, label collisions, notation) need you to know what “right” looks like and prompt for it specifically.

Prompt 5 — Format pane, versioning & packaging

“Add format-pane options (text font/size/color, per-measure decimal places, outlier cutoff, an About card showing the version), auto-bump the 4th version segment on every package, and produce a distributable .pbiviz.”

The finishing layer that makes it feel like a product: configurable formatting, an auto-injected About card, a version bump on every package, and signed .pbiviz files copied to releases/. End state: ibcsMultiTierColumn and ibcsMultiTierBar, both importable into any report.

What you actually get

Two visuals ibcsMultiTierColumn (vertical), ibcsMultiTierBar (horizontal)
Comparison AC vs PY / PL / BU
Tiers Base (AC + reference) · absolute Δ · relative Δ%
Notation AC solid · PY outlined · PL/BU hatched (FC dotted = Phase 2)
Color Semantic green/positive, red/negative; invert for cost measures
Formatting Font controls, per-measure decimals, outlier cutoff, About card
Tests Pure-TS variance math unit-tested; three-layer self-test strategy

The honest takeaways

  1. Plan first, code second. Prompt 1 (the plan + a capability map researched against the commercial IBCS visuals) shaped every later prompt and stopped scope creep.
  2. Architecture is a prompt. Asking explicitly for a shared core + thin wrappers gave clean, DRY code instead of two copy-pasted visuals.
  3. Domain knowledge is non-negotiable. The agent built a chart easily; turning it into an IBCS-correct chart required me to know honest scaling, scenario notation, and label rules and to prompt for them.
  4. “5 prompts” ≠ “no work.” Each prompt was a review-and-iterate loop. The agent did the typing; I did the judging.
  5. The output is inspectable. Unlike a black-box commercial visual, every line — variance math, scaling, notation — is in the repo and hackable.

And it took under an hour

That’s the part worth sitting with. Two IBCS-compliant custom visuals — ibcsMultiTierColumn and ibcsMultiTierBar — from a blank folder to packaged, importable .pbiviz files, in less than 60 minutes of guided prompting.

Not because the agent is magic, but because the loop — plan, scaffold, implement, review, correct — is fast when you bring the domain knowledge and let the agent do the typing. If an hour gets you two working visuals, picture what a focused day, or a week, actually unlocks: the FC notation, axis break, small multiples, drill-down, and theme-JSON import already scoped in Phase 2 — and well beyond.

Try it

Leave a Reply