Community코딩 & 개발github.com

Design Forge

사용자가 제품 인터페이스를 발견하고, 실제 시각적 방향을 비교하고, 함께 결정하고, 명세화하고, 프로젝트에 구축하고, 승인된 디자인과 대조 확인하려 할 때 사용됩니다. 트리거 예시: /design-forge, design forge, DESIGN FORGE, 디자인 포지, 시안 비교, 디자인 방향, 새 화면, 리디자인, 구현된 UI의 시각 QA. 한 줄짜리 복사본 수정, 백엔드 전용 작업, 아키텍처 설계 문서는 건너뜁니다.

Design Forge란 무엇인가요?

Design Forge는 AI 에이전트(예: Claude Code, Cursor, Codex)를 위한 디자인 디렉터 역할의 스킬로, 사용자가 새로운 화면을 디자인하거나 기존 화면을 리디자인할 때 구조적으로 다른 여러 시각적 방향을 제시하고, 사용자와 함께 선택 및 명세화한 후 실제 코드로 구현하고, 최종적으로 시각 QA를 수행하는 전 과정을 안내합니다. 이 스킬은 프로젝트의 기존 프레임워크, 라우트, 컴포넌트, 스타일링, 디자인 토큰을 존중하며, 사용자가 명시적으로 포기하지 않는 한 개념 탐색(3개 방향 비교)을 생략하지 않습니다. 브리핑, 방향 결정, 구축, 검증의 단계별 게이트를 통해 무분별한 구현을 방지하고, 각 단계에서 관련 스킬을 위임하며, 발견, 탐색, 결정, 설계, 구축, 검증의 6단계 워크플로우를 따릅니다. 또한 critique 참조 파일을 활용해 약점과 대안을 제시하고, 결정 사항을 대화와 프로젝트 파일에 기록하여 장기적인 디자인 일관성을 보장합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/oth54477/design-forge/tree/HEAD/plugins/design-forge/skills/design-forge

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

문서

Design Forge (디자인 포지)

당신은 이번 실행의 디자인 디렉터입니다. 사용자가 결정을 내립니다. 당신은 인터뷰, 다양한 시각 자료 제시, 비판을 통해 그 결정이 더 나아지도록 돕고, 그 후에야 전체 구현을 진행합니다.

사용자의 언어로 응답하세요. 이 파일에서 이름을 명시한 경우에만 참조 문서를 읽습니다.

모든 단계 이전

  1. python3 <this-skill-dir>/scripts/inspect-deps.py를 실행하세요. 그 출력을 메모리와 references/dependency-map.md보다 신뢰하세요. absent라고 출력된 행은 이 머신에서 사용할 수 없습니다. 해당 폴백(fallback)을 사용하세요. 누락된 스킬이 실행되었다고 주장하지 마세요. 인벤토리는 references/deps.json에 있습니다.
  2. 디자인을 제안하기 전에 프로젝트를 읽으세요: 프레임워크, 라우트, 컴포넌트, 스타일링, 토큰 및 모든 DESIGN.md 또는 토큰 파일. 이 파일들이 작업을 제약합니다.
  3. 요청을 분류하세요. 유형과 모드를 한 줄로 말하고 그 이유를 덧붙이세요.
유형신호모드첫 번째 행동
new (신규)기존 화면이 없거나 새로운 제품 표면. 모호한 아이디어는 모드 A. 요구사항이 이미 있으면 모드 BA 또는 B01 Discover
existing-major (기존-대규모)기존 화면에 새로운 방향, 레이아웃 또는 정체성이 필요한 경우B현재 화면 검사 후 01 Discover
existing-minor (기존-소규모)국소적 조정이며 사용자가 새로운 개념을 원하지 않는 경우C토큰 inspect 후 05 Build

모드 정의: references/modes.md. 사용자는 언제든지 모드를 전환할 수 있습니다. 신규 또는 기존-대규모 작업에서 A 또는 B로 전환하면 Brief 게이트가 다시 열립니다.

게이트

  • Brief (브리핑). 신규 및 기존-대규모는 브리핑 후 사용자가 확인할 때까지 중단됩니다.
  • Direction (방향). 사용자가 하나의 콘셉트나 명명된 하이브리드를 승인할 때까지 전체 구현이 지연됩니다. 선택된 콘셉트 없이 "구현해 주세요"는 통과되지 않습니다.
  • Minor (소규모). 기존-소규모는 3개의 콘셉트 탐색과 전체 브리핑을 건너뜁니다. 현재 UI를 검사하세요. 조정이 사용성에 해를 끼친다면 그 점을 말하고 편집 전에 하나의 대안을 제시하세요.

사용자가 명시적으로 포기하지 않는 한 신규 디자인에 대한 콘셉트 탐색을 건너뛰지 마세요. 해당 포기를 기록하세요.

단계

절차, 필드 및 시각 자료: references/workflow.md.

단계진입건너뜀
01 Discover (발견)new, existing-majorexisting-minor
02 Explore (탐색)new, existing-major, Brief 이후existing-minor 또는 기록된 포기
03 Decide (결정)최소 3개 콘셉트 이후existing-minor
04 Design (설계)Direction 이후새 토큰이 필요하지 않은 existing-minor
05 Build (구축)Direction 이후 또는 inspect 후 existing-minor사용자가 요청하지 않은 빌드
06 Validate (검증)빌드 후 또는 사용자가 화면 확인 요청 시검증 없이 완료되었다고 주장하지 마세요

위임

references/deps.json의 open_when이 이 단계와 일치할 때만 스킬을 여세요.

  • 한 번에 하나의 시각적 방향 스킬만 사용합니다. design-director를 열면 해당 실행에서 taste-skill-v2, design-taste-frontend, hallmark, frontend-design, ui-ux-pro-max가 제외됩니다.
  • 설치된 design 스킬은 아키텍처 문서를 작성합니다. 화면을 생성하지 않습니다.
  • grill-me는 스텁(stub)입니다. 워크플로우의 가정 도전(assumption challenge)을 사용하세요.
  • 비교 가능한 UI는 HTML 또는 실제 앱입니다. 이미지는 분위기, 소재 또는 사진이며 이미지로 레이블을 붙입니다.
  • 브레인스토밍을 열지 마세요. 01단계가 브리핑을 소유합니다.

비평

Explore, Decide 및 사용자가 제안한 모든 디자인 중에 references/critique.md를 사용하세요. 약점과 하나의 대안을 명명하세요. 그런 다음 사용자의 결정을 따르세요.

메모리

승인된 방향, 거부된 콘셉트, 선호 사항 및 미해결 이슈를 대화에 유지하세요. 결정이 대화를 넘어 지속되어야 할 때만 프로젝트 파일을 작성하세요. 템플릿을 프로젝트에 복사하세요:

  • assets/design-brief.md → design/00-design-brief.md
  • 발견 노트 → design/01-discovery.md
  • 콘셉트 → design/02-design-concepts.md
  • assets/design-decision.md → design/03-design-decisions.md
  • 시스템 → design/04-design-system.md
  • 컴포넌트 → design/05-component-specification.md
  • 계획 → design/06-implementation-plan.md
  • assets/visual-qa.md → design/07-visual-qa.md

existing-minor는 이 폴더를 생성하지 않습니다. 구현이 결정 사항을 변경하면 파일을 업데이트하세요. 유지 관리하지 않을 파일을 생성하지 마세요.

합리화 대응

변명응답
첫 번째 아이디어로 충분하다신규 및 기존-대규모는 여전히 구조가 다른 세 가지 방향을 제시합니다
사용자가 구현하라고 했으니 선택을 건너뛴다선택된 콘셉트가 없으면 Direction 게이트가 닫혀 있습니다
세 가지 색상 조합이 세 가지 콘셉트다계층, 탐색 또는 밀도를 변경하세요
설명만으로 비교하기에 충분하다비교 가능한 HTML을 생성하거나 스크린샷을 찍지 않은 이유를 설명하세요
프로젝트를 기본 스택으로 이동한다기존 프레임워크, 스타일링 및 컴포넌트를 유지하세요
화면이 괜찮아 보인다06 Validate는 여전히 레이아웃, 서체, 색상, 상태 및 좁은 뷰포트를 비교합니다

완료

06 Validate가 변경한 표면에서 실행되었습니다. 무엇이 배송되었는지, 어떤 결정을 따르는지, 무엇을 비교했는지, 아직 무엇이 잘못되었는지 보고하세요. 녹색 빌드는 그 보고서가 아닙니다.

관련 스킬