remember-design-system

remember-design-system is a skill for Claude Code from memi-design/memi. It costs 39 tokens per session (333 once invoked), scanned A, original, MIT.

A repository-specific design briefing for building or changing interface code. It records existing design tokens, components, routes, conventions, and verification commands before work begins.

In plain words
What is it for?
Preflight checks for UI features, redesigns, and refactors, including finding reusable components and checking colors, spacing, typography, states, and responsive behavior.
Why use it?
It helps prevent new interface code from conflicting with the project's existing look, structure, or behavior. It also reduces guesswork about which components and styling rules to reuse.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the memi plugin — 4 skills shipped together

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.

agentmods
npx agentmods add skills/memi-design/memi/remember-design-system
Any agent
npx skills add memi-design/memi --skill remember-design-system
Clone the repo
git clone --depth 1 https://github.com/memi-design/memi

Made for: Claude Code.

Or install memi, the plugin that ships this one along with the rest of its 4 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.

agentmods badge for remember-design-system

README.md
[![agentmods](https://agentmods.dev/badge/skills/memi-design/memi/remember-design-system.svg)](https://agentmods.dev/skills/memi-design/memi/remember-design-system)
Your own site
<a href="https://agentmods.dev/skills/memi-design/memi/remember-design-system"><img src="https://agentmods.dev/badge/skills/memi-design/memi/remember-design-system.svg" alt="Measured on agentmods" height="20"></a>
Per session 39 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 333 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00039 $0.00333
Opus 5 $0.00019 $0.00167
Sonnet 5 $0.00008 $0.00067
Haiku 4.5 $0.00004 $0.00033

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

Security

Grade A, and why

remember-design-system 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 6d 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.

plugins/memi-claude/skills/remember-design-system/SKILL.md · 35 lines

What it actually says

Remember The Design System

Build design context from the repository instead of guessing from the prompt. This is a preflight for UI work, not a request to redesign the product.

Build The Brief

Translate the user's task into a short intent, then run from the repository root:

npx -y @memi-design/[email protected] agent brief . --intent "<user's interface task>" --detail compact --json

If the task changes colors, spacing, typography, radii, or shadows, add token evidence:

npx -y @memi-design/[email protected] tokens --from ./src --report --json

Apply The Memory

  1. Prefer existing components and shadcn primitives over new abstractions.
  2. Map every new component to atom, molecule, organism, template, or page.
  3. Reuse semantic CSS variables and Tailwind theme tokens. Do not introduce raw hex values when a token exists.
  4. Preserve route, state, loading, empty, error, focus, and responsive behavior identified by the brief.
  5. Expand to --detail standard only when compact output omits evidence needed for the edit.

Handoff

Before editing, state the components and tokens you will reuse. After editing, cite files changed, evidence followed, checks run, and any design assumptions that remain.

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.

  1. 6d ago First seen · 35 lines · 39 tokens per session scan A d49206354f11

Subscribe to this mod's changes

remember-design-system is a skill published in the GitHub repository memi-design/memi (40 stars, last pushed 3d ago), licensed MIT. It adds 39 tokens to every session and 333 once invoked, about $0.0002 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.

Related

Other skills, from other repositories

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

omd-apply

프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은 omd:remember.

kwakseongjae/oh-my-design · 129 tokens

figma-design-handoff

Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping, and visual regression with Applitools. Use when converting Figma designs to code, documenting component specs, setting up design-dev…

yonatangross/orchestkit · 76 tokens

stakeholder-brief

Write a one-page stakeholder brief translating design system health or status into business language. Trigger when someone says: stakeholder update, exec brief, leadership summary, status report for leadership, system status for non-designers, write a brief for the business, or anything about communicating design…

murphytrueman/design-system-ops · 73 tokens

token-audit

Audit a design system's token definitions for naming violations, missing semantic tiers, and structural debt. This audits how tokens are defined and organised, NOT how they are consumed in code. Trigger when someone says: audit my tokens, token naming review, are my tokens consistent, token health check, review my…

murphytrueman/design-system-ops · 93 tokens

cicd-integration

Generate CI/CD pipeline configurations that automate design system quality checks — token validation, component linting, visual regression, accessibility scanning, and release gating. Produces ready-to-use pipeline files for GitHub Actions, GitLab CI, CircleCI, or Bitbucket Pipelines, configured to enforce the…

murphytrueman/design-system-ops · 177 tokens