design-dna — скилл
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
- 2 120 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает вспомогательные скрипты из каталога скилла
- Читает изображения и ссылки на референсы
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/design-dnaОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает вспомогательные скрипты из каталога скилла
- Читает изображения и ссылки на референсы
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл раскладывает дизайн на три измерения: систему токенов (цвет, типографика, отступы, форма, тени, анимация), качественный стиль (настроение, композиция, характер) и визуальные эффекты (Canvas, WebGL, 3D, частицы, шейдеры, скролл-анимации). По изображениям, скриншотам или ссылкам он собирает профиль в JSON, а затем по этому профилю и вашему контенту генерирует новый интерфейс в том же характере. Работает в три фазы: показать схему, извлечь профиль из референсов, применить его к контенту.
Для кого. Для дизайнеров и фронтенд-разработчиков, которым нужно перенести стиль референса на свой интерфейс.
Подходит, если
- Нужно разобрать референс интерфейса на токены и стиль
- Нужен структурированный профиль дизайна в JSON
- Нужно сгенерировать интерфейс в характере референса под свой контент
Не подходит, если
- Нужен готовый дизайн-макет от человека, а не структурный разбор
- Нет возможности запускать npx и вспомогательные скрипты
Пример запроса к агенту
Разбери этот скриншот на design DNA и собери по нему главную страницу под мой текстОграничения
Скилл извлекает и применяет структуру дизайна, качество итогового интерфейса зависит от контента и модели. Часть возможностей требует запуска вспомогательных скриптов из каталога скилла.
Как отключить. Удалите папку design-dna из каталога скиллов агента, например ~/.claude/skills/design-dna.
Частые вопросы
В каком формате результат?
Профиль дизайна собирается в структурированный JSON по трем измерениям.
Какие агенты поддерживаются?
Установка через skills CLI работает для Cursor, Claude Code, Codex, GitHub Copilot и других.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Мета-скилл разбирает бренд по ссылке, названию или скриншоту и создает из него полноценную дизайн-систему как новый скилл
Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Скилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
design-to-code — сайт из изображения дизайна
design-to-code
Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном
Коротко о README
README описывает скилл, который извлекает и применяет дизайн по трем измерениям: система токенов, качественный стиль и визуальные эффекты. Установка через npx skills add с флагами под конкретного агента или из локального клона. Скилл следует спецификации Agent Skills и ставится в поддерживаемые агенты. Вспомогательные скрипты лежат в каталоге скилла и подключаются по требованию. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: design-dna description: >- Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, or has a Design DNA JSON and content and wants a design generated from it. --- # Design DNA A 3-phase workflow for extracting, structuring, and applying design identity across three dimensions: 1. Design System - measurable tokens (color, typography, spacing, layout, shape, elevation, motion, components) 2. Design Style - qualitative perception (mood, visual language, composition, imagery, interaction feel, brand voice) 3. Visual Effects - special rendering (Canvas, WebGL, 3D, particles, shaders, scroll effects, cursor effects, SVG animations, glassmorphism, etc.)