A command for building user interfaces with Marmo's internal design system and its connected UI guidance service. It covers choosing an icon library, finding suitable components, writing the UI, and reviewing the generated code.

Use it in a Marmo product repository to build or revise UI screens, select components and icons, and validate the final code.

It provides a defined workflow for finding the right components and checking that imports and icons match the chosen design system. The command is intended for explicit requests to build something in the Marmo style.

marmo-build — Command for Claude Code by mahmoudilyan

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Clone the repo

git clone --depth 1 https://github.com/mahmoudilyan/marmoui

Made for: Claude Code.

Or install marmo-ui, the plugin that ships this one along with the rest of its 2 skills, 5 commands, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/commands/mahmoudilyan/marmoui/marmo-build/github.svg)](https://agentmods.dev/commands/mahmoudilyan/marmoui/marmo-build)

Your own site

<a href="https://agentmods.dev/commands/mahmoudilyan/marmoui/marmo-build"><img src="https://agentmods.dev/badge/commands/mahmoudilyan/marmoui/marmo-build/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/commands/mahmoudilyan/marmoui/marmo-build"><img src="https://agentmods.dev/badge/commands/mahmoudilyan/marmoui/marmo-build.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 27 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 370 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00027	$0.00370
Opus 5	$0.00014	$0.00185
Sonnet 5	$0.00005	$0.00074
Haiku 4.5	$0.00003	$0.00037

Measured 12d ago against content hash 3e6ab7a8eb17, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

marmo-build scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

tools/claude-plugin/plugins/marmo-ui/commands/marmo-build.md · 21 lines

What it actually says

/marmo-ui:marmo-ui-build

Build UI using @marmoui/ui (Marmo's internal design system) and the marmo-ui MCP server bundled with this plugin. Run the full validated workflow regardless of how simple the request looks. Works in any Marmo product repo.

Steps

Call mcp__marmo-ui__get_knowledge_version and log the result.
Ask the user which icon library they want (default: phosphor / Phosphor Icons; also material, lucide, tabler, heroicons, feather). Then call mcp__marmo-ui__get_design_guidelines with that iconLibrary.
If the user's request matches a known pattern, call mcp__marmo-ui__get_pattern with the closest patternId (and the same iconLibrary). Otherwise call mcp__marmo-ui__search_components with relevant keywords, then mcp__marmo-ui__get_component_info for each component selected.
Write the code. UI imports only from @marmoui/ui; icons only from the chosen library (use the icon name map returned by get_design_guidelines).
Call mcp__marmo-ui__review_generated_code on the final output with the same iconLibrary. Fix all errors (wrong-library icon imports are errors). Re-run until valid: true.
Return the code with a one-line note describing which pattern/components and icon library were used.

User request

$ARGUMENTS

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

12d ago First seen · 21 lines · 27 tokens per session scan A 3e6ab7a8eb17

Subscribe to this mod's changes

marmo-build is a command published in the GitHub repository mahmoudilyan/marmoui (41 stars, last pushed 1mo ago), licensed MIT. It adds 27 tokens to every session and 370 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX Frontend ai-agents claude components design-system mcp

design-screen

Design a complete screen layout from a description or requirements.

Owl-Listener/designer-skills · 11 tokens

responsive-audit

Audit a design's responsive behaviour across breakpoints — layout, touch targets, and content reflow.

Owl-Listener/designer-skills · 20 tokens

ux-fix

Opt-in fix loop. Reads the latest report from .ux/, validates working tree, and applies findings as atomic commits via the right sub-agents. Triggers on "fix the findings", "apply the fixes", or "run the fix loop". Use when applying findings from a previous audit / copy / a11y / motion / polish report, the user says…

Laith0003/ux-skill · 129 tokens

ux-motion

Animation and motion rubric. Checks timing, easing, meaning, reduced-motion compliance, and performance for every animation on a surface. Triggers on "motion check", "are the animations good", or "fix the motion". Use when auditing motion or animations, checking durations / easing / reduced-motion / performance, is…

Laith0003/ux-skill · 104 tokens

ux-component

Generate a single component (button, modal, navbar, sidebar, card, table, form, chart) from a spec. Triggers on "build a [component]", "create a pricing card", "make a modal", "add a navbar". Use when generating a single component, the user says "create a [button/modal/navbar/card/table/form/chart]", embedded into an…

Laith0003/ux-skill · 105 tokens

ux-copy

Microcopy review and rewrite against the voice rubric. Produces a before/after table with severity per string and a clean rewrite block. Triggers on "review the copy", "fix the microcopy", "the error messages are bad", or "rewrite this". Use when reviewing or rewriting microcopy, fixing error messages that sound like…

Laith0003/ux-skill · 121 tokens