83.3K+다운로드
사용 가이드로 건너뛰기
design-md작성자 Google Labs

Design MD 스킬.

브랜드 및 디자인 시스템 작업을 위한 Claude Code 및 Codex 스킬입니다. Stitch 프로젝트를 분석하고 의미론적 DESIGN.md를 작성합니다.

  • Brand & Design Systems
  • DESIGN.md
OpenDesign 다운로드사용 가이드 보기
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/design-md/SKILL.mdSKILL.md
--- name: design-md description: Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files --- ## Prerequisites ## The Goal ## Retrieval and Networking ## Analysis & Synthesis Instructions ## Output Guidelines ## Output Format (DESIGN.md Structure)
2026-09-14에 업스트림 파일에서 읽은 전문 및 섹션 제목 · 전체 7,644자

01 기능

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

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

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

스킬 자체의 표현으로

이 스킬은 기존 Stitch 프로젝트를 DESIGN.md로 변환하여, Stitch에 같은 디자인 언어로 새 화면을 생성하도록 프롬프트할 때 소스 오브 트루스로 사용합니다. Stitch MCP 접근 권한과 디자인된 화면이 하나 이상 있는 디자이너와 개발자를 위한 것으로, 이 스킬은 MCP 네임스페이스를 발견하고, 프로젝트 및 화면 ID를 해석하며, 화면 객체와 그 HTML 및 스크린샷을 가져오고, 프로젝트의 designTheme을 읽습니다.

그런 다음 시각적 테마와 분위기, 헥스 코드와 기능적 역할을 가진 설명적 이름으로서의 색상, 타이포그래피, 컴포넌트 스타일링과 레이아웃 원칙을 원시 기술 값이 아니라 감성적인 디자인 언어로 문서화합니다.

산출물

  • 시각적 테마와 분위기, 역할이 있는 색상 팔레트, 타이포그래피 규칙, 버튼·카드·입력에 대한 컴포넌트 스타일링, 레이아웃 원칙을 다루는 5부로 구성된 디자인 시스템입니다.
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    MCP 네임스페이스 발견하기

    list_tools를 실행하여 Stitch MCP 접두사를 찾은 다음, 이후 서버에 대한 모든 호출에 그 접두사를 재사용합니다.

  2. 02
    프로젝트와 화면 해석하기

    프로젝트 ID가 주어지지 않은 경우 소유한 프로젝트를 나열한 다음, 숫자 프로젝트 ID에 대한 화면을 나열하고 Home 또는 Landing Page 같은 화면 제목과 매칭합니다.

  3. 03
    화면 객체와 에셋 가져오기

    get_screen은 스크린샷과 HTML 다운로드 URL, 화면 크기, 디바이스 유형, designTheme을 반환하며, 이후 HTML을 다운로드하여 Tailwind 클래스와 컴포넌트 패턴을 파싱합니다.

  4. 04
    프로젝트 수준 Design Theme 읽기

    projects/{id} 전체 경로로 get_project를 호출하면 색상 모드, 폰트, 라운드니스, 커스텀 색상을 담은 designTheme 객체가 반환됩니다.

  5. 05
    시맨틱 시스템 합성

    화면에서 디자인 토큰을 추출하고, 연상적인 형용사로 전체적인 분위기를 포착하며, 기술적 값을 서술적인 언어로 번역합니다.

  6. 06
    DESIGN.md 작성

    프로젝트 디렉터리에 DESIGN.md를 만들 때 규정된 다섯 개 섹션 형식을 정확히 따릅니다.

02 적합성 확인

design-md 스킬 사용 시점

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

적합한 경우

  • 이미 최소 한 개의 디자인된 화면이 있는 Stitch 프로젝트를 가지고 있고, 여기서 추출한 문서화된 디자인 시스템을 원합니다.
  • 기존 디자인 언어와 일치하는 새 화면을 Stitch가 생성하도록 프롬프트할 때 근거가 될 신뢰할 수 있는 출처를 원합니다.
  • 프로젝트를 제목이나 URL로만 알고 있고, 소유한 프로젝트 중에서 스킬이 Project ID를 찾아주기를 원합니다.
  • CSS를 그대로 다시 서술하는 대신 연상적인 형용사로 분위기를 명명하기를 원합니다.

한계 인지하기

  • Stitch MCP Server와 이미 디자인된 화면이 있는 Stitch 프로젝트 없이는 실행할 수 없습니다.
  • 이 스킬은 새 화면이 아니라 Markdown 디자인 시스템을 생성하며, DESIGN.md는 이후 Stitch 프롬프팅의 입력값입니다.
  • rounded-xl 같은 번역되지 않은 기술 전문 용어는 피해야 할 함정으로 명시되어 있습니다.
  • 헥스 코드를 빼고 서술적인 색상 이름만 남기는 것은 실패로 지적됩니다.

제공할 사항

  • Project ID (선택)제공되지 않으면 스킬이 소유한 프로젝트를 나열하고 제목이나 URL 패턴으로 대상을 매칭합니다.
  • Screen ID (선택)제공되지 않으면 스킬이 화면 제목을 검토해 대상 화면을 식별합니다.
  • Stitch Effective Prompting Guide디자인 문서 작성에 사용해야 할 언어와 패턴을 참조합니다.

03 스킬 내부

design-md 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

  1. 숫자 ID만 사용

    projectId와 screenId는 전체 projects/{id} 경로가 아니라 항상 숫자 ID로 전달합니다. 단, 전체 이름을 받는 get_project는 예외입니다.

  2. 색상을 절대 맨값으로 표기하지 않기

    모든 색상에는 서술적인 자연어 이름, 괄호 안의 정확한 헥스 코드, 그리고 기능적 역할이 함께 부여됩니다. 예를 들어 기본 액션에 사용되는 Deep Muted Teal-Navy (#294056)처럼 표기합니다.

  3. 기하학적 값은 번역하고, 그대로 인용하지 않기

    border-radius와 레이아웃 값은 물리적 서술로 변환합니다: rounded-full은 Pill-shaped, rounded-lg는 Subtly rounded corners, rounded-none은 Sharp, squared-off edges가 됩니다.

  4. 일반적인 어휘 금지

    blue나 rounded 같은 용어는 피하고, Ocean-deep Cerulean (#0077B6) 또는 Gently curved edges와 같은 표현을 사용합니다.

  5. 규정된 구조 유지

    파일은 프로젝트 제목과 Project ID로 시작한 뒤, 번호가 매겨진 다섯 개 섹션으로 이어집니다: Visual Theme & Atmosphere, Color Palette & Roles, Typography Rules, Component Stylings, Layout Principles.

  6. 무엇인지가 아니라 왜인지를 설명

    설명적인 표현 뒤 괄호 안에 정확한 값을 포함하고, 각 디자인 요소가 무엇을 위해 사용되는지 항상 명시합니다.

  7. 용어 일관성 유지

    문서 전체에서 동일한 용어를 사용하여 디자인 시스템이 하나의 시스템처럼 읽히도록 합니다.

04 활용하기

Claude Code 또는 Codex에 design-md 설치

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

Claude Code, Codex 또는 사용자의 Agent에 design-md 추가

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

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

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

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

이 프롬프트를 자신의 콘텐츠와 제약 조건으로 수정한 다음 Claude Code 또는 Codex에서 실행하십시오.

Example prompt
Use the Stitch MCP Server to get the Furniture Collection project

출처: SKILL.md 예시(원문 그대로).

첫 번째 결과 확인

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

  • 즉흥적인 레이아웃이 아니라 형식이 규정된 DESIGN.md 구조와 정확히 일치하는지 확인합니다.
  • 모든 색상 코드가 정확하며 각 색상이 설명적인 이름과 헥스 값을 모두 유지하는지 확인합니다.
  • 각 요소의 외형뿐 아니라 기능적 역할이 명시되어 있는지 확인합니다.
  • 분위기 섹션이 모호하지 않고 구체적인지, 그림자와 여백이 누락되지 않았는지 확인합니다.

OpenDesign에서는 design-md가 기본 제공됩니다: Plugins → Skills에서 상단 바에서 선택하십시오.

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

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

SKILL.md 내부

  1. 개요새로운 Stitch 화면을 프롬프팅할 때 근거가 되는 자료로 DESIGN.md를 정의합니다.
  2. 전제 조건Stitch MCP 접근 권한, 디자인된 화면, 그리고 프롬프팅 가이드가 필요합니다.
  3. 목표Stitch가 구체적인 색상 값에 근거한 시각적 설명을 읽는다는 점을 다시 명시합니다.
  4. 검색 및 네트워킹여섯 단계: 네임스페이스, 프로젝트, 화면, 메타데이터, 에셋 다운로드, 프로젝트 designTheme.
  5. 분석 및 종합 지침정체성, 분위기, 색상 팔레트, 형태, 입체감을 추출합니다.
  6. 출력 가이드라인오직 설명적인 언어, 깔끔한 마크다운, 정확한 헥스 코드, 이유 설명.
  7. 출력 형식(DESIGN.md 구조)그대로 채워 넣을 다섯 섹션 템플릿 마크다운 골격.
  8. 사용 예시Furniture Collection 프로젝트와 해당 Home 페이지를 활용한 안내.
  9. 모범 사례설명적이고, 기능적이며, 일관되고, 시각적이며, 정확하게.
  10. 성공을 위한 팁전체 구조를 먼저 파악하고, 패턴을 찾고, 의미 있게 이름을 붙이고, 계층 구조를 문서화합니다.
  11. 피해야 할 흔한 실수번역되지 않은 전문 용어, 누락된 코드, 모호하거나 불완전한 설명이 없어야 합니다.
스킬 자체 설명
"Stitch 프로젝트를 분석하고 의미론적 디자인 시스템을 DESIGN.md 파일로 합성합니다"

SKILL.md의 프론트 매터 설명입니다. 전체 파일은 약 7,644자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

design-md 스킬에 대한 질문

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

이 스킬은 Stitch에 접근하기 위해 어떤 도구를 사용합니까?

stitch 도구와 함께 Read, Write, web_fetch를 선언합니다. 실제로는 먼저 list_tools를 실행해 MCP 접두사를 찾은 다음, 그 접두사로 list_projects, list_screens, get_screen, get_project를 호출합니다.

결과적으로 정확히 무엇을 얻게 됩니까?

프로젝트 디렉터리에 생성되는 DESIGN.md 파일로, 프로젝트 제목과 ID 뒤에 비주얼 테마와 분위기, 색상 팔레트와 역할, 타이포그래피 규칙, 컴포넌트 스타일링, 레이아웃 원칙에 관한 섹션이 이어지는 구조입니다. 이는 Stitch에 새로운 화면을 프롬프트로 요청할 때 기준 자료로 재사용하기 위한 것입니다.

이 스킬이 수작업을 대체합니까?

추출과 초안 작성을 대신 해주지만, 특정한 어휘 요구 사항이 있습니다. 색상은 감성적인 이름과 정확한 헥스 코드, 기능적 역할을 함께 갖게 되며, 둥근 정도 값은 원시 클래스명 대신 알약형(Pill-shaped)이나 각진 날카로운 모서리(Sharp, squared-off edges) 같은 문구로 표현됩니다. 또한 각 결정의 이유를 설명하도록 요구합니다.

Design MD

실제 브랜드 및 디자인 시스템 작업에 design-md 실행하기.

design-md skill은 OpenDesign 내부에 포함되어 있습니다. 앱을 다운로드하고 Plugins → Skills에서 skill을 선택한 다음 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/google-labs-code/stitch-skills --skill design-md