83.3K+Скачать
Перейти к руководству
web-artifacts-builderавтор Anthropic

Web Artifacts Builder Skill.

Скилл Claude Code и Codex для UI-дизайна: многокомпонентные интерактивные HTML-продукты с React, Tailwind и shadcn/ui.

  • Web и UI
  • HTML
Скачать OpenDesignИнструкция по использованию
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. --- ## Design & Style Guidelines ## Quick Start
Преамбула и заголовки разделов считаны из исходного файла 14 сентября 2026 г. · 3 073 символа полностью

01 Что делает

Что делает skill web-artifacts-builder в Claude Code и Codex

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

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

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

Skill для создания сложных многокомпонентных React-артефактов для claude.ai на современном стеке из React 18, TypeScript, Vite, Parcel, Tailwind CSS и shadcn/ui. Skill предоставляет скрипты инициализации для настройки полностью сконфигурированного проекта с 40+ предустановленными компонентами shadcn/ui и скрипты сборки для компиляции всего в единый самодостаточный HTML-файл.

Он предназначен для артефактов, требующих управления состоянием, маршрутизации или компонентов shadcn/ui, а не для простых однофайловых HTML- или JSX-артефактов. Workflow состоит из пяти шагов: инициализация frontend-репозитория, разработка артефакта путём редактирования сгенерированного кода, сборка в единый HTML-файл, показ пользователю и, опционально, тестирование.

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

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

  1. 01
    Инициализация сконфигурированного React-проекта

    Запустите скрипт init-artifact.sh с именем проекта, чтобы создать полностью сконфигурированный проект с React, TypeScript, Tailwind CSS, алиасами путей, 40+ компонентами shadcn/ui и конфигурацией сборки Parcel.

  2. 02
    Разработка путём редактирования сгенерированных файлов

    Создайте артефакт, редактируя файлы, сгенерированные при инициализации, следуя рекомендациям по типовым задачам разработки, приведённым в skill.

  3. 03
    Сборка в самодостаточный HTML

    Запустите bundle-artifact.sh, чтобы скомпилировать React-приложение в bundle.html — единый файл со всем встроенным JavaScript, CSS и зависимостями, используя Parcel и html-inline.

  4. 04
    Показ артефакта пользователю

    Поделитесь собранным HTML-файлом в переписке, чтобы пользователь мог просмотреть его как артефакт claude.ai.

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

Когда использовать скилл web-artifacts-builder

Используйте skill web-artifacts-builder в Claude Code или Codex, когда задача — UI-дизайн такого типа. Применимость и ограничения ниже взяты из файла самого skill.

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

  • Многокомпонентные интерфейсы с использованием библиотеки компонентов shadcn/ui

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

  • Используйте для сложных артефактов, требующих управления состоянием, маршрутизации или компонентов shadcn/ui — не для простых однофайловых HTML/JSX-артефактов.

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

  • Имя проекта для инициализацииИмя для каталога нового React-проекта при запуске скрипта init-artifact.sh.

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

Правила, которые skill web-artifacts-builder задаёт Claude Code и Codex

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

  1. Используйте только для сложных артефактов

    Этот skill предназначен именно для сложных артефактов, требующих управления состоянием, маршрутизации или компонентов shadcn/ui. Не используйте его для простых однофайловых артефактов HTML или JSX.

  2. Избегайте шаблонных паттернов дизайна ИИ

    Не используйте чрезмерно центрированные макеты, фиолетовые градиенты, одинаковые скругления углов или шрифт Inter, чтобы избежать так называемого «AI slop».

  3. В проекте обязательно должен быть корневой index.html

    Скрипт сборки требует, чтобы в вашем проекте был файл index.html, расположенный в корневом каталоге.

  4. Тестируйте только при необходимости

    Тестирование полностью необязательно и должно выполняться только при необходимости или по запросу.

  5. Следуйте пятиэтапному workflow

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

04 Применение

Установить web-artifacts-builder в Claude Code или Codex

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

Добавить web-artifacts-builder в Claude Code, Codex или ваш агент

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

Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

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

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

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

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

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

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

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

  • Используйте доступные инструменты, такие как Playwright или Puppeteer, для тестирования или визуализации артефакта, если это запрошено или возникли проблемы
  • Проверьте, что дизайн избегает чрезмерно центрированных макетов, фиолетовых градиентов, одинаковых скруглений углов и шрифта Inter

В OpenDesign web-artifacts-builder встроен: Plugins → Skills, выберите его в верхней панели.

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

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

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

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

Author
Anthropic
Repository
github.com/anthropics/skills Ветка main
Файл skill
skills/web-artifacts-builder/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 34040c9
License
Apache-2.0 Из skills/web-artifacts-builder/LICENSE.txt; SKILL.md указывает «Полные условия в LICENSE.txt».
Звёзды репозитория
176 183 Снимок GitHub сделан 2026-09-14 для всего репозитория anthropics/skills, который содержит 7 навыков в этом каталоге. Это не рейтинг и не счётчик использования для web-artifacts-builder.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Рекомендации по дизайну и стилюИнструкции, как избежать шаблонных паттернов ИИ: чрезмерного центрирования, фиолетовых градиентов, одинаковых скруглений углов и шрифта Inter
  2. Быстрый стартПятиэтапный workflow: от инициализации до разработки, упаковки, обмена и опционального тестирования
  3. Шаг 1: Инициализация проектаЗапустите init-artifact.sh для создания настроенного проекта React с TypeScript, Tailwind, компонентами shadcn/ui и Parcel
  4. Шаг 2: Разработка вашего артефактаРедактируйте сгенерированные файлы для создания артефакта, следуя рекомендациям по типичным задачам разработки
  5. Шаг 3: Упаковка в единый HTML-файлЗапустите bundle-artifact.sh для создания самодостаточного bundle.html с встроенными JavaScript, CSS и зависимостями
  6. Шаг 4: Поделитесь артефактом с пользователемПоделитесь упакованным HTML-файлом в диалоге для просмотра в качестве артефакта
  7. Шаг 5: Тестирование/визуализация артефакта (опционально)Опциональное тестирование с помощью инструментов, таких как Playwright или Puppeteer, при этом избегайте предварительного тестирования, чтобы снизить задержку
  8. СправкаСсылка на документацию по компонентам shadcn/ui
Собственное описание skill
«Набор инструментов для создания сложных многокомпонентных HTML-артефактов claude.ai с использованием современных фронтенд-технологий (React, Tailwind CSS, shadcn/ui). Используйте для сложных артефактов, требующих управления состоянием, маршрутизации или компонентов shadcn/ui — не для простых однофайловых HTML/JSX-артефактов».

Описание из front-matter файла SKILL.md. Полный файл содержит около 3 073 символов. Прочитать полный файл на GitHub.

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

Вопросы о skill web-artifacts-builder

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

Какие компоненты и библиотеки уже установлены?

Скрипт инициализации создаёт проект на React 18, TypeScript через Vite, Tailwind CSS 3.4.1 с оформлением shadcn/ui, 40+ предустановленными компонентами shadcn/ui, всеми зависимостями Radix UI и настроенным Parcel для сборки. Настроены алиасы путей, так что вы можете импортировать с префиксом at-slash.

Web Artifacts Builder

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

Навык web-artifacts-builder встроен в OpenDesign. Загрузите приложение, выберите навык в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder