Build custom OGraf graphics with AI

Build custom OGraf graphics with AI

We recently added an OGraf graphic feature to H2R Graphics, which lets you import any EBU OGraf web graphic and run it right inside your show. OGraf is an open, broadcaster-led standard for web-based graphics, so a graphic that follows the spec drops straight into your live production.

That raises an obvious question: where do you get OGraf graphics from? You can grab templates from the community, or you can build your own. Building your own might mean knowing the spec inside out, writing a manifest, hand-coding a web component, and testing it all against a renderer.

That’s why we built an open-source OGraf Graphics Skill for Claude that turns a plain English description into a working, validated OGraf graphic, ready to import into H2R Graphics.

What the skill does

The skill teaches Claude how to build broadcast graphics that conform to the EBU OGraf v1 specification. You describe the graphic you want, and Claude generates the whole bundle for you:

• A manifest (.ograf.json) describing the graphic and the data fields it accepts.
• A web component that does the rendering and animation.
• Any supporting assets, kept in the right folder structure.

Because the output follows the spec, it runs in any OGraf-compatible renderer, including H2R Graphics.

What makes it more than just “ask an AI to write some code” is the inclusion of the following elements into the skill:

• Built-in validation. A validator checks every graphic against the manifest schema, the component interface, and JavaScript syntax before you ever try to use it.
• Brand consistency checks. An advisory pass helps keep colours, fonts, and styling aligned with your look.
• The actual spec, bundled. The skill ships with the official EBU JSON schemas and reference docs, so Claude works from the real specification rather than guessing.

Setting it up

The skill is open source and lives on GitHub at github.com/heretorecord/ograf-graphics-skill.

Getting it into Claude is straightforward. The quickest way is to download the latest skill file, then add it wherever you load skills. Claude pulls it in automatically when you ask for an OGraf graphic.

The exact steps depend on how you use Claude:

• Claude.ai or Claude Desktop: upload the downloaded skill file as a skill.
• Claude Code: clone or download the repo and point Claude Code at it. It picks up the skill with no extra steps.

That’s it, no command line required to start building graphics.

Building a graphic, start to finish

Here’s how a typical session goes. Say you’re covering a motorsport event and you want a classification tower down the left third of the screen.

1. Describe what you want

You start with a prompt to get Claude started on your graphics:

Build me a left-third F1-style timing tower. It should list drivers with their position, name, country, and gap to leader. Sort fastest to slowest, animate when the order changes, and sweep a glint across the leader when a new driver takes the top spot. Make it match a red and black broadcast look.

The more detail you give about the data fields and the on-screen behaviour, the closer the first result will be.

2. Let Claude build and validate

Claude generates the manifest, the web component, and the data fields, then checks the result against the bundled validator. If anything doesn’t conform to the spec, it gets flagged and Claude fixes it in place. You end up with a folder that’s been checked against the real OGraf schema, not just something that looks plausible.

3. Preview and refine

You can ask for changes too: tweak the colours, add a fastest-lap badge, change how the reorder animates, adjust the spacing. Each round produces an updated, re-validated bundle.

Bringing it into H2R Graphics

Once you’re happy with the graphic, getting it on screen is the same flow as any other OGraf graphic:

1. Add an OGraf graphic to your project.
2. Click Add OGraf graphic folder.
3. Select the graphic’s folder (not the individual files).

H2R Graphics reads the manifest, so the graphic’s name, description, and all of its data fields appear automatically in the editor. Fill them in to control what’s shown, and you’re live.

Because these are standard data fields, they can also be driven by variables and data sources, so your AI-built graphic can update live during the show, just like the built-in graphics. For the full import workflow, see the OGraf graphic docs.

This is just a starting point

We don’t think AI is the ultimate answer to broadcast graphics, and a skilled designer will almost always do a better job. Taste, brand consistency, motion design, and the hundred small judgement calls that make a graphic feel right are still very much a human craft.

What this workflow is good for is getting started. Use it to:

• Prototype fast. Go from an idea to something on screen in minutes, so you can see it before you commit to it.
• Find inspiration. Generate a few directions to react to. It’s often easier to refine something than to start from a blank canvas.
• Cover the basics. When you need a functional graphic and don’t have a designer on hand, this gets you a working starting point.
• Iterate quickly. Need a variant for the next event? Describe the change and rebuild, then hand it to a designer to polish.

Because the output is standard OGraf that validates against the official spec, it’ll run in the renderer, it isn’t locked to one tool, and a designer can pick it up and take it the rest of the way.

Try it

The skill is free and open source. Grab it from GitHub, build your first graphic, and import it into H2R Graphics.

New to OGraf and want to understand how the templates are put together? The tutorials at ograf.dev/tutorials are a great place to start.

As always, give it a go and send us feedback. We’d love to see what you build.