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 enables a critique → adjust → ship cycle that bridges design briefs and implemented UI. Use it when you need to iteratively refine visual fidelity and ensure built components match design intent.
- Critique design-to-code gaps and visual fidelity issues
- Adjust UI implementation based on design feedback
- Ship refined components with improved visual accuracy
- Tighten alignment between design brief and built output
- Support iterative refinement cycles
How to install stitch-loop
npx skills add https://github.com/nexu-io/open-design --skill stitch-loop- Active agent with skills directory configured
- Access to upstream Google Labs skills bundle (optional for full workflow)
How to use stitch-loop
- 1.Invoke the skill by name ('stitch-loop') or use trigger phrases like 'design to code', 'design iteration', or 'fidelity loop'
- 2.Provide design brief or reference and current UI implementation
- 3.Review agent's critique of visual fidelity gaps
- 4.Adjust code based on feedback
- 5.Repeat cycle until visual fidelity matches design intent
- 6.Ship refined components
Use cases
- Refining UI components to match design system specifications
- Closing visual fidelity gaps between Figma designs and code
- Iterating on component styling during development
- Validating built UI against design briefs before shipping
- Tightening design-to-code handoff workflows
- Design system maintainers
- Frontend developers working from design specs
- Design-to-code teams
- UI engineers refining component fidelity
stitch-loop FAQ
Stitch-loop is curated from Google Labs (https://github.com/google-labs-code/skills) and categorized as a design-systems skill.
Install the upstream bundle into your agent's skills directory and refer to the upstream README at https://github.com/google-labs-code/skills for exact paths and assets.
Use 'stitch loop', 'design to code', 'design iteration', or 'fidelity loop' to invoke the skill.
It bridges both—use it when you need to iteratively align built UI with design specifications.
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 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:
# 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
Anti-slop SwiftUI design guidance with brand asset protocol and five-dimension review.
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 with 10 pre-set designs.
threejs
Create 3D scenes, materials, and interactive experiences with Three.js in the browser.