사용 가이드로 건너뛰기
design-shotgun작성자 Garry Tan

Design Shotgun 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬입니다. 여러 디자인 변형을 병렬로 생성하고 피드백을 위한 비교 보드를 엽니다.

  • Web & UI
  • UI 코드
garrytan/gstack · design-shotgun/SKILL.mdSKILL.md
--- name: design-shotgun description: Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (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에 읽은 전문 및 섹션 제목 · 전체 52,851자

01 기능

Claude Code와 Codex에서 design-shotgun Skill이 하는 일

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

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

스킬 자체의 표현으로

design-shotgun은 여러 개의 AI 디자인 변형을 병렬로 생성하고, HTTP로 제공되는 비교 보드에 나란히 열어 구조화된 피드백을 수집하는 시각적 디자인 탐색 도구입니다. 지속적인 취향 프로필(글꼴, 색상, 레이아웃, 심미성)을 통해 세션 간 사용자의 취향을 기억하고, 새로운 생성 결과를 입증된 선호도 쪽으로 유도합니다.

이 스킬은 반수렴(anti-convergence)을 강제하여 모든 변형이 서로 다른 글꼴, 팔레트, 레이아웃을 사용하도록 하며, 세션 간 지속성을 위해 모든 산출물을 ~/.gstack/projects/$SLUG/designs/에 저장합니다. 새로운 탐색과 이전 세션 재검토를 모두 지원하며, 재생성, 변형 간 요소 리믹스, 사용자가 방향을 승인할 때까지의 반복을 위한 피드백 루프를 제공합니다.

산출물

  • ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png에 저장된 N개의 변형 PNG
  • 임의의 포트에서 HTTP로 제공되는 HTML 비교 보드와 피드백 수집 UI(design-board.html)
  • 세션 간 취향 학습을 위해 선호 변형, 평점, 코멘트, 날짜를 기록하는 approved.json 파일
  • 차원별로 신뢰도 가중 승인/거부 패턴이 반영된 업데이트된 taste-profile.json(스키마 v1)
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    세션 감지 및 취향 복원

    ~/.gstack/projects/$SLUG/designs/에서 이전 세션의 approved.json 파일을 확인하고, 지속적인 taste-profile.json(주당 5% 신뢰도 감소가 적용된 스키마 v1)을 읽어들입니다.

  2. 02
    반수렴을 적용한 병렬 변형 생성

    동시 실행을 위해 하나의 메시지로 N개의 Agent 서브에이전트(변형당 하나씩)를 실행합니다.

  3. 03
    피드백 루프를 갖춘 HTTP 비교 보드

    $D compare --serve를 실행하여 HTML 보드를 생성하고 임의의 포트에서 HTTP 서버를 시작합니다.

  4. 04
    피드백 확인 및 취향 업데이트

    선호 변형, 평점, 코멘트를 요약하고, 저장 전에 AskUserQuestion을 통해 확인합니다.

02 적합성 확인

design-shotgun Skill을 사용해야 하는 경우

이러한 종류의 UI 디자인이 작업일 때 Claude Code 또는 Codex에서 design-shotgun 스킬을 사용하십시오. 아래의 적합성과 한계는 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

  • 개발 중 언제든 실행할 수 있는 독립적인 디자인 탐색으로, 사용자가 설명했지만 아직 보지 못한 모든 UI 기능에 사용합니다
  • 사용자가 '이 디자인이 마음에 들지 않는다'고 말하며 기존 페이지에 대한 다른 방향을 보고 싶어 할 때의 시각적 브레인스토밍
  • 동일한 화면에 대해 이전 디자인 탐색을 다시 살펴보며 선택을 조정하거나 새로운 변형을 탐색하는 경우

한계 인지하기

  • 프로덕션에 사용할 최종 HTML/CSS 구현 작업(방향을 승인한 후에는 /design-html을 사용하세요)
  • 비교 없는 단일 변형 생성(이 스킬은 나란히 비교할 수 있도록 여러 변형을 동시에 생성합니다)

제공할 사항

  • 진화 경로용 스크린샷 URL사용자가 '이것이' 마음에 들지 않는다고 말하면 URL을 요청하세요.
  • 변형 개수(기본값 3, 최대 8)컨텍스트 수집 단계의 AskUserQuestion에서 요청됩니다. 중요한 화면일수록 더 많은 변형을 사용하세요.

03 스킬 내부

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

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

  1. 모든 산출물은 ~/.gstack/projects/$SLUG/designs/에 저장

    디자인 목업, 비교 보드, approved.json은 항상 ~/.gstack/projects/$SLUG/designs/에 저장해야 하며, .context/, docs/designs/, /tmp/, 또는 프로젝트 로컬 디렉터리에는 저장하지 않습니다.

  2. 취향 메모리는 기본적으로 생성에 편향을 줍니다

    taste-profile.json(스키마 v1, 주당 5% 신뢰도 감쇠)을 읽고 각 차원(글꼴, 색상, 레이아웃, 스타일)별로 승인/거부된 상위 3개 항목을 요약합니다.

  3. 샌드박스 제한으로 인해 먼저 /tmp/에 생성한 후 복사

    항상 먼저 /tmp/variant-{letter}.png에 PNG를 생성한 다음, 최종 ~/.gstack/projects/$SLUG/designs/ 위치로 cp합니다.

  4. 컨텍스트 수집은 최대 두 라운드까지

    DESIGN.md, PRODUCT.md, 코드베이스에서 추론한 내용을 미리 채워 넣으세요. 부족한 컨텍스트는 하나의 AskUserQuestion으로 요청하세요.

  5. 저장 전 피드백 확인

    피드백을 받은 후(HTTP POST 또는 AskUserQuestion 대체 방식을 통해), 선호 변형, 평가, 코멘트, 방향을 포함한 요약을 출력합니다.

  6. DESIGN.md가 기본 제약 조건입니다

    DESIGN.md가 존재하면 기본적으로 해당 프로젝트의 디자인 시스템을 따릅니다.

  7. 선택은 AskUserQuestion이 아니라 비교 보드가 담당합니다

    사용자가 어떤 변형을 선호하는지 물을 때 AskUserQuestion을 사용하지 마세요. 비교 보드 UI가 선택을 담당합니다.

04 활용하기

Claude Code 또는 Codex에 design-shotgun 설치

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

Claude Code, Codex 또는 귀하의 에이전트에 design-shotgun 추가

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

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

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

스킬에 첫 UI 디자인 작업 부여하기

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

Starter prompt
Explore design directions for the [dashboard homepage] where [enterprise SaaS users] land after login. I want to see 4 variants — one minimal/data-dense for power users, one with more guidance for first-timers, one that emphasizes recent activity, and one optimized for mobile-first. The existing dashboard in src/app/dashboard/ feels cluttered and users complain they can't find the export button. Edge cases: zero data state, 50+ recent items, and users who only use mobile.

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

첫 번째 결과 확인

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

  • 생성된 각 PNG를 인라인으로 읽어 보드가 열리기 전에 사용자가 터미널에서 모든 변형을 한 번에 볼 수 있게 합니다
  • 비교 보드가 실행 중인지 확인하고 stderr 출력에서 보드 URL을 파싱합니다(BOARD_URL: http://127.0.0.1:N/boards/<id>/)
  • 디자인 디렉터리에서 피드백 파일(Submit용 feedback.json, Regenerate/Remix용 feedback-pending.json)을 확인합니다
  • $D check --image <path> --brief <brief>를 사용하여 생성된 각 변형에 대해 품질 검사를 실행합니다. 검사에 실패하면 생성을 한 번 재시도합니다

OpenDesign에서 design-shotgun의 SKILL.md 링크에서 가져오기: Plugins → Add → Skill → Import from link를 선택한 후 상단 바에서 선택합니다.

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

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

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

SKILL.md 내부

  1. 이 스킬을 언제 호출해야 하는가UI 기능에 대한 독립적인 디자인 탐색, 비주얼 브레인스토밍, '이렇게 보이는 게 마음에 안 든다'는 경우
  2. 전제 작업(먼저 실행)gstack-skill-start를 실행하고, STATUS 라인을 읽고, 저하 모드, 지시 블록, 세션 감지를 처리합니다
  3. 계획 모드에서 안전한 작업계획 모드에서 허용되는 작업: $B, $D, codex exec/review, ~/.gstack/에 대한 쓰기, 계획 파일, 산출물 열기
  4. 계획 모드 중 스킬 호출스킬 지시는 참고용이 아니라 실행 가능한 것입니다. AskUserQuestion은 턴 종료 조건을 충족합니다. 워크플로 완료 후 ExitPlanMode를 수행합니다
  5. AskUserQuestion 형식도구 해석은 SESSION_KIND/CONDUCTOR_SESSION에 따라 분기됩니다. 사용할 수 없거나 실패한 호출에는 프로즈 대체 방식을 사용합니다. 확인 3항목은 필수입니다
  6. 산출물 동기화(스킬 시작)스킬 시작 출력은 이미 동기화를 실행했습니다. GBrain 힌트, ARTIFACTS_SYNC 라인, 일회성 동의 게이트에 따라 조치합니다
  7. 모델별 행동 패치(claude)할 일 목록 규율, 중대한 작업 전 사고, Bash보다 전용 도구 선호
  8. 목소리GStack의 목소리: 구체적이고, 빌더 대 빌더의 태도로, 요점을 먼저 제시하고, 선택을 사용자 결과와 연결하며, 마무리는 제한적으로
  9. 컨텍스트 복구세션 시작/압축 시: 최근 산출물, 결정, 체크포인트, 타임라인을 복구하고, RECENT_PATTERN이 암시하는 스킬이 있다면 다음 스킬을 제안합니다
  10. 글쓰기 스타일전문 용어는 처음 사용 시 풀어서 설명하고, 결과 중심으로 프레이밍하며, 짧은 문장을 사용합니다. EXPLAIN_LEVEL이 terse이거나 사용자가 간결함을 요청하면 생략합니다
  11. 완전성 원칙 — Boil the OceanAI는 완전성 확보 비용을 낮춥니다. 전체 범위를 다루는 것을 권장하며, 옵션 간 커버리지가 다를 때는 완전성: X/10으로 표시합니다
  12. 혼동 프로토콜중대한 모호함이 있을 경우 멈추고, 이를 명시하고, 장단점이 있는 2~3개의 선택지를 제시하고, 물어봅니다
스킬 자체 설명
"Design shotgun: 여러 AI 디자인 변형을 생성하고, 비교 보드를 열고, 구조화된 피드백을 수집하고, 반복합니다. (gstack)"

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 52,851자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

design-shotgun 스킬에 대한 질문

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

이 스킬이 변형을 생성하는 데 필요한 것은 무엇인가요(종속성, API 키, 로컬 도구)?

이 스킬은 ~/.claude/skills/gstack/design/dist/design에 있는 design 바이너리를 필요로 합니다(DESIGN SETUP 단계에서 확인됨). 이 바이너리는 이미지 생성과 품질 검사를 처리합니다. 사용할 수 없는 경우 스킬은 HTML 와이어프레임으로 대체됩니다.

비교 보드는 로컬 HTTP 서버를 무작위 포트에서 실행합니다(외부 종속성 없음). 취향 기억(taste memory)과 approved.json 파일은 로컬의 ~/.gstack/projects/$SLUG/designs/에 저장됩니다.

Design Shotgun

실제 UI 디자인 작업에서 design-shotgun을 실행합니다.

OpenDesign을 다운로드하고, SKILL.md 링크에서 design-shotgun을 가져온 후, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽으십시오.

터미널
npx skills add https://github.com/garrytan/gstack --skill design-shotgun

OpenDesign 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows 지원