Skip to content

Commit 00f558b

Browse files
rui.yangrui.yang
rui.yang
authored and
rui.yang
committed
feat: 添加生成式 UI 技能 & skill 快捷调度方式
1 parent 7eaef04 commit 00f558b

File tree

7 files changed

+1582
-0
lines changed

7 files changed

+1582
-0
lines changed

‎mini_agent/cli.py‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ def print_help():
199199
help_text = f"""
200200
{Colors.BOLD}{Colors.BRIGHT_YELLOW}Available Commands:{Colors.RESET}
201201
{Colors.BRIGHT_GREEN}/help{Colors.RESET} - Show this help message
202+
{Colors.BRIGHT_GREEN}/skills{Colors.RESET} - List all installed skills
202203
{Colors.BRIGHT_GREEN}/clear{Colors.RESET} - Clear session history (keep system prompt)
203204
{Colors.BRIGHT_GREEN}/history{Colors.RESET} - Show current session message count
204205
{Colors.BRIGHT_GREEN}/stats{Colors.RESET} - Show session statistics
@@ -714,6 +715,20 @@ def _(event):
714715
print_help()
715716
continue
716717

718+
elif command == "/skills":
719+
# List all installed skills
720+
if skill_loader and skill_loader.loaded_skills:
721+
skills = sorted(skill_loader.loaded_skills.keys())
722+
print(f"\n{Colors.BRIGHT_CYAN}📦 Installed Skills ({len(skills)}):{Colors.RESET}\n")
723+
for i, skill_name in enumerate(skills, 1):
724+
skill = skill_loader.loaded_skills[skill_name]
725+
desc = skill.description[:60] if skill.description else "No description"
726+
print(f" {i}. {Colors.BRIGHT_GREEN}{skill_name}{Colors.RESET} - {desc}")
727+
print(f"\n{Colors.DIM}Use get_skill(skill_name) to load a skill{Colors.RESET}\n")
728+
else:
729+
print(f"\n{Colors.YELLOW}⚠️ No skills loaded{Colors.RESET}\n")
730+
continue
731+
717732
elif command == "/clear":
718733
# Clear message history but keep system prompt
719734
old_count = len(agent.messages)

‎mini_agent/skills/generative-ui/SKILL.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
---
2+
name: generative-ui
3+
description: "生成式 UI 专家。基于 Google 论文《Generative UI》，实现模型动态生成完整交互式 UI。核心架构：Tool Access + System Instructions + Post-processing + 直接渲染。"
4+
metadata: {"clawdbot":{"emoji":"🎨","requires":{"bins":["node"]}}}
5+
---
6+
7+
# 生成式 UI 专家技能 (Generative UI Expert)
8+
9+
基于 Google 论文《Generative UI: LLMs are Effective UI Generators》实现。
10+
11+
## 论文核心发现
12+
13+
| 指标 | 数据 |
14+
|------|------|
15+
| 用户偏好 Generative UI vs Markdown | **82.8%** |
16+
| 与人类专家相当的案例 | **44%** |
17+
| 零错误率（最新模型） | **Gemini 3: 0%** |
18+
19+
---
20+
21+
## 核心架构 (Three Additions)
22+
23+
```
24+
用户提示词
25+
↓
26+
┌─────────────────────────────────────────┐
27+
│ 1. Tool Access │
28+
│ - 图像生成 (DALL-E, Midjourney) │
29+
│ - 网页搜索 (实时信息获取) │
30+
│ - 代码执行验证 │
31+
│ → 结果可给模型 或 直接发给用户 │
32+
├─────────────────────────────────────────┤
33+
│ 2. System Instructions │
34+
│ - Goal (目标) │
35+
│ - Planning (规划思考) │
36+
│ - Examples (示例) │
37+
│ - Technical Specs (技术规格) │
38+
├─────────────────────────────────────────┤
39+
│ 3. Post-processing │
40+
│ - 语法修正 │
41+
│ - 安全过滤 │
42+
│ - 错误检测 │
43+
└─────────────────────────────────────────┘
44+
↓
45+
Code Artifact (完整网页)
46+
↓
47+
直接渲染到用户浏览器
48+
```
49+
50+
### 1. Tool Access（工具访问）
51+
- **图像生成**: 创建配图、图标、背景图
52+
- **网页搜索**: 获取实时信息提升质量
53+
- **结果路由**:
54+
- 发给模型 → 提升生成质量
55+
- 直发浏览器 → 提高效率
56+
57+
### 2. System Instructions（系统指令）
58+
详细指令包含四部分：
59+
60+
**Goal**:
61+
```
62+
创建一个[应用类型]，实现[核心功能]，满足用户需求。
63+
```
64+
65+
**Planning**:
66+
```
67+
1. 分析用户需求和目标
68+
2. 设计 UI 结构和交互流程
69+
3. 规划数据流和状态管理
70+
4. 考虑边界情况和错误处理
71+
```
72+
73+
**Examples**:
74+
```
75+
参考模式：
76+
- 番茄钟：倒计时 + 控制按钮 + 统计面板
77+
- 2048：网格布局 + 滑动手势 + 分数系统
78+
- 天气：卡片展示 + 动态图标 + 预报列表
79+
```
80+
81+
**Technical Specs**:
82+
```
83+
输出格式: 单 HTML 文件（推荐）或 React 组件
84+
样式: CSS-in-JS 或内联样式，使用 CSS 变量
85+
交互: 事件驱动，响应式设计
86+
性能: 首屏加载 < 1s
87+
```
88+
89+
### 3. Post-processing（后处理）
90+
- **JS 语法检查**: 确保无语法错误
91+
- **XSS 安全过滤**: 移除危险代码
92+
- **HTML/CSS 修正**: 修复常见格式问题
93+
- **资源验证**: 检查外部链接有效性
94+
95+
---
96+
97+
## 核心能力
98+
99+
### 1. Code Artifacts - 直接生成完整 UI
100+
- **完整网页**: HTML + CSS + JS 一次性生成
101+
- **直接渲染**: 在浏览器中直接运行，非仅返回代码
102+
- **可交互**: 用户可直接使用，无需二次开发
103+
104+
### 2. 工具增强生成
105+
- 必要时调用图像生成丰富界面
106+
- 搜索实时信息融入应用
107+
- 验证代码功能确保可用
108+
109+
### 3. 多风格支持
110+
- **Classic**: 经典专业风格
111+
- **Wizard Green**: 绿色魔法风格
112+
- 模型会自动适配元素风格
113+
114+
---
115+
116+
## 触发条件
117+
118+
**创建类**: "创建一个..."、"生成..."、"做..."
119+
**交互类**: "交互式..."、"可视化..."、"模拟器"
120+
**游戏类**: "游戏"、"2048"、"贪吃蛇"
121+
**工具类**: "计时器"、"计算器"、"追踪器"
122+
123+
---
124+
125+
## 输出规范
126+
127+
### 完整 Code Artifact 模板
128+
```html
129+
<!DOCTYPE html>
130+
<html lang="zh-CN">
131+
<head>
132+
<meta charset="UTF-8">
133+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
134+
<title>应用标题</title>
135+
<style>
136+
:root {
137+
--primary: #e94560;
138+
--bg: #1a1a2e;
139+
--text: #fff;
140+
}
141+
/* 现代简约风格 */
142+
</style>
143+
</head>
144+
<body>
145+
<div id="app">
146+
<!-- UI 结构 -->
147+
</div>
148+
<script>
149+
// 交互逻辑
150+
</script>
151+
</body>
152+
</html>
153+
```
154+
155+
### System Instructions 生成模板
156+
157+
```markdown
158+
## Goal
159+
创建一个{应用类型}，实现{核心功能}。
160+
161+
## Planning
162+
1. 分析需求：{用户目标和场景}
163+
2. UI 设计：{布局、颜色、交互}
164+
3. 数据流：{状态管理、持久化}
165+
4. 边界处理：{错误、空状态、加载}
166+
167+
## Examples
168+
参考：
169+
- {示例1}
170+
- {示例2}
171+
172+
## Technical Specs
173+
- 格式: 单 HTML 文件
174+
- 样式: 现代简约，CSS 变量
175+
- 交互: 响应式，事件驱动
176+
- 性能: 轻量，无外部依赖
177+
```
178+
179+
---
180+
181+
## 工作流程
182+
183+
```
184+
用户请求
185+
↓
186+
[Goal + Planning + Examples + Tech Specs]
187+
↓
188+
模型生成 Code Artifact
189+
↓
190+
Post-processing (语法 + 安全 + 格式)
191+
↓
192+
直接渲染给用户
193+
↓
194+
用户即时交互使用
195+
```
196+
197+
---
198+
199+
## 论文关键结论
200+
201+
> "Generative UI 是最新强大模型的**新兴能力** (Emergent Capability)"
202+
> — Gemini 3 达到 0% 错误率
203+
204+
**核心价值**: 模型不仅生成内容，还生成**整个用户界面**，实现真正的"AI 即时创建应用"！

‎mini_agent/skills/generative-ui/_meta.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"ownerId": "kn70pywhg0fyz996kpa8xj89s57yhv26",
3+
"slug": "generative-ui",
4+
"version": "1.0.0",
5+
"publishedAt": 1767545394459
6+
}

0 commit comments

Comments
 (0)