@brushes/schema-to-view 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/skills/SKILL.md +18 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brushes/schema-to-view",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "根据 UI 截图/设计稿动态生成低代码平台 JSON schema。当用户提供 UI 图片要求生成页面、将设计稿转为低代码页面、根据截图创建页面 JSON、图片转 Schema 时使用此 skill。触发条件：UI 截图 + 低代码、设计稿转代码、图片生成页面、schema 生成",
|
|
5
5
|
"keywords": ["pi-package"],
|
|
6
6
|
"pi": {
|
package/skills/SKILL.md
CHANGED
|
@@ -1,23 +1,32 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: @brushes/schema-to-view
|
|
3
3
|
description: >
|
|
4
|
-
根据 UI 截图/设计稿动态生成低代码平台 JSON schema。当用户提供 UI 图片要求生成页面、
|
|
4
|
+
根据 Pc / Web UI 截图/设计稿动态生成低代码平台 Web JSON schema。当用户提供Pc/ Web UI 图片要求生成页面、
|
|
5
5
|
将设计稿转为低代码页面、根据截图创建页面 JSON、图片转 Schema 时使用此 skill。
|
|
6
|
-
触发条件：UI 截图 + 低代码、设计稿转代码、图片生成页面、schema 生成。
|
|
7
|
-
argument-hint: "[UI截图路径]"
|
|
6
|
+
触发条件：Pc / Web + UI 截图 + 低代码、设计稿转代码、图片生成页面、schema 生成。
|
|
7
|
+
argument-hint: "[Pc / Web UI截图路径]"
|
|
8
8
|
allowed-tools: Bash(ls mkdir) Read Write Edit Glob Grep mcp__image-vision-mcp__* mcp__zai-mcp-server__*
|
|
9
9
|
paths: "pageModels/**,apps/editor/**,packages/component-ui/**"
|
|
10
|
+
scope:
|
|
11
|
+
include:
|
|
12
|
+
- Pc / Web页面截图/设计稿分析
|
|
13
|
+
- packages/component-ui 组件库映射
|
|
14
|
+
- pageModels/ 目录 JSON 输出
|
|
15
|
+
exclude:
|
|
16
|
+
- 移动端 / Mobile 端页面
|
|
17
|
+
- 非本项目的通用前端代码生成
|
|
18
|
+
- 已有 Schema 的属性修改
|
|
10
19
|
---
|
|
11
20
|
|
|
12
21
|
# @brushes/schema-to-view：UI 截图 → 低代码 JSON Schema
|
|
13
22
|
|
|
14
|
-
将 UI 设计稿/截图转换为 web-lowcode 平台可用的 JSON schema 文件。
|
|
23
|
+
将 Pc / Web UI 设计稿/截图转换为 web-lowcode 平台可用的 JSON schema 文件。
|
|
15
24
|
|
|
16
25
|
## 执行流程
|
|
17
26
|
|
|
18
|
-
### 第一步：分析 UI 截图
|
|
27
|
+
### 第一步：分析 Pc / Web UI 截图
|
|
19
28
|
|
|
20
|
-
使用 MCP 视觉工具分析用户提供的 UI 图片：
|
|
29
|
+
使用 MCP 视觉工具分析用户提供的 Pc / Web UI 图片：
|
|
21
30
|
|
|
22
31
|
```
|
|
23
32
|
mcp__zai-mcp-server__analyze_image 或 mcp__image-vision-mcp__image_understanding
|
|
@@ -25,13 +34,13 @@ mcp__zai-mcp-server__analyze_image 或 mcp__image-vision-mcp__image_understandin
|
|
|
25
34
|
|
|
26
35
|
分析要点：
|
|
27
36
|
- 页面整体布局（行列结构、侧边栏、内容区）
|
|
28
|
-
- 识别每个区域中的 UI 元素类型（文本、图片、按钮、卡片、列表等）
|
|
37
|
+
- 识别每个区域中的 Pc / Web UI 元素类型（文本、图片、按钮、卡片、列表等）
|
|
29
38
|
- 元素之间的层级关系
|
|
30
39
|
- 颜色、字号、间距等样式细节
|
|
31
40
|
|
|
32
41
|
### 第二步：映射到组件
|
|
33
42
|
|
|
34
|
-
将识别出的 UI 元素映射为低代码平台组件。可用组件及分类：
|
|
43
|
+
将识别出的 Pc / Web UI 元素映射为低代码平台组件。可用组件及分类：
|
|
35
44
|
|
|
36
45
|
#### 布局容器
|
|
37
46
|
| resolvedName | 用途 | 关键 props |
|
|
@@ -162,7 +171,7 @@ JSON schema 是一个 **扁平字典** `Record<NodeId, SerializedNode>`，唯一
|
|
|
162
171
|
}
|
|
163
172
|
```
|
|
164
173
|
|
|
165
|
-
3. **构建布局树**：根据 UI 分析结果，用 Container 组件构建行列布局
|
|
174
|
+
3. **构建布局树**：根据 Pc / Web UI 分析结果，用 Container 组件构建行列布局
|
|
166
175
|
|
|
167
176
|
4. **放入内容组件**：在合适的 Container 中放入 Text、Image、Button 等
|
|
168
177
|
|