stitch::manage-design-system작성자 Google Labs

Stitch Manage Design System 스킬.

브랜드 및 디자인 시스템 작업을 위한 Claude Code 및 Codex 스킬: MCP 도구를 통해 Stitch에서 디자인 시스템을 생성, 업데이트 및 적용합니다.

Brand & Design Systems
디자인 시스템

google-labs-code/stitch-skills · plugins/stitch-design/skills/manage-design-system/SKILL.mdSKILL.md

--- name: stitch::manage-design-system description: - Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens. --- ## 📥 Retrieval ## 🧠 Synthesis from Description ## 📝 Output Structure ## 🚀 Create or Update Design System in Stitch ## 🎨 Apply Design System to Screens ## 📋 Update Project Metadata

2026-09-14에 업스트림 파일에서 읽은 프론트 매터 및 섹션 제목 · 전체 5,630자

01 기능

Claude Code와 Codex에서 stitch::manage-design-system 스킬이 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

MCP 도구를 사용하여 Stitch에서 프로젝트의 신뢰 기준(source of truth) 역할을 하는 디자인 시스템을 관리합니다. 프로젝트 메타데이터와 화면 자산을 조회하고(list_projects, list_screens, get_screen, read_url_content), design-md 스킬을 통해 기존 화면에서 또는 일반 설명에서 토큰을 합성하며, .stitch/DESIGN.md를 작성한 후 해당 마크다운을 업로드하고 create_design_system_from_design_md를 호출합니다.

업로드 전에 표시 이름, 색상, 글꼴, 모서리 곡률에 대한 사용자 승인을 거치는 하드 체크포인트가 있습니다. 생성 후에는 apply_design_system이 오직 화면 인스턴스 id만을 사용하여 기존 화면에 토큰을 적용하며, .stitch/metadata.json에는 프로젝트, 화면, 디자인 시스템 요약이 기록됩니다.

산출물

프로젝트를 위해 생성된 DESIGN.md 디자인 파일입니다.
프로젝트 id, 알고 있는 모든 화면, 디자인 시스템 요약을 추적하는 .stitch/metadata.json 파일입니다.
Stitch 내부에 보관되는 프로젝트 수준의 디자인 토큰으로, 이후 생성 프롬프트에서 다시 명시할 필요가 없습니다.

예시 프롬프트 보기 ↗

작동 방식

01
프로젝트 및 화면 자산 조회
list_projects는 대상 projectId를 찾고, list_screens는 Home이나 Main Dashboard와 같은 대표 화면을 드러내며, get_screen은 HTML을 가져오기 전에 스크린샷과 htmlCode 다운로드 URL을 반환합니다.
02
디자인 시스템 합성
기존 화면은 design-md 스킬을 통해 해석되며, 완전히 새로운 프로젝트나 직접 작성한 설명은 먼저 사용자의 느슨한 표현을 정확한 값으로 매핑하여 처리합니다.
03
DESIGN.md 업로드 및 디자인 시스템 생성
권장되는 업로더 스크립트는 마크다운을 프로세스 내에서 base64로 인코딩하여 프로젝트의 batchCreate 엔드포인트로 전송함으로써 출력 토큰 한도를 우회합니다. 이후 create_design_system_from_design_md가 projectId와 반환된 화면 인스턴스로 실행됩니다.
04
기존 화면에 시스템 적용
apply_design_system은 projectId, assetId, 그리고 화면 인스턴스 목록을 받아 이미 만들어진 화면이 저장된 토큰을 적용하도록 합니다.

02 적합성 확인

stitch::manage-design-system 스킬을 사용해야 하는 경우

이러한 종류의 브랜드 및 디자인 시스템 작업일 때 Claude Code 또는 Codex에서 stitch::manage-design-system 스킬을 사용합니다. 적합성과 제한 사항은 스킬 자체 파일에서 가져옵니다.

적합한 경우

앞으로 만들어질 화면들을 하나로 묶어줄 단일한 신뢰 기준 디자인 언어가 필요한 프로젝트입니다.
아직 화면이 없는 새로운 Stitch 프로젝트로, 사용자가 문서화된 스타일 설명만 제공하는 경우입니다.
이미 프로젝트에 존재하는 화면들로부터 디자인 시스템을 역으로 도출하는 작업입니다.

한계 인지하기

대략 5KB를 넘는 DESIGN.md는 직접적인 MCP 업로드 도구를 사용할 수 없으며, 대신 스크립트 경로가 필요합니다.
디자인 요소를 설명하는 방법에 대한 가이드는 이 파일에 없으며, 다른 스킬에 위임되어 있습니다.
전체 designSystem 객체 스키마는 여기에 작성되어 있지 않으며, 별도의 참조 파일에 있습니다.

제공할 사항

Stitch 프로젝트 id디자인 시스템이 속한 프로젝트를 식별하며, 업로드 스크립트와 이후 모든 MCP 호출에 필요합니다.
대표 화면Home 또는 Main Dashboard 같은 화면은 기존 프로젝트에서 토큰을 추출할 때 시각적 소스 역할을 합니다.
일반 텍스트 스타일 설명화면이 존재하지 않을 때 사용하며, 예를 들어 팔레트, 모서리 둥글기, 폰트를 명명하는 짧은 문구입니다.
업로드를 위한 스크립트 인자업로더 스크립트는 명령줄에 전달되는 프로젝트 id, 파일 경로, API 키, generated-by 값이 필요합니다.

03 스킬 내부

stitch::manage-design-system 스킬이 Claude Code와 Codex에 부여하는 규칙

에이전트에게 SKILL.md가 설정하는 6가지 구체적인 지침, 기본값 및 제한 사항입니다 — 결과를 바꾸는 파일의 핵심 부분입니다.

업로드 전 사용자 승인을 위해 멈추기
이 스킬은 Stitch에 무엇이든 업로드하기 전에 반드시 멈추고 물어봐야 하며, 표시 이름, 주요 색상, 폰트, 모서리 둥글기를 제시하고 명시적 승인을 기다려야 합니다.
적용 시 Id와 sourceScreen만 전송하기
selectedScreenInstances는 위치나 크기 데이터를 전혀 담지 않으며, 두 개의 식별 필드만 담습니다.
design-system 인스턴스를 대상 목록에서 제외하기
DESIGN_SYSTEM_INSTANCE로 타입이 지정된 인스턴스는 필터링되며, 실제 화면만 apply_design_system에 전달됩니다.
마크다운을 생성한 주체 표시하기
generated-by 인자는 DESIGN.md를 생성한 스킬이나 도구의 이름을 지정하며, 생략하면 고정된 기본 레이블로 대체됩니다.
업로드 직후 시스템 생성하기
create_design_system_from_design_md는 projectId와 selectedScreenInstance를 사용해 업로드 단계 직후에 호출됩니다.
디자인 시스템 이름에서 애셋 id 읽기
list_design_systems는 assets/{assetId} 형태의 이름을 반환하며, assets/ 뒤의 부분이 적용 시 사용되는 assetId입니다.

04 활용하기

Claude Code 또는 Codex에 stitch::manage-design-system 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 stitch::manage-design-system 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system

plugins/stitch-design/skills/manage-design-system/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소는 자체 경로를 문서화할 수 있습니다.

스킬에 첫 브랜드 및 design-system 작업 과제를 제공합니다

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Here is the brand direction for [product name]: dark theme, blue and purple, rounded, Inter font. The Stitch project [projectId] has no screens yet, so please turn that into the DESIGN.md and create the design system in Stitch for me to approve.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

다음 단계로 넘어가기 전에 업로드가 실제로 두 식별자를 모두 반환했는지 확인하십시오.
업로드 스크립트와 생성 호출이 모두 완료되었는지 확인하십시오. 그래야만 토큰이 프로젝트 수준에 저장됩니다.
화면 인스턴스 id를 추측하지 말고 get_project에서 가져와서, apply_design_system이 유효한 대상을 갖도록 하십시오.
생성된 DESIGN.md를 업로드하기 전에 다른 곳에서 정의된 구조와 대조해 확인하십시오.

OpenDesign에서 SKILL.md 링크를 통해 stitch::manage-design-system을 가져옵니다: Plugins → Add → Skill → Import from link를 실행한 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills 브랜치 main
스킬 파일: plugins/stitch-design/skills/manage-design-system/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 0337446
License: Apache-2.0 LICENSE에서 확인.
리포지토리 스타: 8,304 이 카탈로그에 12개의 스킬을 포함하는 전체 google-labs-code/stitch-skills 저장소에 대해 2026-09-14에 촬영된 GitHub 스냅샷입니다. stitch::manage-design-system에 대한 평가 또는 사용 수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

📥 검색(Retrieval)Stitch MCP 도구를 통해 프로젝트, 화면, HTML 자산을 가져오는 네 단계 순서.
🧠 설명으로부터의 합성design-md 스킬을 언제 재사용해야 하는지, 모호한 표현을 구체적인 값으로 바꾸는 방법.
📝 출력 구조DESIGN.md는 design-md 스킬에서 정의한 구조를 따른다고 명시합니다.
🚀 Stitch에서 디자인 시스템 생성 또는 업데이트필수 사용자 확인 지점을 거치는 2단계 업로드 및 생성 흐름.
🎨 화면에 디자인 시스템 적용정확한 JSON 형태와 필요한 id를 수집하는 세 단계.
📋 프로젝트 메타데이터 업데이트프로젝트 id, 제목, 화면, 시스템 요약을 .stitch/metadata.json에 기록합니다.
스키마 참조designSystem 객체의 전체 스키마는 reference/tool-schema.md를 참조하도록 안내합니다.
💡 모범 사례디자인 요소 설명에 대한 조언은 design-md 스킬에 위임합니다.

스킬 자체 설명

"- MCP 도구를 사용하여 Stitch의 디자인 시스템을 관리합니다. 에셋 검색, Stitch에서 디자인 시스템 생성/업데이트, 화면에 적용하는 기능을 포함합니다."

SKILL.md의 전문 설명입니다. 전체 파일은 약 5,630자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

stitch::manage-design-system 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

동의 없이 Stitch에 업로드되는 항목이 있습니까?

아닙니다. 명확한 확인 지점이 있습니다: 스킬은 생성하려는 디자인 시스템의 요약(표시 이름, 주요 색상, 폰트, 라운드 정도 포함)을 제시하고 업로드 전에 승인을 기다려야 합니다.

DESIGN.md가 몇 KB보다 큰 경우 어떻게 됩니까?

직접 MCP 도구 대신 권장되는 업로더 스크립트를 사용합니다. 이 스크립트는 마크다운을 프로세스 내에서 base64로 인코딩하여 batchCreate 엔드포인트로 전송하며, 이를 통해 출력 토큰 제한을 우회합니다.

디자인 시스템을 적용하기 위한 id는 어디서 가져옵니까?

get_project는 id와 sourceScreen을 가진 screenInstances를 반환하며, 이때도 실제 화면만 필터링됩니다.

화면이 전혀 없는 완전히 새로운 프로젝트에서도 작동합니까?

예. 화면이 없거나 사용자가 직접 설명을 제공하는 경우, 스킬은 모호한 용어를 정확한 값에 매핑하여 구체적인 헥스 코드, 폰트 패밀리, 라운드 정도를 선택한 다음 DESIGN.md를 생성합니다.

Stitch Manage Design System

실제 브랜드 및 디자인 시스템 작업에서 stitch::manage-design-system 실행

OpenDesign을 다운로드하고, SKILL.md 링크에서 stitch::manage-design-system을 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::manage-design-system