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 skills add memi-design/design-skills --skill memoire-design-toolinggit clone --depth 1 https://github.com/memi-design/design-skillsWrote 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/memi-design/design-skills/memoire-design-tooling)<a href="https://agentmods.dev/skills/memi-design/design-skills/memoire-design-tooling"><img src="https://agentmods.dev/badge/skills/memi-design/design-skills/memoire-design-tooling/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.
<a href="https://agentmods.dev/skills/memi-design/design-skills/memoire-design-tooling"><img src="https://agentmods.dev/badge/skills/memi-design/design-skills/memoire-design-tooling.svg" alt="Reviewed on agentmods" width="80" 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.1 | $0.00057 | $0.01317 |
| Opus 5.5 | $0.00023 | $0.00527 |
| Sonnet 5.5 | $0.00011 | $0.00263 |
| Haiku 4.5 | $0.00006 | $0.00132 |
Grade A, and why
memoire-design-tooling 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 29d 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 — 113 lines — stays where its author put it; the contents beside it link to each section on GitHub.
memi Design Tooling
Use memi as the local interface-understanding layer before broad frontend changes. The goal is to give the agent evidence about the product UI before it edits code.
Fast Path
npm i -g @memi-design/cli
memi suite init --project .
memi daemon start --project . --port auto
memi daemon status --json
memi agent install --dry-run --json
memi agent brief . --intent "Improve this interface" --json
memi status
memi diagnose .
memi ux audit . --json
memi craft audit . --json
memi tokens --from ./src --report
memi shadcn export --out public/r
memi mcp start --no-figma
Interface Understanding Protocol
- Read the local instructions first:
AGENTS.md, README files,.memoire/, specs, tokens, andmemoire.agent.yaml. - Generate a design-agent preflight with
memi agent brief . --intent "<task>" --json; use it as the local evidence and cost-control contract. For a supplied Figma or Paper design, pair the brief withdesign-to-code-handoffso the source, component/token mapping, Storybook state, browser check, and unresolved differences survive into the implementation receipt. - Collect evidence with
memi diagnose .,memi ux audit . --json,memi craft audit . --json, andmemi tokens --from ./src --reportbefore making broad UI edits. - If a runtime route matters, run
memi diagnose http://localhost:<port>ormemi design-doc <url> --spec. - If Figma is connected, use memi/Figma context for token pulls, component inspection, screenshot capture, and sync. Figma is optional; do not block code-first audits on it.
- Map components to Atomic Design levels: atom, molecule, organism, template, page.
- Prefer shadcn/ui primitives and Tailwind. Avoid introducing CSS modules or styled-components for memi-generated UI.
- Use UX Tenets and Traps as the review layer: clarity, feedback, control, consistency, accessibility, error recovery, progressive disclosure, workflow fit, trust, and state continuity.
- Use Interface Craft as the polish layer: focusing mechanism, visual hierarchy, spacing rhythm, color intentionality, visual weight, component cohesion, responsive resilience, and user context.
- For research-backed product work, run the research flow before implementation:
What ships with it
1 file 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.
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.
- 29d ago Changed · +1 lines d098acaf0b37
- 1mo ago First seen · 112 lines · 57 tokens per session scan A d5ae3f129474
memoire-design-tooling is a skill published in the GitHub repository memi-design/design-skills (7 stars, last pushed 1mo ago), licensed MIT. It adds 57 tokens to every session and 1,317 once invoked, about $0.0002 per session on Opus 5.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-09-03.
Other skills, from other repositories
design-to-code-check
Compares a component or screen's design spec with its code and logs each gap as a build error or spec gap. Use it for design QA, handover review or sign-off: whenever someone asks if a build matches its design or spec, even one component with the spec pasted in. System-wide drift: drift-detection.
design-engineering
Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…
building-components
The workflow for building, rebuilding, or restyling any design-system component (Button, Dialog, Select, Table, Tabs, Tooltip, and so on). Trigger whenever the user says "let's do the dialog", "restyle X", "bring in / pull in a component", "build the select", "rebuild this atom", or starts work on an item from the…
gsp-color
Design color systems — palettes, contrast, semantic mapping, dark mode — use when: pick colors, build a palette, semantic tokens, dark mode pairings, brand color, accent color.
gsp-typography
Design type systems — scale, pairing, fluid type, vertical rhythm — use when: pick fonts, font pairing, type scale, vertical rhythm, fluid typography, body and heading sizes.
analyze-component-set-figma
Analyze a Figma COMPONENTSET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating…