# Give your agent visual direction. > visualize – on-brand HTML from your agent A free, open-source skill that helps your agent create clear, distinctive, on-brand visual HTML. Open Graph alt: visualize – on-brand HTML from your agent > visualize is a free Agent Skill for turning your agent’s context into reports, presentations, diagrams, and other visual HTML, using your project’s style. the free Agent Skill for visual HTML **Paste it into your agent.** `Fetch https://usevisualize.ai/agent-setup.md and follow the instructions.` ## The same request and facts, with and without visualize. Move the boundary. The facts stay fixed while hierarchy, typography, color, and composition resolve around the visual direction. **Wayline retention investigation** – Week-three customer drop-off _Fictional example using sample data_ **Without visualize – Generic AI output:** Customer retention insights. Your retention data shows an opportunity to improve onboarding and engagement. **With visualize – Output designed for your brand:** Retention breaks after week three. Activation is healthy. Habit formation is not. Product leadership should review the handoff after the third weekly session. ### Conversation leading to the visual doc - **You:** Can you take a look at last quarter’s retention data? I’m trying to understand where people fall off. - Agent activity: Read retention-q3.csv - Agent activity: Compared return rates by weekly session - **Agent:** The largest break is between the third and fourth weekly sessions: 28% fewer users return. - **Agent:** Return rates are relatively steady before that, so the issue seems concentrated in the handoff from onboarding to an ongoing habit. - **You:** This is going into product review next week. Where would you focus? - **Agent:** I’d start with what changes after session three. - **Agent:** Look at what users have completed by then, whether they have a clear reason to return for a fourth session, and which prompt or workflow is supposed to pull them forward. - **You:** Can you turn this into a visual doc I can use in the product review? ### Why do these look different? **Without visualize:** Makes a generic doc. Same conversation, but nothing tells it to follow your style or test the finished doc. **With visualize:** Plans, designs, and checks the doc. - **Before designing:** Choose the key finding; Identify the reader; Decide what they should do next - **While designing:** Lead with the answer; Use Wayline’s fonts and orange; Keep the doc simple - **Before finishing:** Facts are correct; Looks right on phones and computers; Text is readable; Nothing is cut off ## Reports, decks, diagrams. Made for the job. Reports, architecture, decks, reviews, and plans – each directed for its audience and job. These are real HTML files, not product mockups. - [See all ten examples](https://usevisualize.ai/showcase) ## Teach it your brand once. Choose what it can inspect. Review what it learns. Nothing is saved until you approve it. 1. **Choose what it can inspect:** You decide where visualize may look. Your website (Colors, fonts, voice); Your codebase (Tokens, components, layout); Existing work (Reports, slides, diagrams). 2. **It learns, then asks:** It finds the obvious choices and asks about anything unclear. It checks Colors, Typography, Layout, Voice. **One thing it cannot tell:** “Should future documents feel restrained or expressive?” 3. **Review the full guide:** visualize shows you every proposed file before it writes anything. “Three files ready to review” is marked Not saved while you review DESIGN.md, PRODUCT.md, tokens.css. Review all three. 4. **Approve and save:** Only after you approve it does visualize save the guide in your project. It writes `DESIGN.md` (How it should look), `PRODUCT.md` (Who it is for), `tokens.css` (Colors and type) and marks the direction “Approved and saved.” **Future visual docs use the same approved guide.** Report · presentation · diagram. - [How teach works →](https://usevisualize.ai/docs/teach) ## Keep directing the same doc. Ask for the change you want. visualize revises the hierarchy, evidence, or level of finish without making you edit the HTML. _Fictional example using sample data_ **Northline · pricing research:** Interview signal: 9/14 asked for budget predictability. ### How the document changes **Finished document:** Pricing research. The finished document before follow-up direction. Teams want predictable annual spend, but the strongest signal is concentrated among larger customers. Document state: Working document. Resulting headline: Pricing research. 1. **Request 01:** “Lead with the recommendation.” The recommendation now leads the document. Do not change the default offer yet. Test annual plans with growth-stage teams, where demand is strongest. Document state: Recommendation first. Resulting headline: Pilot annual plans first. (1 of 3 requests applied). 2. **Request 02:** “Show me the evidence behind it.” The supporting evidence is now visible beside the recommendation. Do not change the default offer yet. Test annual plans with growth-stage teams, where demand is strongest. Document state: Evidence included. Resulting headline: Pilot annual plans first. (2 of 3 requests applied). 3. **Request 03 · polish:** “Polish this for the final review.” The document has completed its final quality pass. Do not change the default offer yet. Test annual plans with growth-stage teams, where demand is strongest. Document state: Decision brief · v1. Resulting headline: Pilot annual plans first. (3 of 3 requests applied). **Recommendation:** Pilot annual plans with growth-stage teams before changing the default offer. **Evidence by company stage:** Growth 82; Early 38; Enterprise 61. Source: 14 customer interviews · April 2026 ## Your agent handles the setup. It checks your setup, tells you exactly what it plans to change, and waits for your approval. **Example agent response (Codex · visualize setup):** **You:** Fetch https://usevisualize.ai/agent-setup.md and follow the instructions. **Agent:** I’ll check which agent is running and whether visualize is already installed before I change anything. **Agent activity:** - Read agent-setup.md - Detected Codex - Checked project and user skill folders **Agent:** I found no existing copy. I can add the reviewed visualize release to this project at .agents/skills/visualize. **Waiting for your approval.** No files have changed. Approval required. Works with Cursor, Codex, Claude Code, OpenCode, Hermes, and Pi. [View installation details](https://usevisualize.ai/docs/install) Paste it into your agent. ## Choose for the job you have. visualize is an open-source Agent Skill that writes self-contained visual HTML from project and conversation context. Choose by where you want to work and what you need to make. - **A visual document from your agent’s context:** Writes self-contained HTML in your project and can reuse reviewable visual direction. [visualize](https://usevisualize.ai/) - **A presentation your team edits together:** Create and format slides, then share them with view, comment, or edit access. [Google Slides](https://usevisualize.ai/google-slides-alternative) - **An AI draft you refine on a canvas:** Generate draft slides, then edit with templates, media, branding, and team collaboration. [Canva](https://usevisualize.ai/canva-alternative) - **Visual work you refine with Claude:** Create and collaborate on designs, prototypes, slides, and one-pagers, with several export formats. [Claude Design](https://usevisualize.ai/claude-design-alternative) - **Technical work turned into visual HTML:** Diagrams, diff reviews, plan audits, data tables, and project recaps. [Visual Explainer](https://usevisualize.ai/visual-explainer-alternative) - **A website or app interface:** Commands for shaping, critiquing, adapting, animating, and polishing frontend work. [Impeccable](https://usevisualize.ai/impeccable-alternative) [All comparisons →](https://usevisualize.ai/alternatives)