К основному содержанию
affpapa.org
RU EN
скилл CX Codex

cc-design-html-prototyping — скилл для Claude Code: создание

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

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

Что делает cc-design-html-prototyping

Перед работой скилл просматривает проект: ищет дизайн-токены, компоненты и существующий код. Затем проходит этапы от уточнения задачи до проверки результата и создаёт HTML с React-компонентами. Для каждого запроса он готовит не менее трёх визуальных направлений.

Playwright делает скриншот и проверяет ошибки в консоли. Готовый результат можно экспортировать в PPTX, PDF или один HTML-файл с ресурсами. Для экспорта нужны зависимости скриптов из scripts/package.json и Chromium для Playwright; без них этот этап не запустится. Для React и Babel скилл использует закреплённые версии CDN и не допускает import в JSX.

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

  • создать интерактивный HTML-прототип интерфейса
  • подготовить лендинг и сравнить визуальные направления
  • собрать слайды для презентации в HTML
  • проверить макет скриншотом и найти ошибки в консоли
  • экспортировать прототип в PDF или PPTX

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

  • Сделай лендинг продукта и предложи несколько визуальных направлений.
  • Собери интерактивный прототип этой панели управления.
  • Подготовь слайды для питч-дека и экспортируй их в PPTX.

Как установить cc-design-html-prototyping

1Через Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a claude-code

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

~/.claude/skills/cc-design-html-prototyping/SKILL.md

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

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

ntwarden-windows-analysis-toolkit Скилл для разбора внутренностей Windows: процессы, службы, сеть, ETW, ядро. Пригодится, когда нужно разобрать поведение подозрительного процесса. CX Codex +1 443установок tech-doc-style-chinese Правила для китайской технической документации: пробелы между иероглифами и латиницей, угловые кавычки, запрет на канцелярит и рекламные штампы. Плюс линтер на Python. CX Codex +1 434установок anubis-android-app-manager Скилл для работы с Anubis — менеджером Android-приложений, который замораживает группы приложений в зависимости от состояния VPN через Shizuku. CX Codex +1 427установок huashu-design-html-native Превращает запрос словами в готовый файл: прототип, слайды, анимацию или инфографику на HTML/CSS/JS. Figma не нужна. CX Codex +1 426установок lingbot-map-3d-reconstruction Скилл для потоковой 3D-реконструкции сцены из изображений или видео: облако точек, позы камеры, карты глубины. Пригодится, когда нужно собрать геометрию по длинной последовательности кадров. CX Codex +1 418установок pgque-postgres-queue Скилл, который помогает настроить PgQue — очередь на чистом PL/pgSQL без C-расширений. Пригодится, если нужна доставка событий внутри Postgres. CX Codex +1 400установок aube-package-manager Скилл подсказывает, как работать с пакетным менеджером aube в Node.js-проектах. Пригодится для зависимостей, workspaces, CI и миграции с pnpm. CX Codex +1 392установок create-simulated-aeronautics-mod Скилл помогает разрабатывать моды для Create Simulated: собирать физические аппараты, добавлять блоки с силами и подключать их к API проекта. Пригодится при работе с самолётами и наземным транспортом в Minecraft. CX Codex +1 391установок

Похожие

paper-poster-html wanshuiyin Собирает постер для научных конференций в виде одного HTML-файла и выгружает в печатный PDF через Chromium. Пригодится авторам статей ICLR, NeurIPS, ICML и CVPR. CX Codex +1 311установок web-design-engineer ConardLi Скилл настраивает агента на вёрстку веб-интерфейсов на HTML, CSS, JavaScript и React: дашбордов, прототипов и анимаций. Пригодится, когда нужен качественный визуальный фронтенд. CX Codex +1 8 700установок slide-creator Starchild-ai-agent Скилл верстает презентации формата 16:9 на HTML и CSS, а затем экспортирует их в PDF через headless Chromium. CX Codex +1 4 100установок presentation-generator glebis Собирает презентации в стиле необрутализма с фирменными цветами Agency: интерактивный HTML, PNG-слайды и PDF. CX Codex +1 320установок html-wireframe plannotator Скилл собирает низкодетальные HTML-каркасы экранов, чтобы проверить иерархию информации, навигацию и ход задачи ещё до визуального дизайна. CX Codex +1 1 800установок kimi-pdf thvroyal Скилл делает PDF из HTML через Paged.js, компилирует LaTeX и разбирает готовые файлы: извлечь текст, склеить, разделить, заполнить формы. CX Codex +1 419установок

Рядом в теме «Дизайн»

Всё по теме «Дизайн» →

Вопросы о cc-design-html-prototyping

Как установить cc-design-html-prototyping в Claude Code?

Выполните npx skills add reason-machines/trending-skills --skill cc-design-html-prototyping -a claude-code. Скилл находится в ~/.claude/skills/cc-design-html-prototyping/SKILL.md.

Что делает cc-design-html-prototyping?

Скилл создаёт HTML-макеты, лендинги, слайды и интерактивные прототипы. Он также проверяет результат через Playwright и предлагает варианты экспорта.

Что нужно для экспорта PDF?

Скилл использует Playwright для экспорта HTML в PDF. Для работы этого этапа нужно установить зависимости скриптов и Chromium командой npx playwright install chromium.

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

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

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

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