SkillFoxx

Moe UI Skill

Skill that draws one illustrated style for an app UI: six presets, page mockups, transparent assets and code.

  • 97 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The agent creates and overwrites project files and calls image generation on the connected model.
All reasons and checks

s1dashu/moe-ui-skillAuthor:s1dashu

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/moe-ui-skill

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The agent creates and overwrites project files and calls image generation on the connected model.

This is third-party code. Review the repository files before installing.

What it does

Moe UI Skill walks an agent from visual exploration to a working interface: style choice, the first product page, remaining pages, separate transparent illustrations and finally code built from real components. Six ready styles come bundled: fresh crayon, cream colored pencil, airy watercolor, soft felt, minimal paper and gentle line. A reference image of your own works as a starting point too. Illustrations, avatars and icons are generated one by one, while text, layout and interactions stay real components. After the build the agent compares the result with the mockup and fixes differences.

Who it is for. Designers and app developers who want a recognizable hand-drawn look with friendly characters and a consistent icon set.

Good fit when

  • You are designing a children or family app in a soft hand-drawn style.
  • A client asks to see several visual directions before layout starts.
  • An interface lacks illustrations, avatars and icons in one manner.
  • A finished mockup has to be turned into components and compared with the picture.

Not a fit when

  • You only need a single picture or illustration without the whole flow.
  • A spacing or color fix on an existing page is enough.
  • The brand style is strict and corporate with no hand-drawn elements.

Example request

Use Moe UI Skill: first show style options for my notes app, then build the home page.

Limitations

Results depend on the agent and the image model: the author recommends Codex or an agent with GPT Image or Gemini Image and does not guarantee other combinations. The agent needs image generation and editing, file access and coding ability. The README and skill text are in Chinese, while replies follow the language of your request. Style previews are samples: before real work the skill asks you to choose a style and approve the first page, so a full run takes many image-model requests.

How to disable. Remove the skill folder from the agent skills directory or uninstall it with `npx skills`. Generated pages and assets stay in the project and are deleted separately.

FAQ

Which styles come included?

Six: fresh crayon, cream colored pencil, airy watercolor, soft felt, minimal paper and gentle line. Each has a preview image and a prompt file.

How do I install it for every project?

Add the `--global` flag: `npx skills@latest add s1dashu/moe-ui-skill --global`.

Do I need my own reference image?

No, you can pick one of the six styles. A reference image or just an idea works as a start too.

Will the agent start coding right away?

No. The skill first shows styles, then asks you to approve the first product page. When you only want a preview, no code is written.

What license does the skill use?

MIT. The license text is in the LICENSE file of the repository.

Discussion

No questions or reviews yet.

Skills

Make interfaces feel better

make-interfaces-feel-better

A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas

SkillMinimal access4K15

Two UI/UX skills teach an agent design decisions: track selection, tokens, component recipes and anti-slop guardrails.

SkillMinimal access177

An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look

SkillExtended access685

Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes

SkillMinimal access11K

Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile

SkillMinimal access114.1K113

A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code

PluginMinimal access100

README in short

The skill describes a path from picking a visual style to code: presets with previews and prompts, page and transparent asset generation, real component implementation and comparison with the mockup.

README badge

Original 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. 扩展页面

以选中图作为唯一主视觉基准，按授权范围生成其余主要页面；必要时补关键详情或状态。

- 每次带上选中参考图，保持角色造型、配色、字级、图标媒介、圆角、导航和间距一致。
- 页面结构以实际业务为准，不能把每一页都套成聊天页，也不能照搬候选图中不存在的功能。

Report a problem