Moe UI Skill
Скилл рисует единый стиль интерфейса приложения: шесть пресетов, страницы, прозрачные иллюстрации и код.
- 97 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Агент создает и перезаписывает файлы проекта и вызывает генерацию изображений у подключенной модели.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/moe-ui-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент создает и перезаписывает файлы проекта и вызывает генерацию изображений у подключенной модели.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Moe UI Skill ведет агента по цепочке от визуальных поисков до готового интерфейса: выбор стиля, первая страница продукта, остальные страницы, отдельные прозрачные иллюстрации и в конце код с реальными компонентами. Сверху идут шесть готовых стилей: свежий воск, сливочный цветной карандаш, легкая акварель, мягкий войлок, минималистичная бумага и нежная линия. Можно начать и со своей референс-картинки. Иллюстрации, аватары и иконки генерируются по отдельности, а тексты, сетка и взаимодействия остаются настоящими компонентами. После сборки агент сверяет результат с макетом и правит расхождения.
Для кого. Дизайнерам и разработчикам приложений, которым нужен узнаваемый рисованный стиль с милыми персонажами и единым набором иконок.
Подходит, если
- Нужен дизайн приложения для детей или семейного сервиса в мягком рисованном стиле.
- Заказчик просит показать несколько визуальных направлений до верстки.
- Интерфейсу не хватает иллюстраций, аватаров и иконок в одной манере.
- Готовый макет надо воплотить в компонентах и сверить с картинкой.
Не подходит, если
- Нужна одна картинка или иллюстрация без всего процесса.
- Достаточно поправить отступы или цвет в готовой странице.
- Фирменный стиль строгий и корпоративный, без рисованных элементов.
Пример запроса к агенту
Используй Moe UI Skill: сначала покажи варианты стиля для моего приложения заметок, затем собери главную страницу.Ограничения
Результат зависит от агента и модели генерации картинок: автор рекомендует Codex или агента с GPT Image либо Gemini Image и не гарантирует качество на других связках. Агенту нужны генерация и редактирование изображений, работа с файлами и написание кода. Тексты в README и самом скилле на китайском, ответы агента следуют языку запроса. Предпросмотры стилей служат примерами: перед реальной работой скилл просит выбрать стиль и подтвердить первую страницу, поэтому полный прогон занимает много запросов к модели изображений.
Как отключить. Удалите папку скилла из каталога скиллов агента или выполните удаление через `npx skills`. Сгенерированные страницы и ассеты останутся в проекте, их удаляют отдельно.
Частые вопросы
Какие стили есть из коробки?
Шесть: свежий воск, сливочный цветной карандаш, легкая акварель, мягкий войлок, минималистичная бумага и нежная линия. У каждого есть картинка-превью и текст промпта.
Как поставить скилл для всех проектов?
Добавьте флаг `--global` к команде установки: `npx skills@latest add s1dashu/moe-ui-skill --global`.
Нужна ли своя референс-картинка?
Нет, можно выбрать один из шести стилей. Свой референс или просто идея тоже подходят как старт.
Начнет ли агент сразу писать код?
Нет. Сначала скилл показывает стили, затем просит подтвердить первую страницу продукта. Если нужен только предпросмотр, код не пишется.
Какая лицензия у скилла?
MIT. Текст лицензии лежит в файле LICENSE репозитория.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыДетали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Два скилла по UI и UX учат агента дизайн-решениям: выбор дорожки, токены, рецепты компонентов и защита от шаблонного вида.
Скилл дизайна интерфейсов для агента: диагностика, четыре направления на выбор, реализация и приемка без вида шаблона от ИИ
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Скилл для агента с базой из 107 стилей, 127 палитр и 107 шрифтовых пар: генерирует дизайн-систему и проверяет код интерфейса
Коротко о README
Скилл описывает путь от выбора визуального стиля до кода: пресеты с превью и промптами, генерация страниц и прозрачных ассетов, реализация настоящими компонентами и сверка с макетом.
Бейдж для README
Исходный SKILL.md
--- name: moe-ui-skill license: MIT description: 用生图探索应用视觉风格，选定后扩展页面、生成独立透明插画素材，再用真实组件实现并对照调整。适用于萌 UI、插画驱动的 App/Web UI 设计与重设计；单张插画生成或普通局部样式修复不需要完整流程。 --- # 萌 UI 把用户选择的视觉方向转化成可实现、可交互的界面。默认追求温暖、治愈、可爱、简洁和清新，但用户提供的品牌与视觉要求优先，不把某个项目的角色、颜色或导航结构推广到其他产品。 核心流程：**浏览预置风格图并选择 → 生成并确认实际产品第一页 → 扩展关键页面 → 生成素材 → 代码实现 → 对照调整**。风格库预览是选风格的示例，不是用户产品的最终页面。先选风格，再为真实产品生图。 ## 开始前 - 检查目标项目、已有页面、组件和资源，确认真实功能、主导航、关键交互及用户最新约束。只询问确实缺失的信息。 - 默认选择最能代表产品、使用频率高的一个关键页面。锁定相同视口、布局、功能、示例内容与状态，再比较视觉风格。 - 已有明确选中的参考图时，从适用阶段继续，不重复探索或要求再次选择。用户只要求预览时不擅自实现代码。 - 生图使用当前可用的 imagegen 技能和内置图像工具；使用前读取该技能，遵循其参考图、透明背景和保存规则。不存在可用生图能力时说明限制，不以代码绘制占位图冒充已生成素材。 - 读取本地参考图后再使用；每次生成调用都传入完整的布局约束、风格要求及必要参考图，不能依赖未验证的跨调用状态或模型记住前一张图。 ## 1. 浏览预置风格并选择 先读取 [风格库索引](references/styles.md)，使用索引中真实存在的预览图片。默认展示全部预设（当前六种），按编号、名称逐张展示或并排呈现；不要只列名称让用户盲选，也不要为每次选风格重新生图。 - 优先推荐第一项「清新蜡笔」，它是本技能创建者明确选中的方向。其特征为干净白底、柔和浅色、简单蜡笔插画和独立彩色操作图标。推荐不等于替用户选择。 - 预置图片保持同类功能骨架，让区别来自媒介、角色造型、配色、气泡轮廓和图标；不要把各个 preset 约束成同一套设计换材质。示例导航、角色、文案不绑定用户产品。 - 明确告知用户当前展示的是风格样例，选中后将按实际产品结构生成第一页。 - 用户明确选择或授权你自行选择前，不生成实际页面或批量素材。没有喜欢的预设时，根据反馈补充方向，不强迫六选一。 - 用户已提供或选定风格时跳过这一阶段；不要再次要求选择。 ## 2. 生成并确认实际产品第一页 读取所选风格目录的 `prompt.md`，查看该目录 `preview.png`；将其作为风格参考，按真实业务生成一个完整关键页面。 - 锁定视口、真实导航、必要控件和交互，清晰区分风格参考和布局参考。不得凭空增加阅读回执、在线状态、电话或视频等不存在的功能。 - 参考图必须完整展示页面结构，包括必要安全区、内容和底部操作区；没有设备外框遮挡，没有不必要的装饰封面。 - 检查文字、功能、空间利用率以及图标风格。展示结果后，根据用户反馈调整这一页，直到用户明确表示满意或已授权自行判定。 - **用户选中风格不等于确认第一页满意**。第一页满意之前不批量扩展页面。已有用户满意的完整产品参考图时直接沿用，不重复生成或确认。 ## 3. 扩展页面 以选中图作为唯一主视觉基准，按授权范围生成其余主要页面；必要时补关键详情或状态。 - 每次带上选中参考图，保持角色造型、配色、字级、图标媒介、圆角、导航和间距一致。 - 页面结构以实际业务为准，不能把每一页都套成聊天页，也不能照搬候选图中不存在的功能。