> ## Documentation Index
> Fetch the complete documentation index at: https://docs.myrmagent.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Design & Creative Workflows

> Turn a sentence into a verified visual — 54 design systems, 441 infographic combinations, frontend UI, and 15 artifact types.

# Design & Creative Workflows

Myrm ships a **design stack**, not a prompt pack: real brand design systems, an anti-AI-slop design contract, infographic combinations, and dHash + Vision verification before delivery.

## What you can make

> [card] Brand-faithful pages
>
> Ask for a landing page in the visual language of Stripe, Linear, Vercel, Notion, or 50 other real brands. The 54 templates are full CSS token systems — palette, type scale, spacing, shadows, responsive behavior — not mood-board descriptions.

> [card] Infographics
>
> Choose from 21 layouts × 21 styles = 441 combinations, with image or interactive HTML output. Good for data summaries, explainers, and social cards.

> [card] Frontend UI
>
> `ui-design` handles taste and composition; `frontend-development` handles component architecture, responsive layout, accessibility, and performance. The two skills are designed to be used together.

> [card] Editable artifacts
>
> HTML, SVG, Mermaid, React, images, video, audio, PDF, spreadsheets, presentations, Word documents, architecture graphs, and more render inline with theme sync, version history, and click-to-edit.

## Quick start

```text theme={null}
Design a dark developer-tools landing page in the style of Linear.
```

```text theme={null}
Turn this CSV into a one-page infographic; use the bento-grid layout and a warm editorial style.
```

```text theme={null}
Build a responsive dashboard for our support queue. Keep the existing brand colors and verify the result in the browser before handing it over.
```

## How the design loop works

1. **Design intent** — the agent states the surface type, audience, and a deliberate aesthetic direction before writing code.
2. **Visual system** — typography, palette, spacing rhythm, and motion language are chosen as a system, not improvised per component.
3. **Implement** — the page or artifact is built with the project's stack; existing business logic is preserved during restyles.
4. **Verify** — the result is checked in a real browser: DOM/structure presence, a fast perceptual screenshot diff, then a Vision LLM score. A failed check goes back for repair before delivery.

## 54 design systems

`popular-web-designs` contains 54 real-world design systems. Each template captures a site's complete visual language, including:

* color palette and semantic tokens
* typography hierarchy and font fallbacks
* spacing, radius, shadow, and border conventions
* component patterns and responsive behavior

Use it when the user asks for a specific brand feel. Pair it with `ui-design` when the page also needs a distinct concept and anti-slop review.

## 441 infographic combinations

`infographic` combines 21 layouts with 21 visual styles. It supports:

* image output for quick sharing
* interactive HTML output for editing and embedding
* named aspect ratios (16:9, 9:16, 1:1, custom)
* English, Chinese, Japanese, and other languages

Layouts include bento grid, linear progression, dashboard, funnel, comparison, timeline, and more.

## Visual verification

Design skills can use `browser_navigate_tool` with a `verify_goal`. The verification funnel is:

1. **dHash screenshot comparison** — fast perceptual check for layout-level changes.
2. **Vision LLM scoring** — a structured 1–5 judgment of whether the rendered result matches the brief.
3. **DOM / structure presence (optional)** — when a structural assertion is available, the expected sections and controls are checked too.

This is intentionally more than “take a screenshot”. It catches blank pages, missing sections, and visual regressions before the user sees them.

## 15 artifact types

Myrm renders these artifact types inline: code, document, HTML, image, video, audio, SVG, Mermaid, PDF, spreadsheet, presentation, Word document, binary, React, and architecture. HTML artifacts inherit the host theme through the widget theme bridge; version history, element picking, and selection-based edits are available in the artifact panel.

## Honest boundaries

* **54, not 84, design systems.** The library is curated; adding more templates is content work, not a new engine.
* **No one-click 3D scientific explainer.** `blender-mcp` can drive a local Blender instance and the 3D asset roadmap covers generation and viewing, but a neuron-style 3D dashboard is not a packaged one-prompt workflow yet.
* **No frame-perfect reference-motion → editable code yet.** The Remake Mode / reference-to-motion pipeline is on the roadmap, not shipped.
* **No full Figma editor.** Figma is available through read-only MCP and screenshot/design-to-code workflows; Myrm does not replace Figma.
* **No single-button “6 directions → 3 finished prototypes” flow.** The pieces exist (`ui-design`, `infographic`, `ppt-outline-quality-gate`), but the orchestration is not packaged as one command.

## Migrating from design-skill repos

| If you used… | In Myrm, start with… |
| - | - |
| Awesome DESIGN.md | `popular-web-designs` + `ui-design` |
| Hallmark | `ui-design` (anti-slop + browser verification) |
| Huashu Design | `infographic` + `ppt-outline-quality-gate` + `ui-design` |
| video-shotcraft | `video-production-pipeline` (generative video); code-rendered video is on the roadmap |
| OpenPencil | Design-canvas work is on the roadmap; use Figma MCP or screenshot-to-code today |
| Motion2Code | Not shipped; the reference-motion pipeline is on the roadmap |
| Blender Agent Skills | `blender-mcp` (local Blender required) |

## Related

* [Agent templates](https://docs.myrmagent.ai/guides/agent-templates)
* [Interactive UI](https://docs.myrmagent.ai/guides/interactive-ui)
* [Theme Studio](https://docs.myrmagent.ai/guides/theme-studio)
* [Layered verification playbook](https://docs.myrmagent.ai/guides/layered-verification-playbook)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.