stitch::extract-design-md작성자 Google Labs

Stitch Extract Design MD 스킬.

브랜드 및 디자인 시스템 작업을 위한 Claude Code 및 Codex 스킬: 모든 프레임워크의 프론트엔드 소스 코드에서 완전한 DESIGN.md를 추출합니다.

Brand & Design Systems
DESIGN.md

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

--- name: stitch::extract-design-md description: - Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit … --- ## Why This Exists ## When to Use ## Prerequisites ## Workflow ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

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

01 기능

stitch::extract-design-md 스킬이 Claude Code와 Codex에서 하는 일

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

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

스킬 자체의 표현으로

이 스킬은 프런트엔드 코드베이스를 읽고 앱을 빌드하거나 렌더링하지 않은 상태에서 시각적 언어를 담은 DESIGN.md를 작성합니다. package.json과 설정 파일에서 프레임워크(React, Vue, Svelte, Angular, Tailwind, CSS-in-JS, 순수 CSS)를 감지한 다음, 분위기, 색상 팔레트와 역할, 타이포그래피, 컴포넌트 스타일링, 레이아웃 원칙, Stitch 생성을 위한 참고 사항을 순서대로 다룹니다.

.stitch/DESIGN.md 파일로 출력되며, 다른 스킬이 이를 파싱하기 때문에 name과 colors 매핑을 포함하는 YAML 프런트매터 블록으로 시작해야 합니다. 기존 프로젝트의 디자인 시스템을 역설계, 감사, 또는 마이그레이션하려는 디자이너와 개발자를 대상으로 합니다.

산출물

표준 디자인 시스템 형식으로 작성된 DESIGN.md 문서입니다.
해당 파일 상단에 name과 colors 매핑이 포함된 YAML 프런트매터 블록이 있고, 그 뒤에 마크다운 섹션이 이어집니다.
Stitch 생성을 위한 디자인 시스템 노트의 마지막 섹션으로, 언어, 색상 참조 및 컴포넌트 프롬프트를 다룹니다.

예시 프롬프트 보기 ↗

작동 방식

01
프레임워크 및 스택 감지
프로젝트 루트에서 package.json, tailwind.config.js, postcss.config.js, theme.js, tokens.js와 같은 특징적인 파일을 스캔한 다음, package.json을 읽어 프레임워크, CSS 툴링, 디자인 토큰 라이브러리를 확인합니다.
02
매칭 프레임워크 레퍼런스 읽기
React/Next/Tailwind, Vue/Nuxt, Svelte, Angular, 그리고 일반 CSS는 각각 색상, 타이포그래피, 간격을 파악하기 위한 프레임워크별 패턴이 담긴 참조 파일을 가지고 있습니다.
03
색상 팔레트를 추출하고 역할을 지정합니다
색상은 CSS 사용자 정의 속성, Tailwind 설정, 테마 파일, 컴포넌트 스타일, 범위가 지정된 클래스, CSS-in-JS 객체에서 가져온 다음, 색조가 아니라 기능별로 그룹화됩니다.
04
컴포넌트 및 레이아웃 분석
이 스킬은 버튼, 카드, 내비게이션, 입력 요소 및 도메인별 컴포넌트를 살펴보며, 그리드, 여백, 정렬 및 반응형 동작까지 검토합니다.
05
DESIGN.md 작성하기
모든 내용은 표준 DESIGN.md 형식으로 정리되어, 없으면 새로 생성되는 .stitch 디렉터리에 기록됩니다.
06
선택적으로 Stitch로 전달
사용자가 디자인 시스템을 Stitch로 푸시하기를 원하는 경우, 작성된 DESIGN.md가 manage-design-system 스킬의 입력이 됩니다.

02 적합성 확인

stitch::extract-design-md 스킬 사용 시점

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

적합한 경우

프런트엔드 코드베이스가 있고, 그 소스로부터 디자인 시스템을 추출하거나 문서화하고자 합니다.
앱을 빌드하거나 렌더링할 수는 없지만, 소스 파일은 확인할 수 있습니다.
프로젝트의 기존 비주얼 아이덴티티를 Stitch로 마이그레이션하려는 경우입니다.
코드베이스 전체의 스타일링이 일관되지 않아 통일하거나 정리해야 합니다.

한계 인지하기

이는 렌더링된 HTML 경로가 아닙니다. 렌더링된 HTML에서 작업하는 것은 별도의 design-md 스킬이 수행하는 작업입니다.
프런트엔드 프로젝트의 소스 디렉터리에 접근할 수 없으면 실행할 수 없습니다.

제공할 사항

테마 또는 토큰 파일이 있는 경우theme. 또는 tokens. 파일을 가리키면 디자인 값에 대해 가장 신뢰할 수 있는 소스를 제공합니다.
프로젝트 이름 및 알고 있는 경우 ID문서 제목에는 프로젝트 이름이 사용되며, 프로젝트 ID는 확인 가능한 경우에만 포함되고 그렇지 않으면 생략됩니다.
Stitch로 푸시할지에 대한 결정사용자가 디자인 시스템을 Stitch로 푸시하기를 원하는 경우, 워크플로는 3단계를 지나 통합 핸드오프로 이어집니다.

03 스킬 내부

stitch::extract-design-md 스킬이 Claude Code와 Codex에 제공하는 규칙

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

YAML Frontmatter는 필수입니다
파일은 examples/DESIGN.md의 예시와 일치하도록 name과 colors 매핑을 포함하는 YAML 블록으로 시작해야 합니다.
색조가 아닌 성격으로 색상 이름 짓기
각 색상에는 그 색이 어떻게 보이는지를 연상시키는 설명적인 이름이 부여됩니다. 그래서 #294056은 "Blue"가 아니라 "Deep Muted Teal-Navy"가 됩니다.
거의 중복되는 색상 통합
#333과 #2C2C2C처럼 거의 동일한 값은 의도한 색상을 가장 잘 나타내는 하나의 이름으로 병합됩니다.
Tailwind Config에서 시작합니다
커스터마이징된 tailwind.config.js는 그 자체로 디자인 시스템으로 취급되며, 가장 먼저 추출된 후 컴포넌트들이 오버라이드 여부를 확인하기 위해 표본 점검됩니다.
테마 파일이 컴포넌트 스타일보다 우선합니다
팔레트를 정의하는 테마 파일은 의도된 디자인 시스템을 드러내지만, 흩어진 인라인 스타일은 실제로 출시된 결과만을 보여줍니다.
CSS Custom Properties를 의도로 취급하기
--brand-primary와 같은 변수는 우연히 정해진 값이 아니라 의도적으로 설계된 디자인 토큰이므로, 그에 맞게 존중되어야 합니다.
Stitch 노트를 자연어로 작성하기
생성 노트는 CSS 구문이나 원시 속성을 그대로 붙여 넣지 않고 컴포넌트를 산문으로 설명합니다.
분위기는 에디토리얼 어조로 유지
분위기 섹션은 기술 문서가 아니라 무드와 철학을 다루는 에디토리얼 카피로 작성합니다.

04 활용하기

Claude Code 또는 Codex에 stitch::extract-design-md 설치

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

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

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

Terminal

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

plugins/stitch-design/skills/extract-design-md/SKILL.md에 대한 일반적인 skills CLI 형식이며, 리포지토리에서 자체 경로를 문서화했을 수 있습니다.

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

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

Starter prompt

Pull the design system out of [./src] for me — it's a Vue app with a theme.ts and some SCSS, and the dev server won't start right now. Group the colors by role, not by hue, give near-duplicates one descriptive name, and cover typography, buttons, cards, navigation and inputs. Write it to .stitch/DESIGN.md with the YAML frontmatter, and finish with a few Stitch generation prompts.

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

첫 번째 결과 확인

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

모든 색상에는 설명적인 이름, 헥스 코드, 기능적 역할이 있습니다.
타이포그래피는 글꼴 패밀리, 성격 설명, 전체 위계를 다룹니다.
컴포넌트 스타일은 형태, 색상, 상태, 전환을 명시합니다.
레이아웃은 최대 너비, 그리드, 브레이크포인트, 간격 전략을 명시합니다.
이 문서는 단순한 원시 값이 아니라 스타일링에 담긴 의도를 기록합니다.

OpenDesign에서 SKILL.md 링크를 통해 stitch::extract-design-md를 임포트합니다: Plugins → Add → Skill → Import from link를 선택한 다음 상단 바에서 해당 스킬을 고릅니다.

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

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

SKILL.md 내부

존재 이유소스를 읽는 편이 렌더링된 HTML보다 빠르고, 빌드가 깨진 상태에서도 동작합니다.
사용 시점트리거: 디자인 시스템 추출, 문서화, 감사, 마이그레이션, 일관성 없는 스타일 통합.
사전 요구 사항소스 디렉터리 접근 권한만 있으면 되며, 빌드나 런타임 의존성은 필요하지 않습니다.
워크플로네 단계: 프로젝트 파악, 심층 추출, DESIGN.md 작성, 선택적 Stitch 통합.
품질 체크리스트색상, 타이포그래피, 컴포넌트, 레이아웃, 언어, 중복 제거, 의도에 대한 검증 항목.
더 나은 추출을 위한 팁코드 주석을 활용하고, 토큰 라이브러리와 테마 파일을 우선하며, Tailwind 설정을 시스템으로 간주합니다.

스킬 자체 설명

"- 프론트엔드 소스 코드(React, Vue, Svelte, Angular, 일반 HTML/CSS 또는 모든 웹 프레임워크)에서 직접 포괄적인 디자인 시스템(DESIGN.md)을 추출합니다. 컴포넌트 파일, 스타일시트, Tailwind 설정, 테마 정의 및 디자인 토큰을 분석하여 풍부한 Stitch 호환 디자인 시스템 문서를 생성합니다. 사용자가 기존 코드베이스에서 디자인 시스템을 역공학하거나, 프로젝트의 시각적 언어를 검토하거나, 소스 파일에서 디자인 토큰을 추출하거나, 프론트엔드 저장소의 스타일 패턴을 이해하려고 할 때마다 이 스킬을 사용하십시오. 단순히 \"이 앱은 어떻게 생겼나요?\" 또는 \"이 코드에서 디자인을 추출하세요\"라고 말하는 경우에도 사용할 수 있습니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 13,970자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

stitch::extract-design-md 스킬에 관한 질문

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

의존성을 설치하거나 앱을 먼저 빌드해야 하나요?

아니요. 이 스킬은 소스 파일만 읽고 빌드나 런타임 의존성이 필요하지 않으므로, 의존성이 없거나 빌드가 깨진 상태에서도 동작합니다.

어떤 프레임워크와 스타일링 환경을 처리할 수 있나요?

React, Vue, Svelte, Angular, 순수 HTML/CSS를 비롯한 모든 웹 프레임워크를 처리하며, Tailwind 설정, CSS-in-JS, 테마 또는 토큰 파일도 포함됩니다. 프레임워크별 추출 패턴은 React/Tailwind, Vue, Svelte, Angular, 순수 CSS를 위해 참조하는 레퍼런스 파일에 들어 있습니다.

DESIGN.md에 YAML 프런트매터가 필요한 이유는 무엇인가요?

이 블록은 다른 스킬이 파싱하는 구조화된 데이터로서 이름과 색상 매핑을 담고 있습니다. 이를 생략하거나 핵심 색상 토큰을 빠뜨리는 것은 스킬을 올바르게 사용하지 못한 것입니다.

완성된 디자인 시스템을 Stitch로 푸시할 수 있나요?

해당 단계는 선택 사항이며 다른 skill에서 처리합니다. Phase 4는 manage-design-system으로 작업을 인계하며, 이 skill은 DESIGN.md를 입력으로 사용하여 MCP create/update 호출을 수행합니다. 문서만 필요하다면 작업은 Phase 3 이후 종료됩니다.

Stitch Extract Design MD

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

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

OpenDesign 다운로드 모든 스킬 보기

터미널

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