Skip to main content

​
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

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.

Infographics

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

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.

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

​
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