remember-design-system — скилл для Claude Code: контекст интерфейса
Собирает краткую справку о дизайн-системе и правилах проекта перед работой над интерфейсом. Помогает опираться на существующие компоненты и токены, а не угадывать их по запросу.
npx skills add memi-design/memi --skill remember-design-system -a claude-codeЧто делает remember-design-system
Скилл запускает memi agent brief из корня репозитория и формирует справку о токенах, компонентах, маршрутах, соглашениях и командах проверки. Для выбранного узла Figma или Paper можно передать файл с данными дизайна через --design-evidence.
Перед правками агенту предлагается определить, какие компоненты и токены он переиспользует, сохранить поведение состояний и адаптивность из справки, а после работы назвать изменённые файлы и выполненные проверки. Если краткой справки не хватает, нужно открыть указанные исходные файлы. Рецепты требуют, чтобы локальная memi сообщала версию 2.8.0-beta.2; одной доступности npm недостаточно для подтверждения работы нативного бинарного файла.
Какие задачи решает
- собрать краткий контекст дизайн-системы репозитория
- найти существующие компоненты и токены для интерфейсной задачи
- сохранить маршруты и состояния при правках UI
- проверить интерфейс по реальным тестам проекта
Примеры запросов агенту
- Перед изменением страницы изучи дизайн-систему проекта и перечисли компоненты и токены для повторного использования.
- Подготовь интерфейсную справку для задачи: добавить состояние загрузки на странице профиля.
- Используй
design/selected-node.json, чтобы учесть выбранный узел Figma при работе над интерфейсом.
Как установить remember-design-system
1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill remember-design-system -a claude-code2Вручную: положить файлы
~/.claude/skills/remember-design-system/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/remember-design-system/
1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill remember-design-system -a codex2Вручную: положить файлы
.agents/skills/remember-design-system/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill remember-design-system -a cursor2Вручную: положить файлы
.cursor/skills/remember-design-system/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install memi-design/memi remember-design-system2Вручную: положить файлы
.github/skills/remember-design-system/SKILL.md1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill remember-design-system -a gemini-cli2Командой платформы
gemini skills install https://github.com/memi-design/memi --path skills/remember-design-systemВручную: положить файлы
.devin/skills/remember-design-system/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill remember-design-system -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о remember-design-system
Как установить remember-design-system в Claude Code?
Выполните npx skills add memi-design/memi --skill remember-design-system -a claude-code. Файл скилла появится по пути ~/.claude/skills/remember-design-system/SKILL.md.
Что делает remember-design-system?
Собирает из репозитория краткую справку о дизайн-токенах, компонентах, маршрутах, соглашениях и проверках. Агент использует её перед изменениями интерфейса.
Нужна ли определённая версия memi?
Да. Рецепты рассчитаны на 2.8.0-beta.2, и локальная memi должна сообщать ту же версию. Доступность пакета в npm сама по себе не подтверждает работу нативного бинарного файла.
Исходный текст
SKILL.md · MIT
--- name: remember-design-system description: Use when an agent is about to build or refactor interface code and needs a compact, repository-specific brief covering existing tokens, components, routes, conventions, and verification commands. --- # 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. This workflow targets published beta **2.8.0-beta.2**. Use `npx -y @memi-design/[email protected] --version` to verify the exact package; a local `memi` must report that same version before these recipes run. The independent stable compatibility baseline is **2.7.9**. See [current release state](https://github.com/memi-design/memi/blob/main/docs/CURRENT_RELEASE.md) and [known limitations](https://github.com/memi-design/memi/blob/main/docs/trust/KNOWN_LIMITATIONS.md). npm availability alone does not establish native-binary success. ## Build The Brief Translate the user's task into a short intent, then run from the repository root: ```bash memi agent brief . --frontend --intent "<user's interface task>" --max-bytes 16384 --json ``` The frontend brief already includes bounded token and story evidence. For a selected Figma or Paper node, use the harness connector and supply its normalized evidence: ```bash memi agent brief . --frontend --intent "<task>" --design-evidence design/selected-node.json --json ``` ## Apply The Memory 1. Prefer existing components and the project's conventions. Do not impose a new component library or CSS framework. 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. Resolve stale/conflicting mappings and missing required props before editing. Read cited source files when the bounded brief omits needed details. 6. Treat inferred story IDs and host-supplied mappings as evidence, not rendered verification. Run the actual project tests. ## 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.
© memi-design · MIT · memi-design/memi