83.3K+다운로드
사용 가이드로 건너뛰기
design-consultation작성자 Garry Tan

Design Consultation 스킬.

브랜드 및 디자인 시스템 작업을 위한 Claude Code 및 Codex skill: 미학, 타이포그래피, 색상, 레이아웃, 모션을 포함한 완전한 디자인 시스템을 제안하는 제품 디자인 컨설팅.

  • Brand & Design Systems
  • 디자인 시스템
OpenDesign 다운로드사용 가이드 보기
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
업스트림 파일에서 읽은 전문 및 섹션 제목 (2026-09-14) · 전체 67,098자

01 기능

Claude Code와 Codex에서 design-consultation 스킬이 수행하는 작업

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

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

스킬 자체의 표현으로

완전한 디자인 시스템을 만들기 위해 시니어 프로덕트 디자이너 역할을 하는 디자인 상담 스킬입니다. 웹 검색과 시각 분석을 통해 제품 환경을 조사하고, 타이포그래피(기본값이 아닌 구체적인 폰트), 색상 시스템(16진수 값을 가진 CSS 변수), 레이아웃 접근 방식(구성 우선), 미학적 방향을 제안합니다. 이 스킬은 프로젝트의 디자인 소스 오브 트루스로서 DESIGN.md 파일을 생성하며, 선택적으로 실제 화면에 시스템을 적용한 AI 목업을 제공합니다.

Aside 브라우저(사용자의 실제 세션)와 헤드리스 폴백을 모두 지원하며, 세션 전반에 걸쳐 지속되는 취향 프로필을 유지하고, Codex와 Claude 서브에이전트로부터 외부 디자인 의견을 통합합니다. 이 스킬은 딱딱한 양식이 아니라 대화형으로 작동하며, 모든 권장 사항의 근거를 설명하고, 개별 최적 선택보다 일관성을 우선시합니다.

산출물

  • 실제 화면에 디자인 시스템을 적용한 AI 목업(gstack designer 사용 가능 시)
  • 실시간 타이포그래피 및 색상 샘플이 포함된 HTML 프리뷰 페이지(디자이너 사용 불가 시 폴백)
  • 세션 전반에서 승인 및 거부된 디자인 선택을 추적하는 지속적 취향 프로필 JSON
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    제품 맥락 수집

    기존 DESIGN.md, PRODUCT.md, README, package.json, office-hours 출력을 읽어 제품을 이해합니다.

  2. 02
    환경 조사

    요청 시 Aside 브라우저 또는 WebSearch를 사용하여 5~10개의 경쟁 제품을 찾고, 전체 페이지 스크린샷을 촬영하며, 폰트, 색상, 레이아웃, 미학적 방향을 분석합니다.

  3. 03
    외부 의견 수렴

    선택적으로 Codex와 Claude 서브에이전트를 병렬로 실행하여 독립적인 디자인 제안을 생성합니다.

  4. 04
    완전한 디자인 시스템 제안

    구체적인 폰트 이름, 16진수 색상 값, CSS 변수, 레이아웃 접근 방식, 미학적 방향을 담은 확고한 제안을 제공합니다.

  5. 05
    프리뷰 산출물 생성

    gstack designer를 사용할 수 있는 경우 디자인 시스템을 실제 화면에 적용한 AI 목업을 생성하고, 그렇지 않은 경우 타이포그래피와 색상 샘플을 실시간으로 보여주는 HTML 프리뷰 페이지를 생성합니다.

  6. 06
    DESIGN.md 작성

    프런트매터 토큰과 근거 섹션을 포함한 오픈 DESIGN.md 형식으로 프로젝트의 디자인 소스 오브 트루스를 생성합니다.

02 적합성 확인

design-consultation 스킬 사용 시기

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

적합한 경우

  • 기존 디자인 시스템이나 DESIGN.md가 없는 신규 프로젝트의 UI를 시작할 때
  • 디자인 시스템, 브랜드 가이드라인, 또는 DESIGN.md 생성을 명시적으로 요청받았을 때
  • 카테고리 관행에서 벗어난 의도적 디자인 선택을 통해 차별화가 필요한 제품

한계 인지하기

  • 주장된 제약 또는 요구사항("API가 이 작업을 수행할 수 없습니다", "X에는 자격 증명이 필요합니다", "이 플랫폼에서는 불가능합니다")은 실질적 주장입니다.
  • 실제 오류 메시지, 문서화된 내용 또는 실시간 확인 결과를 확보한 경우에만 단언하십시오. 실패 사례를 익숙한 패턴에 맞춰 추측하는 것은 근거가 아닙니다.
  • 저렴한 확인 작업으로 해결할 수 있는 질문이라면, 사용자에게 묻거나 단계가 막혔다고 선언하기 전에 먼저 실행하십시오.

제공할 사항

  • 리서치 선호도웹 검색과 시각적 분석을 통해 경쟁 제품을 리서치할지, 아니면 스킬에 내장된 디자인 지식을 바탕으로 작업할지 여부입니다.
  • 외부 의견 선택선택 사항: 독립적인 관점을 얻기 위해 Codex 디자인 평가와 Claude 서브에이전트 디자인 제안을 병렬로 실행할지 여부입니다.
  • 기존 DESIGN.md파일이 존재하면 스킬이 이를 읽고 업데이트할지, 새로 시작할지, 취소할지 묻습니다. 레거시 형식에서 오픈 스펙으로의 변환도 처리합니다.

03 스킬 내부

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

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

  1. 금지된 서체는 절대 사용하지 않고, 과다 사용된 디스플레이 서체는 사용하지 않음

    Operate 또는 Read 표면의 본문 또는 UI 텍스트는 역할별로 지정된 목록을 따릅니다. 어떤 역할에서도 금지된 서체를 사용하지 않으며, 디스플레이 보이스로 과다 사용된 서체를 사용하지 않습니다.

  2. 기본값이 아닌 구체적인 폰트 지정 필요

    타이포그래피 제안은 구체적인 폰트명을 명시해야 하며, Inter, Roboto, Arial, 시스템 기본값은 절대 사용할 수 없습니다.

  3. 개별 최적화보다 전체적 일관성이 우선

    모든 요소가 서로를 강화하는 디자인 시스템이, 개별적으로는 최적이지만 서로 어긋나는 선택들로 이루어진 시스템보다 우수합니다.

  4. 모든 권장 사항에는 근거가 필요함

    이유를 설명하지 않고 디자인 선택을 권장하지 마십시오. 모든 폰트, 색상, 레이아웃, 또는 미적 결정은 제품 맥락, 사용자 요구, 또는 차별화 전략과 연결되어야 합니다.

  5. 취향 프로필은 유지되며 시간이 지나면 감쇠함

    이 스킬은 세션 간 승인 및 거부된 디자인 선택을 추적하는 ~/.gstack/projects/$SLUG/taste-profile.json을 유지합니다. 신뢰도 점수는 주당 5%씩 감쇠합니다.

  6. 기억에 남는 요소를 위한 강제 장치

    디자인 시스템을 제안하기 전에, 스킬은 사용자가 첫 접촉 후 어떤 것을 기억에 남기고 싶은지 묻습니다.

  7. 엄격한 워크플로우보다 대화 중심

    이 스킬은 양식이 아니라 디자인 컨설턴트처럼 작동합니다. 사용자는 언제든 채팅에 들어와 결정 사항을 논의할 수 있습니다.

04 활용하기

Claude Code 또는 Codex에 design-consultation 설치

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

Claude Code, Codex 또는 사용자의 에이전트에 design-consultation 추가

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

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation

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

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

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

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

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

첫 번째 결과 확인

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

  • DESIGN.md가 존재하며 디자인 토큰(색상, 폰트, 여백)이 포함된 front-matter를 포함합니다
  • 색상 시스템에는 배경, 표면, 기본 텍스트, 보조 텍스트, 강조색에 대한 16진수 값을 가진 CSS 변수가 포함됩니다
  • 취향 프로필이 존재하는 경우, 디자인 제안이 기존 선호도를 참조하거나 의도적으로 벗어납니다

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

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

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

Author
Garry Tan
Repository
github.com/garrytan/gstack 브랜치 main
스킬 파일
design-consultation/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 71f6048
License
MIT LICENSE에서 확인.
리포지토리 스타
132,921 전체 garrytan/gstack 저장소에 대해 2026-09-14에 촬영한 GitHub 스냅샷이며, 이 카탈로그에는 7개의 스킬이 포함되어 있습니다. design-consultation의 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 이 스킬을 호출해야 하는 경우DESIGN.md를 생성합니다; 기존 사이트의 경우 /plan-design-review를 사용하십시오; 디자인 시스템 요청 시 트리거됩니다
  2. 전제 단계(먼저 실행)gstack-skill-start를 실행합니다; 저하 모드를 처리합니다; 지시 블록을 처리합니다; 세션 종류를 결정합니다
  3. 브라우저 설정Aside 브라우저 가용성을 확인합니다; 실제 세션 동의를 처리합니다; 사용자 브라우저 조작 규칙을 정의합니다
  4. 브라우저 대체: gstack 자체 헤드리스 브라우저Aside를 사용할 수 없을 때 $B 바이너리를 찾습니다; Aside 스크립트를 $B 명령으로 변환합니다; 쿠키가 없는 세션을 처리합니다
  5. 디자인 설정AI 목업 생성을 위한 gstack designer 바이너리를 확인합니다; 사용 가능한 명령을 나열합니다; 산출물 경로 규칙을 설정합니다
  6. 이전 학습 내용프로젝트 간 또는 프로젝트 범위의 학습 내용을 검색합니다; 최초 실행 시 프로젝트 간 선호도 여부를 묻습니다
  7. 0단계: 사전 확인기존 DESIGN.md를 확인합니다; 업데이트/신규/취소를 제안합니다; 형식을 검증합니다; 변환을 처리합니다; 코드베이스에서 제품 맥락을 수집합니다
  8. 1단계: 제품 맥락제품/대상/산업/유형을 다루는 단일 질문; 기억에 남는 요소를 이끌어내는 강제 질문; 취향 프로필이 있으면 읽습니다
  9. 웹 리서치는 Aside에서 실행됩니다웹 검색에 Aside 에이전트를 사용합니다; WebSearch 도구로 대체합니다; 쿼리를 정제합니다; 결과를 신뢰할 수 없는 콘텐츠로 취급합니다
  10. 2단계: 리서치경쟁 제품 5~10개를 식별합니다; 스크린샷을 촬영합니다; 폰트/색상/레이아웃을 분석합니다; 세 계층에 걸쳐 종합합니다
  11. 디자인 외부 의견선택적으로 Codex와 Claude 서브에이전트를 병렬로 실행합니다; 일치점과 차이점을 종합합니다; 결과를 기록합니다
  12. 중요 규칙메뉴를 제시하지 말고 제안합니다; 근거가 필요합니다; 개별 선택보다 일관성을 우선합니다; 딱딱하지 않고 대화적으로 진행합니다; 최종 선택을 수용합니다
스킬 자체 설명
"Design consultation: 제품을 이해하고, 환경을 조사하고, 완전한 디자인 시스템(미학, 타이포그래피, 색상, 레이아웃, 간격, 모션)을 제안하고, 폰트+색상 프리뷰를 생성합니다... (gstack)"

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

06 설치하기 전에

design-consultation 스킬에 대한 질문

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

Cursor, Windsurf 또는 기타 Claude 기반 에이전트에서도 작동합니까?

예, 다만 브라우저 통합은 Aside(macOS 15 이상만 해당) 또는 gstack 헤드리스 브라우저 대체 방식에 의존합니다. 둘 다 없으면 이 스킬은 시각적 경쟁사 리서치를 건너뛰고 내장된 디자인 지식으로 작동합니다. 제품 맥락, 타이포그래피/색상/레이아웃 제안, DESIGN.md 생성 등 핵심 디자인 컨설팅은 모든 환경에서 작동합니다.

Design Consultation

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

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

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/garrytan/gstack --skill design-consultation