design-htmlавтор Garry Tan

Design HTML Skill.

Скилл для Claude Code и Codex для UI-дизайна: создаёт готовый для продакшена HTML/CSS из согласованного дизайн-решения.

Web и UI
HTML

Скачать OpenDesign Инструкция по использованию

garrytan/gstack · design-html/SKILL.mdSKILL.md

--- name: design-html description: Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

Преамбула и заголовки разделов, прочитанные из исходного файла 2026-09-14 · 54 976 символов полностью

01 Что делает

Что делает skill design-html в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Генерирует HTML/CSS производственного качества с нативной для Pretext вёрсткой текста, где текст действительно перетекает, высоты вычисляются динамически, а layout адаптируется при изменении размера. Работает на основе одобренных макетов (/design-shotgun), планов CEO (/plan-ceo-review), контекста дизайн-ревью или описаний пользователя. Направляет запрос к нужному уровню Pretext API в зависимости от сложности дизайна (простые layout используют prepare + layout; чат-интерфейсы используют prepareWithSegments + walkLineRanges; редакционные разворты используют layoutNextLine для обтекания текста вокруг препятствий).

30 КБ накладных расходов, без зависимостей. Создаёт самодостаточные HTML-файлы (со встроенным vendored Pretext) или компоненты фреймворков (React/Svelte/Vue). По умолчанию используется чистый HTML с сервером live reload для мгновенного предпросмотра в браузере. Никогда lorem ipsum — извлекает реальный контент из макетов или генерирует реалистичный текст на основе планов.

Что он выдаёт

Самодостаточный HTML-файл со встроенным vendored Pretext, CSS custom properties из токенов, семантическим HTML5, contenteditable + MutationObserver для живого редактирования, ResizeObserver для повторного layout при изменении размера, сохраняется в ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html
Файл компонента фреймворка (React TSX/JSX, Svelte, Vue) с импортами Pretext, добавленными в зависимости проекта, сохраняется в ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]
Метаданные finalized.json рядом с HTML, содержащие путь source_mockup, путь source_plan, режим (approved-mockup/plan-driven/freeform/evolve), pretext_tier, выбор фреймворка, количество итераций, дату, имя экрана, ветку
Файл DESIGN.md в открытом формате DESIGN.md, если пользователь принимает предложение об извлечении, содержащий CSS custom properties, семейства шрифтов, цветовую палитру, шкалу отступов, радиусы скругления, значения теней, извлечённые из сгенерированного HTML

Смотрите пример запроса ↗

Как это работает

01
Определение дизайн-контекста и маршрутизация
Проверяет наличие approved.json из /design-shotgun, планов CEO, вариантов дизайна или токенов DESIGN.md.
02
Извлечение спецификации реализации
Если доступен бинарный файл дизайна, запускает команду prompt на утверждённом PNG для извлечения цветов, типографики, структуры макета с помощью GPT-4o vision.
03
Умная маршрутизация Pretext API
Классифицирует дизайн по уровням: простые макеты используют prepare + layout для высот с учётом изменения размера; сетки карточек используют то же для самоподгонки размера; чат-интерфейсы используют prepareWithSegments + walkLineRanges для плотно подогнанных пузырьков; редакционные разворотные макеты используют layoutNextLine для обтекания текстом препятствий.
04
Генерация HTML на базе Pretext
Записывает единый файл со встроенным Pretext (или CDN как запасной вариант), CSS custom properties из токенов, семантическим HTML5, contenteditable + MutationObserver для живого редактирования, ResizeObserver для перекомпоновки при изменении размера, реальным контентом, извлечённым из макета или плана.
05
Проверка на «слоп» перед предпросмотром
Если доступен детектор дизайна, один раз сканирует финализированную страницу на паттерны AI-слопа (фиолетовые градиенты, одинаковые сетки карточек, типовые CTA не из макета).

02 Определите своё применение

Когда использовать навык design-html

Используйте skill design-html в Claude Code или Codex, когда работа относится к UI-дизайну этого типа. Область применения и ограничения взяты из файла самого skill.

Хорошо подходит

Создание дашборда, страницы со списком или сетки карточек, где карточки должны сами подстраивать размер под содержимое без жёстко заданных высот
Реализация чат- или мессенджер-интерфейса, где пузырьки должны плотно обтягивать текст и корректно вычислять минимальную ширину
Финализация дизайна после того, как /design-shotgun утвердил макет, /plan-ceo-review определил продуктовую стратегию, или существует контекст /plan-design-review
Создание редакционного разворота, макета блога или насыщенной контентом страницы, где текст должен динамически обтекать препятствия или изображения

Знайте границы

Проекты, требующие плейсхолдерного контента или lorem ipsum — skill всегда генерирует реальный контент, извлечённый из макетов, планов или описаний пользователя
Автоматические запуски без проверки человеком — предложение установить детектор дизайна и цикл уточнения требуют решений пользователя через AskUserQuestion

Что предоставить

Утверждённый PNG-макет дизайнаПуть к утверждённому варианту из /design-shotgun, сохранённый в approved.json, или путь к PNG, предоставленный пользователем.
План CEO или заметки по обзору дизайнаMarkdown-файл из /plan-ceo-review или /plan-design-review, содержащий продуктовое видение, требования к UI, пользовательские сценарии, целевую аудиторию, визуальное настроение, структуру контента.
Токены DESIGN.mdФайл дизайн-системы репозитория с фирменными цветами, семейством шрифтов, шкалой отступов, радиусами скругления, значениями теней.
Описание пользователя для свободного режимаЕсли нет ни макета, ни плана, пользователь предоставляет назначение/аудиторию, визуальное настроение (тёмное/светлое, игривое/серьёзное, плотное/просторное), структуру контента, референсные сайты.
Предыдущий finalized.html для режима эволюцииСуществующий финализированный HTML из предыдущей сессии.

03 Внутри скилла

Правила, которые skill design-html даёт Claude Code и Codex

6 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

Всегда используйте Pretext для вёрстки текста
Даже если дизайн выглядит простым, Pretext обеспечивает корректное вычисление высоты при изменении размера. Накладные расходы — 30 KB. Это выгодно для любой страницы.
Только реальный контент, никогда не placeholder-текст
Если есть макет, извлекайте текст из него. В режиме на основе плана используйте контент из плана. В свободном режиме генерируйте реалистичный контент на основе описания пользователя.
Точность источника истины важнее элегантности кода
Если есть согласованный макет, воспроизводите его пиксель в пиксель. Если для этого требуется width: 312px вместо класса CSS grid — это правильно.
Хирургические правки в цикле доработки, никогда не перегенерируйте
Используйте инструмент Edit для точечных изменений, а не Write для перегенерации всего файла. Пользователь может внести правки вручную через contenteditable, и их нужно сохранить.
Одна страница на один вызов
Для многостраничных дизайнов запускайте /design-html один раз на каждую страницу. Каждый запуск создаёт один HTML-файл.
Чёрный список AI-slop применяется по умолчанию
Никогда не используйте фиолетово-голубые градиенты, палитру «крем и серифы», градиентный текст, типовые сетки функций на 3 колонки, идентичные сетки карточек, макеты с центрированием всего, кикеры над заголовками, ряды героических метрик, декоративные «блобы», светящиеся границы, стоковые фото-заглушки, типовые CTA, карточки со скруглёнными углами и тенями, эмодзи-декор, типовые отзывы или клишированные split-героические блоки — если только они не присутствуют в согласованном макете, не одобрены в DESIGN.md, или пользователь явно не запросил это с указанным один раз компромиссом.

04 Применение

Установить design-html в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить design-html в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/garrytan/gstack --skill design-html

Общая форма CLI skills для design-html/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Finalize the design for our [product name] landing page. I have an approved mockup from /design-shotgun at [path to approved.json]. The page needs a hero section with dynamic text that reflows on resize, a 3-card feature grid where cards self-size based on content, and a pricing table. Use our brand colors from DESIGN.md and make sure all text is editable in the browser so I can tweak copy live. Output as vanilla HTML first so I can preview immediately, then I'll ask for a React component version once the design is locked.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Сервер live reload запущен по адресу http://localhost:PORT/finalized.html, чтобы пользователь мог изменять размер окна для проверки динамического перетекания текста и кликать по любому тексту для проверки мгновенного пересчёта макета contenteditable
Согласованный PNG-макет показывается инлайн для визуального сравнения во время цикла доработки, если он существует; в противном случае обратная связь пользователя во время цикла является источником истины для режимов на основе плана или свободного режима
Подтверждение загрузки шрифтов через document.fonts.ready перед первым вызовом prepare(), чтобы гарантировать корректность метрик текста для вычисления макета Pretext
Пользователь подтверждает «done» / «ship it» / «looks good» / «perfect» в цикле доработки после проверки поведения при изменении размера и live-редактирования текста, максимум 10 итераций до предложения продолжить или завершить

В OpenDesign импортируйте design-html по ссылке из его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Garry Tan
Repository: github.com/garrytan/gstack Ветка main
Файл skill: design-html/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 71f6048
License: MIT Из LICENSE.
Звёзды репозитория: 132 921 Снимок GitHub сделан 2026-09-14 для всего репозитория garrytan/gstack, который содержит 7 skills в этом каталоге. Не является рейтингом или счётчиком использования для design-html.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда вызывать этот skillРаботает с согласованными макетами, планами CEO, контекстом дизайн-ревью или описаниями пользователя для production HTML/CSS
Преамбула (запускается первой)Запускает gstack-skill-start, читает строки STATUS, обрабатывает деградированный режим, следует блокам GSTACK_INSTRUCTION для онбординга/согласия
Безопасные операции в режиме планаРазрешённые операции в режиме плана: codex exec/review, запись в ~/.gstack/, файл плана, open для артефактов
Вызов skill во время режима планаИнструкции skill исполняемы, а не справочны; AskUserQuestion удовлетворяет требование конца хода; ExitPlanMode только после завершения workflow
Формат AskUserQuestionВетвление разрешения инструмента зависит от SESSION_KIND; spawned автоматически выбирает рекомендованное; Conductor использует прозу; обработка резервного варианта при сбое
Синхронизация артефактов (запуск skill)Действует на основе вывода skill-start: подсказка GBrain, состояние ARTIFACTS_SYNC, разовый шлюз согласия на конфиденциальность через GSTACK_INSTRUCTION
Модельно-специфичный поведенческий патч (claude)Дисциплина списка задач, обдумывание перед тяжёлыми действиями, выделенные инструменты вместо Bash — предпочтения подчинены инструкциям skill
ГолосГолос GStack: начинать с главного, конкретные детали, привязка решений к результатам пользователя, прямота о качестве, ограниченные завершения
Восстановление контекстаВосстанавливает последние артефакты, ревью, таймлайн, решения, последнюю контрольную точку; предлагает следующий skill, если RECENT_PATTERN указывает на него
Стиль изложенияПоясняет отобранный жаргон при первом употреблении, формулирует вопросы через результаты, короткие предложения в активном залоге, пропускается, если EXPLAIN_LEVEL: terse
Принцип полноты — «вскипятить океан»AI делает полноту дешёвой; рекомендуйте полное покрытие; Completeness: X/10, когда варианты различаются по покрытию
Протокол неопределённостиПри неоднозначности с высокой ставкой — СТОП, назовите её, предложите 2-3 варианта с компромиссами, спросите — не для рутинного кодирования

Собственное описание skill

Финализация дизайна: генерирует готовый для продакшена HTML/CSS в нативном Pretext. (gstack)

Описание из SKILL.md. Полный файл содержит около 54 976 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill design-html

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Это работает с моим проектом на React/Svelte/Vue или только с обычным HTML?

И то, и другое. Шаг 2.5 определяет ваш фреймворк в package.json и спрашивает, нужен ли вам обычный HTML (самодостаточный файл предпросмотра, рекомендуется для первого прохода) или компонент, нативный для фреймворка, с хуками Pretext. По умолчанию используется обычный HTML, если фреймворк не обнаружен. Для вывода на фреймворке вы выбираете TypeScript или JavaScript.

Design HTML

Запустите design-html на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте design-html по ссылке на SKILL.md, вставьте запрос выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/garrytan/gstack --skill design-html