You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Claw Design is a local-firstAI presentation workbench with an Agent Bridge: a repo skill teaches your agent how to work, and a local bridge launches Studio in the browser so the result lands in a real editable 16:9 deck.
4
+
Claw Design is a local-first, HTML-based AI presentation workbench with an Agent Bridge, letting you create Claude-level slide design with the coding agent you already use.
5
5
6
6
## What is Agent Bridge?
7
7
@@ -73,6 +73,7 @@ What this gives the agent:
73
73
74
74
- read source links first
75
75
- shape a Studio-ready prompt
76
+
- apply visual prompting for figure-led, chart-led, and matrix-first decks
test("explicit chart-heavy page plans keep distinct page missions after normalization",()=>{
336
+
constbrief=`Create a 6-page English consulting-style data-story deck.
337
+
Page 1: Executive headline and market shape.
338
+
Page 2: Use a composite bar-and-line chart to compare regional AI infrastructure capex by region against utilization growth on a secondary axis.
339
+
Page 3: Use a bubble chart to position major provider archetypes by scale, utilization, and margin quality.
340
+
Page 4: Use a premium analytical data table to compare operators across capacity, power cost, gross margin, and deployment lead time.
341
+
Page 5: Use a waterfall chart or economics bridge to explain how revenue converts into margin pressure through power, GPU depreciation, and networking cost.
342
+
Page 6: Use a matrix-first recommendation page to show where investment should focus across regions and operating models.`;
343
+
constsummary=JSON.stringify({
344
+
rawBrief: brief,
345
+
subject: "Global AI infrastructure economics in 2026",
Copy file name to clipboardExpand all lines: skills/ppt-workbench-studio/SKILL.md
+78-10Lines changed: 78 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,15 +10,15 @@ Use this skill when the current workspace is `ppt-workbench-studio`, or when the
10
10
## What exists now
11
11
12
12
-**Prompt injection bridge**: `POST /api/studio/bridge/launch` creates a short-lived launch task and returns an `openUrl`.
13
-
-**UI handoff path**: opening that `openUrl` in the user's default browser makes Studio consume the task, create a local project, and auto-start generation.
13
+
-**UI handoff path**: opening that exact returned `openUrl` in the user's default browser makes Studio consume the task, create a local project, and auto-start generation.
14
14
-**Headless fallback**: `/api/studio/generate-html` and `/api/studio/generate-html/stream` still exist for true headless use.
15
15
16
16
Because of that, URL or PDF tasks must be handled as:
17
17
18
18
1. the agent reads the source itself
19
19
2. the agent writes a good Studio prompt
20
20
3. the agent posts that prompt to the local bridge
21
-
4. the agent opens the returned `openUrl` in the default browser
21
+
4. the agent opens the returned `openUrl`exactly in the default browser
22
22
23
23
Do not treat URLs or PDFs as product-side attachments. The bridge is **prompt-only**, not source-grounded.
24
24
@@ -30,11 +30,21 @@ Use this path by default whenever the goal is to generate in Studio and hand the
30
30
2. Read the source and extract the facts, structure, and likely page split.
31
31
3. Build a concise Studio-ready prompt.
32
32
4.`POST` the prompt to `/api/studio/bridge/launch`.
33
-
5. In the **same default browser profile**, open the returned `openUrl`.
34
-
6. Stop as soon as the browser has opened the launch URL.
33
+
5. Parse the returned `openUrl`.
34
+
6. In the **same default browser profile**, open that exact `openUrl`.
35
+
7. Do not replace it with the Studio homepage or a hand-written root URL.
36
+
8. Stop as soon as the browser has opened the launch URL.
35
37
36
38
Do **not** keep waiting for `/projects/:id/edit`, review settle, or iframe readiness unless the user explicitly asks.
37
39
40
+
Opening `http://127.0.0.1:5174/` by itself is not enough. The bridge only works when the browser visits the specific returned launch URL, for example:
41
+
42
+
```bash
43
+
open 'http://127.0.0.1:5174/?bridgeLaunch=<launch-id>'
44
+
```
45
+
46
+
If you created a launch task but only opened the Studio homepage, assume the prompt was **not** injected.
47
+
38
48
Read `references/default-browser-flow.md` only when you need the exact stop point and browser expectations.
39
49
40
50
## Source reading rule
@@ -50,16 +60,54 @@ Do not dump the full article or PDF text into the prompt. The current engine res
50
60
51
61
## Prompt contract
52
62
53
-
Shape prompts around these five pieces:
63
+
Shape prompts around these seven pieces:
54
64
55
65
-`Observed facts`
56
66
-`Page plan`
57
-
-`Layout/structure cue`
67
+
-`Layout / structure cue`
68
+
-`Visual thesis`
58
69
-`Tone + density`
70
+
-`Anti-patterns`
59
71
-`Source constraint`
60
72
61
73
Read `references/prompt-shaping.md` when you need the detailed rules for what helps the engine and what only adds noise.
62
74
75
+
## Visual quality rule
76
+
77
+
The current Studio engine needs both a **content contract** and a **visual contract**.
78
+
79
+
- The content contract keeps the page factual and logically structured.
80
+
- The visual contract decides whether the page feels designed or generic.
81
+
- The preflight-aware budget decides whether that ambition survives without collapsing into overflow or clutter.
82
+
83
+
Default rule: each page should have **one visual thesis**.
84
+
85
+
That usually means:
86
+
87
+
- one dominant visual or structural idea
88
+
- quiet secondary text
89
+
- restrained annotation
90
+
- strong hierarchy
91
+
- not many equal-weight cards competing for attention
92
+
93
+
Prefer:
94
+
95
+
-`single dominant visual`
96
+
-`figure-led`
97
+
-`chart-led`
98
+
-`matrix-first`
99
+
-`timeline-led`
100
+
-`hero + rail`
101
+
102
+
Avoid:
103
+
104
+
- equal-weight card walls
105
+
- generic dashboard clutter
106
+
- “beautiful” or “premium” with no structural cue
107
+
- asking one page to carry several unrelated visual ideas
108
+
109
+
Read `references/visual-briefing.md` when you need the visual prompting rules, `references/data-story-patterns.md` when you need to map source material to an archetype, `references/premium-visual-cues.md` for effective visual language, and `references/preflight-aware-visual-budget.md` when you need to keep ambition inside the engine's fit limits.
110
+
63
111
## Meaningful prompt inputs
64
112
65
113
The current engine responds well to:
@@ -68,15 +116,17 @@ The current engine responds well to:
68
116
- each page having a clear role
69
117
- one main claim per page
70
118
- structure cues like `chart`, `matrix`, `quadrant`, `figure`, `timeline`
119
+
- one visual thesis per page
71
120
- language and density posture
72
121
- a clear instruction to stay inside the observed source facts
122
+
- explicit anti-patterns like `not equal-weight cards` or `not dashboard clutter`
73
123
74
124
The current engine does **not** benefit much from:
75
125
76
126
- pasting the full article or PDF
77
127
- repeating that the result should be editable
78
128
- repeating iframe/export/tooling details
79
-
- vague quality adjectives like “more premium” or “more top-tier”
129
+
- vague quality adjectives like `premium`, `top-tier`, `more advanced`
80
130
- putting the AI's own operating steps into the brief
81
131
82
132
## Review and preflight reality
@@ -91,7 +141,14 @@ The review loop mainly cares about:
91
141
92
142
Pure semantic density by itself is only a `soft-warning`, not a hard repair trigger.
93
143
94
-
That means the best prompt is one that gives the model a clean page split and reasonable density budget up front.
144
+
That means the best prompt is one that gives the model:
145
+
146
+
- a clean page split
147
+
- a realistic visual budget
148
+
- one dominant object per page where possible
149
+
- concise labels and short titles
150
+
151
+
Read `references/preflight-aware-visual-budget.md` when you need the current budget logic.
95
152
96
153
## Product-intro default behavior
97
154
@@ -100,6 +157,7 @@ When the user says something like “做个 PPT 来介绍我的产品” without
100
157
- assume they mean the product represented by the current repo
101
158
- infer the product story from `README.md` and, if needed, `docs/agent-playbook.md`
102
159
- keep it concrete and product-led
160
+
- default to one clear product claim, one workflow strip, and a few differentiated proof points
103
161
- do not invent customers, traction, or fake metrics
104
162
105
163
## Default browser policy
@@ -116,7 +174,13 @@ Once generation has been triggered through the UI:
116
174
- do not burn tokens watching review finish
117
175
- do not continue into iframe manipulation by default
118
176
119
-
With the bridge path, opening `openUrl` is enough for Studio to start generation. The human is expected to take over from the browser after the launch URL is opened.
177
+
With the bridge path, opening the exact returned `openUrl` is enough for Studio to start generation. The human is expected to take over from the browser after the launch URL is opened.
178
+
179
+
Be precise here:
180
+
181
+
-`POST /api/studio/bridge/launch` only creates the task
182
+
- opening the exact returned `openUrl` is what consumes it
183
+
- opening the root Studio page does not consume the task
120
184
121
185
## No-testing policy
122
186
@@ -143,5 +207,9 @@ Even then:
143
207
144
208
- Read `README.md` in the workspace for product positioning.
145
209
- Read `docs/agent-playbook.md` only when you need deeper Studio generation/review context.
146
-
- Read `references/prompt-shaping.md` for the effective prompt contract.
210
+
- Read `references/prompt-shaping.md` for the full 7-part prompt contract.
147
211
- Read `references/default-browser-flow.md` for the exact browser-first workflow and stop point.
212
+
- Read `references/visual-briefing.md` for the visual contract.
213
+
- Read `references/data-story-patterns.md` for content-to-layout mapping.
214
+
- Read `references/premium-visual-cues.md` for effective visual phrasing.
215
+
- Read `references/preflight-aware-visual-budget.md` for fit-aware visual budgeting.
short_description: "Read the source first, bridge the promptinto Studio, open the launch URL in the default browser, then stop"
4
-
default_prompt: "Use $ppt-workbench-studio to read source links first in the user's default browser, synthesize a concise Studio prompt, call /api/studio/bridge/launch, open the returned launch URL in the same browser profile, and stop once the browser has opened that URL."
3
+
short_description: "Read the source first, shape a visually strong Studio prompt, bridge it into Studio, open the exact returned launch URL in the default browser, then stop"
4
+
default_prompt: "Use $ppt-workbench-studio to read source links first in the user's default browser, synthesize a concise Studio prompt with one visual thesis per page, prefer current Studio cues such as figure-led, chart-led, matrix-first, or hero + rail layouts where appropriate, avoid equal-weight card walls and dashboard clutter, call /api/studio/bridge/launch, parse the returned openUrl, open that exact launch URL in the same browser profile instead of the Studio homepage, and stop once the browser has opened that URL."
0 commit comments