Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

stitch-loop · nexu-io — Claude Code skill: design-to-code feedback loop

A skill that runs an iterative feedback cycle between design and code: critique the layout → fix the code → verify fidelity. Use it when you need to tighten UI against a design brief across multiple passes.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill stitch-loop -a claude-code
Open on GitHub

What stitch-loop does

stitch-loop automates the critique → adjust → ship cycle. The agent reviews how the built UI diverges from the design brief, suggests code corrections, and checks whether the result got closer to the target. The skill operates in design-system mode and responds to triggers like stitch loop, design to code, or fidelity loop.

Install via npx skills add with a platform flag (claude-code, codex, cursor, and others). After setup, the SKILL.md file lands in your agent's skills folder, and the agent will suggest this cycle during planning. To get the full workflow with original assets and scripts from Google Labs, deploy the upstream repository—instructions are in the README at github.com/google-labs-code/skills.

What it helps with

  • match a design mockup in code with maximum precision
  • catch and fix deviations from the brief early in iteration
  • automate the critique-and-adjust cycle for UI code
  • speed up fidelity alignment between designer and developer

Example prompts for the agent

  • Run stitch-loop on this component and tell me how far it is from the mockup
  • Use design to code so the agent suggests fixes automatically
  • Enable fidelity loop and give the agent a few iterations to narrow the gap

How to install stitch-loop

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill stitch-loop -a claude-code

2Manually: put the files in place

~/.claude/skills/stitch-loop/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/stitch-loop/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Other versions of stitch-loop

stitch-loop official google-labs-code Guides agents through iterative website creation with Stitch MCP. The agent reads the baton file, generates UI, integrates the page, and prepares tasks for the next run. Claude Code CX Codex Cursor +1 56,300installs

Similar

answer-me-with-html QingYunA This skill turns selected answers into one-page HTML explainers. Use it to show a flow, compare options, or lay out findings from an investigation. Claude Code CX Codex Cursor +1 5,200installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs design-motion-principles kylezantos Builds or audits UI motion with rules based on project context and interaction frequency. Use it for transitions, hover states, and micro-interactions. Claude Code CX Codex Cursor +1 12,600installs argent-lens software-mansion Visual variant staging for UI elements in a native preview window. Stages design options on a simulator so you can pick the winner. Claude Code CX Codex Cursor +1 22,400installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about stitch-loop

How do I install stitch-loop in Claude Code?

Run npx skills add nexu-io/open-design --skill stitch-loop -a claude-code. After setup, the skill appears in ~/.claude/skills/stitch-loop/SKILL.md and becomes available to your agent.

What does stitch-loop do?

It runs a feedback loop between design and code: the agent analyzes the UI, compares it against the brief, suggests code fixes, and verifies the result. Each iteration brings the layout closer to the mockup.

Which platforms support stitch-loop?

The skill works on Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Each platform has its own install command with a platform flag.

Source text

SKILL.md · Apache-2.0 
---
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:

```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.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor