Communitygithub.com

beavon2010/claude-skills

Stitch 프로젝트를 분석하고 의미론적 디자인 시스템을 DESIGN.md 파일로 종합합니다.

claude-skills란 무엇인가요?

이 스킬은 Design Systems Lead 역할을 맡아 Stitch 프로젝트의 기술 에셋을 분석하고 의미론적 디자인 시스템을 `DESIGN.md` 파일로 합성합니다. 이 파일은 Stitch가 기존 디자인 언어와 완벽하게 일치하는 새 화면을 생성하도록 프롬프트하는 '진실의 원천' 역할을 합니다. Stitch MCP 서버를 사용하여 프로젝트 메타데이터, 화면 객체, HTML/CSS 코드 및 스크린샷을 검색한 후 Tailwind 클래스, 사용자 정의 CSS 및 컴포넌트 패턴을 분석합니다. 분석 결과는 시각적 테마, 색상 팔레트, 타이포그래피 규칙, 컴포넌트 스타일링 및 레이아웃 원칙을 설명하는 마크다운 파일로 구성되며, 기술적 값은 설명적인 디자인 용어로 변환됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/beavon2010/claude-skills/tree/HEAD/.claude/skills/design-md
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Stitch DESIGN.md 스킬

당신은 전문 디자인 시스템 리드입니다. 목표는 제공된 기술 에셋을 분석하고 '의미론적 디자인 시스템'을 DESIGN.md 파일로 합성하는 것입니다.

개요

이 스킬은 Stitch가 기존 디자인 언어와 완벽하게 일치하는 새 화면을 생성하도록 프롬프트하는 '진실의 원천' 역할을 하는 DESIGN.md 파일을 만드는 데 도움을 줍니다. Stitch는 특정 색상 값으로 뒷받침되는 '시각적 설명'을 통해 디자인을 해석합니다.

사전 요구 사항

목표

DESIGN.md 파일은 Stitch가 기존 디자인 언어와 완벽하게 일치하는 새 화면을 생성하도록 프롬프트하는 '진실의 원천' 역할을 합니다. Stitch는 특정 색상 값으로 뒷받침되는 '시각적 설명'을 통해 디자인을 해석합니다.

검색 및 네트워킹

Stitch 프로젝트를 분석하려면 Stitch MCP 서버 도구를 사용하여 화면 메타데이터 및 디자인 에셋을 검색해야 합니다.

  1. 네임스페이스 검색: list_tools를 실행하여 Stitch MCP 접두사를 찾습니다. 이후 모든 호출에 이 접두사(예: mcp_stitch:)를 사용합니다.

  2. 프로젝트 조회 (프로젝트 ID가 제공되지 않은 경우):

    • [prefix]:list_projects를 filter: "view=owned"와 함께 호출하여 모든 사용자 프로젝트를 검색합니다.
    • 제목 또는 URL 패턴으로 대상 프로젝트를 식별합니다.
    • name 필드에서 프로젝트 ID를 추출합니다(예: projects/13534454087919359824).

  3. 화면 조회 (화면 ID가 제공되지 않은 경우):

    • projectId(전체 경로가 아닌 숫자 ID만)와 함께 [prefix]:list_screens를 호출합니다.
    • 화면 제목을 검토하여 대상 화면(예: '홈', '랜딩 페이지')을 식별합니다.
    • 화면의 name 필드에서 화면 ID를 추출합니다.

  4. 메타데이터 가져오기:

    • projectId와 screenId(둘 다 숫자 ID만)와 함께 [prefix]:get_screen을 호출합니다.
    • 이는 다음을 포함한 완전한 화면 객체를 반환합니다:
      • screenshot.downloadUrl - 디자인의 시각적 참조
      • htmlCode.downloadUrl - 전체 HTML/CSS 소스 코드
      • width, height, deviceType - 화면 크기 및 대상 플랫폼
      • designTheme을 포함한 프로젝트 메타데이터(색상 및 스타일 정보 포함)

  5. 에셋 다운로드:

    • web_fetch 또는 read_url_content를 사용하여 htmlCode.downloadUrl에서 HTML 코드를 다운로드합니다.
    • 선택적으로 시각적 참조를 위해 screenshot.downloadUrl에서 스크린샷을 다운로드합니다.
    • HTML을 파싱하여 Tailwind 클래스, 사용자 정의 CSS 및 컴포넌트 패턴을 추출합니다.

  6. 프로젝트 메타데이터 추출:

    • 프로젝트 name(전체 경로: projects/{id})과 함께 [prefix]:get_project를 호출하여 다음을 얻습니다:
      • designTheme 객체(색상 모드, 글꼴, 둥글기, 사용자 정의 색상 포함)
      • 프로젝트 수준 디자인 가이드라인 및 설명
      • 장치 유형 기본 설정 및 레이아웃 원칙

분석 및 합성 지침

1. 프로젝트 ID 추출(JSON)

  • 프로젝트 제목을 찾습니다.
  • 특정 프로젝트 ID를 찾습니다(예: JSON의 name 필드에서).

2. 분위기 정의(이미지/HTML)

스크린샷과 HTML 구조를 평가하여 전반적인 '분위기'를 파악합니다. 분위기를 설명하기 위해 연상시키는 형용사를 사용합니다(예: '통풍이 잘 되는', '조밀한', '미니멀리스트', '실용적인').

3. 색상 팔레트 매핑(Tailwind 구성/JSON)

시스템의 주요 색상을 식별합니다. 각 색상에 대해 다음을 제공합니다:

  • 해당 색상의 특성을 전달하는 설명적인 자연어 이름(예: '깊은 무딘 청록-네이비')
  • 정밀성을 위한 특정 16진수 코드(예: '#294056')
  • 특정 기능적 역할(예: '기본 작업에 사용됨')

4. 기하학 및 모양 번역(CSS/Tailwind)

기술적인 border-radius 및 레이아웃 값을 물리적 설명으로 변환합니다:

  • rounded-full을 '알약 모양'으로 설명
  • rounded-lg를 '미묘하게 둥근 모서리'로 설명
  • rounded-none을 '날카롭고 각진 가장자리'로 설명

5. 깊이 및 입체감 설명

UI가 레이어를 처리하는 방식을 설명합니다. 그림자의 존재감과 품질을 설명합니다(예: '평평한', '속삭임처럼 부드러운 확산 그림자' 또는 '무겁고 대비가 강한 드롭 섀도우').

출력 지침

  • 언어: 설명적인 디자인 용어와 자연어만 독점적으로 사용합니다.
  • 형식: 아래 구조를 따르는 깔끔한 마크다운 파일을 생성합니다.
  • 정밀성: 설명적인 이름을 사용하면서 정확한 16진수 코드를 포함합니다.
  • 맥락: 디자인 결정의 '무엇'뿐만 아니라 '이유'를 설명합니다.

출력 형식 (DESIGN.md 구조)

# 디자인 시스템: [프로젝트 제목]
**프로젝트 ID:** [프로젝트 ID 입력]

## 1. 시각적 테마 및 분위기
(분위기, 밀도 및 미학적 철학에 대한 설명.)

## 2. 색상 팔레트 및 역할
(설명적인 이름 + 16진수 코드 + 기능적 역할로 색상 나열.)

## 3. 타이포그래피 규칙
(글꼴 모음, 헤더 대 본문의 가중치 사용 및 자간 특성에 대한 설명.)

## 4. 컴포넌트 스타일링
* **버튼:** (모양 설명, 색상 할당, 동작.)
* **카드/컨테이너:** (모서리 둥글기 설명, 배경색, 그림자 깊이.)
* **입력 필드/양식:** (테두리 스타일, 배경.)

## 5. 레이아웃 원칙
(여백 전략, 마진 및 그리드 정렬에 대한 설명.)

사용 예시

가구 컬렉션 프로젝트에 이 스킬을 사용하려면:

  1. 프로젝트 정보 검색:

    Stitch MCP 서버를 사용하여 가구 컬렉션 프로젝트를 가져옵니다.

  2. 홈 페이지 화면 세부 정보 가져오기:

    홈 페이지 화면의 코드, 이미지 및 화면 객체 정보를 검색합니다.

  3. 모범 사례 참조:

    Stitch 효과적인 프롬프트 가이드를 검토합니다:
https://stitch.withgoogle.com/docs/learn/prompting/

  4. 분석 및 합성:

    • 화면에서 관련 디자인 토큰을 모두 추출합니다.
    • 기술적 값을 설명적인 언어로 변환합니다.
    • DESIGN.md 구조에 따라 정보를 구성합니다.

  5. 파일 생성:

    • 프로젝트 디렉토리에 DESIGN.md를 생성합니다.
    • 규정된 형식을 정확히 따릅니다.
    • 모든 색상 코드가 정확한지 확인합니다.
    • 연상시키고 디자이너 친화적인 언어를 사용합니다.

모범 사례

  • 설명적으로 작성하세요: '파란색'이나 '둥근'과 같은 일반적인 용어를 피하십시오. '대양처럼 깊은 군청색 (#0077B6)' 또는 '부드럽게 곡선 처리된 가장자리'를 사용하십시오.
  • 기능적으로 작성하세요: 각 디자인 요소가 무엇에 사용되는지 항상 설명하십시오.
  • 일관성을 유지하세요: 문서 전체에서 동일한 용어를 사용하십시오.
  • 시각적으로 작성하세요: 설명을 통해 독자가 디자인을 시각화할 수 있도록 도우십시오.
  • 정확성을 유지하세요: 자연어 설명 뒤에 정확한 값(16진수 코드, 픽셀 값)을 괄호 안에 포함시키십시오.

성공을 위한 팁

  1. 큰 그림부터 시작하세요: 세부 사항에 뛰어들기 전에 전반적인 미학을 이해하십시오.
  2. 패턴을 찾으세요: 일관된 간격, 크기 및 스타일링 패턴을 식별하십시오.
  3. 의미론적으로 생각하세요: 색상을 단순한 외관이 아니라 용도에 따라 이름을 지정하십시오.
  4. 계층 구조를 고려하세요: 시각적 무게와 중요성이 어떻게 전달되는지 문서화하십시오.
  5. 가이드를 참조하세요: Stitch 효과적인 프롬프트 가이드의 언어와 패턴을 사용하십시오.

피해야 할 일반적인 함정

  • ❌ 기술적 전문 용어를 번역 없이 사용하는 경우(예: 'rounded-xl' 대신 '넉넉하게 둥근 모서리')
  • ❌ 색상 코드를 생략하거나 설명적인 이름만 사용하는 경우
  • ❌ 디자인 요소의 기능적 역할을 설명하지 않는 경우
  • ❌ 분위기 설명이 너무 모호한 경우
  • ❌ 그림자나 간격 패턴과 같은 미묘한 디자인 세부 사항을 무시하는 경우

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

beavon2010/claude-skills

>- Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

beavon2010/claude-skills

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

beavon2010/claude-skills

>- 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 the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community