draw-ui — скилл
Скилл рисует макеты интерфейсов и лендингов и переносит их в HTML, в проект на React или в мини-приложение WeChat
- 519 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Запросы и референсные картинки отправляются выбранному сервису генерации изображений
- Скрипты запускают Python и ставят недостающие пакеты в виртуальное окружение
- Страница настройки сохраняет ключи в системное хранилище учетных данных
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/draw-uiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запросы и референсные картинки отправляются выбранному сервису генерации изображений
- Скрипты запускают Python и ставят недостающие пакеты в виртуальное окружение
- Страница настройки сохраняет ключи в системное хранилище учетных данных
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
draw-ui задает агенту порядок работы дизайнера интерфейсов. Перед генерацией он выясняет: что это за страница и какая в ней главная функция; есть ли скриншот или макет для опоры; какие области менять нельзя, например боковое меню. Если данных хватает, он начинает сразу. Затем выбирает визуальное направление, расставляет акценты по бизнес-смыслу и генерирует макет, не подгоняя разные продукты под одинаковые карточки. Для сайтов и лендингов по умолчанию рисуется полная вертикальная страница от навигации до подвала. Если инструмент не отдает длинную картинку целиком, скилл генерирует блоки по частям, проверяет их и собирает один файл предпросмотра. Один первый экран он рисует только по вашей просьбе. Вторая половина работы — перенос макета в код. Скилл делит страницу на части для кода (разметка, текст, элементы управления) и части-картинки (логотипы, иллюстрации, сложные эффекты). Цвета, размеры и координаты он измеряет по опорным областям, затем открывает собранную страницу в браузере и снимает те же метрики. Программа показывает отклонения от макета и помогает найти, где верстка разошлась; пройдена проверка или нет, решает человек по итоговому виду. Для существующих проектов на React, Vue или TypeScript скилл держится их архитектуры, для отдельной страницы отдает HTML и CSS, для мини-приложений — WXML, WXSS и TS или JS. По умолчанию картинки создает встроенная генерация изображений агента. Скрипты ZenMux и OpenAI Responses API подключаются, только если вы их выбрали. Описание, картинки и записи о запусках скилл сохраняет в каталог задачи.
Для кого. Для дизайнеров и фронтенд-разработчиков, которые хотят получить макет страницы от агента и собрать его в коде, сверяя результат с макетом по цветам и размерам.
Подходит, если
- Нужен макет новой страницы или полный лендинг от навигации до подвала
- Есть скриншот приложения, и нужно сохранить боковое меню, а содержимое перерисовать
- Готовый макет требуется перенести в HTML и CSS или в существующий проект на React и Vue
- Нужно собрать страницу мини-приложения WeChat на WXML и WXSS по картинке
- Требуется серия экранов одного стиля или поток из нескольких состояний на общей базе
Не подходит, если
- Нужен обычный плакат, иллюстрация или раскадровка: скилл рассчитан на интерфейсы и сайты
- Требуется только правка бизнес-логики без задач по дизайну
- Нужно отредактировать фотографию или обработать картинку без задачи по интерфейсу: для этого скилл не предназначен
- Нет ни встроенной генерации изображений у агента, ни доступа к выбранному сервису: макет без нее не получить
Пример запроса к агенту
[$draw-ui] Нарисуй страницу аналитики для авторов: график за 30 дней, популярные материалы и доход, затем собери ее в HTML и CSSОграничения
По сгенерированной картинке нельзя понять, работают ли интерактивность и адаптивность, поэтому проверяйте их в коде. Эталонные картинки подсказывают шрифты, пропорции и детали, но могут перетащить в макет лишнюю раскладку. Заранее записывайте, что берется из референса.
Для скриптовых адаптеров нужен Python 3.10 или новее. Адаптеру ZenMux нужны `google-genai` и Pillow, измерения и сборка требуют Pillow, а оболочка сама ставит недостающие пакеты в отдельное виртуальное окружение. Ключи нужны только при выборе внешнего сервиса. Их записывает страница настройки в системное хранилище учетных данных, и ей нужен Node.js 22.18 или новее. Адаптер OpenAI Responses здесь не подойдет: API OpenAI из России недоступен.
Скрипты проверялись на macOS, для Windows есть вход PowerShell, а Linux и Windows на реальных машинах не проверялись. Запросы и референсные картинки отправляются выбранному сервису. Без генерации в сети скилл составляет план, обрабатывает готовые изображения и запускает локальные тесты.
Как отключить. Удалите папку скилла draw-ui из каталога скиллов агента, например из `~/.claude/skills/`. Ключи, которые вы сохраняли через страницу настройки, лежат в системном хранилище учетных данных, и их удаляют в нем.
Частые вопросы
Как поставить draw-ui в Claude Code?
Выполните `npx skills add oil-oil/draw-ui`, для этого нужен Node.js. Можно и просто попросить агента: «Установи этот скилл: https://github.com/oil-oil/draw-ui». После установки вызывайте скилл как `[$draw-ui]` и описывайте страницу.
Чем макет отличается от рабочей страницы?
Макет остается картинкой, и только проверенный HTML считается рабочей страницей. В отчете скилл называет, что проверено и что осталось на проверку: интерактивность, адаптивность, доступность.
Нужен ли ключ API для draw-ui?
Для обычной работы нет. Ключ нужен только для внешнего сервиса ZenMux или OpenAI Responses API, его вводят на локальной странице настройки, и в чат он не попадает.
Как draw-ui переносит макет в код?
Он делит страницу на код и картинки: разметка, текст и обычные иконки пишутся вручную, а логотипы, фотографии и сложные эффекты остаются изображениями. Затем открывает собранную страницу в браузере, снимает с нее цвета, размеры и координаты и сравнивает их с измерениями макета, чтобы увидеть, где верстка разошлась.
Можно ли получить страницу для мини-приложения WeChat?
Да. Для мини-приложений скилл пишет WXML, WXSS и TS или JS и проверяет их в инструментах разработчика. Прототип в браузере проверкой мини-приложения не считается.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл дизайна интерфейсов для агента: диагностика, четыре направления на выбор, реализация и приемка без вида шаблона от ИИ
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Мета-скилл разбирает бренд по ссылке, названию или скриншоту и создает из него полноценную дизайн-систему как новый скилл
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| draw-ui (эта запись) | нет | 519 | |
| Oil UI | нет | 2 483 | тот же автор: три направления рядом и доводка по настоящим скриншотам, без переноса в мини-приложения |
| Hallmark | нет | 41 678 | дизайн-скилл против шаблонных интерфейсов: страницы, аудит и редизайн без измерительной сверки с макетом |
| AI Website Cloner Template | нет | 37 783 | воссоздает сайт по адресу как приложение Next.js, а draw-ui начинает с макета по описанию |
Коротко о README
Лицензия MIT. Скилл рассчитан на интерфейсы и сайты, обычные плакаты, иллюстрации и раскадровки в него не входят. Тесты скриптов запускаются командами `python3 -m unittest discover -s tests -p 'test_*.py'` и `bash tests/test_ask_draw.sh`.
Бейдж для README
Исходный SKILL.md
--- name: draw-ui description: "设计 App、后台、游戏界面和完整网站落地页，生成 UI 设计稿；按需把设计稿或截图还原为 HTML/CSS、现有前端项目或微信小程序。用户要求页面设计、完整落地页、截图还原或小程序高保真时使用。不用于普通插画、海报、故事板、纯图片编辑或无设计任务的业务代码修改。" --- # Draw UI Skill 默认追求简洁、现代、有自身风格的 UI；已有品牌、明确主题和用户指定风格优先。视觉质量与业务完整性分别验收，不能用内容齐全、对齐规整替代设计成立。 脚本与资源路径相对于本 Skill 目录，执行前解析为绝对路径。设计说明、图片和运行记录保存到任务目录。浏览器、开发者工具及外部服务沿用当前任务授权；能力不可用时完成可执行部分，并说明未验证项。 ## 确定范围 先从请求、项目和参考图提取以下信息。信息足够就执行；只有缺失信息会改变核心流程时才集中询问，不要求用户先找参考图。 | 判断 | 默认处理 | | --- | --- | | 页面目标 | 用户是谁、要完成什么任务、主要操作与真实内容 | | 页面范围 | 区分组件、单屏、滚动页面和完整落地页；官网或落地页默认从导航到页脚 | | 目标设备 | 分开记录逻辑视口与图片像素；竖向长图不代表手机布局 | | 交付方式 | 只要设计稿就交付图片与实现说明；要求实现时才编写代码 | | 现有约束 | 复用组件、字体和设计规范，保留用户指定的固定区域 | ## 选择执行路径 只读取当前路径需要的资源，沿用已有设计说明，不为相同信息重复建表。 | 路径 | 执行顺序 | | --- | --- | | 新设计或风格探索 | 按 [UI 设计与验收](references/ui-design.md) 确定视觉构思、组织提示词、生成并检查；完整长页再读 [长页生成](references/full-page.md) | | 截图还原或视觉校准 | 先读 [测量与校准](references/calibration.md)，再按目标读取 [现有软件实现](references/software-reconstruction.md) 或 [HTML／小程序实现](references/html-reconstruction.md)；不重新设计已锁定的风格 | | 设计后继续实现 | 检查已生成的设计图，将其作为还原基线，进入上一条路径 | ## 选择参考图策略 先区分借鉴风格与原样还原。风格参考提取业务焦点、字体对比、留白、比例和图像用途，按当前业务重组内容；不要复制无关营销模块或作品展示外框。 | 参考用途 | 使用方式 | | --- | --- | | 自由探索 | 无参考也可执行，从任务选择视觉方向 | | 只保留导航或侧边栏 | 写清固定范围；必要时制作内容区中性的参考副本，保留原图 | | 借鉴风格 | 使用实际参考图，说明借鉴的设计关系与允许变化的内容 | | 精准还原 | 完整截图用于测量与整体对照；只有确需素材重绘时才将相应图片送入生成工具 | 图片输入能力与调用限制见 [生成工具](references/generation.md)。没有实际传入图片时，只能称为文字提炼参考。多屏延展与模型对比按 UI 设计文档处理。 ## 划分组件与素材 在生成或实现前明确边界：布局、文字、控件、普通图标和动态图表由代码实现；摄影、原创插画和特殊品牌视觉使用独立素材。图片放入明确容器，正文、数据标签和操作保持可编辑。