@kvasar/google-stitch 0.1.5 → 0.1.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.
Files changed (3) hide show
  1. package/openclaw.plugin.json +1 -1
  2. package/package.json +2 -1
  3. package/skills/SKILL.md +226 -0
package/openclaw.plugin.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "id": "openclaw-google-stitch",
3
3
  "name": "Google Stitch MCP",
4
- "version": "0.1.5",
4
+ "version": "0.1.6",
5
5
  "description": "Integrates Google Stitch MCP services into OpenClaw",
6
6
  "skills": ["skills"],
7
7
  "configSchema": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvasar/google-stitch",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "OpenClaw plugin for Google Stitch UI generation, screen design, variants, and design systems",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -8,6 +8,7 @@
8
8
  "index.ts",
9
9
  "src/",
10
10
  "openclaw.plugin.json",
11
+ "skills/",
11
12
  "tsconfig.json",
12
13
  "README.md",
13
14
  "SKILL.md"
package/skills/SKILL.md ADDED
@@ -0,0 +1,226 @@
1
+ ---
2
+ name: google-stitch
3
+ description: Use Google Stitch to create projects, generate UI screens, edit existing designs, create variants, and manage design systems for web and mobile applications.
4
+ metadata:
5
+ openclaw:
6
+ emoji: "🧵"
7
+ author: Jordi Marti
8
+ version: "1.0"
9
+ ---
10
+
11
+ # Google Stitch Skill
12
+
13
+ Use this skill whenever the user wants to:
14
+
15
+ - design application screens
16
+ - generate UI from prompts
17
+ - create wireframes
18
+ - build prototypes
19
+ - create landing pages
20
+ - design mobile apps
21
+ - improve UX layouts
22
+ - generate screen variants
23
+ - define or apply design systems
24
+ - create product mockups
25
+
26
+ ---
27
+
28
+ ## Trigger phrases
29
+
30
+ Activate when the user mentions:
31
+
32
+ - stitch
33
+ - google stitch
34
+ - create ui
35
+ - design screen
36
+ - screen flow
37
+ - wireframe
38
+ - mockup
39
+ - landing page
40
+ - mobile screen
41
+ - dashboard design
42
+ - edit design
43
+ - generate variants
44
+ - design system
45
+ - brand theme
46
+
47
+ ---
48
+
49
+ ## Tool routing guidance
50
+
51
+ Use the appropriate Stitch tool depending on the user request.
52
+
53
+ ### Project management
54
+
55
+ If the user wants to start a new design workspace:
56
+
57
+ - `create_project`
58
+
59
+ Examples:
60
+
61
+ - create a new project
62
+ - start a new app design
63
+ - create design workspace
64
+
65
+ If the user wants existing project info:
66
+
67
+ - `get_project`
68
+ - `list_projects`
69
+
70
+ ---
71
+
72
+ ### Screen generation
73
+
74
+ For new screens from prompts:
75
+
76
+ - `generate_screen_from_text`
77
+
78
+ Examples:
79
+
80
+ - create login page
81
+ - generate dashboard
82
+ - build landing page
83
+ - design mobile onboarding
84
+
85
+ Always extract:
86
+
87
+ - projectId
88
+ - prompt
89
+ - deviceType
90
+ - preferred model
91
+
92
+ Preferred model:
93
+
94
+ - `GEMINI_3_1_PRO`
95
+
96
+ ---
97
+
98
+ ### Screen editing
99
+
100
+ For modifying existing screens:
101
+
102
+ - `edit_screens`
103
+
104
+ Examples:
105
+
106
+ - make button blue
107
+ - add navbar
108
+ - improve spacing
109
+ - dark mode layout
110
+
111
+ ---
112
+
113
+ ### Design exploration
114
+
115
+ For alternative designs:
116
+
117
+ - `generate_variants`
118
+
119
+ Use when the user requests:
120
+
121
+ - alternatives
122
+ - redesign options
123
+ - multiple versions
124
+ - color experiments
125
+ - layout exploration
126
+
127
+ Recommended defaults:
128
+
129
+ - variantCount: 3
130
+ - creativeRange: EXPLORE
131
+
132
+ ---
133
+
134
+ ### Design systems
135
+
136
+ For brand consistency and theming:
137
+
138
+ - `create_design_system`
139
+ - `update_design_system`
140
+ - `list_design_systems`
141
+ - `apply_design_system`
142
+
143
+ Examples:
144
+
145
+ - create dark theme
146
+ - use Inter font
147
+ - rounded buttons
148
+ - apply brand colors
149
+
150
+ ---
151
+
152
+ ## UX generation guidance
153
+
154
+ Before generating screens, identify:
155
+
156
+ - user persona
157
+ - main task
158
+ - primary CTA
159
+ - navigation pattern
160
+ - responsive behavior
161
+ - empty/error states
162
+
163
+ Always prefer full journeys over isolated screens.
164
+
165
+ Recommended flow:
166
+
167
+ - landing
168
+ - sign in
169
+ - dashboard
170
+ - detail
171
+ - settings
172
+ - success / error states
173
+
174
+ ---
175
+
176
+ ## UX quality rules
177
+
178
+ Always optimize for:
179
+
180
+ - clarity
181
+ - usability
182
+ - responsive layout
183
+ - modern SaaS aesthetics
184
+ - conversion-oriented design
185
+
186
+ Prefer:
187
+
188
+ - card layouts
189
+ - clean typography
190
+ - strong CTA hierarchy
191
+ - consistent spacing
192
+ - reusable sections
193
+ - enterprise-ready UI
194
+
195
+ ---
196
+
197
+ ## Prompt enhancement rules
198
+
199
+ If the user request is vague, improve it before generation.
200
+
201
+ Example:
202
+
203
+ Input:
204
+ > create dashboard
205
+
206
+ Enhanced prompt:
207
+ > Generate a modern SaaS dashboard with KPI cards, task progress chart, recent activity feed, filters, and left-side navigation.
208
+
209
+ Always enrich prompts with:
210
+
211
+ - hierarchy
212
+ - layout intent
213
+ - CTA actions
214
+ - component structure
215
+ - visual style
216
+
217
+ ---
218
+
219
+ ## Output expectations
220
+
221
+ Focus on:
222
+
223
+ - realistic production UI
224
+ - startup / enterprise SaaS design
225
+ - scalable UX patterns
226
+ - modern component systems