HTML Workbench — скилл
Локальный визуальный редактор готовой HTML-страницы: правка мышью, предпросмотр скриптов, сохранение в тот же файл.
- 51 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Локальный сервис на 127.0.0.1 читает и перезаписывает выбранные HTML-файлы.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/html-workbenchОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Локальный сервис на 127.0.0.1 читает и перезаписывает выбранные HTML-файлы.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
HTML Workbench превращает один самодостаточный `.html` файл в локальное рабочее место. Агент создает страницу, проверяет ее валидатором совместимости и запускает команду `open`: сервис на `127.0.0.1` отдает адрес редактора, где человек меняет текст, картинки, стили и расположение блоков. Режим Preview пересобирает страницу из несохраненных правок, и кнопки, ссылки и скрипты работают как в обычном браузере. Кнопка Save записывает результат в исходный файл и останавливается, если файл на диске успел измениться. Так человек и агент правят один источник без перезаписи чужих изменений. Для DeepSeek Harness есть плагин, который встраивает редактор в боковую панель.
Для кого. Тем, кто собирает одностраничные сайты и презентации с помощью ИИ и хочет доводить их мышью, а не серией запросов.
Подходит, если
- Агент собрал лендинг, а заголовок и картинки нужно подвинуть вручную.
- Надо проверить работу кнопок и ссылок до сохранения правок.
- Страницу правят человек и агент одновременно, и важно не потерять изменения.
- Нужен быстрый редактор для одного HTML-файла без каркаса фронтенд-проекта.
Не подходит, если
- Страница тянет ресурсы с CDN или состоит из нескольких файлов проекта.
- Нужен редактор React-приложения.
- Python 3.9 недоступен на машине.
Пример запроса к агенту
Проверь страницу landing.html валидатором HTML Workbench и открой ее в редакторе, чтобы я мог поправить заголовок и картинки.Ограничения
Нужен Python 3.9 или новее. Страница должна быть одним файлом, где HTML, CSS, JavaScript и картинки лежат вместе без CDN и дополнительных папок, иначе валидатор вернет ошибки. Интерактивность лучше помечать устойчивыми семантическими маркерами, а не `nth-child` и порядком узлов. Лицензия в репозитории не указана, учитывайте это при использовании. Плагин DeepSeek Harness требует свежий релиз harness и подходящую версию Node.js.
Как отключить. Остановите службу и удалите папку скилла из каталога скиллов агента. Плагин DeepSeek Harness убирается командой управления плагинами этого harness.
Частые вопросы
Нужно ли ставить Node.js?
Для обычной работы нет. README требует только Python 3.9 или новее. Node.js нужен для сборки плагина DeepSeek Harness.
Какая команда открывает редактор?
`python3 skill/html-workbench/scripts/workbench.py open /absolute/path/page.html`. Она поднимает локальный сервис, если он еще не запущен, и печатает JSON с адресом.
Доступен ли редактор из локальной сети?
Нет. Сервис слушает `127.0.0.1`, файлы наружу не отдаются.
Что случится, если файл изменили во время правки?
Save останавливается и не перезаписывает файл. Проверка ревизии защищает правки агента или другого инструмента.
Генерирует ли инструмент HTML сам?
Нет. Страницу создают любым способом, а Workbench открывает готовый документ.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыКомпилятор страниц: агент пишет короткую YAML-спецификацию, а компилятор собирает из нее автономный HTML-файл без сети.
Скилл и CLI: единый HTML-файл без зависимостей, с токенами shadcn, семью макетами, графиками на SVG и самопроверкой агента
CLI создает холст, где ИИ-агент строит дашборды, отчеты и макеты как React-артефакты, а правки привязаны к блокам страницы
Детерминированная проверка HTML и CSS на 73 типичных признака сгенерированного интерфейса, с автоисправлением и /gesso-critique
Скилл разбирает и переносит WebGL, WebGPU и Canvas-эффекты со страницы в отдельный локальный проект на нативном JS
Визуальный конструктор сайтов с встроенным MCP-сервером: агент помогает собирать статические страницы с динамическими данными по вашему выбору модели
Коротко о README
Инструмент открывает готовый HTML в визуальном редакторе на базе GrapesJS, проверяет страницу валидатором и сохраняет правки обратно. В комплекте скилл для агентов и плагин DeepSeek Harness.
Бейдж для README
Исходный SKILL.md
--- name: html-workbench description: Start or reuse the bundled local HTML Workbench and return a visual editor URL for a local .html file. Use when the user asks to generate HTML and make it editable, convert an HTML page to an editable state, open a local HTML file in a visual editor, or continue AI and human editing against the same source file. --- # HTML Workbench Open a complete local HTML document in the bundled GrapesJS workbench. Keep the source file as the shared source of truth for visual edits and later AI edits. ## Workflow 1. Resolve the target `.html` file to an absolute path. When the user asks to generate a page, read `references/editable-html-guidelines.md` and generate one complete, self-contained HTML document containing `html`, `head`, and `body`. Inline its CSS and JavaScript; embed required visual assets; do not create a multi-file web project or depend on a CDN unless the user explicitly asks for that trade-off. 2. Generate position-independent interactions that use stable semantic markers, delegated events, and idempotent initialization. For a page with business JS, test the interaction in preview mode after opening it. 3. Resolve the directory containing this `SKILL.md`. Treat its `scripts/workbench.py` as the service entrypoint and `scripts/validate_html.py` as the compatibility validator. 4. Find Python 3 in this order: - Run `python3 --version`. - Run `python --version` if `python3` is unavailable. - On Windows, run `py -3 --version` if both commands are unavailable. 5. Require Python 3.9 or newer. If no compatible interpreter exists, explain that the workbench needs Python 3.9+ and ask for confirmation before installing software. After confirmation, use the platform's normal trusted installer or package manager, then repeat the version check. 6. Read `references/validation-rules.md`, then validate the page before opening it. For a newly generated default page, require one self-contained file: ```text <python> <skill-dir>/scripts/validate_html.py --require-self-contained <absolute-html-path> ``` For an existing page that intentionally has relative resources, omit `--require-self-contained` and clearly report that it is not a single-file deliverable. Fix every reported error. Review warnings and remove structural JS/CSS coupling when practical; if a warning is intentionally accepted, state the assumption. 7. Always run `open` as the normal entrypoint. Do not run `serve` first: `open` checks the default local port, reuses a running HTML Workbench service when available, or starts it in the background when needed. It prints one JSON object containing the editor URL and whether the service was reused. ```text <python> <skill-dir>/scripts/workbench.py open <absolute-html-path> ``` 8. On the first run, allow the service to download the pinned GrapesJS assets. It verifies their SHA-256 hashes and caches them locally; later runs do not require network access. Do not download or inject an unverified substitute yourself. 9. Read the JSON written to stdout. When `ok` is true, open `url` in the available browser when browser control is available. In every final response, also return the URL as a clickable link, name the generated HTML file, and state whether the service was started or reused. If a browser cannot be opened automatically, tell the user to open that exact URL in any browser. 10. If startup fails, report the returned error and inspect the log path when one is provided. For `VENDOR_DOWNLOAD_FAILED`, explain that all configured sources were unreachable and ask the user to check the network before retrying. Do not replace the service with an ad-hoc server. ## Service commands Run the service independently in the foreground: ```text <python> <skill-dir>/scripts/workbench.py serve ``` Use `serve` only when a user explicitly wants to manage the foreground service. For normal Skill use, run `open <html-file>` instead.