---
url: /design-pass
title: Make Agent HTML Look Designed – Visualize Skill
updatedAt: "2026-10-16"
description: "Agents write plain HTML that looks generic. The Visualize skill gives the agent a brand, a layout and a review step, then publishes the result to Display."
---

# 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 Visualize →](https://usevisualize.ai) · [Publish your first page free](https://app.display.dev)

---

## 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 say                 | The 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         |

---

## Steps

**Install the skill.** Follow the instructions on [usevisualize.ai](https://usevisualize.ai). Your agent checks the install location and asks before it writes files.

**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.

**Ask for the page.** For example: "Visualize the Q3 results as a one-page report."

**Publish it.** Ask the agent to publish the page to Display for your company.

**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.

1. Select Edit on the page
2. Change it on the page
3. Save – the next version 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

**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](/pricing).