Саймон Уиллисон опубликовал экспериментальный Web Component, созданный за один сеанс с GPT-5.5. Промпт был разговорным: описание задачи, пример URL, просьба показать превью прямо в браузере. GPT-5.5 понял задачу корректно — сгенерировал компонент, который берёт ссылку на файл в GitHub, сам конвертирует её в raw.githubusercontent.com, забирает содержимое через fetch() и отображает указанный диапазон строк с нумерацией. Без синтаксиса, без npm, без сборщиков.
Контекст
Web Components — нативный браузерный стандарт: Custom Elements, Shadow DOM, HTML Templates. Существует больше десяти лет, но массового adoption не было — порог вхождения по сравнению с React или Vue казался неоправданным. Документация MDN детальная, но писать бойлерплейт вручную мало кто хотел.
Уиллисон — один из немногих публичных разработчиков, кто методично документирует работу с LLM: фиксирует стоимость сессий, тестирует разные модели на конкретных задачах. В тот же период он использовал Claude Fable для написания большей части sqlite-utils 4.0 — по его оценке, около $149. Здесь задача решилась в рамках одного промпта с GPT-5.5. Не потому что одна модель лучше другой — просто разные инструменты под разные задачи.
Результат помечен как экспериментальный. Это не библиотека для production — это демонстрация подхода: от идеи до рабочего браузерного компонента за один диалог с моделью.
Аналитика
Кейс маленький, но показательный. Он фиксирует сдвиг в том, как опытные разработчики работают с браузерными стандартами: раньше перед реализацией Web Component нужно было читать спецификацию, сейчас достаточно сформулировать задачу в чате. LLM берёт на себя роль живой документации — генерирует рабочий код по описанию, а не по формальным требованиям.
Интереснее другое: параллельное использование Claude Fable и GPT-5.5 на разных задачах — это мультимодельная стратегия, которую практикуют технически продвинутые команды. Не «лучшая модель», а выбор под конкретный результат. Сложная рефакторинговая задача с накопленным контекстом — одна модель. Быстрый однопромптовый компонент — другая. Оценка по результату, а не по маркетинговым бенчмаркам.
Если LLM действительно снизили порог Web Components до уровня «один промпт», это значит, что нативные компоненты начнут появляться там, где раньше автоматически ставили React. Меньше зависимостей, меньше bundle size, больше переносимости. Небольшой сдвиг в архитектурных привычках — но за десять лет именно такие сдвиги меняют стек.
Кейсы применения в бизнесе
B2B-SaaS стартап с публичной документацией. Если есть docs-сайт и открытый GitHub — такой компонент позволяет встраивать актуальные фрагменты кода прямо из репозитория без ручного копирования. Код в документации всегда синхронен с последним коммитом. Результат: меньше устаревших примеров, меньше ручной работы при каждом релизе.
Корпорация с legacy-стеком и внутренним GitHub Enterprise. Технические wiki часто содержат примеры кода, которые не обновлялись годами. Компонент можно адаптировать под внутренний Git-сервер — и автоматически тянуть живые примеры из реальной кодовой базы. Снижает расхождение между документацией и кодом — классическая боль корпоративных команд.
Образовательные проекты и курсы программирования в КР/СНГ. Для платформ, где важно показывать код из реальных проектов — компонент встраивается в любой HTML без фреймворков. Адаптировать под GitLab или self-hosted Gitea — несколько строк изменений в логике конвертации URL.
Кейсы в личной жизни
Разработчик, ведущий технический блог. Вместо статичных code-блоков с ручным копированием — живые ссылки на GitHub. Читатель видит актуальный код, автор не тратит время на синхронизацию после каждого коммита. Взять исходный промпт Уиллисона, попросить LLM добавить syntax highlighting через highlight.js — задача на один вечер.
Студент или джуниор, изучающий браузерные API. Этот кейс — хороший учебный паттерн: дать похожий промпт модели, получить рабочий код, разобрать каждую строку. Custom Elements, Shadow DOM, fetch() — весь базовый набор Web Components в одном компонент. Быстрее большинства туториалов на YouTube.
Контент-мейкер с техническим каналом или newsletter. Встроенный code viewer в статье или посте повышает доверие и удобство для читателя. Компонент собирается за один промпт — Уиллисон это показал на практике.
Как применить сегодня
- В оригинальном посте Уиллисона опубликован точный промпт, который он передал GPT-5.5 — скопируйте его и запустите в любом современном LLM.
- Воспроизведите компонент самостоятельно в Claude или GPT-5.5 — базовая реализация займёт 10-15 минут.
- После генерации попросите LLM добавить syntax highlighting через Prism.js или highlight.js — это естественное следующее улучшение, которое не вошло в оригинал.
- Адаптируйте под GitLab или внутренний Git: замените логику конвертации URL под свой хост — несколько строк кода.
- Изучите Custom Elements API в MDN параллельно — один раз разобраться в стандарте, чтобы дальше использовать LLM только для ускорения, а не как чёрный ящик.