stitch-loop · nexu-io — скилл для Claude Code: дизайн-код в цикле
Скилл запускает итеративный цикл обратной связи между дизайном и кодом: критика макета → правка кода → проверка фidelity. Подойдёт, если нужно приближать вёрстку к макету по несколько раз.
npx skills add nexu-io/open-design --skill stitch-loop -a claude-codeЧто делает stitch-loop
stitch-loop автоматизирует цикл «критика → корректировка → поставка». Агент анализирует, чем построенный UI отличается от дизайн-брифа, предлагает правки кода и проверяет, насколько точнее стал результат. Скилл работает в режиме design-system и использует триггеры: можешь запустить его фразами вроде «stitch loop», «design to code» или «fidelity loop».
Устанавливается через npx skills add с флагом целевой платформы (claude-code, codex, cursor и другие). После установки файл SKILL.md окажется в папке скиллов агента, и тот начнёт предлагать этот цикл во время планирования. Чтобы получить полный набор с исходными ассетами и скриптами от Google Labs, нужно развернуть апстрим-репозиторий — инструкция в README на github.com/google-labs-code/skills.
Какие задачи решает
- повторить дизайн-макет в коде максимально точно
- отловить и исправить отклонения от брифа на ранних итерациях
- автоматизировать цикл критики и правок вёрстки
- ускорить согласование фidelity между дизайнером и кодером
Примеры запросов агенту
- Запусти stitch-loop для этого компонента и проверь, насколько он отличается от макета
- Используй design to code, чтобы агент сам предложил правки
- Включи fidelity loop и дай агенту несколько итераций на приближение к оригиналу
Как установить stitch-loop
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill stitch-loop -a claude-code2Вручную: положить файлы
~/.claude/skills/stitch-loop/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/stitch-loop/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill stitch-loop -a codex2Вручную: положить файлы
.agents/skills/stitch-loop/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill stitch-loop -a cursor2Вручную: положить файлы
.cursor/skills/stitch-loop/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design stitch-loop2Вручную: положить файлы
.github/skills/stitch-loop/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill stitch-loop -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/stitch-loopВручную: положить файлы
.devin/skills/stitch-loop/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill stitch-loop -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора106
Весь набор →Другие версии stitch-loop
Похожие
Вопросы о stitch-loop
Как установить stitch-loop в Claude Code?
Выполни команду npx skills add nexu-io/open-design --skill stitch-loop -a claude-code. После установки скилл появится в папке ~/.claude/skills/stitch-loop/SKILL.md и будет доступен агенту.
Что делает stitch-loop?
Запускает цикл обратной связи между дизайном и кодом: агент анализирует UI, сравнивает с брифом, предлагает правки и проверяет результат. Каждая итерация приближает вёрстку к макету.
На каких платформах работает stitch-loop?
Скилл доступен для Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Установка для каждой платформы — своя команда с флагом -a.
Исходный текст
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