stitch-loop
nexu-io/open-design
Iterative design-to-code feedback loop for tightening visual fidelity between brief and built UI.
What is stitch-loop?
Stitch-loop is a design-system skill that implements a critique → adjust → ship cycle for aligning UI implementation with design intent. Use it when you need to iteratively refine visual fidelity and close gaps between design briefs and built components.
- Enables iterative critique of design-to-code alignment
- Facilitates adjustment cycles based on visual feedback
- Supports shipping refined UI with tighter fidelity to design brief
- Integrates design-system workflows into agent planning
How to install stitch-loop
npx skills add https://github.com/nexu-io/open-design --skill stitch-loop- Access to upstream Google Labs skills repository
- Agent with design-system mode support
How to use stitch-loop
- 1.Invoke the skill by name (stitch-loop) or use trigger phrases: 'stitch loop', 'design to code', 'design iteration', or 'fidelity loop'
- 2.Review the upstream repository at https://github.com/google-labs-code/skills for full workflow assets and scripts
- 3.Install the upstream bundle into your agent's skills directory following the README instructions
- 4.Ask the agent to run the critique → adjust → ship cycle on your UI components
Use cases
- Refining component visual fidelity during development
- Closing gaps between design mockups and implemented UI
- Iterating on design-system components with feedback loops
- Tightening alignment between design brief and shipped code
- Design-system maintainers
- UI/UX engineers
- Product teams managing design-to-code workflows
- Agents working with design-system catalogues
stitch-loop FAQ
Stitch-loop is curated from Google Labs' open-design skills repository (https://github.com/google-labs-code/skills).
Invoke it by name ('stitch-loop') or use any of the trigger phrases: 'stitch loop', 'design to code', 'design iteration', or 'fidelity loop'.
It creates an iterative feedback loop where design critiques inform code adjustments, which are then shipped, progressively tightening visual fidelity between the design brief and built UI.
Yes, inspect the upstream repository README at https://github.com/google-labs-code/skills for exact paths and install the full upstream bundle into your agent's skills directory.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: stitch-loop description: | Iterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI. triggers:
- "stitch loop"
- "design to code"
- "design iteration"
- "fidelity loop" od: mode: design-system category: design-systems upstream: "https://github.com/google-labs-code/skills"
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 OpenDesign 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:
# 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.
Related skills
More from nexu-io/open-design and the wider catalog.
swiftui-design
SwiftUI design system with anti-slop rules, brand protocols, and multi-dimensional review for iOS frontends.
swiss-creative-mode-template
Premium Swiss/editorial HTML template with bold typography, interactive navigation, and theme switching.
swiss-user-research-video-template
Premium Swiss-editorial user research template with warm paper aesthetics and keyboard-navigable slides.
taste-skill
|
theme-factory
Apply professional font and color themes to slides, docs, reports, and HTML landing pages.
threejs
Create interactive 3D scenes and WebGL experiences in the browser with Three.js.