@devflow-tools/plugin-ui-layout 0.12.0 → 0.12.6
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 +2 -2
- package/dist/analyzers/generate-layout.d.ts +0 -10
- package/dist/analyzers/generate-layout.d.ts.map +0 -1
- package/dist/analyzers/generate-layout.js +0 -58
- package/dist/analyzers/generate-layout.js.map +0 -1
- package/dist/analyzers/types.d.ts +0 -4
- package/dist/analyzers/types.d.ts.map +0 -1
- package/dist/analyzers/types.js +0 -2
- package/dist/analyzers/types.js.map +0 -1
- package/dist/index.d.ts +0 -3
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -854
- package/dist/index.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devflow-tools/plugin-ui-layout",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"files": [
|
|
27
27
|
"dist"
|
|
28
28
|
],
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "d544427472016eb332c6c2107f0fc98d8ae59c14"
|
|
30
30
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"generate-layout.d.ts","sourceRoot":"","sources":["../../src/analyzers/generate-layout.ts"],"names":[],"mappings":"AAAA,wBAAsB,cAAc,CAAC,MAAM,EAAE;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAAE,CAAC,CA2D9D"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
export async function generateLayout(params) {
|
|
2
|
-
const type = params.layoutType || 'sidebar';
|
|
3
|
-
const name = params.componentName || 'Layout';
|
|
4
|
-
const templates = {
|
|
5
|
-
sidebar: {
|
|
6
|
-
className: 'flex h-screen',
|
|
7
|
-
jsx: `<div className="flex h-screen bg-gray-100">
|
|
8
|
-
<aside className="w-64 bg-white shadow-md">
|
|
9
|
-
<nav className="p-4">
|
|
10
|
-
<h2 className="text-lg font-semibold">Sidebar</h2>
|
|
11
|
-
</nav>
|
|
12
|
-
</aside>
|
|
13
|
-
<main className="flex-1 p-6 overflow-auto">
|
|
14
|
-
{/* Page content here */}
|
|
15
|
-
</main>
|
|
16
|
-
</div>`,
|
|
17
|
-
},
|
|
18
|
-
header: {
|
|
19
|
-
className: 'flex flex-col min-h-screen',
|
|
20
|
-
jsx: `<div className="flex flex-col min-h-screen">
|
|
21
|
-
<header className="h-16 bg-white shadow-sm flex items-center px-6">
|
|
22
|
-
<h1 className="text-xl font-bold">Header</h1>
|
|
23
|
-
</header>
|
|
24
|
-
<main className="flex-1 p-6">
|
|
25
|
-
{/* Page content here */}
|
|
26
|
-
</main>
|
|
27
|
-
</div>`,
|
|
28
|
-
},
|
|
29
|
-
grid: {
|
|
30
|
-
className: 'grid grid-cols-12 gap-4 min-h-screen',
|
|
31
|
-
jsx: `<div className="grid grid-cols-12 gap-4 min-h-screen p-4">
|
|
32
|
-
<aside className="col-span-3 bg-white rounded-lg shadow-sm p-4">
|
|
33
|
-
Sidebar
|
|
34
|
-
</aside>
|
|
35
|
-
<main className="col-span-6 bg-white rounded-lg shadow-sm p-4">
|
|
36
|
-
Main content
|
|
37
|
-
</main>
|
|
38
|
-
<aside className="col-span-3 bg-white rounded-lg shadow-sm p-4">
|
|
39
|
-
Right panel
|
|
40
|
-
</aside>
|
|
41
|
-
</div>`,
|
|
42
|
-
},
|
|
43
|
-
};
|
|
44
|
-
const template = templates[type] || templates.sidebar;
|
|
45
|
-
return {
|
|
46
|
-
content: [{
|
|
47
|
-
type: "text",
|
|
48
|
-
text: JSON.stringify({
|
|
49
|
-
componentName: name,
|
|
50
|
-
layoutType: type,
|
|
51
|
-
jsx: template.jsx,
|
|
52
|
-
className: template.className,
|
|
53
|
-
suggestion: `${type} layout generated. Replace placeholder content with your components.`,
|
|
54
|
-
}, null, 2),
|
|
55
|
-
}],
|
|
56
|
-
};
|
|
57
|
-
}
|
|
58
|
-
//# sourceMappingURL=generate-layout.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"generate-layout.js","sourceRoot":"","sources":["../../src/analyzers/generate-layout.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,MAGpC;IACC,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,IAAI,SAAS,CAAC;IAC5C,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,IAAI,QAAQ,CAAC;IAE9C,MAAM,SAAS,GAAuD;QACpE,OAAO,EAAE;YACP,SAAS,EAAE,eAAe;YAC1B,GAAG,EAAE;;;;;;;;;OASJ;SACF;QACD,MAAM,EAAE;YACN,SAAS,EAAE,4BAA4B;YACvC,GAAG,EAAE;;;;;;;OAOJ;SACF;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,sCAAsC;YACjD,GAAG,EAAE;;;;;;;;;;OAUJ;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC;IAEtD,OAAO;QACL,OAAO,EAAE,CAAC;gBACR,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;oBACnB,aAAa,EAAE,IAAI;oBACnB,UAAU,EAAE,IAAI;oBAChB,GAAG,EAAE,QAAQ,CAAC,GAAG;oBACjB,SAAS,EAAE,QAAQ,CAAC,SAAS;oBAC7B,UAAU,EAAE,GAAG,IAAI,sEAAsE;iBAC1F,EAAE,IAAI,EAAE,CAAC,CAAC;aACZ,CAAC;KACH,CAAC;AACJ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/analyzers/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;CACrB"}
|
package/dist/analyzers/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/analyzers/types.ts"],"names":[],"mappings":""}
|
package/dist/index.d.ts
DELETED
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,eAAO,MAAM,cAAc,EAAE,aAy1B5B,CAAC"}
|
package/dist/index.js
DELETED
|
@@ -1,854 +0,0 @@
|
|
|
1
|
-
export const uiLayoutPlugin = {
|
|
2
|
-
meta: {
|
|
3
|
-
name: "ui-layout",
|
|
4
|
-
version: "0.1.0",
|
|
5
|
-
description: "UI Layout 专家 — 布局模式、组件组合、响应式架构、设计系统",
|
|
6
|
-
icon: "📐",
|
|
7
|
-
tags: ["frontend", "layout", "responsive", "design-system", "ux"],
|
|
8
|
-
},
|
|
9
|
-
knowledge: {
|
|
10
|
-
sources: [
|
|
11
|
-
{
|
|
12
|
-
name: "web-dev-layout",
|
|
13
|
-
urls: [
|
|
14
|
-
"https://web.dev/learn/design/",
|
|
15
|
-
"https://web.dev/learn/css/layout/",
|
|
16
|
-
"https://web.dev/learn/design/introduction/",
|
|
17
|
-
],
|
|
18
|
-
pluginName: "ui-layout",
|
|
19
|
-
version: "2024",
|
|
20
|
-
},
|
|
21
|
-
],
|
|
22
|
-
},
|
|
23
|
-
memory: {
|
|
24
|
-
project: {
|
|
25
|
-
stack: ["CSS Grid", "Flexbox", "Container Queries", "Design Tokens"],
|
|
26
|
-
conventions: [
|
|
27
|
-
{ key: "grid-system", value: "使用 12 列 CSS Grid 系统,间距 16px/24px/32px", source: "manual", confidence: 0.9 },
|
|
28
|
-
{ key: "container-layout", value: "页面使用三区布局(header/main/footer),main 内部使用 Grid", source: "manual", confidence: 0.85 },
|
|
29
|
-
{ key: "spacing-scale", value: "间距使用 4px 倍数的 Scale:4/8/12/16/24/32/48/64", source: "manual", confidence: 0.8 },
|
|
30
|
-
{ key: "breakpoints", value: "响应式断点:mobile(<768)、tablet(768-1024)、desktop(>1024)、wide(>1440)", source: "manual", confidence: 0.85 },
|
|
31
|
-
],
|
|
32
|
-
},
|
|
33
|
-
global: [
|
|
34
|
-
{
|
|
35
|
-
id: "ui-layout:layout-patterns",
|
|
36
|
-
source: "ui-layout",
|
|
37
|
-
title: "常见布局模式",
|
|
38
|
-
content: "Card Layout:Grid + auto-fit + minmax 自适应卡片。Sidebar Layout:两列 Grid 或 Flex。Dashboard:命名 Grid Areas 定义区域。Holy Grail:header + 三列 + footer。Stack:垂直 Flex 排列组件。",
|
|
39
|
-
embedding: [],
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
id: "ui-layout:container-queries",
|
|
43
|
-
source: "ui-layout",
|
|
44
|
-
title: "Container Queries 组件级响应",
|
|
45
|
-
content: "@container 使组件根据容器宽度而非视口宽度调整样式。定义 container-type: inline-size。使用 @container (min-width: X) 替代 @media 实现组件级响应式。",
|
|
46
|
-
embedding: [],
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
id: "ui-layout:design-tokens",
|
|
50
|
-
source: "ui-layout",
|
|
51
|
-
title: "Design Token 体系",
|
|
52
|
-
content: "Token 分三层:Global(基础值如 blue-500)→ Alias(语义值如 color-primary)→ Component(组件级如 button-bg)。使用 CSS 变量传递 Token。Light/Dark 主题通过变量切换。",
|
|
53
|
-
embedding: [],
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
id: "ui-layout:accessibility-layout",
|
|
57
|
-
source: "ui-layout",
|
|
58
|
-
title: "无障碍布局设计",
|
|
59
|
-
content: "使用语义化 HTML(header/nav/main/aside/footer)。Landmark 角色帮助屏幕阅读器导航。Tab 顺序遵循视觉流。触控目标最小 44×44px。颜色对比度 4.5:1 以上。",
|
|
60
|
-
embedding: [],
|
|
61
|
-
},
|
|
62
|
-
],
|
|
63
|
-
},
|
|
64
|
-
workflow: {
|
|
65
|
-
steps: [],
|
|
66
|
-
templates: [
|
|
67
|
-
{
|
|
68
|
-
name: "layout-audit",
|
|
69
|
-
description: "布局审计:一致性检查 → 响应式问题 → 可访问性评估",
|
|
70
|
-
version: "2.0.0",
|
|
71
|
-
steps: [
|
|
72
|
-
{
|
|
73
|
-
id: "scan-layouts",
|
|
74
|
-
title: "扫描布局结构",
|
|
75
|
-
instruction: [
|
|
76
|
-
"## 扫描页面中所有布局结构",
|
|
77
|
-
"",
|
|
78
|
-
"**执行动作**:",
|
|
79
|
-
"1. 搜索所有使用 CSS Grid、Flexbox 和定位的文件",
|
|
80
|
-
"2. 提取 display 属性值(grid、flex、inline-grid、inline-flex)",
|
|
81
|
-
"3. 识别 grid-template-columns/rows、flex-direction、position 等关键属性",
|
|
82
|
-
"",
|
|
83
|
-
"**产出格式**:",
|
|
84
|
-
"```json",
|
|
85
|
-
"[",
|
|
86
|
-
" { \"file\": \"src/App.css\", \"line\": 15, \"type\": \"grid\", \"props\": \"grid-template-columns: repeat(3, 1fr)\" },",
|
|
87
|
-
" { \"file\": \"src/components/Card.css\", \"line\": 8, \"type\": \"flex\", \"props\": \"flex-direction: column\" }",
|
|
88
|
-
"]",
|
|
89
|
-
"```",
|
|
90
|
-
].join("\n"),
|
|
91
|
-
suggestedTools: ["Bash", "Read"],
|
|
92
|
-
output: "layout-structures.json",
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
id: "check-consistency",
|
|
96
|
-
title: "检查布局一致性",
|
|
97
|
-
instruction: [
|
|
98
|
-
"## 检查布局一致性",
|
|
99
|
-
"",
|
|
100
|
-
"**执行动作**:",
|
|
101
|
-
"1. 检查 grid-template-columns 是否统一(如 12 列系统 vs 随意列数)",
|
|
102
|
-
"2. 检查 gap 值是否遵循间距 Scale(4/8/12/16/24/32/48/64px)",
|
|
103
|
-
"3. 检查断点定义是否一致(mobile/tablet/desktop/wide)",
|
|
104
|
-
"4. 识别不规范的布局模式",
|
|
105
|
-
"",
|
|
106
|
-
"**产出格式**:",
|
|
107
|
-
"```markdown",
|
|
108
|
-
"## 一致性问题",
|
|
109
|
-
"",
|
|
110
|
-
"### 网格系统",
|
|
111
|
-
"- ❌ 发现 3 个不同的 grid-template-columns 定义",
|
|
112
|
-
"- ✅ 统一使用 12 列系统",
|
|
113
|
-
"",
|
|
114
|
-
"### 间距规范",
|
|
115
|
-
"- ⚠️ 5 处使用非标准间距(如 10px、15px)",
|
|
116
|
-
"- 建议改为 8px 或 16px",
|
|
117
|
-
"```",
|
|
118
|
-
].join("\n"),
|
|
119
|
-
suggestedTools: ["Bash", "Read"],
|
|
120
|
-
output: "consistency-issues.md",
|
|
121
|
-
depends: ["scan-layouts"],
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
id: "check-spacing",
|
|
125
|
-
title: "检查间距 Scale 体系",
|
|
126
|
-
instruction: [
|
|
127
|
-
"## 检查间距是否符合 Scale 体系",
|
|
128
|
-
"",
|
|
129
|
-
"**执行动作**:",
|
|
130
|
-
"1. 提取所有 margin、padding、gap 值",
|
|
131
|
-
"2. 验证是否符合 4px 倍数 Scale:4/8/12/16/24/32/48/64",
|
|
132
|
-
"3. 识别偏离标准的值(如 10px、15px、20px)",
|
|
133
|
-
"4. 统计每个非标准值出现的次数",
|
|
134
|
-
"",
|
|
135
|
-
"**Bash 命令示例**:",
|
|
136
|
-
"```bash",
|
|
137
|
-
"grep -rE '(margin|padding|gap):\\s*[0-9]+px' src/ --include='*.css' | \\",
|
|
138
|
-
" grep -vE '(4|8|12|16|24|32|48|64)px'",
|
|
139
|
-
"```",
|
|
140
|
-
"",
|
|
141
|
-
"**产出格式**:",
|
|
142
|
-
"```json",
|
|
143
|
-
"{",
|
|
144
|
-
" \"non-standard\": [",
|
|
145
|
-
" { \"value\": \"10px\", \"count\": 12, \"files\": [\"Button.css\", \"Card.css\"] },",
|
|
146
|
-
" { \"value\": \"15px\", \"count\": 5, \"files\": [\"Header.css\"] }",
|
|
147
|
-
" ],",
|
|
148
|
-
" \"compliance-rate\": \"87%\"",
|
|
149
|
-
"}",
|
|
150
|
-
"```",
|
|
151
|
-
].join("\n"),
|
|
152
|
-
suggestedTools: ["Bash", "Read"],
|
|
153
|
-
output: "spacing-analysis.json",
|
|
154
|
-
depends: ["scan-layouts"],
|
|
155
|
-
},
|
|
156
|
-
{
|
|
157
|
-
id: "check-responsive",
|
|
158
|
-
title: "检查响应式布局",
|
|
159
|
-
instruction: [
|
|
160
|
-
"## 检查各断点下布局是否正常",
|
|
161
|
-
"",
|
|
162
|
-
"**执行动作**:",
|
|
163
|
-
"1. 提取所有 @media 查询及其断点值",
|
|
164
|
-
"2. 验证是否覆盖标准断点:mobile(<768px)、tablet(768-1024px)、desktop(>1024px)、wide(>1440px)",
|
|
165
|
-
"3. 检查移动优先策略(min-width vs max-width)",
|
|
166
|
-
"4. 识别缺失的断点或不一致的媒体查询",
|
|
167
|
-
"",
|
|
168
|
-
"**Bash 命令示例**:",
|
|
169
|
-
"```bash",
|
|
170
|
-
"grep -rE '@media.*\\(.*width:' src/ --include='*.css' -h | \\",
|
|
171
|
-
" grep -oE '[0-9]+px' | sort | uniq -c",
|
|
172
|
-
"```",
|
|
173
|
-
"",
|
|
174
|
-
"**产出格式**:",
|
|
175
|
-
"```markdown",
|
|
176
|
-
"## 响应式检查结果",
|
|
177
|
-
"",
|
|
178
|
-
"### 断点覆盖",
|
|
179
|
-
"- ✅ Mobile: 15 个查询",
|
|
180
|
-
"- ✅ Tablet: 12 个查询",
|
|
181
|
-
"- ⚠️ Desktop: 仅 3 个查询",
|
|
182
|
-
"- ❌ Wide: 缺失",
|
|
183
|
-
"",
|
|
184
|
-
"### 策略分析",
|
|
185
|
-
"- 移动优先(min-width): 80%",
|
|
186
|
-
"- 桌面优先(max-width): 20%",
|
|
187
|
-
"- 建议统一为移动优先",
|
|
188
|
-
"```",
|
|
189
|
-
].join("\n"),
|
|
190
|
-
suggestedTools: ["Bash", "Read"],
|
|
191
|
-
output: "responsive-issues.md",
|
|
192
|
-
depends: ["scan-layouts"],
|
|
193
|
-
},
|
|
194
|
-
{
|
|
195
|
-
id: "check-a11y",
|
|
196
|
-
title: "检查无障碍布局",
|
|
197
|
-
instruction: [
|
|
198
|
-
"## 检查语义化结构和 Landmark 角色",
|
|
199
|
-
"",
|
|
200
|
-
"**执行动作**:",
|
|
201
|
-
"1. 检查是否使用语义化 HTML 标签:header、nav、main、aside、footer",
|
|
202
|
-
"2. 验证 Landmark 角色是否正确(role 属性或标签语义)",
|
|
203
|
-
"3. 检查 Tab 顺序是否符合视觉流",
|
|
204
|
-
"4. 验证触控目标尺寸(≥ 44×44px)",
|
|
205
|
-
"5. 检查颜色对比度(≥ 4.5:1)",
|
|
206
|
-
"",
|
|
207
|
-
"**Bash 命令示例**:",
|
|
208
|
-
"```bash",
|
|
209
|
-
"# 检查语义化标签",
|
|
210
|
-
"grep -rE '<(header|nav|main|aside|footer)' src/ --include='*.tsx' --include='*.jsx' | wc -l",
|
|
211
|
-
"",
|
|
212
|
-
"# 检查触控目标尺寸",
|
|
213
|
-
"grep -rE 'min-(w|h):.*44' src/ --include='*.css' | wc -l",
|
|
214
|
-
"```",
|
|
215
|
-
"",
|
|
216
|
-
"**产出格式**:",
|
|
217
|
-
"```markdown",
|
|
218
|
-
"## 无障碍检查结果",
|
|
219
|
-
"",
|
|
220
|
-
"### 语义化 HTML",
|
|
221
|
-
"- ✅ 使用 header 标签: 5 处",
|
|
222
|
-
"- ✅ 使用 nav 标签: 3 处",
|
|
223
|
-
"- ⚠️ 使用 div 代替 main: 2 处",
|
|
224
|
-
"",
|
|
225
|
-
"### Landmark 角色",
|
|
226
|
-
"- ✅ 正确定义: 8 处",
|
|
227
|
-
"- ❌ 缺失或错误: 3 处",
|
|
228
|
-
"",
|
|
229
|
-
"### 触控目标",
|
|
230
|
-
"- ✅ ≥ 44×44px: 90%",
|
|
231
|
-
"- ⚠️ 过小目标: 10%",
|
|
232
|
-
"```",
|
|
233
|
-
].join("\n"),
|
|
234
|
-
suggestedTools: ["Bash", "Read"],
|
|
235
|
-
output: "a11y-issues.md",
|
|
236
|
-
depends: ["scan-layouts"],
|
|
237
|
-
},
|
|
238
|
-
{ id: "generate-report", stepTemplate: "generate-report", depends: ["check-consistency", "check-spacing", "check-responsive", "check-a11y"] },
|
|
239
|
-
{ id: "generate-fix", stepTemplate: "generate-fix", depends: ["generate-report"] },
|
|
240
|
-
],
|
|
241
|
-
triggers: [{ type: "cli", command: "audit:layout" }],
|
|
242
|
-
},
|
|
243
|
-
{
|
|
244
|
-
name: "responsive-design",
|
|
245
|
-
description: "响应式改造:断点分析 → 移动适配 → Container Queries",
|
|
246
|
-
version: "2.0.0",
|
|
247
|
-
steps: [
|
|
248
|
-
{
|
|
249
|
-
id: "audit-breakpoints",
|
|
250
|
-
title: "审计断点使用情况",
|
|
251
|
-
instruction: [
|
|
252
|
-
"## 审计当前断点使用情况",
|
|
253
|
-
"",
|
|
254
|
-
"**执行动作**:",
|
|
255
|
-
"1. 搜索所有 @media 查询及其断点值",
|
|
256
|
-
"2. 统计每个断点的使用频率",
|
|
257
|
-
"3. 识别 min-width(移动优先)和 max-width(桌面优先)的比例",
|
|
258
|
-
"4. 检查断点是否覆盖标准范围:mobile/tablet/desktop/wide",
|
|
259
|
-
"",
|
|
260
|
-
"**Bash 命令示例**:",
|
|
261
|
-
"```bash",
|
|
262
|
-
"# 提取所有媒体查询断点",
|
|
263
|
-
"grep -rE '@media.*\\((min|max)-width:\\s*[0-9]+px\\)' src/ --include='*.css' -h | \\",
|
|
264
|
-
" grep -oE '(min|max)-width:\\s*[0-9]+px' | \\",
|
|
265
|
-
" sort | uniq -c | sort -rn",
|
|
266
|
-
"```",
|
|
267
|
-
"",
|
|
268
|
-
"**产出格式**:",
|
|
269
|
-
"```json",
|
|
270
|
-
"{",
|
|
271
|
-
" \"total-queries\": 45,",
|
|
272
|
-
" \"breakpoints\": {",
|
|
273
|
-
" \"768px\": { \"count\": 18, \"type\": \"min-width\" },",
|
|
274
|
-
" \"1024px\": { \"count\": 15, \"type\": \"min-width\" },",
|
|
275
|
-
" \"480px\": { \"count\": 8, \"type\": \"max-width\" },",
|
|
276
|
-
" \"1440px\": { \"count\": 4, \"type\": \"min-width\" }",
|
|
277
|
-
" },",
|
|
278
|
-
" \"strategy\": {",
|
|
279
|
-
" \"mobile-first\": 82,",
|
|
280
|
-
" \"desktop-first\": 18",
|
|
281
|
-
" }",
|
|
282
|
-
"}",
|
|
283
|
-
"```",
|
|
284
|
-
].join("\n"),
|
|
285
|
-
suggestedTools: ["Bash", "Read"],
|
|
286
|
-
output: "breakpoint-audit.json",
|
|
287
|
-
},
|
|
288
|
-
{
|
|
289
|
-
id: "check-mobile-first",
|
|
290
|
-
title: "检查移动优先策略",
|
|
291
|
-
instruction: [
|
|
292
|
-
"## 检查是否为移动优先策略",
|
|
293
|
-
"",
|
|
294
|
-
"**执行动作**:",
|
|
295
|
-
"1. 统计 min-width vs max-width 的使用比例",
|
|
296
|
-
"2. 分析基础样式是否面向移动端(无媒体查询的默认样式)",
|
|
297
|
-
"3. 检查是否通过 min-width 渐进增强到更大屏幕",
|
|
298
|
-
"4. 识别违反移动优先原则的地方",
|
|
299
|
-
"",
|
|
300
|
-
"**Bash 命令示例**:",
|
|
301
|
-
"```bash",
|
|
302
|
-
"# 计算移动优先比例",
|
|
303
|
-
"min_width=$(grep -rE '@media.*min-width' src/ --include='*.css' | wc -l)",
|
|
304
|
-
"max_width=$(grep -rE '@media.*max-width' src/ --include='*.css' | wc -l)",
|
|
305
|
-
"echo \"Mobile-first: $min_width, Desktop-first: $max_width\"",
|
|
306
|
-
"```",
|
|
307
|
-
"",
|
|
308
|
-
"**产出格式**:",
|
|
309
|
-
"```markdown",
|
|
310
|
-
"## 移动优先检查结果",
|
|
311
|
-
"",
|
|
312
|
-
"### 策略分析",
|
|
313
|
-
"- ✅ 移动优先(min-width): 82% (37 个查询)",
|
|
314
|
-
"- ⚠️ 桌面优先(max-width): 18% (8 个查询)",
|
|
315
|
-
"",
|
|
316
|
-
"### 基础样式",
|
|
317
|
-
"- ✅ 默认样式面向移动端",
|
|
318
|
-
"- ✅ 通过 min-width 渐进增强",
|
|
319
|
-
"",
|
|
320
|
-
"### 改进建议",
|
|
321
|
-
"- 将 8 个 max-width 查询改为 min-width",
|
|
322
|
-
"- 调整断点顺序:从小到大",
|
|
323
|
-
"```",
|
|
324
|
-
].join("\n"),
|
|
325
|
-
suggestedTools: ["Bash", "Read"],
|
|
326
|
-
output: "mobile-first-check.md",
|
|
327
|
-
depends: ["audit-breakpoints"],
|
|
328
|
-
},
|
|
329
|
-
{
|
|
330
|
-
id: "identify-breakpoints",
|
|
331
|
-
title: "识别需要 Container Queries 的组件",
|
|
332
|
-
instruction: [
|
|
333
|
-
"## 识别需要组件级响应的组件",
|
|
334
|
-
"",
|
|
335
|
-
"**执行动作**:",
|
|
336
|
-
"1. 分析哪些组件在不同容器宽度下需要调整布局",
|
|
337
|
-
"2. 识别依赖视口宽度但应该依赖容器宽度的组件",
|
|
338
|
-
"3. 查找可复用的独立组件(Card、Sidebar、Widget 等)",
|
|
339
|
-
"4. 评估哪些组件适合使用 @container",
|
|
340
|
-
"",
|
|
341
|
-
"**Bash 命令示例**:",
|
|
342
|
-
"```bash",
|
|
343
|
-
"# 查找独立组件",
|
|
344
|
-
"find src/components -name '*.tsx' -o -name '*.jsx' | \\",
|
|
345
|
-
" xargs grep -l '@media' | \\",
|
|
346
|
-
" grep -vE '(Layout|Page|App)' ",
|
|
347
|
-
"```",
|
|
348
|
-
"",
|
|
349
|
-
"**产出格式**:",
|
|
350
|
-
"```json",
|
|
351
|
-
"{",
|
|
352
|
-
" \"container-query-candidates\": [",
|
|
353
|
-
" { \"component\": \"Card\", \"reason\": \"在不同宽度容器中需调整布局\", \"priority\": \"high\" },",
|
|
354
|
-
" { \"component\": \"Sidebar\", \"reason\": \"可折叠/展开,依赖容器宽度\", \"priority\": \"high\" },",
|
|
355
|
-
" { \"component\": \"ProductGrid\", \"reason\": \"自适应列数\", \"priority\": \"medium\" }",
|
|
356
|
-
" ],",
|
|
357
|
-
" \"viewport-dependent\": [",
|
|
358
|
-
" { \"component\": \"Header\", \"reason\": \"全局导航,应依赖视口\" },",
|
|
359
|
-
" { \"component\": \"Footer\", \"reason\": \"全局页脚,应依赖视口\" }",
|
|
360
|
-
" ]",
|
|
361
|
-
"}",
|
|
362
|
-
"```",
|
|
363
|
-
].join("\n"),
|
|
364
|
-
suggestedTools: ["Bash", "Read"],
|
|
365
|
-
output: "container-query-analysis.json",
|
|
366
|
-
depends: ["audit-breakpoints"],
|
|
367
|
-
},
|
|
368
|
-
{
|
|
369
|
-
id: "refactor-layout",
|
|
370
|
-
title: "重构布局为移动优先",
|
|
371
|
-
instruction: [
|
|
372
|
-
"## 重构布局为移动优先 + 渐进增强",
|
|
373
|
-
"",
|
|
374
|
-
"**执行动作**:",
|
|
375
|
-
"1. 将桌面优先的 max-width 查询改为移动优先的 min-width",
|
|
376
|
-
"2. 调整基础样式为移动端默认样式",
|
|
377
|
-
"3. 使用 min-width 渐进增强到 tablet、desktop、wide",
|
|
378
|
-
"4. 确保断点顺序从小到大",
|
|
379
|
-
"",
|
|
380
|
-
"**Bash 命令示例**:",
|
|
381
|
-
"```bash",
|
|
382
|
-
"# 查找需要重构的文件",
|
|
383
|
-
"grep -rlE '@media.*max-width' src/ --include='*.css'",
|
|
384
|
-
"```",
|
|
385
|
-
"",
|
|
386
|
-
"**代码转换示例**:",
|
|
387
|
-
"```css",
|
|
388
|
-
"/* ❌ 桌面优先 */",
|
|
389
|
-
".container { width: 1200px; }",
|
|
390
|
-
"@media (max-width: 1024px) { .container { width: 960px; } }",
|
|
391
|
-
"@media (max-width: 768px) { .container { width: 100%; } }",
|
|
392
|
-
"",
|
|
393
|
-
"/* ✅ 移动优先 */",
|
|
394
|
-
".container { width: 100%; }",
|
|
395
|
-
"@media (min-width: 768px) { .container { width: 960px; } }",
|
|
396
|
-
"@media (min-width: 1024px) { .container { width: 1200px; } }",
|
|
397
|
-
"```",
|
|
398
|
-
"",
|
|
399
|
-
"**产出格式**:",
|
|
400
|
-
"```markdown",
|
|
401
|
-
"## 重构完成",
|
|
402
|
-
"",
|
|
403
|
-
"### 修改文件",
|
|
404
|
-
"- src/styles/layout.css: 转换 5 个媒体查询",
|
|
405
|
-
"- src/components/Header.css: 转换 3 个媒体查询",
|
|
406
|
-
"",
|
|
407
|
-
"### 验证",
|
|
408
|
-
"- ✅ 所有查询改为 min-width",
|
|
409
|
-
"- ✅ 断点顺序:mobile → tablet → desktop → wide",
|
|
410
|
-
"- ✅ 基础样式面向移动端",
|
|
411
|
-
"```",
|
|
412
|
-
].join("\n"),
|
|
413
|
-
suggestedTools: ["Bash", "Read", "Write"],
|
|
414
|
-
output: "refactor-summary.md",
|
|
415
|
-
depends: ["check-mobile-first", "identify-breakpoints"],
|
|
416
|
-
},
|
|
417
|
-
{
|
|
418
|
-
id: "add-container-queries",
|
|
419
|
-
title: "添加 Container Queries",
|
|
420
|
-
instruction: [
|
|
421
|
-
"## 为独立组件添加 Container Queries",
|
|
422
|
-
"",
|
|
423
|
-
"**执行动作**:",
|
|
424
|
-
"1. 为候选组件添加 container-type: inline-size",
|
|
425
|
-
"2. 将依赖容器宽度的 @media 改为 @container",
|
|
426
|
-
"3. 使用 @container (min-width: X) 实现组件级响应",
|
|
427
|
-
"4. 确保父元素定义 container 上下文",
|
|
428
|
-
"",
|
|
429
|
-
"**代码示例**:",
|
|
430
|
-
"```css",
|
|
431
|
-
"/* 父容器定义 */",
|
|
432
|
-
".card-container {",
|
|
433
|
-
" container-type: inline-size;",
|
|
434
|
-
" container-name: card;",
|
|
435
|
-
"}",
|
|
436
|
-
"",
|
|
437
|
-
"/* 组件响应容器宽度 */",
|
|
438
|
-
".card {",
|
|
439
|
-
" display: flex;",
|
|
440
|
-
" flex-direction: column;",
|
|
441
|
-
"}",
|
|
442
|
-
"",
|
|
443
|
-
"@container card (min-width: 400px) {",
|
|
444
|
-
" .card {",
|
|
445
|
-
" flex-direction: row;",
|
|
446
|
-
" }",
|
|
447
|
-
"}",
|
|
448
|
-
"```",
|
|
449
|
-
"",
|
|
450
|
-
"**产出格式**:",
|
|
451
|
-
"```markdown",
|
|
452
|
-
"## Container Queries 添加完成",
|
|
453
|
-
"",
|
|
454
|
-
"### 修改组件",
|
|
455
|
-
"- Card: 添加 container-type,转换 2 个媒体查询",
|
|
456
|
-
"- Sidebar: 添加 container-type,转换 3 个媒体查询",
|
|
457
|
-
"",
|
|
458
|
-
"### 浏览器兼容性",
|
|
459
|
-
"- ✅ Chrome 105+, Firefox 110+, Safari 16+",
|
|
460
|
-
"- ⚠️ 需要 @supports 降级方案",
|
|
461
|
-
"```",
|
|
462
|
-
].join("\n"),
|
|
463
|
-
suggestedTools: ["Bash", "Read", "Write"],
|
|
464
|
-
output: "container-queries-added.md",
|
|
465
|
-
depends: ["identify-breakpoints"],
|
|
466
|
-
},
|
|
467
|
-
{
|
|
468
|
-
id: "multi-viewport-test",
|
|
469
|
-
title: "多视口测试验证",
|
|
470
|
-
instruction: [
|
|
471
|
-
"## 多视口截图验证",
|
|
472
|
-
"",
|
|
473
|
-
"**执行动作**:",
|
|
474
|
-
"1. 在关键断点下截图验证布局",
|
|
475
|
-
"2. 测试断点:320px(mobile)、768px(tablet)、1024px(desktop)、1440px(wide)",
|
|
476
|
-
"3. 检查布局是否正确响应",
|
|
477
|
-
"4. 验证 Container Queries 组件在不同容器宽度下的表现",
|
|
478
|
-
"",
|
|
479
|
-
"**Bash 命令示例**:",
|
|
480
|
-
"```bash",
|
|
481
|
-
"# 使用 Puppeteer 或 Playwright 截图",
|
|
482
|
-
"npx playwright screenshot --viewport-size=320,568 http://localhost:3000 mobile.png",
|
|
483
|
-
"npx playwright screenshot --viewport-size=768,1024 http://localhost:3000 tablet.png",
|
|
484
|
-
"npx playwright screenshot --viewport-size=1024,768 http://localhost:3000 desktop.png",
|
|
485
|
-
"npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 wide.png",
|
|
486
|
-
"```",
|
|
487
|
-
"",
|
|
488
|
-
"**产出格式**:",
|
|
489
|
-
"```markdown",
|
|
490
|
-
"## 多视口测试结果",
|
|
491
|
-
"",
|
|
492
|
-
"### 截图",
|
|
493
|
-
"- ✅ mobile-320px.png: 布局正常",
|
|
494
|
-
"- ✅ tablet-768px.png: 布局正常",
|
|
495
|
-
"- ✅ desktop-1024px.png: 布局正常",
|
|
496
|
-
"- ✅ wide-1440px.png: 布局正常",
|
|
497
|
-
"",
|
|
498
|
-
"### Container Queries 测试",
|
|
499
|
-
"- ✅ Card 组件: 在 300px 容器中垂直排列",
|
|
500
|
-
"- ✅ Card 组件: 在 500px 容器中水平排列",
|
|
501
|
-
"- ✅ Sidebar 组件: 正常折叠/展开",
|
|
502
|
-
"```",
|
|
503
|
-
].join("\n"),
|
|
504
|
-
suggestedTools: ["Bash"],
|
|
505
|
-
output: "viewport-test-results.md",
|
|
506
|
-
depends: ["refactor-layout", "add-container-queries"],
|
|
507
|
-
},
|
|
508
|
-
],
|
|
509
|
-
triggers: [{ type: "cli", command: "design:responsive" }],
|
|
510
|
-
},
|
|
511
|
-
{
|
|
512
|
-
name: "design-token-setup",
|
|
513
|
-
description: "Design Token 体系建设:提取 → 分层 → 代码化",
|
|
514
|
-
version: "2.0.0",
|
|
515
|
-
steps: [
|
|
516
|
-
{
|
|
517
|
-
id: "extract-colors",
|
|
518
|
-
title: "提取颜色值",
|
|
519
|
-
instruction: [
|
|
520
|
-
"## 从现有代码提取所有颜色值",
|
|
521
|
-
"",
|
|
522
|
-
"**执行动作**:",
|
|
523
|
-
"1. 搜索所有十六进制颜色值(#fff、#ffffff、#ffffffcc)",
|
|
524
|
-
"2. 搜索所有 rgb/rgba/hsl/hsla 颜色值",
|
|
525
|
-
"3. 搜索所有命名颜色(red、blue 等)",
|
|
526
|
-
"4. 统计每个颜色值的出现次数和文件位置",
|
|
527
|
-
"",
|
|
528
|
-
"**Bash 命令示例**:",
|
|
529
|
-
"```bash",
|
|
530
|
-
"# 提取十六进制颜色",
|
|
531
|
-
"grep -rEo '#[0-9a-fA-F]{3,8}' src/ --include='*.css' --include='*.scss' | \\",
|
|
532
|
-
" awk -F: '{print $2}' | sort | uniq -c | sort -rn",
|
|
533
|
-
"",
|
|
534
|
-
"# 提取 rgb/rgba 颜色",
|
|
535
|
-
"grep -rEo 'rgba?\\([^)]+\\)' src/ --include='*.css' | \\",
|
|
536
|
-
" awk -F: '{print $2}' | sort | uniq -c | sort -rn",
|
|
537
|
-
"```",
|
|
538
|
-
"",
|
|
539
|
-
"**产出格式**:",
|
|
540
|
-
"```json",
|
|
541
|
-
"{",
|
|
542
|
-
" \"hex-colors\": [",
|
|
543
|
-
" { \"value\": \"#3b82f6\", \"count\": 24, \"files\": [\"Button.css\", \"Link.css\"] },",
|
|
544
|
-
" { \"value\": \"#1f2937\", \"count\": 18, \"files\": [\"Text.css\", \"Card.css\"] },",
|
|
545
|
-
" { \"value\": \"#ffffff\", \"count\": 35, \"files\": [\"multiple\"] }",
|
|
546
|
-
" ],",
|
|
547
|
-
" \"rgb-colors\": [",
|
|
548
|
-
" { \"value\": \"rgba(0, 0, 0, 0.5)\", \"count\": 8, \"files\": [\"Overlay.css\"] }",
|
|
549
|
-
" ],",
|
|
550
|
-
" \"total-unique\": 42",
|
|
551
|
-
"}",
|
|
552
|
-
"```",
|
|
553
|
-
].join("\n"),
|
|
554
|
-
suggestedTools: ["Bash", "Read"],
|
|
555
|
-
output: "color-tokens.json",
|
|
556
|
-
},
|
|
557
|
-
{
|
|
558
|
-
id: "extract-spacing",
|
|
559
|
-
title: "提取间距和尺寸值",
|
|
560
|
-
instruction: [
|
|
561
|
-
"## 提取所有间距和尺寸值",
|
|
562
|
-
"",
|
|
563
|
-
"**执行动作**:",
|
|
564
|
-
"1. 提取所有 margin、padding 值",
|
|
565
|
-
"2. 提取所有 width、height、max-width、min-width 值",
|
|
566
|
-
"3. 提取所有 gap、top、right、bottom、left 值",
|
|
567
|
-
"4. 统计每个数值的出现频率",
|
|
568
|
-
"",
|
|
569
|
-
"**Bash 命令示例**:",
|
|
570
|
-
"```bash",
|
|
571
|
-
"# 提取 margin/padding 值",
|
|
572
|
-
"grep -rE '(margin|padding)(-top|-right|-bottom|-left)?:\\s*[0-9]+px' src/ --include='*.css' | \\",
|
|
573
|
-
" grep -oE '[0-9]+px' | sort -n | uniq -c | sort -rn",
|
|
574
|
-
"",
|
|
575
|
-
"# 提取 gap 值",
|
|
576
|
-
"grep -rE 'gap:\\s*[0-9]+px' src/ --include='*.css' | \\",
|
|
577
|
-
" grep -oE '[0-9]+px' | sort -n | uniq -c | sort -rn",
|
|
578
|
-
"```",
|
|
579
|
-
"",
|
|
580
|
-
"**产出格式**:",
|
|
581
|
-
"```json",
|
|
582
|
-
"{",
|
|
583
|
-
" \"spacing-values\": [",
|
|
584
|
-
" { \"value\": \"16px\", \"count\": 45, \"usage\": [\"margin\", \"padding\", \"gap\"] },",
|
|
585
|
-
" { \"value\": \"8px\", \"count\": 38, \"usage\": [\"margin\", \"padding\"] },",
|
|
586
|
-
" { \"value\": \"24px\", \"count\": 22, \"usage\": [\"margin\", \"padding\"] },",
|
|
587
|
-
" { \"value\": \"32px\", \"count\": 15, \"usage\": [\"margin\", \"padding\"] }",
|
|
588
|
-
" ],",
|
|
589
|
-
" \"sizing-values\": [",
|
|
590
|
-
" { \"value\": \"100%\", \"count\": 28 },",
|
|
591
|
-
" { \"value\": \"auto\", \"count\": 20 },",
|
|
592
|
-
" { \"value\": \"1200px\", \"count\": 5 }",
|
|
593
|
-
" ],",
|
|
594
|
-
" \"scale-compliance\": {",
|
|
595
|
-
" \"4px-multiple\": 85,",
|
|
596
|
-
" \"non-standard\": 15",
|
|
597
|
-
" }",
|
|
598
|
-
"}",
|
|
599
|
-
"```",
|
|
600
|
-
].join("\n"),
|
|
601
|
-
suggestedTools: ["Bash", "Read"],
|
|
602
|
-
output: "spacing-tokens.json",
|
|
603
|
-
depends: [],
|
|
604
|
-
},
|
|
605
|
-
{
|
|
606
|
-
id: "group-tokens",
|
|
607
|
-
title: "按三层架构分组 Token",
|
|
608
|
-
instruction: [
|
|
609
|
-
"## 按 Global/Alias/Component 三层分组",
|
|
610
|
-
"",
|
|
611
|
-
"**执行动作**:",
|
|
612
|
-
"1. 将颜色、间距值分类为 Global Token(基础值)",
|
|
613
|
-
"2. 创建 Alias Token(语义化名称如 color-primary、spacing-md)",
|
|
614
|
-
"3. 识别 Component Token(组件级如 button-bg、card-padding)",
|
|
615
|
-
"4. 建立 Token 命名规范",
|
|
616
|
-
"",
|
|
617
|
-
"**Token 分层示例**:",
|
|
618
|
-
"```",
|
|
619
|
-
"Global Token(基础值):",
|
|
620
|
-
"- blue-500: #3b82f6",
|
|
621
|
-
"- gray-900: #1f2937",
|
|
622
|
-
"- spacing-4: 16px",
|
|
623
|
-
"",
|
|
624
|
-
"Alias Token(语义化):",
|
|
625
|
-
"- color-primary: {blue-500}",
|
|
626
|
-
"- color-text: {gray-900}",
|
|
627
|
-
"- spacing-md: {spacing-4}",
|
|
628
|
-
"",
|
|
629
|
-
"Component Token(组件级):",
|
|
630
|
-
"- button-bg-primary: {color-primary}",
|
|
631
|
-
"- card-padding: {spacing-md}",
|
|
632
|
-
"```",
|
|
633
|
-
"",
|
|
634
|
-
"**产出格式**:",
|
|
635
|
-
"```json",
|
|
636
|
-
"{",
|
|
637
|
-
" \"global\": {",
|
|
638
|
-
" \"colors\": { \"blue-500\": \"#3b82f6\", \"gray-900\": \"#1f2937\" },",
|
|
639
|
-
" \"spacing\": { \"spacing-4\": \"16px\", \"spacing-6\": \"24px\" }",
|
|
640
|
-
" },",
|
|
641
|
-
" \"alias\": {",
|
|
642
|
-
" \"color-primary\": \"{blue-500}\",",
|
|
643
|
-
" \"color-text\": \"{gray-900}\",",
|
|
644
|
-
" \"spacing-md\": \"{spacing-4}\"",
|
|
645
|
-
" },",
|
|
646
|
-
" \"component\": {",
|
|
647
|
-
" \"button-bg-primary\": \"{color-primary}\",",
|
|
648
|
-
" \"card-padding\": \"{spacing-md}\"",
|
|
649
|
-
" }",
|
|
650
|
-
"}",
|
|
651
|
-
"```",
|
|
652
|
-
].join("\n"),
|
|
653
|
-
suggestedTools: ["Read"],
|
|
654
|
-
output: "token-hierarchy.json",
|
|
655
|
-
depends: ["extract-colors", "extract-spacing"],
|
|
656
|
-
},
|
|
657
|
-
{
|
|
658
|
-
id: "generate-tokens",
|
|
659
|
-
title: "生成 CSS 变量 Token 文件",
|
|
660
|
-
instruction: [
|
|
661
|
-
"## 生成 CSS 变量 Token 文件",
|
|
662
|
-
"",
|
|
663
|
-
"**执行动作**:",
|
|
664
|
-
"1. 将 Token 分层转换为 CSS 变量",
|
|
665
|
-
"2. 在 :root 中定义 Global 和 Alias Token",
|
|
666
|
-
"3. 为 Dark 主题创建 [data-theme=\"dark\"] 变量覆盖",
|
|
667
|
-
"4. 添加 Component Token 到对应组件文件",
|
|
668
|
-
"",
|
|
669
|
-
"**代码生成示例**:",
|
|
670
|
-
"```css",
|
|
671
|
-
"/* src/styles/tokens.css */",
|
|
672
|
-
":root {",
|
|
673
|
-
" /* Global Tokens */",
|
|
674
|
-
" --color-blue-500: #3b82f6;",
|
|
675
|
-
" --color-gray-900: #1f2937;",
|
|
676
|
-
" --spacing-4: 16px;",
|
|
677
|
-
" --spacing-6: 24px;",
|
|
678
|
-
"",
|
|
679
|
-
" /* Alias Tokens */",
|
|
680
|
-
" --color-primary: var(--color-blue-500);",
|
|
681
|
-
" --color-text: var(--color-gray-900);",
|
|
682
|
-
" --spacing-md: var(--spacing-4);",
|
|
683
|
-
"}",
|
|
684
|
-
"",
|
|
685
|
-
"[data-theme=\"dark\"] {",
|
|
686
|
-
" --color-primary: #60a5fa;",
|
|
687
|
-
" --color-text: #f9fafb;",
|
|
688
|
-
"}",
|
|
689
|
-
"```",
|
|
690
|
-
"",
|
|
691
|
-
"**产出格式**:",
|
|
692
|
-
"```markdown",
|
|
693
|
-
"## Token 文件生成完成",
|
|
694
|
-
"",
|
|
695
|
-
"### 生成文件",
|
|
696
|
-
"- src/styles/tokens.css: 45 个 CSS 变量",
|
|
697
|
-
" - Global: 20 个",
|
|
698
|
-
" - Alias: 15 个",
|
|
699
|
-
" - Component: 10 个",
|
|
700
|
-
"",
|
|
701
|
-
"### Dark 主题",
|
|
702
|
-
"- ✅ 已生成 [data-theme=\"dark\"] 覆盖",
|
|
703
|
-
"- ✅ 覆盖 8 个 Alias Token",
|
|
704
|
-
"```",
|
|
705
|
-
].join("\n"),
|
|
706
|
-
suggestedTools: ["Write"],
|
|
707
|
-
output: "tokens-generated.md",
|
|
708
|
-
depends: ["group-tokens"],
|
|
709
|
-
},
|
|
710
|
-
{
|
|
711
|
-
id: "replace-hardcoded",
|
|
712
|
-
title: "替换硬编码值为 Token 引用",
|
|
713
|
-
instruction: [
|
|
714
|
-
"## 替换硬编码值为 Token 引用",
|
|
715
|
-
"",
|
|
716
|
-
"**执行动作**:",
|
|
717
|
-
"1. 搜索所有硬编码的颜色值",
|
|
718
|
-
"2. 搜索所有硬编码的间距值",
|
|
719
|
-
"3. 将硬编码值替换为对应的 CSS 变量",
|
|
720
|
-
"4. 确保替换后样式不变",
|
|
721
|
-
"",
|
|
722
|
-
"**Bash 命令示例**:",
|
|
723
|
-
"```bash",
|
|
724
|
-
"# 查找硬编码颜色",
|
|
725
|
-
"grep -rn '#3b82f6' src/ --include='*.css'",
|
|
726
|
-
"",
|
|
727
|
-
"# 查找硬编码间距",
|
|
728
|
-
"grep -rn 'padding: 16px' src/ --include='*.css'",
|
|
729
|
-
"```",
|
|
730
|
-
"",
|
|
731
|
-
"**代码替换示例**:",
|
|
732
|
-
"```css",
|
|
733
|
-
"/* ❌ 硬编码 */",
|
|
734
|
-
".button {",
|
|
735
|
-
" background: #3b82f6;",
|
|
736
|
-
" padding: 16px;",
|
|
737
|
-
"}",
|
|
738
|
-
"",
|
|
739
|
-
"/* ✅ Token 引用 */",
|
|
740
|
-
".button {",
|
|
741
|
-
" background: var(--color-primary);",
|
|
742
|
-
" padding: var(--spacing-md);",
|
|
743
|
-
"}",
|
|
744
|
-
"```",
|
|
745
|
-
"",
|
|
746
|
-
"**产出格式**:",
|
|
747
|
-
"```markdown",
|
|
748
|
-
"## Token 替换完成",
|
|
749
|
-
"",
|
|
750
|
-
"### 替换统计",
|
|
751
|
-
"- 颜色值替换: 42 处",
|
|
752
|
-
"- 间距值替换: 68 处",
|
|
753
|
-
"- 总替换: 110 处",
|
|
754
|
-
"",
|
|
755
|
-
"### 修改文件",
|
|
756
|
-
"- src/components/Button.css: 8 处",
|
|
757
|
-
"- src/components/Card.css: 12 处",
|
|
758
|
-
"- src/styles/layout.css: 15 处",
|
|
759
|
-
"- ... (其他 25 个文件)",
|
|
760
|
-
"",
|
|
761
|
-
"### 验证",
|
|
762
|
-
"- ✅ 所有硬编码值已替换",
|
|
763
|
-
"- ✅ 样式无变化",
|
|
764
|
-
"```",
|
|
765
|
-
].join("\n"),
|
|
766
|
-
suggestedTools: ["Bash", "Read", "Write"],
|
|
767
|
-
output: "token-replacement.md",
|
|
768
|
-
depends: ["generate-tokens"],
|
|
769
|
-
},
|
|
770
|
-
{
|
|
771
|
-
id: "visual-regression",
|
|
772
|
-
title: "视觉回归测试",
|
|
773
|
-
instruction: [
|
|
774
|
-
"## 视觉回归测试确认无差异",
|
|
775
|
-
"",
|
|
776
|
-
"**执行动作**:",
|
|
777
|
-
"1. 在替换前后分别截图",
|
|
778
|
-
"2. 使用像素对比工具检测差异",
|
|
779
|
-
"3. 确认所有页面视觉无变化",
|
|
780
|
-
"4. 记录任何意外差异并修复",
|
|
781
|
-
"",
|
|
782
|
-
"**Bash 命令示例**:",
|
|
783
|
-
"```bash",
|
|
784
|
-
"# 使用 Playwright 截图对比",
|
|
785
|
-
"npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 before.png",
|
|
786
|
-
"",
|
|
787
|
-
"# 替换后再次截图",
|
|
788
|
-
"npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 after.png",
|
|
789
|
-
"",
|
|
790
|
-
"# 使用像素对比工具",
|
|
791
|
-
"npx pixelmatch before.png after.png diff.png --threshold=0.1",
|
|
792
|
-
"```",
|
|
793
|
-
"",
|
|
794
|
-
"**产出格式**:",
|
|
795
|
-
"```markdown",
|
|
796
|
-
"## 视觉回归测试结果",
|
|
797
|
-
"",
|
|
798
|
-
"### 测试结果",
|
|
799
|
-
"- ✅ 首页: 无差异 (0% 像素变化)",
|
|
800
|
-
"- ✅ 产品页: 无差异 (0% 像素变化)",
|
|
801
|
-
"- ✅ 联系页: 无差异 (0% 像素变化)",
|
|
802
|
-
"- ✅ 所有页面: 视觉完全一致",
|
|
803
|
-
"",
|
|
804
|
-
"### 截图对比",
|
|
805
|
-
"- before-home.png vs after-home.png: ✅ 匹配",
|
|
806
|
-
"- before-product.png vs after-product.png: ✅ 匹配",
|
|
807
|
-
"",
|
|
808
|
-
"### 结论",
|
|
809
|
-
"- ✅ Token 替换成功",
|
|
810
|
-
"- ✅ 样式无变化",
|
|
811
|
-
"- ✅ 可以安全部署",
|
|
812
|
-
"```",
|
|
813
|
-
].join("\n"),
|
|
814
|
-
suggestedTools: ["Bash"],
|
|
815
|
-
output: "visual-regression-results.md",
|
|
816
|
-
depends: ["replace-hardcoded"],
|
|
817
|
-
},
|
|
818
|
-
],
|
|
819
|
-
triggers: [{ type: "cli", command: "setup:design-tokens" }],
|
|
820
|
-
},
|
|
821
|
-
],
|
|
822
|
-
},
|
|
823
|
-
prompt: {
|
|
824
|
-
system: "你是一个 UI Layout 专家。精通 CSS Grid、Flexbox 和响应式设计。使用 Design Token 体系管理样式变量。",
|
|
825
|
-
rules: [
|
|
826
|
-
"优先使用 CSS Grid 做页面布局,Flexbox 做组件内排列",
|
|
827
|
-
"使用容器查询实现组件级响应式",
|
|
828
|
-
"间距遵循 4px 倍数的 Scale 体系",
|
|
829
|
-
"使用语义化 HTML(header/nav/main/aside/footer)",
|
|
830
|
-
"移动优先设计,渐进增强",
|
|
831
|
-
"使用 CSS 变量管理 Design Token",
|
|
832
|
-
"确保触控目标 ≥ 44×44px,对比度 ≥ 4.5:1",
|
|
833
|
-
],
|
|
834
|
-
},
|
|
835
|
-
tools: [
|
|
836
|
-
{
|
|
837
|
-
name: 'ui_layout_generate',
|
|
838
|
-
description: '生成布局代码:sidebar/header/grid,响应式 + 暗色模式支持',
|
|
839
|
-
inputSchema: {
|
|
840
|
-
type: 'object',
|
|
841
|
-
properties: {
|
|
842
|
-
layoutType: { type: 'string', enum: ['sidebar', 'header', 'grid'], description: '布局类型' },
|
|
843
|
-
componentName: { type: 'string', description: '组件名称' },
|
|
844
|
-
},
|
|
845
|
-
required: ['layoutType'],
|
|
846
|
-
},
|
|
847
|
-
handler: async (input) => {
|
|
848
|
-
const { generateLayout } = await import('./analyzers/generate-layout.js');
|
|
849
|
-
return generateLayout(input);
|
|
850
|
-
},
|
|
851
|
-
},
|
|
852
|
-
],
|
|
853
|
-
};
|
|
854
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|