Stitch UI Bridge

Send frontend design prompts from Codex, Claude Code, Cursor, or other clients into Stitch, then get raw exported UI code back through a fast local bridge.

What It Is

stitch-ui-bridge is a local browser bridge plus Codex skill for turning frontend UI design requests into Stitch-generated export code.

It is built for workflows like:

• "Generate a settings screen and give me the raw export."
• "Use Stitch from Codex without manually copy-pasting every prompt."
• "Ask for a specific UI style, let Stitch design it, then return code for downstream adaptation."
• "Keep the browser login private while still letting a client automate the design loop."

Why People Install It

Most Stitch automation attempts fail for one of three reasons:

1. They treat Stitch like a normal static page even though generation happens in multiple UI stages.
2. They tie browser automation to private profile data or leak local paths into the repo.
3. They return vague status like "still waiting" instead of reporting what Stitch is actually doing.

stitch-ui-bridge fixes that by combining:

• a privacy-safe local config model
• stage-aware waiting and export readiness checks
• raw export handoff so the caller can adapt the code however it wants

What You Get

• A stitch-ui CLI for local browser automation through an existing Chrome session.
• A Codex skill that tells clients how to shape prompts and consume the returned export.
• Stage metadata such as crafting, imagining, building-design-system, and ready-to-export.
• Optional model selection for Thinking with 3.1 Pro when the signed-in Stitch session has access.
• A privacy boundary that keeps cookies, tokens, profile paths, and local account details out of the public repo.

Key Capabilities

• Reuse a logged-in Chrome Stitch session through CDP.
• Detect prompt inputs and submit controls across page and iframe scopes.
• Wait intelligently for generation progress instead of only polling for code.
• Fall back to Stitch project export download when inline DOM code is unavailable.
• Return structured JSON that downstream clients can adapt into React, Vue, Cursor, Codex, or other workflows.

Fast Path

1. Ask the user what screen or component they want.
2. Before spec generation, ask whether they have Gemini membership and want Thinking with 3.1 Pro.
3. Call stitch-ui generate ... --json.
4. Read artifacts.code for the raw export and meta.stitch_stage for current generation state.
5. Adapt the returned code on the caller side.

Validated Value

This bridge was validated in live Stitch sessions, not just dry runs.

Observed difference:

Scenario	Before	After
Reused Stitch tab with old output still on screen	The caller could mistake stale code for fresh output.	The bridge waits for changed output or export readiness.
Stitch generation takes time before export is available	The caller only saw a generic timeout.	The bridge tracks current generation stage and reports it in structured metadata.
Premium model path needs explicit user intent	The caller had no consistent preflight contract.	The skill and CLI now support an explicit Thinking with 3.1 Pro selection flow.

Quick Start

Clone the repo:

Windows

git clone https://github.com/Arthurescc/stitch-ui-bridge `
  "$env:USERPROFILE\\Documents\\GitHub\\stitch-ui-bridge"

macOS / Linux

git clone https://github.com/Arthurescc/stitch-ui-bridge \
  "${HOME}/Documents/GitHub/stitch-ui-bridge"

Install the package:

python -m pip install -e .[dev]

Install the skill:

Windows

git clone https://github.com/Arthurescc/stitch-ui-bridge `
  "$env:USERPROFILE\\.codex\\skills\\stitch-ui-bridge"

macOS / Linux

git clone https://github.com/Arthurescc/stitch-ui-bridge \
  "${HOME}/.codex/skills/stitch-ui-bridge"

If you use CODEX_HOME, install the skill under:

$CODEX_HOME/skills/stitch-ui-bridge

Then:

stitch-ui setup --dry-run
stitch-ui doctor --json
stitch-ui generate --prompt "Create a login page" --style "minimal" --constraint "mobile first" --dry-run --json

See install-guide.txt for the full local setup flow.

Example Prompts

• Use $stitch-ui-bridge to generate a desktop SaaS settings screen and return the raw Stitch export.
• Use $stitch-ui-bridge to send this UI concept into Stitch and tell me which generation stage it is in.
• Use $stitch-ui-bridge to run the spec step with Thinking with 3.1 Pro, then return the exported HTML.
• Use $stitch-ui-bridge to prototype a mobile login flow and keep the framework adaptation for later.

Repository Layout

README.md
README.zh-CN.md
LICENSE
pyproject.toml
stitch_ui_bridge/
  browser.py
  cli.py
  config.py
  models.py
  prompting.py
stitch-ui-bridge/
  SKILL.md
  agents/openai.yaml
  references/prompt-shaping.md
  assets/
    config.example.json
    icon-small.svg
    icon-large.svg
    install-guide.txt
tests/

Development

Run the local checks:

py -3.13 -m pytest -q
py -3.13 C:\Users\Administrator\.codex\skills\.system\skill-creator\scripts\quick_validate.py stitch-ui-bridge

The public repo is designed to stay privacy-safe:

• no cookies
• no tokens
• no personal browser profiles
• no hardcoded local user paths

Who This Is For

• Codex users who want Stitch as a design backend
• Claude Code and Cursor users who want a browser-mediated UI generation loop
• frontend prototyping workflows that want raw exports, not framework lock-in
• teams that care about privacy and local-session reuse

Chinese Documentation

See README.zh-CN.md.

More Skills

Browse the collection page: codex-skills-hub

License

MIT