FReptar0/design-guard

Google Stitch를 사용하여 웹 프로젝트를 위한 완전한 DESIGN.md를 생성합니다.

지침

0. 발견 확인 (다른 작업 전에 반드시 실행):
   • .dg-research/ 디렉토리가 존재하고 JSON 파일이 포함되어 있는지 확인합니다.
   • .dg-research/가 존재하지 않고 사용자가 특정 비즈니스 이름, 회사, 브랜드, 카페, 레스토랑, 매장 또는 실제 엔티티를 언급한 경우:
     • 중단합니다. 사용자에게 다음과 같이 알립니다: "먼저 /dg-discover를 실행하여 [비즈니스 이름]을 조사하는 것을 권장합니다. 이렇게 하면 AI 기본값이 아닌 실제 시장 및 경쟁사 데이터를 기반으로 한 DESIGN.md가 생성됩니다. 대신 /dg-discover를 실행하시겠습니까?"
     • 사용자가 조사를 건너뛰겠다고 명시적으로 말한 경우에만 /dg-design을 진행합니다.
   • .dg-research/가 존재하고 JSON 파일이 있는 경우: .dg-research/latest.json을 읽어 비즈니스 브리프, 경쟁사 분석, 브랜드 색상을 가져옵니다. 이 연구 데이터는 비즈니스 컨텍스트의 기본 소스입니다. CLAUDE.md의 프로젝트 수준 컨텍스트보다 우선하여 사용하세요. 1단계로 진행합니다.
   • 사용자 요청이 일반적인 경우(특정 비즈니스 언급 없이 "포트폴리오 사이트 만들어 줘" 또는 "SaaS 대시보드 생성" 등): 바로 1단계로 진행합니다. 연구는 실제 비즈니스를 위한 것이지 일반 프로젝트를 위한 것이 아닙니다.

컨텍스트 분리 (중요 -- 생성 전에 읽어야 함)

DESIGN.md를 생성할 때 다음 두 가지 컨텍스트를 구분하십시오:

1. 호스트 프로젝트 -- 사용자가 실행 중인 코드베이스(Design Guard). CLAUDE.md는 이 프로젝트를 설명합니다. 비즈니스 모델, 기능, CLI 명령어, 테스트 수, 기술 아키텍처는 모두 Design Guard에 대한 것이지, 사용자의 대상 비즈니스가 아닙니다.

2. 대상 비즈니스 -- 사용자가 DESIGN.md를 원하는 비즈니스입니다. 다음에서 가져옵니다:

   • 사용자가 제공하는 브랜드 브리프(1단계)
   • .dg-research/latest.json의 연구 데이터(/dg-discover에서 사용 가능한 경우 -- 이것이 기본 소스입니다)
   • 대상 비즈니스에 대한 WebSearch/WebFetch 결과

규칙:

• 대상 비즈니스가 Design Guard와 다른 경우:

  • CLAUDE.md의 비즈니스 설명, 기능 목록, 통계 또는 기술 세부 정보를 사용하지 마십시오
  • 대상 비즈니스의 기능으로 CLI 명령어, 테스트 수, TypeScript, Node.js, MCP 또는 Stitch를 언급하지 마십시오
  • 대상을 "오픈 소스", "디자인 인텔리전스", 또는 CLAUDE.md의 프로젝트 개요에 있는 어떤 문구로도 설명하지 마십시오
  • DESIGN.md의 모든 비즈니스 사실은 사용자의 브리프 또는 연구 데이터에서 가져와야 합니다
  • 프로젝트 루트에 기존 DESIGN.md가 있는 경우, 새 파일에 색상, 글꼴 또는 비즈니스 컨텍스트를 복사하지 말고 브리프와 연구에서 새로 생성하십시오

• 대상 비즈니스가 Design Guard 자체인 경우:

  • CLAUDE.md는 비즈니스 컨텍스트의 유효한 소스입니다. 사용자의 브리프와 함께 사용하십시오

• 대상 비즈니스에 관계없이 항상 CLAUDE.md의 DESIGN.md 8개 섹션 명세 및 유효성 검사 규칙을 따르십시오. FORMAT 규칙은 항상 적용됩니다. BUSINESS 컨텍스트만 분리됩니다.

1. 사용자가 인수로 브랜드 브리프를 제공한 경우 사용합니다. 그렇지 않으면 다음을 요청합니다:

   • 회사/제품명
   • 업계 또는 도메인
   • 타겟 고객
   • 미적 방향 (예: "프리미엄 기업", "장난기 있는 스타트업", "미니멀 SaaS")

2. 정확히 다음 8개 섹션이 포함된 DESIGN.md를 생성합니다:

   1. 시각적 테마 및 분위기 — 전반적인 미적 감각을 설명하는 2-3개의 감성적인 문장. 일반적인 용어가 아닌 구체적인 형용사와 참조를 사용합니다.
   2. 색상 팔레트 및 역할 — 열: 역할, 이름, 16진수, 용도가 포함된 마크다운 테이블. 최소 5개의 역할(기본, 보조, 표면, 표면 위, 오류). 모든 색상은 16진수 값으로, "신뢰할 수 있는 파란색"과 같은 설명은 절대 사용하지 않습니다. 각 색상에 설명적인 이름을 지정합니다(예: "기본"이 아닌 "딥 네이비").
   3. 타이포그래피 — Google Fonts의 글꼴 모음(기본 글꼴로 Inter, Poppins 사용 금지 — AI 생성 디자인을 암시합니다). rem/px 단위 크기, 숫자로 된 가중치(400/600/700), 줄 높이. 제목, 본문, 모노 포함. 대비를 위해 세리프/산세리프 쌍을 사용합니다.
   4. 간격 및 레이아웃 — 기본 단위(예: 4px), 배율, 최대 콘텐츠 너비, 그리드 시스템, 중단점.
   5. 컴포넌트 패턴 — 최소 3개의 컴포넌트(버튼, 카드, 입력 등)와 구조 및 스타일 규칙. border-radius 및 그림자 스타일을 다양하게 지정합니다.
   6. 아이콘 — 스타일(윤곽선/채움/이중 톤), 기본 크기, 소스 라이브러리.
   7. 이미지 가이드라인 — 사진 스타일, 일러스트레이션 스타일, 종횡비. 이미지가 전달하는 내용에 대해 구체적으로 설명합니다.
   8. 권장 사항 및 금지 사항 — 각각 최소 3개. 다음 안티-슬롭 기본값을 반드시 포함합니다:

   권장 사항

   • 최소 하나의 기능 섹션에 비대칭 또는 비표준 레이아웃을 사용하세요
   • 시각적 리듬을 만들기 위해 카드 크기와 간격을 다양화하세요
   • 지정된 색상 팔레트만 독점적으로 사용하세요(AI가 선택한 색상 사용 금지)
   • 모든 텍스트에 대해 높은 대비(최소 4.5:1)를 유지하세요
   • 섹션 배경을 다양화하세요(밝은/어두운 표면을 번갈아 사용)

   금지 사항

   • 기본 글꼴로 Inter, Poppins 또는 시스템 산세리프를 사용하지 마세요
   • 어디에도 보라색-파랑 그라데이션을 사용하지 마세요
   • 모든 요소에 균일한 border-radius(>12px)를 사용하지 마세요
   • 페이지 두 번째 섹션으로 표준 3열 아이콘 그리드를 사용하지 마세요
   • 2줄보다 긴 본문 텍스트를 가운데 정렬하지 마세요
   • 일반적인 스톡 사진 일러스트레이션(3D 블롭, 추상 모양)을 사용하지 마세요

3. 유효성 검사 규칙:

   • 모든 색상은 16진수 값(#RRGGBB)이어야 합니다
   • 글꼴 크기는 rem 또는 px만 사용합니다
   • 최소 5개의 색상 역할, 3개의 컴포넌트 패턴, 3개의 권장 사항 및 3개의 금지 사항
   • 총 토큰 수를 약 3000 미만으로 유지합니다(Stitch가 모든 생성 시 컨텍스트로 읽음)

4. DESIGN.md가 이미 존재하는 경우 덮어쓰기 전에 물어봅니다.

5. 파일을 프로젝트 루트에 DESIGN.md로 작성합니다.

6. 작성 후 mcp__stitch__list_design_systems를 사용하여 Stitch 디자인 시스템이 존재하는지 확인합니다. 사용자에게 Stitch 프로젝트가 있는 경우:

   • mcp__stitch__create_design_system으로 디자인 시스템 생성을 제안합니다
   • 또는 mcp__stitch__update_design_system으로 기존 시스템을 업데이트합니다
   • mcp__stitch__apply_design_system으로 프로젝트에 적용하여 향후 모든 생성이 이 디자인을 따르도록 합니다

7. 다음 단계: 새 디자인 시스템을 사용하여 첫 화면을 생성하기 위해 /dg-generate 실행을 제안합니다.

참조: 전체 명세는 docs/design-md-guide.md를 참조하세요.