How do I install the Uiproto skill?

Run npx skillmds@latest add jayteealao/uiproto in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Uiproto safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Uiproto?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Uiproto free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Uiproto?

jayteealao (@jayteealao) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Uiproto by jayteealao — Agent Skill

Name: Uiproto
Rating: 4.2 (5 reviews)
Author: jayteealao

Uiproto

Prototype a UI component/screen from a prompt. Fans out to Stitch + an LLM by default (side-by-side); a provider keyword yields one. Writes a self-contained, sandboxed HTML fragment. Internal to `/wf design`; invoke it through that key.

jayteealao Updated Sep 10, 2026

File contents

Prototype a UI component or screen from a natural-language prompt and embed it as a sandboxed <iframe srcdoc> fragment beside the design artifact. Google Stitch is the primary engine; a self-contained LLM-HTML generator is the automatic fallback. Resolve <skill-dir> per _host-invocation.md.

Step 0 — Resolve

Provider. First token stitch or llm pins it; otherwise the whole argument is the prompt → fan out to both side-by-side.
Consent for egress. Both engines send the prompt to a third party, so they require externalDispatch.enabled in ~/.sdlc/hub-config.json. If consent is off, STOP with the one-line opt-in notice (there is no no-egress fallback here).
Output. Generated HTML goes to a temp file; the fragment is <stem>.uiproto.<provider>.html.fragment next to the design artifact <stem>.md.

Step 1 — Generate

stitch — node "<skill-dir>/scripts/gen-stitch.mjs" "<prompt>" <outHtml>. Needs STITCH_API_KEY + STITCH_PROJECT_ID (a project pre-created in the Stitch UI — the SDK has no createProject) + the lazy @google/stitch-sdk dep. Any miss exits 1 → skip and fall through to llm.
llm — node "<skill-dir>/scripts/gen-llm.mjs" "<prompt>" <outHtml> [provider]. A self-contained REST call (OpenAI / Gemini / gateway <provider>/<model>) that emits one self-contained HTML component. No CLI, no isolation. Exit 1 = no REST provider available.

Each generator prints the path to the written HTML on success.

Step 2 — Fan-out (default) vs pin

Pinned (stitch or llm): run that one; if stitch is unavailable, fall through to llm.
Bare: run both side-by-side — a Stitch screen and an LLM component for the same prompt, so you can compare engines. Skip any that is unavailable and name it.

Step 3 — Embed (sandboxed iframe)

Wrap each generated HTML file in a sandboxed iframe fragment: node "<skill-dir>/scripts/embed-iframe.mjs" <htmlPath> <fragmentPath> <provider> "<caption>". Both Stitch screens AND the LLM component ride <iframe sandbox srcdoc> — a full generated screen carries colliding CSS, so it must be isolated (raw-inlining would leak styles). The sandbox runs no scripts: the served view's CSP blocks inline JS in srcdoc frames anyway, so the preview is visual (layout + styling).

Step 4 — Output

UIPROTO_RESULT:
  prototypes:
    - provider: <stitch|llm>
      fragment: <path to the .uiproto.<provider>.html.fragment>
      prompt: <exact prompt used>
  skipped: <provider (reason), … | none>

Caller + cost

Invoked at the visual-contract step (plan, following design/contract.md) or a design transform, beside the imagery mock. Bare fan-out calls both engines (per-token to your keys; Stitch needs its own provisioned project). Pin /uiproto llm <prompt> or /uiproto stitch <prompt> for one engine. Always opt-in; never hook- or serve-triggered.

---name: uiprotodescription: Prototype a UI component/screen from a prompt. Fans out to Stitch + an LLM by default (side-by-side); a provider keyword yields one. Writes a self-contained, sandboxed HTML fragment. Internal to `/wf design`; invoke it through that key.---Prototype a UI component or screen from a natural-language prompt and embed it asa **sandboxed `<iframe srcdoc>`** fragment beside the design artifact. GoogleStitch is the primary engine; a self-contained LLM-HTML generator is the automaticfallback. Resolve `<skill-dir>` per [_host-invocation.md](../wf/reference/_host-invocation.md).## Step 0 — Resolve1. **Provider.** First token `stitch` or `llm` pins it; otherwise the whole argument is the prompt → **fan out to both** side-by-side.2. **Consent for egress.** Both engines send the prompt to a third party, so they require `externalDispatch.enabled` in `~/.sdlc/hub-config.json`. If consent is off, STOP with the one-line opt-in notice (there is no no-egress fallback here).3. **Output.** Generated HTML goes to a temp file; the fragment is `<stem>.uiproto.<provider>.html.fragment` next to the design artifact `<stem>.md`.## Step 1 — Generate- **`stitch`** — `node "<skill-dir>/scripts/gen-stitch.mjs" "<prompt>" <outHtml>`. Needs `STITCH_API_KEY` + `STITCH_PROJECT_ID` (a project pre-created in the Stitch UI — the SDK has no createProject) + the lazy `@google/stitch-sdk` dep. Any miss exits 1 → skip and fall through to `llm`.- **`llm`** — `node "<skill-dir>/scripts/gen-llm.mjs" "<prompt>" <outHtml> [provider]`. A self-contained REST call (OpenAI / Gemini / gateway `<provider>/<model>`) that emits one self-contained HTML component. No CLI, no isolation. Exit 1 = no REST provider available.Each generator prints the path to the written HTML on success.## Step 2 — Fan-out (default) vs pin- **Pinned** (`stitch` or `llm`): run that one; if `stitch` is unavailable, fall through to `llm`.- **Bare**: run **both** side-by-side — a Stitch screen and an LLM component for the same prompt, so you can compare engines. Skip any that is unavailable and name it.## Step 3 — Embed (sandboxed iframe)Wrap each generated HTML file in a sandboxed iframe fragment:`node "<skill-dir>/scripts/embed-iframe.mjs" <htmlPath> <fragmentPath> <provider> "<caption>"`.Both Stitch screens AND the LLM component ride `<iframe sandbox srcdoc>` — a fullgenerated screen carries colliding CSS, so it must be isolated (raw-inlining wouldleak styles). The sandbox runs no scripts: the served view's CSP blocks inline JSin srcdoc frames anyway, so the preview is visual (layout + styling).## Step 4 — Output```UIPROTO_RESULT: prototypes: - provider: <stitch|llm> fragment: <path to the .uiproto.<provider>.html.fragment> prompt: <exact prompt used> skipped: <provider (reason), … | none>```## Caller + costInvoked at the visual-contract step (`plan`, following `design/contract.md`) or a design transform, beside the `imagery` mock. Bare fan-outcalls **both** engines (per-token to your keys; Stitch needs its own provisionedproject). Pin `/uiproto llm <prompt>` or `/uiproto stitch <prompt>` for one engine.Always opt-in; never hook- or serve-triggered.

Frequently asked questions