design-dna

Установка

npx skillfoxx add skills/design-dna

npx skills add zanwei/design-dna --skill design-dna -a claude-code -y

npx skills add zanwei/design-dna --skill design-dna -a cursor -y

npx skills add zanwei/design-dna --skill design-dna -a github-copilot -y

npx skills add zanwei/design-dna --skill design-dna -a codex -y

npx skills add zanwei/design-dna --skill design-dna -a gemini-cli -y

npx skills add zanwei/design-dna --skill design-dna -a cline -y

npx skills add zanwei/design-dna --skill design-dna -a roo -y

npx skills add zanwei/design-dna --skill design-dna -a opencode -y

npx skills add zanwei/design-dna

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл раскладывает дизайн на три измерения: систему токенов (цвет, типографика, отступы, форма, тени, анимация), качественный стиль (настроение, композиция, характер) и визуальные эффекты (Canvas, WebGL, 3D, частицы, шейдеры, скролл-анимации). По изображениям, скриншотам или ссылкам он собирает профиль в JSON, а затем по этому профилю и вашему контенту генерирует новый интерфейс в том же характере. Работает в три фазы: показать схему, извлечь профиль из референсов, применить его к контенту.

Для кого. Для дизайнеров и фронтенд-разработчиков, которым нужно перенести стиль референса на свой интерфейс.

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

Разбери этот скриншот на design DNA и собери по нему главную страницу под мой текст

Ограничения

Скилл извлекает и применяет структуру дизайна, качество итогового интерфейса зависит от контента и модели. Часть возможностей требует запуска вспомогательных скриптов из каталога скилла.

Как отключить. Удалите папку design-dna из каталога скиллов агента, например ~/.claude/skills/design-dna.

Проверка безопасности

• Запускает вспомогательные скрипты из каталога скилла
• Читает изображения и ссылки на референсы

Коротко о README

README описывает скилл, который извлекает и применяет дизайн по трем измерениям: система токенов, качественный стиль и визуальные эффекты. Установка через npx skills add с флагами под конкретного агента или из локального клона. Скилл следует спецификации Agent Skills и ставится в поддерживаемые агенты. Вспомогательные скрипты лежат в каталоге скилла и подключаются по требованию. Лицензия MIT.

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.)

Похожие