Built with AI

Creating the HELIOS-B GI infographic

01

Three stages, one standard

  • High-quality prompting: a complete, structured brief that builds accuracy and MLR-safety into the first draft
  • A verified data pack: every figure extracted from the peer-reviewed source and mapped to its exact location
  • A line-by-line editorial check: a final MLR-style sweep of the client-ready file against the source
02

Content development

  1. 1

    The brief and audience were defined, and the objective was set: a public-facing piece to sit alongside the peer-reviewed publication

  2. 2

    The single headline message was chosen, and the conclusion was set to lead the piece

  3. 3

    The story arc was mapped: why ATTR-CM matters, the study, the results by population, the consistency, and the conclusion

  4. 4

    The data points to feature were selected, and lower-priority detail was cut to keep the piece focused

  5. 5

    The tone was set from the outset: neutral, observational and non-promotional, with the exploratory framing built in

03

Step 1  ·  Prompting for initial creation

The prompt

“Build a single-page, MLR-safe infographic from the peer-reviewed HELIOS-B GI poster. Lead with the conclusion; tell the story in order. Neutral, observational language only. Alnylam blue, no downward arrows. Adjusted rate ratios with 95% CI and an n for every figure. Frame it as exploratory and keep the self-reported limitation visible.”

What the prompt locked in

  • Conclusion as the headline
  • Neutral, observational voice, with no implied efficacy
  • Alnylam blue; no downward arrows
  • Exploratory, post-hoc framing
  • Adjusted rate ratios, with the n behind every figure
04

The first draft

From the verified data pack, a complete draft came together quickly: in the Alnylam palette, in the intended story order, with neutral, observational framing and the exploratory caveats already built in.

A strong, on-brand starting point to review and refine.

The first AI-generated draft of the infographic
05

Accuracy: use the source figure

The first draft re-drew the trial’s graph; for total fidelity, we replaced it with a screenshot of the actual published figure, so the curve is the trial’s own, not an approximation.

First draft versus final: the re-drawn trial graph replaced by a screenshot of the published figure
06

Accuracy: rate ratios, not proportions

The bar chart’s ‘% lower’ bars implied proportions of patients the analysis never measured. It was replaced with a table of the actual rate ratios by population, so the figure states only what the source reported.

First draft versus final: the percentage-lower bar chart replaced by a table of rate ratios
07

Step 2  ·  Building the data pack

The prompt

“Before any design, build a verified data pack. Extract every figure (rates, rate ratios, 95% CIs and n) and map each to its exact place in the source. Separate adjusted from unadjusted rate ratios. Flag where individual-event CIs are not reported. List every abbreviation. Annotate the source behind each claim.”

What it produced

  • Every figure traced to its exact place in the poster
  • Adjusted vs unadjusted rate ratios separated and labelled
  • Missing individual-event 95% CIs flagged
  • A complete abbreviation list
  • An annotated source behind every claim
08

Step 3  ·  Line-by-line editorial check

The prompt

“Run a line-by-line editorial and MLR check on the client-ready file. Verify every figure against the source. Keep the language neutral, with no implied efficacy. Ensure ‘nominal’ precedes every p-value and the p is italicised. Check every abbreviation is defined and alphabetical, with an n beside every percentage. Return a findings list.”

What it caught

  • A p-value missing its ‘nominal’ label
  • A p that was not italicised
  • Abbreviations to add, and unused ones to remove
  • A misspelled drug name
  • ‘either … and’ where the source reads ‘or’
09

Shaped through review

  • The draft was then shaped further through a senior scientific review that challenged the data visualisation
  • Review amends were taken in, and language was re worded to ensure the piece stayed neutral with no implied efficacy
  • The visual hierarchy was refined so the piece reads as a clear story, making the study’s key takeaways easy to understand
10

Initial design ideas

The design actually started using Claude Design, inputting the original content document to generate some different ideas for layouts. The made the initial layouts more efficient and made something that could be tweaked further in other programs.

Layout variants generated in Claude Design
11

Refining the design

We could then export the design from Claude and refine it in Figma, giving us control over the finer details and letting us strip out the creative assumptions AI tends to make.

The design being refined in Figma
12

Building the site

The Figma designs were then fed back into Claude Code to build the live, responsive version. Several iterations followed, refining the placement of individual elements and the animations between them.

The site being built in Claude Code
13

AI and people,
together

What AI accelerated

  • Gathering and verifying the source
  • First-draft copy in story order
  • Building the single-page layout
  • Rapid design variants
  • The line-by-line editorial sweep

What people owned

  • The scientific judgement
  • Neutral, MLR-safe framing
  • Checking every claim to source
  • Design and HTML creation
BACK TO INFOGRAPHIC Alnylam Pharmaceuticals