Skip to content

Commit 46004f0

Browse files
MingchengkkkMingchengkkk
committed
Introduce Agent Bridge messaging
1 parent ff88a4b commit 46004f0

2 files changed

Lines changed: 18 additions & 12 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Claw Design
22
<img width="1362" height="760" alt="Claw-design" src="https://github.com/user-attachments/assets/574733ac-3581-42f1-b2c0-c6f334492d08" />
33

4-
Claw Design is a local-first AI presentation workbench for generating, repairing, editing, and exporting 16:9 slide-like HTML decks.
4+
Claw Design is a local-first AI 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.
55

66
This repository is still an `alpha`, but the core loop already works:
77

@@ -51,6 +51,10 @@ Then open:
5151
- UI: [http://127.0.0.1:5174](http://127.0.0.1:5174)
5252
- Install guide: [http://127.0.0.1:5174/install](http://127.0.0.1:5174/install)
5353

54+
## What is Agent Bridge?
55+
56+
Agent Bridge is the pattern behind Claw Design’s AI workflow: instead of asking an agent to blindly click through a UI, you install a skill that teaches it how Claw Design works, then let the agent send a launch task through a local bridge API. Studio consumes that task inside the real browser session, creates a local project, and starts generation, so the handoff from AI reasoning to human editing happens inside the actual product rather than in a temporary automation sandbox.
57+
5458
## What It Does
5559

5660
- Generates slide-like HTML reports from a raw brief

‎ui/src/features/studio/runtime/StudioInstallPage.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -250,13 +250,13 @@ export function StudioInstallPage() {
250250
<div className="flex items-center justify-between gap-4 border border-[var(--studio-line)] bg-[rgba(8,8,8,0.92)] px-5 py-4">
251251
<div>
252252
<div className="text-[10px] font-semibold uppercase tracking-[0.28em] text-[var(--studio-muted)]">
253-
Studio Install
253+
Agent Bridge Setup
254254
</div>
255255
<h1 className="mt-2 text-[1.6rem] font-semibold tracking-[-0.04em] text-[var(--studio-ink)]">
256-
Two ways to get started
256+
Install the skill, then let your agent launch Studio for you
257257
</h1>
258258
<p className="mt-3 max-w-3xl text-[13px] leading-7 text-[var(--studio-muted-strong)]">
259-
Start with an AI coding agent if you can. If not, use the local manual path and open Studio yourself.
259+
Agent Bridge gives your AI a skill to understand Claw Design and a local bridge to launch Studio in your real browser session. If you prefer, you can still use the local manual path and open Studio yourself.
260260
</p>
261261
</div>
262262
<div className="flex items-center gap-2">
@@ -291,13 +291,12 @@ export function StudioInstallPage() {
291291
</div>
292292
<span className="inline-flex items-center gap-2 border border-[rgba(0,242,255,0.28)] bg-[rgba(0,242,255,0.08)] px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--studio-ink)]">
293293
<Sparkles className="h-3.5 w-3.5 text-[var(--studio-accent)]" />
294-
Skill first
294+
Agent Bridge
295295
</span>
296296
</div>
297297

298298
<p className="mt-4 max-w-2xl text-[13px] leading-7 text-[var(--studio-muted-strong)]">
299-
Install the Claw Design skill, refresh your agent, then simply describe the deck you want.
300-
The skill teaches the agent to read sources, shape a Studio-ready prompt, and launch Studio through the local bridge.
299+
Install the Claw Design skill, refresh your agent, then simply describe the deck you want. Agent Bridge teaches the agent how Claw Design works, then lets it launch Studio into your real browser session instead of relying on fragile browser typing.
301300
</p>
302301

303302
<div className="mt-6 border border-[var(--studio-line)] bg-[rgba(0,0,0,0.32)] p-4">
@@ -317,10 +316,13 @@ export function StudioInstallPage() {
317316
</div>
318317
</div>
319318

320-
<div className="mt-5 space-y-3 text-[12px] leading-7 text-[var(--studio-muted-strong)]">
321-
<div>1. Install the repo skill.</div>
322-
<div>2. Restart or refresh your AI coding agent.</div>
323-
<div>3. Tell the agent what deck you want. It will use the repo skill + Studio bridge.</div>
319+
<div className="mt-5 border border-[var(--studio-line)] bg-[rgba(255,255,255,0.03)] p-4">
320+
<div className="text-[10px] uppercase tracking-[0.18em] text-[var(--studio-muted)]">How Agent Bridge works</div>
321+
<div className="mt-3 space-y-3 text-[12px] leading-7 text-[var(--studio-muted-strong)]">
322+
<div>1. Install the repo skill and refresh your AI coding agent.</div>
323+
<div>2. Ask for the deck you want. The agent reads sources and shapes a Studio-ready prompt.</div>
324+
<div>3. The agent launches Studio through the local bridge, and the result lands in the real browser session.</div>
325+
</div>
324326
</div>
325327

326328
<div className="mt-6 flex flex-wrap gap-3">
@@ -362,7 +364,7 @@ export function StudioInstallPage() {
362364
</div>
363365

364366
<p className="mt-4 max-w-2xl text-[13px] leading-7 text-[var(--studio-muted-strong)]">
365-
If you do not want the skill path, bootstrap the local environment yourself, then open Studio in the browser.
367+
If you do not want the skill path, bootstrap the local environment yourself and open the same Studio manually in the browser.
366368
</p>
367369

368370
<div className="mt-6 space-y-4">

0 commit comments

Comments
 (0)