К основному содержанию
скилл CX Codex

remember-design-system — скилл для Claude Code: контекст интерфейса

Собирает краткую справку о дизайн-системе и правилах проекта перед работой над интерфейсом. Помогает опираться на существующие компоненты и токены, а не угадывать их по запросу.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add memi-design/memi --skill remember-design-system -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/remember-design-system/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/remember-design-system/

По шагам, с командами для каждой платформы: Как установить скилл в 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

Похожие скиллы

Всё по теме «Дизайн» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. 979 543установок codebase-design Matt Pocock Скилл помогает проектировать модули с небольшим интерфейсом и скрытой внутри сложностью. Подходит для рефакторинга, тестируемости и поиска чистого seam. 850 344установок

Из того же набора4

Спонсоры проекта

Компании, которые помогают держать аналитику открытой