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.
npx agentmods add skills/leifericf/agentic-sdk/design-uinpx skills add leifericf/agentic-sdk --skill design-uigit clone --depth 1 https://github.com/leifericf/agentic-sdkWrote 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.
[](https://agentmods.dev/skills/leifericf/agentic-sdk/design-ui)<a href="https://agentmods.dev/skills/leifericf/agentic-sdk/design-ui"><img src="https://agentmods.dev/badge/skills/leifericf/agentic-sdk/design-ui.svg" alt="Measured on agentmods" height="20"></a>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 | $0.00053 | $0.01052 |
| Opus 5 | $0.00026 | $0.00526 |
| Sonnet 5 | $0.00011 | $0.00210 |
| Haiku 4.5 | $0.00005 | $0.00105 |
Grade A, and why
design-ui 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 4d 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.
How it starts
The opening of the file, as written. The whole thing — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-ui
Design a UI surface before it is built. This recipe produces a design spec: the surface's intent, information architecture, interactions, and presentation chosen from tokens. It precedes write-ui, which implements the spec. Design first, then implement; do not decide the design inside the implementation.
The design spec is the deliverable. It can be a short doc, a section in a feature's notes, or an annotated view-spec sketch. It is data and prose, never running code.
Read first:
- the project's design-language reference: principles, the layered model, the token system, the component template, state design, the design-review checklist.
- the project's view-spec reference: the widget vocabulary the design composes.
- the project's token catalog: the tokens the presentation step chooses from.
- write-ui (sibling): the implementation recipe this design precedes.
- check-design: the review dimension the design is held to.
The procedure
Work the four layers in order. Never start with visuals.
- Intent. State the one thing the user is trying to accomplish on this surface, in one sentence. If you cannot state it, the surface is not designed yet.
- Information architecture. List the information that serves the intent. Mark what is primary, what is secondary, what can be hidden behind progressive disclosure, and what belongs together. Place the surface in the nesting the view-spec reference defines (section, view, panel).
- Interaction. For each thing the user does, name the intent, the action, and the binding: the action keyword and the click or key that triggers it. Cover selection, navigation, and editing.
- Presentation. Only now choose the visuals, all from tokens:
- The widgets from the vocabulary; reach for an existing type before proposing a new one.
- The depth layer for each widget.
- The motion for appearance, change, and exit; the camera move where the surface is spatial.
- The spacing, type, and color tokens; never a raw value.
- The density mode or modes the surface supports.
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.
- 4d ago First seen · 110 lines · 53 tokens per session scan A 86f75e29496f
design-ui is a skill published in the GitHub repository leifericf/agentic-sdk (5 stars, last pushed 2d ago), licensed MIT. It adds 53 tokens to every session and 1,052 once invoked, about $0.0003 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.
Other skills, from other repositories
material-ui-tailwind
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
hallmark
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
read
Reads URLs and PDFs by fetching source content, defaulting to concise summaries for plain read requests and clean Markdown when asked to convert, save, quote, cite, or feed downstream work. Use when users ask in any language to read, fetch, check, summarize, quote, cite, convert, or save a URL or PDF. Not for local…
accessibility
Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.
desktop-principles
Desktop-specific UX principles - hover states, pointer precision, keyboard shortcuts, multi-window, focus management. Covers macOS, Windows, Linux, web desktop.
taiyi-ui-design
TaiyiForge 第 4 阶段 — UI/UX 契约，产出 UI-DESIGN.md。四端通用。.