К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

design-md · nexu-io — скилл для Claude Code: что делает и как установить

Создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Пригодится, когда агенту нужен единый документ по дизайн-системе.

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

Что делает design-md

Скилл создаёт и обновляет DESIGN.md, где собраны направление дизайна, токены и визуальные правила проекта. Такой файл становится единым источником сведений для планирования интерфейса. Агент находит скилл по имени design-md или по фразам design.md, design doc, design tokens doc и visual rules doc.

Запись оформлена для OpenDesign и курирована на основе Google Labs (Stitch). Для полного upstream-сценария нужны оригинальные assets, scripts и references из upstream bundle. Это повод проверить, какой набор файлов установлен в каталоге скиллов агента.

Скилл доступен для Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Лицензия репозитория — Apache-2.0.

Какие задачи решает

  • собрать правила визуального оформления в DESIGN.md
  • зафиксировать токены дизайн-системы в одном документе
  • описать направление дизайна для планирования интерфейса
  • дать агенту единый источник визуальных правил

Примеры запросов агенту

  • Создай `DESIGN.md` и опиши в нём направление дизайна, токены и визуальные правила проекта.
  • Проверь `design.md` и обнови документ по текущей дизайн-системе.
  • Подготовь design tokens doc для этого проекта.

Как установить design-md

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill design-md -a claude-code

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

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

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

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

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок d3-visualization nexu-io Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов. Claude Code CX Codex Cursor +1 3 100установок

Другие версии design-md

Похожие

agentation-self-driving benjitaylor Запускает автономный визуальный аудит интерфейса в открытом окне браузера и расставляет карточки замечаний через тулбар Agentation. Claude Code CX Codex Cursor +1 7 000установок dfam-check earthtojake Скилл проверяет 3D-сетки на пригодность к 3D-печати по правилам DfAM перед нарезкой в слайсере или отправкой на станок. Claude Code CX Codex Cursor +1 4 100установок presentation iii-hq Превращает каталог технической спецификации в интерактивную веб-презентацию. Нужен, когда спецификацию хотят показать как связный публичный дек. Claude Code CX Codex Cursor +1 3 400установок popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 готовых дизайн-систем реальных сайтов (Stripe, Linear, Vercel, Claude) с CSS-токенами, типографикой и компонентами для быстрой вёрстки в стиле известных брендов. Claude Code CX Codex Cursor +1 914установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок

Вопросы о design-md

Как установить `design-md` в Claude Code?

Выполните npx skills add nexu-io/open-design --skill design-md -a claude-code, затем повторите npx skills add nexu-io/open-design --skill design-md -a claude-code. Файл скилла находится по пути ~/.claude/skills/design-md/SKILL.md.

Что делает `design-md`?

Скилл создаёт и ведёт DESIGN.md с направлением дизайна, токенами и визуальными правилами. Агент может обнаружить его по имени или по фразам, связанным с design doc.

Что нужно для полного сценария `design-md`?

Для полного upstream-сценария нужны оригинальные assets, scripts и references из upstream bundle. Запись курирована на основе Google Labs (Stitch).

Исходный текст

SKILL.md · Apache-2.0
---
name: design-md
description: |
  Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.
triggers:
  - "design.md"
  - "design doc"
  - "design tokens doc"
  - "visual rules doc"
od:
  mode: design-system
  category: design-systems
  upstream: "https://github.com/google-labs-code/skills"
---

# design-md

> Curated from Google Labs (Stitch).

## What it does

Create and manage DESIGN.md files. Useful for capturing design direction, tokens, and visual rules in a single source of truth.

## Source

- Upstream: https://github.com/google-labs-code/skills
- Category: `design-systems`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/google-labs-code/skills
```

Then ask the agent to invoke this skill by name (`design-md`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

Смотрите также

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

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