What is superui-design-md?

A tool that turns design intent and source evidence into a DESIGN.md specification and preview pages. DESIGN.md records reusable style values such as colors, type, spacing, and component rules.

Use it to document or update a design system, create light and dark previews, define interaction rules, and prepare frontend work for implementation.

It gives frontend implementation a clear, shared description of how the interface should look and behave.

superui-design-md — Skill for Claude Code and Codex by HappyDoggyAI

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.

Any agent

npx skills add HappyDoggyAI/superui --skill superui-design-md

Clone the repo

git clone --depth 1 https://github.com/HappyDoggyAI/superui

Made for: Claude Code, Codex.

Or install superui, the plugin that ships this one along with the rest of its 6 skills.

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/skills/happydoggyai/superui/superui-design-md/github.svg)](https://agentmods.dev/skills/happydoggyai/superui/superui-design-md)

Your own site

<a href="https://agentmods.dev/skills/happydoggyai/superui/superui-design-md"><img src="https://agentmods.dev/badge/skills/happydoggyai/superui/superui-design-md/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/skills/happydoggyai/superui/superui-design-md"><img src="https://agentmods.dev/badge/skills/happydoggyai/superui/superui-design-md.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 74 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 867 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.00074	$0.00867
Opus 5	$0.00037	$0.00434
Sonnet 5	$0.00015	$0.00173
Haiku 4.5	$0.00007	$0.00087

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

Security

Grade A, and why

superui-design-md 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 10d 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.

skills/superui-design-md/SKILL.md · 85 lines

How it starts

The opening of the file, as written. The whole thing — 85 lines — stays where its author put it; the contents beside it link to each section on GitHub.

DESIGN.md Generator

Convert design intent, source evidence, and user preferences into an AI-executable DESIGN.md plus preview files.

Core Rules

Follow the Google Stitch-style DESIGN.md structure: machine-readable YAML token frontmatter plus human-readable Markdown rationale.
Read skills/superui-shared/DESIGN_INTELLIGENCE.md before creating tokens.
Add an Interaction Loop section covering CRUD loops, feedback, operation dependencies, and error handling.
Write artifacts to <ARTIFACT_ROOT>/: DESIGN.md, preview.html, and preview-dark.html.
Treat long-term preferences as soft constraints; current explicit user instructions take priority.
Try npx @google/design.md lint DESIGN.md; if unavailable, continue and record the skipped lint.
Read skills/superui-shared/TASK_MANAGEMENT.md; update todo.md, append design decisions and lint evidence to progress.md, and update pipeline-status.md.

Workflow

Load input source:
- If analysis exists, read analysis/layout.md, analysis/interaction.md, and analysis/style.md.
- If the user gave a direct description, extract style, layout, color, and interaction requirements.
Run design intelligence:
- Determine product type, audience, primary job, density, trust level, platform, brand posture, and anti-patterns.
- When under-specified, check for local ui-ux-pro-max-skill and use it as optional advisory input only.
Select examples only when needed:
- Use rg --files examples/design-md or example READMEs to find candidates.
- Read at most 1-2 relevant examples and only relevant sections.
- Extract structure and expression patterns; never copy brand values or assets.
Generate DESIGN.md using templates/DESIGN.md.template.md.
Generate preview.html and preview-dark.html.
Run or skip lint and record evidence.

DESIGN.md Requirements

YAML token frontmatter must include:

colors: primary, functional colors, and at least 8 neutral steps
typography: display, title, body, and caption levels with fallback fonts
spacing: 4px-based scale from small to large
borderRadius: none, sm, md, lg, xl, full
shadows: sm, md, lg, xl
breakpoints: at least sm, md, lg, xl, 2xl

Read the full file on GitHub · 85 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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.

10d ago First seen · 85 lines · 74 tokens per session scan A 897efdcc5003

Subscribe to this mod's changes

superui-design-md is a skill published in the GitHub repository HappyDoggyAI/superui (2 stars, last pushed 2mo ago), licensed MIT. It adds 74 tokens to every session and 867 once invoked, about $0.0004 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-31.

Design and UX

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

superui-design-md