Stitch Loop
Run a critique → adjust → ship loop so implemented UI matches the design brief without endless one-off fixes.
Overview
stitch-loop is an agent skill most often used in Build (also Validate) that runs a critique-adjust-ship loop to close the gap between design briefs and built UI.
Install
npx skills add https://github.com/nexu-io/open-design --skill stitch-loopWhat is this skill?
- Iterative Critique → adjust → ship cycle tuned for design-to-code fidelity
- Catalog entry for Google Labs Stitch upstream design-systems workflow
- Trigger phrases: stitch loop, design to code, design iteration, fidelity loop
- Advertises discovery during planning; full assets require installing upstream bundle from google-labs-code/skills
- Open Design od.mode design-system category alignment
- Documented cycle: Critique → adjust → ship
Adoption & trust: 785 installs on skills.sh; 61.4k GitHub stars.
What problem does it solve?
Your UI ships close to the mockup but drifts on spacing, hierarchy, and motion because feedback is one-off chats instead of a repeatable fidelity loop.
Who is it for?
Indie devs pairing with Stitch or Google Labs design-system workflows who need a disciplined design-to-code iteration ritual.
Skip if: Greenfield brand or IA work with no code yet—brainstorm and wireframe first; also not a substitute for installing upstream Stitch assets when the agent needs scripts.
When should I use this skill?
User mentions stitch loop, design to code, design iteration, or fidelity loop, or wants iterative tightening between brief and built UI.
What do I get? / Deliverables
You iterate with named critique and adjust steps until the implementation matches the brief, then ship that increment before starting the next pass.
- Iteration checklist per critique-adjust-ship pass
- Prioritized UI adjustment list tied to brief gaps
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Design-to-code fidelity work happens while you are building the visible product, even if the loop also refines earlier prototypes. Frontend is where briefs become components and pages, so iteration targets layout, motion, and visual details in code.
Where it fits
After first pass of a dashboard, run stitch-loop to align typography and spacing with the Stitch brief.
Tighten a clickable prototype before user tests so feedback is about flow, not obvious visual bugs.
Final fidelity pass on marketing pages before go-live screenshots and announcements.
How it compares
Process loop for visual fidelity—not a component library installer or static design critique only.
Common Questions / FAQ
Who is stitch-loop for?
Solo builders and designers shipping web or app UI who want a repeatable design-to-code iteration method instead of unstructured tweak requests.
When should I use stitch-loop?
During Build frontend work when implementing screens, during Validate prototype polish, or when you say stitch loop, design to code, design iteration, or fidelity loop.
Is stitch-loop safe to install?
Check this page’s Security Audits panel and review the nexu-io/open-design and Google Labs upstream repos before pulling skills into your agent environment.
SKILL.md
READMESKILL.md - Stitch Loop
# stitch-loop > Curated from Google Labs (Stitch). ## What it does Iterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI. ## Source - Upstream: https://github.com/google-labs-code/skills - Category: `design-systems` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: ```bash # Inspect the upstream README for exact paths open https://github.com/google-labs-code/skills ``` Then ask the agent to invoke this skill by name (`stitch-loop`) or with one of the trigger phrases listed in this skill's frontmatter.