picasso-skill 2.1.2 → 2.3.0
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/agents/picasso.md +172 -62
- package/commands/figma.md +97 -0
- package/commands/godmode.md +14 -2
- package/commands/mood.md +44 -10
- package/commands/preset.md +40 -10
- package/commands/preview.md +52 -0
- package/commands/roast.md +22 -7
- package/commands/score.md +21 -3
- package/commands/steal.md +37 -6
- package/commands/variants.md +31 -12
- package/package.json +1 -1
- package/references/figma-mcp.md +190 -0
- package/references/visual-preview.md +359 -0
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
# Visual Preview Reference
|
|
2
|
+
|
|
3
|
+
Generate self-contained HTML previews to show users what design options look like before they commit. This replaces text-only descriptions with actual visual examples.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 1. The Preview Protocol
|
|
8
|
+
|
|
9
|
+
Every time Picasso presents 2+ aesthetic options for the user to choose from, generate a visual preview. Text-only option lists are banned for aesthetic decisions.
|
|
10
|
+
|
|
11
|
+
### Standard Flow
|
|
12
|
+
|
|
13
|
+
1. **Generate** a self-contained HTML file with inline styles and font imports
|
|
14
|
+
2. **Write** to `/tmp/picasso-preview-{name}.html`
|
|
15
|
+
3. **Open** via Playwright MCP: `mcp__playwright__browser_navigate` to `file:///tmp/picasso-preview-{name}.html`
|
|
16
|
+
4. **Screenshot** via `mcp__playwright__browser_take_screenshot`
|
|
17
|
+
5. **View** the screenshot with `Read` tool (mandatory -- never skip this)
|
|
18
|
+
6. **Present** to the user with the file path so they can also open it in their browser
|
|
19
|
+
|
|
20
|
+
### If Playwright MCP Is Unavailable
|
|
21
|
+
|
|
22
|
+
1. Write the HTML file to `/tmp/`
|
|
23
|
+
2. Tell the user: "I've generated a visual preview at `/tmp/picasso-preview-{name}.html` -- open it in your browser to see the options."
|
|
24
|
+
3. Do NOT make visual claims about what the preview looks like without viewing it
|
|
25
|
+
|
|
26
|
+
### File Naming
|
|
27
|
+
|
|
28
|
+
- Interview aesthetics: `/tmp/picasso-interview-vibes.html`
|
|
29
|
+
- Design brief preview: `/tmp/picasso-brief-preview.html`
|
|
30
|
+
- Variants comparison: `/tmp/picasso-variants.html`
|
|
31
|
+
- Mood preview: `/tmp/picasso-mood-{word}.html`
|
|
32
|
+
- Preset browser: `/tmp/picasso-preset-browser.html`
|
|
33
|
+
- Standalone preview: `/tmp/picasso-preview.html`
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## 2. HTML Template: Side-by-Side Direction Comparison
|
|
38
|
+
|
|
39
|
+
Use this when showing 2-4 aesthetic directions for the user to choose from (interview, /variants, /preview compare).
|
|
40
|
+
|
|
41
|
+
Generate the full HTML dynamically. For each direction, substitute the actual font, colors, radius, and spacing values. The template below is a structural guide -- adapt the content to match each specific direction.
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<!DOCTYPE html>
|
|
45
|
+
<html lang="en">
|
|
46
|
+
<head>
|
|
47
|
+
<meta charset="UTF-8">
|
|
48
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
49
|
+
<title>Picasso: Choose a Direction</title>
|
|
50
|
+
<!-- Import fonts for all directions shown -->
|
|
51
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
52
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
53
|
+
<link href="https://fonts.googleapis.com/css2?family={FONT_1}&family={FONT_2}&family={FONT_3}&display=swap" rel="stylesheet">
|
|
54
|
+
<style>
|
|
55
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
56
|
+
body {
|
|
57
|
+
font-family: system-ui, sans-serif;
|
|
58
|
+
background: #f5f5f5;
|
|
59
|
+
padding: 32px;
|
|
60
|
+
color: #1a1a1a;
|
|
61
|
+
}
|
|
62
|
+
h1 {
|
|
63
|
+
text-align: center;
|
|
64
|
+
font-size: 20px;
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
margin-bottom: 8px;
|
|
67
|
+
letter-spacing: -0.02em;
|
|
68
|
+
}
|
|
69
|
+
.subtitle {
|
|
70
|
+
text-align: center;
|
|
71
|
+
font-size: 13px;
|
|
72
|
+
color: #666;
|
|
73
|
+
margin-bottom: 32px;
|
|
74
|
+
}
|
|
75
|
+
.grid {
|
|
76
|
+
display: grid;
|
|
77
|
+
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
|
78
|
+
gap: 24px;
|
|
79
|
+
max-width: 1200px;
|
|
80
|
+
margin: 0 auto;
|
|
81
|
+
}
|
|
82
|
+
.direction {
|
|
83
|
+
border-radius: 12px;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
86
|
+
}
|
|
87
|
+
.direction-label {
|
|
88
|
+
padding: 12px 16px;
|
|
89
|
+
font-size: 13px;
|
|
90
|
+
font-weight: 600;
|
|
91
|
+
letter-spacing: 0.05em;
|
|
92
|
+
text-transform: uppercase;
|
|
93
|
+
background: #fff;
|
|
94
|
+
border-bottom: 1px solid #eee;
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: space-between;
|
|
98
|
+
}
|
|
99
|
+
.direction-label span {
|
|
100
|
+
font-size: 11px;
|
|
101
|
+
font-weight: 400;
|
|
102
|
+
text-transform: none;
|
|
103
|
+
letter-spacing: 0;
|
|
104
|
+
color: #999;
|
|
105
|
+
}
|
|
106
|
+
/* Each .preview is a mini page rendered in the direction's style */
|
|
107
|
+
.preview {
|
|
108
|
+
padding: 24px;
|
|
109
|
+
min-height: 400px;
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
gap: 16px;
|
|
113
|
+
}
|
|
114
|
+
/* Palette strip */
|
|
115
|
+
.palette {
|
|
116
|
+
display: flex;
|
|
117
|
+
gap: 4px;
|
|
118
|
+
height: 24px;
|
|
119
|
+
border-radius: 4px;
|
|
120
|
+
overflow: hidden;
|
|
121
|
+
}
|
|
122
|
+
.palette .swatch {
|
|
123
|
+
flex: 1;
|
|
124
|
+
position: relative;
|
|
125
|
+
}
|
|
126
|
+
/* Sample nav */
|
|
127
|
+
.sample-nav {
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: space-between;
|
|
131
|
+
padding: 8px 0;
|
|
132
|
+
}
|
|
133
|
+
.sample-nav .logo {
|
|
134
|
+
font-weight: 700;
|
|
135
|
+
font-size: 15px;
|
|
136
|
+
}
|
|
137
|
+
.sample-nav .links {
|
|
138
|
+
display: flex;
|
|
139
|
+
gap: 16px;
|
|
140
|
+
font-size: 12px;
|
|
141
|
+
opacity: 0.6;
|
|
142
|
+
}
|
|
143
|
+
/* Sample card */
|
|
144
|
+
.sample-card {
|
|
145
|
+
padding: 16px;
|
|
146
|
+
display: flex;
|
|
147
|
+
flex-direction: column;
|
|
148
|
+
gap: 8px;
|
|
149
|
+
}
|
|
150
|
+
.sample-card h3 {
|
|
151
|
+
font-size: 16px;
|
|
152
|
+
font-weight: 600;
|
|
153
|
+
}
|
|
154
|
+
.sample-card p {
|
|
155
|
+
font-size: 12px;
|
|
156
|
+
line-height: 1.6;
|
|
157
|
+
opacity: 0.7;
|
|
158
|
+
}
|
|
159
|
+
/* Sample button */
|
|
160
|
+
.sample-btn {
|
|
161
|
+
display: inline-flex;
|
|
162
|
+
align-items: center;
|
|
163
|
+
justify-content: center;
|
|
164
|
+
padding: 8px 20px;
|
|
165
|
+
font-size: 12px;
|
|
166
|
+
font-weight: 600;
|
|
167
|
+
border: none;
|
|
168
|
+
cursor: pointer;
|
|
169
|
+
width: fit-content;
|
|
170
|
+
}
|
|
171
|
+
/* Sample input */
|
|
172
|
+
.sample-input {
|
|
173
|
+
padding: 8px 12px;
|
|
174
|
+
font-size: 12px;
|
|
175
|
+
border: 1px solid;
|
|
176
|
+
background: transparent;
|
|
177
|
+
width: 100%;
|
|
178
|
+
}
|
|
179
|
+
/* Font info footer */
|
|
180
|
+
.font-info {
|
|
181
|
+
font-size: 10px;
|
|
182
|
+
opacity: 0.4;
|
|
183
|
+
padding-top: 8px;
|
|
184
|
+
border-top: 1px solid;
|
|
185
|
+
border-color: inherit;
|
|
186
|
+
}
|
|
187
|
+
</style>
|
|
188
|
+
</head>
|
|
189
|
+
<body>
|
|
190
|
+
|
|
191
|
+
<h1>Choose a Direction</h1>
|
|
192
|
+
<p class="subtitle">Pick one, combine elements, or describe something different.</p>
|
|
193
|
+
|
|
194
|
+
<div class="grid">
|
|
195
|
+
|
|
196
|
+
<!-- Direction A -->
|
|
197
|
+
<div class="direction">
|
|
198
|
+
<div class="direction-label">
|
|
199
|
+
A: {DIRECTION_A_NAME}
|
|
200
|
+
<span>{DIRECTION_A_VIBE}</span>
|
|
201
|
+
</div>
|
|
202
|
+
<div class="preview" style="background: {A_BG}; color: {A_TEXT}; font-family: '{A_BODY_FONT}', sans-serif;">
|
|
203
|
+
<div class="palette">
|
|
204
|
+
<div class="swatch" style="background: {A_COLOR_1};"></div>
|
|
205
|
+
<div class="swatch" style="background: {A_COLOR_2};"></div>
|
|
206
|
+
<div class="swatch" style="background: {A_COLOR_3};"></div>
|
|
207
|
+
<div class="swatch" style="background: {A_COLOR_4};"></div>
|
|
208
|
+
<div class="swatch" style="background: {A_COLOR_5};"></div>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="sample-nav">
|
|
211
|
+
<div class="logo" style="font-family: '{A_HEADING_FONT}', sans-serif;">AppName</div>
|
|
212
|
+
<div class="links">Features Pricing Docs</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div style="font-family: '{A_HEADING_FONT}', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;">
|
|
215
|
+
Build something people actually want
|
|
216
|
+
</div>
|
|
217
|
+
<div style="font-size: 13px; line-height: 1.6; opacity: 0.7;">
|
|
218
|
+
A short description that shows what body text looks like in this direction. Notice the font, weight, and spacing.
|
|
219
|
+
</div>
|
|
220
|
+
<div class="sample-card" style="background: {A_SURFACE}; border-radius: {A_RADIUS};">
|
|
221
|
+
<h3 style="font-family: '{A_HEADING_FONT}', sans-serif;">Sample Card</h3>
|
|
222
|
+
<p>This is how cards look in this direction. Pay attention to padding, radius, and depth.</p>
|
|
223
|
+
</div>
|
|
224
|
+
<div style="display: flex; gap: 8px;">
|
|
225
|
+
<div class="sample-btn" style="background: {A_PRIMARY}; color: {A_PRIMARY_TEXT}; border-radius: {A_RADIUS};">
|
|
226
|
+
Primary Action
|
|
227
|
+
</div>
|
|
228
|
+
<div class="sample-btn" style="background: transparent; color: {A_TEXT}; border: 1px solid {A_BORDER}; border-radius: {A_RADIUS};">
|
|
229
|
+
Secondary
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="sample-input" style="border-color: {A_BORDER}; border-radius: {A_RADIUS}; color: {A_TEXT};" placeholder="Input field...">
|
|
233
|
+
Input field...
|
|
234
|
+
</div>
|
|
235
|
+
<div class="font-info">
|
|
236
|
+
{A_HEADING_FONT} + {A_BODY_FONT} · {A_RADIUS} radius
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<!-- Repeat for Direction B, C, D... -->
|
|
242
|
+
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
</body>
|
|
246
|
+
</html>
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### How to Use This Template
|
|
250
|
+
|
|
251
|
+
1. Do NOT copy-paste this template literally. Generate the HTML dynamically with actual values substituted for each direction.
|
|
252
|
+
2. Each `{PLACEHOLDER}` must be replaced with real values from the direction you're previewing.
|
|
253
|
+
3. The font `<link>` tag must include ALL fonts used across ALL directions being compared.
|
|
254
|
+
4. The number of directions (2, 3, or 4) determines the grid columns.
|
|
255
|
+
5. Keep the preview compact -- users should see all options without scrolling.
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
## 3. HTML Template: Full Page Mood Preview
|
|
260
|
+
|
|
261
|
+
Use this for /mood and Design Brief previews. Shows a complete page layout in the specified style.
|
|
262
|
+
|
|
263
|
+
Generate a full-page HTML that includes:
|
|
264
|
+
- A navigation bar with logo text, 3-4 links, and a CTA button
|
|
265
|
+
- A hero section with a large heading, subtitle, and primary button
|
|
266
|
+
- A 3-column feature/card section
|
|
267
|
+
- A form section with an input and button
|
|
268
|
+
- A footer with muted text
|
|
269
|
+
|
|
270
|
+
All styled with the mood's tokens (colors, fonts, radius, spacing). The content should be generic but realistic (not lorem ipsum). Size the page to 1440px viewport width.
|
|
271
|
+
|
|
272
|
+
---
|
|
273
|
+
|
|
274
|
+
## 4. HTML Template: Preset Browser Grid
|
|
275
|
+
|
|
276
|
+
Use this for /preset without arguments. Shows all presets as a browsable grid.
|
|
277
|
+
|
|
278
|
+
Generate an HTML page with:
|
|
279
|
+
- A title: "Picasso Style Presets"
|
|
280
|
+
- A grid of cards (4 columns, wrapping), one per preset
|
|
281
|
+
- Each card shows:
|
|
282
|
+
- Preset name (in the preset's heading font)
|
|
283
|
+
- A 5-swatch color palette strip
|
|
284
|
+
- A one-line mood description
|
|
285
|
+
- A tiny sample button in the preset's primary color and radius
|
|
286
|
+
- Cards should be ~280px wide, ~180px tall
|
|
287
|
+
- The card background should use the preset's surface color
|
|
288
|
+
- Card text should use the preset's text color
|
|
289
|
+
|
|
290
|
+
This gives users a visual catalog to browse before choosing.
|
|
291
|
+
|
|
292
|
+
---
|
|
293
|
+
|
|
294
|
+
## 5. Font Loading
|
|
295
|
+
|
|
296
|
+
### Google Fonts
|
|
297
|
+
|
|
298
|
+
Most fonts can be loaded via Google Fonts. Construct the URL:
|
|
299
|
+
```
|
|
300
|
+
https://fonts.googleapis.com/css2?family={FontName}:wght@400;600;700&display=swap
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
Replace spaces with `+` in font names.
|
|
304
|
+
|
|
305
|
+
### Fontshare (for fonts not on Google)
|
|
306
|
+
|
|
307
|
+
Some popular Picasso fonts are on Fontshare:
|
|
308
|
+
```
|
|
309
|
+
https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap
|
|
310
|
+
https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,700,800&display=swap
|
|
311
|
+
https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap
|
|
312
|
+
https://api.fontshare.com/v2/css?f[]=clash-display@400,600,700&display=swap
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
### Common Font Mappings
|
|
316
|
+
|
|
317
|
+
| Font Name | Source | Import URL |
|
|
318
|
+
|-----------|--------|-----------|
|
|
319
|
+
| Satoshi | Fontshare | `https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap` |
|
|
320
|
+
| Cabinet Grotesk | Fontshare | `https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,700,800&display=swap` |
|
|
321
|
+
| General Sans | Fontshare | `https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap` |
|
|
322
|
+
| Clash Display | Fontshare | `https://api.fontshare.com/v2/css?f[]=clash-display@400,600,700&display=swap` |
|
|
323
|
+
| Archivo Black | Google | `family=Archivo+Black&display=swap` |
|
|
324
|
+
| Manrope | Google | `family=Manrope:wght@300;400;500;600;700;800&display=swap` |
|
|
325
|
+
| Syne | Google | `family=Syne:wght@400;600;700;800&display=swap` |
|
|
326
|
+
| Space Mono | Google | `family=Space+Mono:wght@400;700&display=swap` |
|
|
327
|
+
| Cormorant | Google | `family=Cormorant:ital,wght@0,400;0,600;1,400&display=swap` |
|
|
328
|
+
| IBM Plex Sans | Google | `family=IBM+Plex+Sans:wght@300;400;500;600&display=swap` |
|
|
329
|
+
| DM Sans | Google | `family=DM+Sans:wght@400;500;600;700&display=swap` |
|
|
330
|
+
| Plus Jakarta Sans | Google | `family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap` |
|
|
331
|
+
| Outfit | Google | `family=Outfit:wght@300;400;500;600;700&display=swap` |
|
|
332
|
+
| Fraunces | Google | `family=Fraunces:ital,wght@0,400;0,600;1,400&display=swap` |
|
|
333
|
+
| Work Sans | Google | `family=Work+Sans:wght@400;500;600;700&display=swap` |
|
|
334
|
+
| JetBrains Mono | Google | `family=JetBrains+Mono:wght@400;500;700&display=swap` |
|
|
335
|
+
| Bodoni Moda | Google | `family=Bodoni+Moda:ital,wght@0,400;0,700;1,400&display=swap` |
|
|
336
|
+
| Inter | Google | `family=Inter:wght@400;500;600;700&display=swap` |
|
|
337
|
+
| Geist | Local/Vercel | Use `system-ui` as fallback in previews |
|
|
338
|
+
|
|
339
|
+
### Fallback Rule
|
|
340
|
+
|
|
341
|
+
If a font fails to load (offline, CORS, not available), the preview should still render correctly using `system-ui, -apple-system, sans-serif` as fallback. The font name should be displayed in the `.font-info` footer so the user knows what was intended.
|
|
342
|
+
|
|
343
|
+
---
|
|
344
|
+
|
|
345
|
+
## 6. The Show-Don't-Tell Rule
|
|
346
|
+
|
|
347
|
+
| Decision Type | Show Visual? | Why |
|
|
348
|
+
|---------------|-------------|-----|
|
|
349
|
+
| Aesthetic direction / vibe | YES | Users can't imagine "Bold Signal" from text |
|
|
350
|
+
| Color palette | YES | Hex values mean nothing without seeing them |
|
|
351
|
+
| Font pairing | YES | Font names mean nothing without rendering them |
|
|
352
|
+
| Layout structure | YES | "Asymmetric grid" means different things to everyone |
|
|
353
|
+
| Animation intensity | NO | Must be experienced in running code, not a static preview |
|
|
354
|
+
| Mobile priority level | NO | A number (1-5) is sufficient |
|
|
355
|
+
| Accessibility level | NO | A standard (AA/AAA) is sufficient |
|
|
356
|
+
| Performance budget | NO | A number is sufficient |
|
|
357
|
+
| Sound/haptics | NO | Must be experienced in running code |
|
|
358
|
+
|
|
359
|
+
The rule: if the decision involves how something LOOKS, show it. If it involves behavior, policy, or priority, text is fine.
|