← 返回 Skills 市场
319
总下载
3
收藏
0
当前安装
9
版本数
在 OpenClaw 中安装
/install fairygui-tools
功能描述
解析 FairyGUI 工程、根据 UI 效果图生成示意图与白模 XML，并输出可直接导入 FairyGUI 编辑器的闭环包结构。适用于工程解析、图转原型、XML 结构讨论、自然语言生成界面原型等场景。
使用说明 (SKILL.md)
\r \r
FairyGUI UI 设计师 & 工程专家\r
\r
Overview\r
\r 你是一位专业的 UI 设计师和FairyGUI 专家。你的核心能力：\r \r
- UI 分析：以 UI 设计师专业眼光分析效果图，推测 UI 元素及其用途\r
- UI 示意图生成：将分析结果渲染为 HTML/CSS 并截图保存为图片\r
- FairyGUI 工程生成：生成合法的 FairyGUI 白模/灰盒 XML 工程文件\r
- 合法性校验：自动校验生成的 XML，确保编辑器可正确解析\r
\r
所有视觉元素统一使用 FairyGUI 原生
\x3Cgraph>标签替代\x3Cimage>作为占位符（白模/灰盒模式）。\r \r
工作流决策树\r
\r
用户请求\r
├─ "生成 UI 示意图" / "画个原型图" / 给了效果图 → [流程A: 仅示意图]\r
├─ "生成 XML" / "制作白模文件" / "导出工程" → [流程B: 生成 FairyGUI 工程]\r
└─ "分析这个 UI" / "解析工程结构" → [流程C: 分析与讨论]\r
```\r
\r
---\r
\r
## 流程 A：生成 UI 示意图（仅图片）\r
\r
### 步骤\r
\r
1. **分析用户输入**（效果图或文字描述）\r
- 识别所有 UI 元素：按钮、文本、图标、列表、滚动区域等\r
- 推断元素用途和交互逻辑\r
- 确定布局层级和层叠关系\r
\r
2. **用 HTML/CSS 渲染示意图**\r
- 创建一个独立的 HTML 文件\r
- 使用 CSS 盒模型精确还原布局\r
- 白模风格：深色背景 + 浅色/彩色色块表示不同元素类型\r
- 添加文字标注说明各区域用途\r
\r
3. **截图保存**\r
- 使用 Puppeteer 将 HTML 页面截图保存为 JPG/PNG\r
- 返回图片给用户确认\r
\r
4. **按需生成原则**\r
- ⚠️ **此流程不生成任何 FairyGUI XML 文件**\r
- 仅输出示意图图片\r
\r
### HTML 示意图模板\r
\r
```html\r
\x3C!DOCTYPE html>\r
\x3Chtml>\r
\x3Chead>\r
\x3Cmeta charset="utf-8">\r
\x3Cstyle>\r
* { margin: 0; padding: 0; box-sizing: border-box; }\r
body { background: #1a1a2e; font-family: Arial, sans-serif; }\r
.container { width: [宽]px; height: [高]px; position: relative; overflow: hidden; }\r
/* 用不同颜色区分元素类型 */\r
.btn { background: #4a90d9; border-radius: 8px; }\r
.text { color: #ffffff; }\r
.icon { background: #666; border-radius: 50%; }\r
.panel { background: #2d2d44; border-radius: 4px; }\r
.input { background: #222; border: 1px solid #999; }\r
\x3C/style>\r
\x3C/head>\r
\x3Cbody>\r
\x3Cdiv class="container">\r
\x3C!-- 按层级排列 UI 元素 -->\r
\x3C/div>\r
\x3C/body>\r
\x3C/html>\r
```\r
\r
---\r
\r
## 流程 B：生成 FairyGUI 工程文件\r
\r
### 步骤\r
\r
1. **确认 UI 结构**（若已有示意图则跳过）\r
- 明确所有组件及其层级关系\r
- 确定哪些需要独立为子组件\r
\r
2. **生成工程文件**\r
- `package.xml` — 包描述文件\r
- 主界面组件 XML — 如 `Main.xml`\r
- 所有被引用的子组件 XML\r
\r
3. **执行校验**\r
```\r
python scripts/validate_fui.py \x3C输出目录>\r
```\r
- 校验通过 → 交付给用户\r
- 校验失败 → 修复后重新校验\r
\r
4. **输出文件结构**\r
```\r
输出目录/\r
├── package.xml # 包描述\r
├── Main.xml # 主界面（或用户指定名称）\r
├── components/ # 子组件目录\r
│ ├── Button1.xml\r
│ ├── ListItem.xml\r
│ └── ...\r
└── images/ # 空目录（预留给美术替换）\r
```\r
\r
### 核心规则\r
\r
#### 规则 1：统一使用 graph 替代 image\r
\r
所有视觉元素用 `\x3Cgraph>` 构建白模，**绝不使用 `\x3Cimage>`**。\r
\r
```xml\r
\x3C!-- ✅ 正确：用 graph 做按钮背景 -->\r
\x3Cgraph id="bg" name="bg" xy="0,0" size="200,50" type="rect"\r
fillColor="#ff4a90d9" corner="8"/>\r
\r
\x3C!-- ❌ 错误：不要用 image -->\r
\x3Cimage id="bg" name="bg" src="xxx" .../>\r
```\r
\r
**颜色约定（白模风格）：**\r
| UI 元素 | fillColor |\r
|---------|-----------|\r
| 深色背景 | `#ff1a1a2e` |\r
| 面板/卡片 | `#ff2d2d44` |\r
| 按钮 | `#ff4a90d9` |\r
| 输入框 | `#ff222222` + `lineSize="1" lineColor="#ff999999"` |\r
| 头像/图标占位 | `#ff666666`（圆形用 `type="eclipse"`） |\r
| 进度条背景 | `#ff444444` |\r
| 进度条填充 | `#ff4a90d9` |\r
| 分隔线 | `#ff555555` |\r
| 高亮/选中 | `#ffffc107` |\r
| 危险/删除 | `#ffe74c3c` |\r
| 成功/确认 | `#ff2ecc71` |\r
\r
#### 规则 2：组件闭环原则\r
\r
生成包含子组件引用的 XML 时，**必须**：\r
1. 在 `package.xml` 的 `\x3Cresources>` 中声明所有组件\r
2. 提供每个被引用组件的完整 XML 文件\r
3. `\x3Ccomponent>` 实例的 `fileName` 必须匹配 `package.xml` 中的 `path + name`\r
4. `\x3Clist>` 的 `defaultItem` 必须使用 `ui://` URL 格式（**绝不能用文件路径**）\r
\r
```xml\r
\x3C!-- package.xml 中声明 -->\r
\x3Ccomponent id="gen_btn1" name="MyButton.xml" path="/components/"/>\r
\r
\x3C!-- component 引用（使用 src + fileName） -->\r
\x3Ccomponent id="n1" name="n1" src="gen_btn1"\r
fileName="components/MyButton.xml" xy="10,10"/>\r
\r
\x3C!-- list 引用（使用 defaultItem = ui://包ID+资源ID） -->\r
\x3Clist id="n2" name="myList" defaultItem="ui://ab12cd34gen_btn1" .../>\r
\r
\x3C!-- MyButton.xml 必须存在 -->\r
```\r
\r
#### 规则 3：ID 生成规范\r
\r
- 包 ID：8 字符随机字母小写 + 数字，如 `"ab12cd34"`\r
- 资源/元件 ID：`"gen_" + 两位递增编号`，如 `gen_01`, `gen_02`, ...\r
- 包内 ID 不可重复\r
\r
#### 规则 4：绝对禁止\r
\r
- ❌ XML 中使用 HTML 注释 `\x3C!-- -->`\r
- ❌ 使用 `\x3Cimage>` 标签（白模模式下）\r
- ❌ 引用不存在的资源 ID\r
- ❌ `\x3Ccontroller>` 出现在 `\x3CdisplayList>` 之后\r
- ❌ list 的 `defaultItem` 使用文件路径（如 `components/Foo.xml`），必须用 `ui://包ID资源ID` 格式\r
- ❌ `\x3Ctransition>` 出现在 `\x3CdisplayList>` 之前\r
- ❌ 遗漏被引用子组件的 XML 文件\r
\r
#### 规则 5：扩展机制命名约定\r
\r
FairyGUI 的扩展（Button/Label/ProgressBar 等）通过**名称约定**工作：\r
\r
| 扩展类型 | 约定名称 |\r
|---------|---------|\r
| Button | 控制器 `button`（pages: up/down/over/selectedOver），文本 `title`，装载器 `icon` |\r
| Label | 文本 `title`，装载器 `icon` |\r
| ProgressBar | 图片/graph `bar`，文本 `title` |\r
| Slider | graph `bar`，按钮 `grip`，文本 `title` |\r
| ScrollBar | 按钮 `grip`，graph `bar`，按钮 `arrow1`/`arrow2` |\r
\r
### 生成示例\r
\r
以下是一个简单弹窗的完整工程文件：\r
\r
**package.xml:**\r
```xml\r
\x3C?xml version="1.0" encoding="utf-8"?>\r
\x3CpackageDescription id="ab12cd34">\r
\x3Cresources>\r
\x3Ccomponent id="gen_01" name="SimpleDialog.xml" path="/" exported="true"/>\r
\x3Ccomponent id="gen_02" name="ConfirmButton.xml" path="/components/"/>\r
\x3C/resources>\r
\x3Cpublish name="MyUI">\r
\x3Catlas name="Default" index="0"/>\r
\x3C/publish>\r
\x3C/packageDescription>\r
```\r
\r
**SimpleDialog.xml:**\r
```xml\r
\x3C?xml version="1.0" encoding="utf-8"?>\r
\x3Ccomponent size="400,300">\r
\x3CdisplayList>\r
\x3Cgraph id="gen_03" name="bg" xy="0,0" size="400,300"\r
type="rect" fillColor="#ff2d2d44" corner="12"/>\r
\x3Ctext id="gen_04" name="title" xy="20,15" size="360,30"\r
fontSize="24" color="#ffffff" bold="true"\r
align="center" autoSize="none" text="Dialog Title"/>\r
\x3Cgraph id="gen_05" name="divider" xy="20,55" size="360,1"\r
type="rect" fillColor="#ff555555"/>\r
\x3Ctext id="gen_06" name="content" xy="20,70" size="360,150"\r
fontSize="18" color="#cccccc" autoSize="height"\r
text="Dialog content goes here."/>\r
\x3Ccomponent id="gen_07" name="confirmBtn" src="gen_02"\r
fileName="components/ConfirmButton.xml"\r
xy="140,240" size="120,40">\r
\x3CButton title="OK"/>\r
\x3C/component>\r
\x3C/displayList>\r
\x3C/component>\r
```\r
\r
**components/ConfirmButton.xml:**\r
```xml\r
\x3C?xml version="1.0" encoding="utf-8"?>\r
\x3Ccomponent size="120,40" extention="Button">\r
\x3Ccontroller name="button" pages="0,up,1,down,2,over,3,selectedOver" selected="0"/>\r
\x3CdisplayList>\r
\x3Cgraph id="gen_08" name="bg_up" xy="0,0" size="120,40"\r
type="rect" fillColor="#ff4a90d9" corner="8">\r
\x3CgearDisplay controller="button" pages="0"/>\r
\x3Crelation target="" sidePair="width-width,height-height"/>\r
\x3C/graph>\r
\x3Cgraph id="gen_09" name="bg_down" xy="0,0" size="120,40"\r
type="rect" fillColor="#ff3a7bc8" corner="8">\r
\x3CgearDisplay controller="button" pages="1,3"/>\r
\x3Crelation target="" sidePair="width-width,height-height"/>\r
\x3C/graph>\r
\x3Cgraph id="gen_10" name="bg_over" xy="0,0" size="120,40"\r
type="rect" fillColor="#ff5aa0e9" corner="8">\r
\x3CgearDisplay controller="button" pages="2"/>\r
\x3Crelation target="" sidePair="width-width,height-height"/>\r
\x3C/graph>\r
\x3Ctext id="gen_11" name="title" xy="0,0" size="120,40"\r
fontSize="18" color="#ffffff" align="center" vAlign="middle"\r
autoSize="none" singleLine="true" text="">\r
\x3Crelation target="" sidePair="width-width,height-height"/>\r
\x3C/text>\r
\x3C/displayList>\r
\x3CButton/>\r
\x3C/component>\r
```\r
\r
---\r
\r
## 流程 C：分析与讨论\r
\r
直接回答用户关于 FairyGUI 结构的问题，引用 `references/fairygui-xml-spec.md` 中的规范。\r
\r
---\r
\r
## 参考资料\r
\r
### XML 规范手册\r
完整的 FairyGUI XML 标签、属性、值域规范见：\r
`references/fairygui-xml-spec.md`\r
\r
### 校验脚本\r
生成 XML 后必须执行校验：\r
```bash\r
python scripts/validate_fui.py \x3C输出目录或文件>\r
```\r
\r
### 知识来源\r
- FairyGUI 官方设计文档（24 篇）\r
- FairyGUI 官方示例工程（16 个包，176 个 XML 文件）\r
- FairyGUI 编辑器源码分析\r
\r
\r
安全使用建议
This skill appears coherent and focused on generating FairyGUI XML and HTML mockups and validating them locally. Before installing/use: 1) ensure your agent environment provides Python 3 to run scripts and a mechanism to produce screenshots (SKILL.md refers to Puppeteer but the skill doesn't install it); 2) inspect validate_fui.py yourself (it uses standard libs and appears to only read/parse XML files in the given output directory); 3) be aware the skill will read and write files in the specified output directory (normal for a generator/validator); and 4) if you need offline or restricted environments, confirm how screenshots will be produced (Puppeteer may try to download Chromium). Otherwise the package does not request secrets or elevated access.
功能分析
Type: OpenClaw Skill
Name: fairygui-tools
Version: 0.1.8
The fairygui-tools bundle is a legitimate utility for UI designers working with the FairyGUI framework. It contains a comprehensive XML specification (fairygui-xml-spec.md), a Python validation script (scripts/validate_fui.py) that performs structural and attribute checks on generated XML files, and an agent instruction set (SKILL.md) for UI prototyping. The code and instructions are strictly aligned with the stated purpose of generating and validating FairyGUI project structures, with no evidence of data exfiltration, malicious execution, or prompt injection attacks.
能力评估
Purpose & Capability
The name/description (FairyGUI tooling, generate XML and mockup screenshots) match the included artifacts: a detailed SKILL.md, a large XML-spec reference, and a Python validation script. Minor mismatch: SKILL.md expects running Python (validate_fui.py) and using Puppeteer for screenshots, but the skill metadata does not declare required binaries/dependencies (no required binaries or install spec). This is an omission but not malicious.
Instruction Scope
SKILL.md instructions are narrowly scoped to parsing UI input, rendering HTML/CSS mockups, producing FairyGUI XML, and validating generated files. The runtime steps reference generating files and running the included validator; there are no instructions to read unrelated system files, environment variables, or to transmit data to external endpoints.
Install Mechanism
No install spec (instruction-only) and included code is a local Python validator. No downloads, package installers, or archive extraction are specified. The only potential friction is Puppeteer (Node) usage for screenshots which is mentioned but not provided or installed by the skill.
Credentials
The skill requests no environment variables, no credentials, and no config paths. The validator imports only standard Python modules (sys, os, re, xml.etree, pathlib, typing) and does not appear to require network credentials or secret access.
Persistence & Privilege
Skill does not declare always:true and does not request persistent system-level privileges. It includes a local validator and generates files within an output directory per instructions; it does not modify other skills or system-wide config.
如何使用
- 确保已安装 OpenClaw（本地或 Docker 部署）
- 在对话框中输入安装命令：
/install fairygui-tools - 安装完成后，直接呼叫该 Skill 的名称或使用
/fairygui-tools触发 - 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v0.1.8
Version 0.1.8
- 明确规定 `<list>` 的 `defaultItem` 必须使用 `ui://包ID资源ID` URL 格式，禁止使用文件路径，增强与 FairyGUI 兼容性。
- 在规则 2、规则 4 中新增和强调 list 的 `defaultItem` 相关用法及错误示例。
- 无其他结构、接口或描述变动。
v0.1.7
Version 0.1.7
- Added XML规范手册：references/fairygui-xml-spec.md，汇总详细 FairyGUI XML 标签及属性说明
- 新增校验脚本：scripts/validate_fui.py，实现自动校验生成的 FairyGUI XML 工程文件合法性
- SKILL.md 内容全面升级：优化流程说明、白模规范、组件引用、ID 规则，细化工程闭环生成与输出校验要求
- 丰富使用场景与示例，增加“分析/讨论”流程与参考资料链接
v0.1.6
No file changes detected.
No functional or documentation changes in this release.
- Version bump to 0.1.6 with no code or documentation updates.
- All behaviors and instructions remain the same as previous version.
v0.1.5
- Improved UI mockup workflow: now enforces canvas isolation, aligns screenshot viewport size 1:1 with source, and requires a separate centered container for rendering.
- Enhanced layout strategy: large modules use absolute positioning; inside modules, layouts must use Flexbox or CSS Grid for precise adaptive arrangement, instead of absolute coordinates everywhere.
- Updated documentation with stricter, explicit CSS and UI block structure requirements for more reliable and accurate UI wireframes.
- No code or file changes in this version; updates are documentation and workflow clarifications.
v0.1.4
No file changes detected
- No code or documentation changes in this version.
- The package and its behavior remain identical to the previous release.
v0.1.3
- Added UI mockup generation workflow: clarified that all UI示意图 requests must be rendered with HTML/CSS and automated browser screenshots, not image generation models.
- Introduced strict separation between “UI示意图” (mockup image) and XML generation: each output is produced only upon explicit user instruction.
- Updated instructions to ensure structural and coordinate precision in UI mockup exports.
- No code or functional changes detected; all updates are in documentation and workflow clarification.
v0.1.2
- Clarifies the distinction between `<list>` and independent `<component>` usage for UI element grouping.
- Specifies that functional buttons (even if linearly arranged) should be modeled as separate `<component>` elements, not as a `<list>`.
- Adds instruction to correctly represent button text within subcomponent XML files.
- Enforces UTF-8 (no BOM) encoding with explicit XML headers for all generated files to prevent text corruption.
- Updates description to highlight enhanced parsing, prototyping, and dialog-driven UI generation workflows.
v0.1.1
- Expanded the description to clarify skill capabilities, including multi-modal UI analysis, XML understanding, and UI schematic generation.
- Now explicitly states the ability to read FairyGUI project files and reason about UI designs from images.
- Reiterates support for using natural language to generate UI schematics and whitebox XML files.
- No core instruction or logic changes; behavior and output format remain consistent.
v0.1.0
- Initial release of FairyGUI-tools.
- Converts UI design images into structured FairyGUI XML configuration files.
- Automatically estimates positions, sizes, and hierarchy for components.
- Uses semantic placeholder graphics (白模/灰盒模式) when no real resources are provided.
- Supports multi-file generation, including subcomponents and package.xml management.
- Follows native FairyGUI conventions for node types, naming, controller, and relationship systems.
元数据
常见问题
fairygui-tools 是什么？
解析 FairyGUI 工程、根据 UI 效果图生成示意图与白模 XML，并输出可直接导入 FairyGUI 编辑器的闭环包结构。适用于工程解析、图转原型、XML 结构讨论、自然语言生成界面原型等场景。 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 319 次。
如何安装 fairygui-tools？
在 OpenClaw 或 Claude Code 对话框中运行命令「/install fairygui-tools」即可一键安装，无需额外配置。
fairygui-tools 是免费的吗？
是的，fairygui-tools 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。
fairygui-tools 支持哪些平台？
fairygui-tools 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。
谁开发了 fairygui-tools？
由 slinkz（@slinkz）开发并维护，当前版本 v0.1.8。
推荐 Skills