A design step for agent HTML

Make the HTML your agent writes look designed.

Give the agent a design system and a review step before it writes the page. The Visualize skill does both, then publishes the page to Display.

Get VisualizePublish your first page free

The demo shows an agent publishing a doc to display.dev – from a chat or a terminal – then a teammate opening its URL, selecting Edit, changing a number on the page and saving v2, a colleague commenting on v2, the agent publishing v3 at the same URL and resolving the comment, and the doc being shared with someone outside the company.

Works with your agents

Cursor, Codex, Claude Code – any agent that writes a file. Switch agents anytime – your URLs, versions and comments stay put.

Used by top teams at

How do you make an HTML page from an agent look designed?

Give the agent a design system and a review step before it writes the page. The Visualize skill does this for reports, diagrams, plans, slide decks and dashboards. It learns your brand from your code, your site or a short interview. It applies the brand to every page and checks spacing, contrast and hierarchy. Then it publishes the page to Display (display.dev), the docs workspace for agents and people. Your team opens the link, comments on it, and the agent publishes the next version to the same URL.

What the skill does

Visualize is an agent skill for Cursor, Codex, Claude Code and other agents. It makes HTML artifacts. It has commands to learn your brand, compare layouts, polish a page, make it bolder or quieter, and publish it. The current version is 0.8.0 (checked on 16 October 2026).

You sayThe agent does
"Visualize this report"Builds an HTML page in your brand from your content
"Show me three layouts"Makes three document shapes and compares them
"Polish this report"Fixes spacing, contrast and hierarchy
"Publish it"Publishes it to Display and returns the URL
How it works

Steps

01
Install the skill
Follow the instructions on usevisualize.ai. Your agent checks the install location and asks before it writes files.
02
Teach it your brand
Ask the agent to learn your brand from your code or your site. The skill writes a brand profile that every later page uses.
03
Ask for the page
For example: "Visualize the Q3 results as a one-page report."
04
Publish it
Ask the agent to publish the page to Display for your company.
05
Collect comments
Colleagues comment on the page. The agent reads the comments and publishes the next version at the same URL.

Edit any document in-line.

Fix any line right where you read it.

A Q3 delivery report is open on display.dev, with 89.7% in its On-time rate tile. Someone selects Edit in the header, changes the tile to 94.4% on the page, and selects Save changes. The report reopens as version 4 at the same URL.

When another approach is better

  • To design a full interface, use a design tool such as Figma.
  • To run a marketing site, use a site builder and a deploy platform.
  • If a page needs no design, publish plain Markdown. Display shows it with headings and code blocks.
FAQ

Common questions.

Does Visualize need Display?+

No. Visualize makes HTML. You can publish it anywhere. Display adds company sign-in, comments and versions.

Is Visualize free?+

The skill has an MIT license. See usevisualize.ai for the current terms.

Which agents does it support?+

The setup instructions list Cursor, Codex, Claude Code, OpenCode, Hermes and Pi.

What does Display cost?+

Free is €0 with 3 gated artifacts and unlimited public artifacts. Solo is €15 a month and Pro is €49 a month. Viewers are unlimited on every plan. See pricing.

Publish your first artifact in 15 seconds.

Free tier. No credit card. One-time password auth on free, Google + Microsoft SSO on Pro (€49/month flat).

Get started free →See pricing