Навыки ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

Низкий риск ⚙️ Внешние команды📁 Доступ к файловой системе🌐 Доступ к сети🔑 Переменные окружения⚡ Содержит скрипты

Генерируйте токены дизайна, проверяйте их использование и создавайте фирменные презентации

Дизайн-системы часто теряют целостность, когда токены непоследовательно применяются на уровнях примитивов, семантики и компонентов. Этот навык генерирует CSS-переменные из JSON-определений токенов, проверяет использование токенов в коде и создает соответствующие бренду слайд-презентации с интеграцией Chart.js.

Поддерживает: Claude Codex Code(CC)

🥉 72 Бронза

Скачать ZIP навыка

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

Включите и начните использовать

Протестировать

Использование «ckm:design-system». Сгенерируй CSS-токены дизайна из моего файла tokens.json и создай конфиг Tailwind для моего Next.js-проекта.

Ожидаемый результат:

CSS-вывод с трехслойной структурой токенов, организованной в блоки :root с примитивами, семантическими токенами и компонентными токенами
Файл конфигурации Tailwind с соответствиями цветов, ссылающимися на CSS-переменные для использования в tailwind.config.js

Использование «ckm:design-system». Создай 5-слайдовый питч-дек для финтех-стартапа. Включи график доходов.

Ожидаемый результат:

HTML-файл с фирменной слайд-декой, включающей титульный слайд, проблему, решение с карточками, столбчатую диаграмму роста доходов и CTA-слайды
CSS-ссылки на токены дизайна для всех цветов, шрифтов и отступов для обеспечения соответствия бренду

Использование «ckm:design-system». Найди лучший тип графика для отображения quarterly роста доходов по четырем продуктовым линейкам.

Ожидаемый результат:

Рекомендация по графику: группированная столбчатая диаграмма для сравнения нескольких продуктовых линеек по кварталам
Контекстные рекомендации о том, когда использовать, когда избегать, и замечания по реализации в Chart.js

Аудит безопасности

Низкий риск

v1 • 5/26/2026

Static analysis flagged 561 potential issues (risk score 100/100), but AI evaluation confirms nearly all are false positives. Over 400 'Weak cryptographic algorithm' detections are hex color codes in design token CSV data and CSS examples (e.g. #2563EB). Over 150 'Shell backtick execution' detections are shell command examples in Markdown documentation and legitimate build tool invocations. The only true positive is subprocess.run in slide-token-validator.py which delegates to an internal validation script with low risk. The skill is a legitimate design system toolkit with no malicious intent, no credential exfiltration, and no command injection vulnerabilities.

Просканировано файлов

4,805

Проанализировано строк

находки

Всего аудитов

Проблемы низкого риска (9)

data/slide-backgrounds.csv:7 data/slide-charts.csv:22-26 data/slide-copy.csv:2-26 SKILL.md:42-48

Hex color values in design token data flagged as cryptographic algorithms

FALSE POSITIVE: Over 400 'Weak cryptographic algorithm' detections. The static analyzer matched hex color codes (e.g. #2563EB, #F59E0B, #0D0D0D) in CSV design data files and CSS documentation examples. These are design token color values, not cryptographic material. Design system data and CSS documentation legitimately contain hex color codes for brand colors, UI colors, and CSS examples.

references/component-specs.md:40-46 SKILL.md:54-61 references/token-architecture.md:7-18

Shell command examples in Markdown documentation

FALSE POSITIVE: Over 150 'Ruby/shell backtick execution' detections in Markdown reference files. These are code examples showing users how to run commands like 'node scripts/generate-tokens.cjs' or 'python scripts/search-slides.py'. They are documentation, not executable code being injected at runtime. No dynamic command construction from user input.

scripts/fetch-background.py:144-184

Hardcoded image URLs in fetch-background.py

FALSE POSITIVE: Curated Pexels stock photo URLs hardcoded in fetch-background.py. These are pre-selected, free-to-use images for slide backgrounds. URLs point to images.pexels.com, a legitimate stock photography platform. No credential exfiltration or malicious network activity.

scripts/slide-token-validator.py:30

subprocess.run delegation in slide-token-validator.py

TRUE POSITIVE (low risk): Script uses subprocess.run to delegate validation to html-token-validator.py with sys.argv[1:] forwarded as arguments. This is a standard wrapper pattern. Risk is low because it only calls a known internal validator script.

scripts/generate-slide.py:632

Path traversal sequence in generate-slide.py

FALSE POSITIVE: The string '../../../assets/design-tokens.css' on line 632 is a computed relative path from the slide output directory to the shared design tokens CSS file. This is a hardcoded constant, not user-controlled input. No path traversal vulnerability exists.

scripts/embed-tokens.cjs:86 scripts/generate-tokens.cjs:184

Standard filesystem operations in build and validation scripts

FALSE POSITIVE: Node.js fs operations detected in embed-tokens.cjs, generate-tokens.cjs, and validate-tokens.cjs. These are standard file I/O operations for reading design token files, writing CSS output, and scanning codebases for token compliance. All operations are local to the project directory.

SKILL.md:190

Chart.js CDN URL in SKILL.md

FALSE POSITIVE: Hardcoded URL 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/...' in SKILL.md line 190. This is a legitimate CDN URL for the Chart.js library used in slide HTML generation. It is a static reference, not dynamically constructed.

scripts/search-slides.py:10

Dynamic import pattern in search-slides.py

FALSE POSITIVE: 'Dynamic import() expression' detected at line 10. This is actually a standard Python 'from slide_search_core import ...' statement. The static analyzer misidentified the Python import syntax as a dynamic JavaScript import expression.

multiple:1

Heuristic dangerous combination warning

FALSE POSITIVE: The heuristic analyzer flagged a 'dangerous combination' of code execution, network, and credential access across the codebase. Evaluation confirms all operations are legitimate: subprocess calls run internal build tools, network requests go to stock photo CDNs and Chart.js CDN, and 'credential' matches are false positives on CSV config lookups and hardcoded hex colors. No data exfiltration path exists.

Факторы риска

⚙️ Внешние команды (201)

📁 Доступ к файловой системе (17)

scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:197 scripts/generate-tokens.cjs:198 scripts/generate-tokens.cjs:178 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:198 scripts/validate-tokens.cjs:99 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:226 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:231

🌐 Доступ к сети (28)

🔑 Переменные окружения (7)

scripts/fetch-background.py:208 scripts/fetch-background.py:213 scripts/fetch-background.py:213 scripts/fetch-background.py:214 scripts/slide_search_core.py:430 scripts/slide_search_core.py:431 scripts/slide_search_core.py:432

⚡ Содержит скрипты (1)

scripts/search-slides.py:10-14

Проверено: claude

Оценка качества

Архитектура

100

Сопровождаемость

Контент

Сообщество

Безопасность

Соответствие спецификации

Что вы можете построить

Фронтенд-разработчик, создающий дизайн-систему

Фронтенд-разработчику необходимо внедрить последовательную систему токенов дизайна для нового проекта. Этот навык генерирует CSS-переменные из JSON-определения токенов, проверяет, что компоненты используют токены вместо жестко заданных значений, и создает конфигурацию Tailwind для интеграции.

Дизайнер, создающий фирменные презентации

Дизайнеру нужно подготовить питч-дек, соответствующий фирменному стилю. Этот навык генерирует HTML-слайды, использующие токены дизайна для цветов, типографики и отступов. Включает варианты графиков через Chart.js и подобранные фоновые изображения из Pexels.

DevOps-инженер, автоматизирующий пайплайны токенов дизайна

DevOps-инженер настраивает автоматическую генерацию и проверку токенов в CI-пайплайнах. Навык предоставляет CLI-скрипты для генерации CSS, проверки кодовых баз на соблюдение правил использования токенов и встраивания токенов в автономные HTML-файлы.

Попробуйте эти промпты

Генерация токенов из JSON-конфигурации

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

Проверка использования токенов в кодовой базе

Проверь мою директорию src/ на наличие жестко заданных hex-цветов и значений в пикселях. Сообщи обо всех нарушениях и предложи, какие токены дизайна следует использовать вместо них.

Создание питч-дека с графиками

Создай 8-слайдовый инвестиционный питч-дек для SaaS-платформы аналитики. Включи титульный слайд, слайд с проблемой, слайд с решением и сеткой функций, слайд с метриками, слайд с графиком доходов, слайд с отзывами, слайд с таблицей сравнения и закрывающий слайд с CTA. Используй наши фирменные токены дизайна.

Применение техники Duarte sparkline

Создай 9-слайдовую презентацию, используя нарративную структуру Duarte sparkline. Чередуй блоки «Что есть» (фрустрация) и «Что могло бы быть» (надежда). Используй разрывы шаблона на позициях 3 и 6. Найди стратегии слайдов для «инвестиционного питча» и предложи макеты для каждого слайда.

Лучшие практики

Сначала определяйте примитивные токены с сырыми значениями, затем отображайте их через семантические токены и, наконец, в токены конкретных компонентов — это обеспечивает максимальную гибкость и переключение тем.
Всегда проверяйте сгенерированные HTML-слайды валидатором токенов, чтобы выявить жестко заданные цвета или шрифты перед публикацией.
Используйте контекстный поиск с параметрами позиции слайда и эмоций для создания дек с разрывами шаблона и эмоциональным контрастом для лучшего вовлечения аудитории.

Избегать

Не используйте сырые hex-цвета в CSS-файлах компонентов. Всегда ссылайтесь на токены дизайна через var() для единообразия темы.
Не создавайте слайды без импорта файла design-tokens.css. Все визуальные свойства должны использовать переменные токенов.
Не пропускайте семантический слой токенов. Прямое отображение компонентов на примитивы усложняет переключение тем и поддержку.

Часто задаваемые вопросы

Какому формату файла должен соответствовать JSON токенов дизайна?

JSON должен соответствовать трехслойной структуре: примитивы (сырые значения цветов, отступов, типографики), семантика (алиасы по назначению, например --color-primary) и компоненты (токены конкретных компонентов, например --button-bg). Каждый токен имеет поля $value и $type.

Может ли этот навык создавать файлы PowerPoint или Google Slides?

Нет. Этот навык генерирует HTML-слайды со встроенными CSS-токенами дизайна. Результат — самодостаточный HTML-файл, который можно открыть в любом браузере, но нельзя напрямую импортировать в PowerPoint или Google Slides.

Как добавить новое фоновое изображение в мои слайды?

Фоновые изображения выбираются из подобранного набора бесплатных фотографий Pexels, сгруппированных по типу слайда (герой, команда, отзывы и т.д.). Вы можете расширить словарь CURATED_IMAGES в файле scripts/fetch-background.py, добавив дополнительные URL-адреса изображений из Pexels.

Что проверяет валидатор токенов?

Валидатор сканирует CSS, JSX, TSX и другие исходные файлы на наличие жестко заданных hex-цветов, RGB-цветов, значений в пикселях и rem. Он предлагает заменять их ссылками var() на токены дизайна. Файлы определения токенов и стандартные исключения пропускаются.

Как создать тему Tailwind из моих токенов дизайна?

Используйте скрипт generate-tokens.cjs с флагом --format tailwind. Это создает объект конфигурации цветов, который отображает ваши семантические цветовые токены в имена цветов Tailwind с использованием ссылок на CSS-переменные.

Поддерживает ли генерация слайдов анимации?

Да. Система слайдов включает CSS-классы анимации: animate-fade-up, animate-stagger, animate-scale, animate-chart, animate-count и animate-pulse. Контекстный поиск рекомендует классы анимации на основе цели слайда и эмоции.