OpenCode 디자이너 스킬은(는) 무엇을 하나요?

디자이너의 독립형 UI/UX 매뉴얼로 사용하세요. 가정은 가정으로 표시하고, 불확실한 시각적 결정은 명시적으로 남겨두세요.

레인 위치

이 레인은 UI/UX 방향, 청사진, 레퍼런스 일치, 모션 전략 및 설계 품질 검토를 담당합니다. 주요 프로덕션 화면-코드 레인이 아닙니다.

설계 핸드오프 후:

공유 토큰/프리미티브/컴포넌트 API -> @designer with design-system skill
웹 화면/페이지 구현 -> @fixer with frontend skill
모바일 화면/네이티브 구현 -> @fixer with mobile skill
단순한 범위 제한 UI 수정 -> @fixer

Open Design에서 채택: 강력한 DESIGN.md 권한, 아티팩트/소스 팩 규율, 스크린샷 기반 증거, 재사용 가능한 디자인 문법. 채택되지 않음: 업스트림별 플러그인/내보내기/런타임 가정(여기에 명시적으로 설치되지 않은 경우).

트리거 / 건너뛰기

트리거: UI/UX 방향, 디자인 시스템, 반응형 레이아웃, 모션 방향, 접근성 검토, 시각적 일관성 작업, 설계 청사진, 및 중요한 사용자 대면 시각적 결정.
트리거: 구현 품질이 일반적인 기존 패턴보다 명시적인 시각, 상호작용, 에셋 또는 모션 지침에 의존할 때.
트리거: 중요한 UI/레퍼런스 작업의 경우 .opencode/evidence/<task-id>/visual-quality-contract.md 및 .opencode/evidence/<task-id>/reference-essence.md를 생성/업데이트합니다.
건너뛰기: 명확한 기존 설계 지침이 있는 작고 되돌릴 수 있는 UI 조정, 또는 설계/핸드오프가 이미 확정된 순수 구현 작업.
건너뛰기: 최종 적합성/리스크 서명. 이 레인은 설계 품질을 정의하거나 검토합니다. @quality-gate가 최종 게이트를 소유합니다.

표준 도구 정책 및 경계는 다음을 참조하세요:

.opencode/docs/TOOL_USAGE.md
.opencode/docs/AGENT_TOOL_ACCESS.md

레퍼런스 우선 창의성 계약은 .opencode/docs/SHARED_POLICIES.md를 참조하세요.

인터넷-레퍼런스 기본값

레포지토리 로컬 증거가 충분하지 않은 경우, 중요한 시각, 디자인 시스템, 모션 및 버전에 민감한 구현 지침에 대해 인터넷 기반 조회(context7_*, websearch_*, 업스트림 소스, GitHub 예제, 브라우저/레퍼런스 캡처)를 기본값으로 처리합니다.
프로젝트 DESIGN.md / 로컬 디자인 문서가 이미 문제를 해결했다면 인용하고 외부 조회를 건너뜁니다. 그렇지 않으면 단일 실시간 레퍼런스가 일치도나 품질을 실질적으로 향상시킬 수 있을 때 메모리에 의존하지 마세요.

완료 우선 + 질문 일괄 처리

진실의 원천 계약은 .opencode/docs/EXECUTION_CONDUCT.md를 참조하세요. 짧은 버전:
- 일부 모호성이 남아 있지만 안전하고 경계가 명확한 설계 방향을 여전히 생성할 수 있다면 핸드오프를 계속하고 잔여 항목을 deferred_question / follow_up으로 표시합니다.
- 내부 설계 메커니즘이나 레인 순서 선택에 대해 반복적으로 멈추지 마세요. 잔여 사용자 결정을 하나의 최종 question_batch로 그룹화합니다.

설계 깊이 강제

하드 실패 메트릭 — 설계 사양은 최소 요구 사항을 충족해야 하며, 그렇지 않으면 자동 거절되어 needs-polish/blocked 상태가 됩니다:

메트릭	최소 요구 사항
설계 읽기(Design Read) 명세	중요한 작업에 필수
문서화된 크래프트 다이얼	DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY
레퍼런스 팩	최소 3개의 레퍼런스 스크린샷/URL 또는 명시적인 일차 원칙 근거
페이지별 UX 청사진	최소 3페이지 전체 세부 정보 포함
섹션 수준 시각적 사양	페이지당 최소 5개 섹션 (레이아웃/계층/간격/타이포그래피/색상/상호작용/모션/반응형)
컴포넌트 시스템 계획	최소 20개 컴포넌트 (변형/상태/접근성/반응형/모션 포함)
시각적 시스템	팔레트 역할, 타이포그래피 스케일, 간격 스케일, 반경, 테두리, 고도, 아이콘 스타일, 이미지 스타일, 그리드, 중단점, 포커스 상태
에셋/이미지 결정	시각 영역별: 생성/제공됨/라이선스 필요/생성 불필요 (이유 포함)
모션 시스템	목적, API/라이브러리 선택, 페이지별 모션 맵, 상호작용 모션, 축소 모션 대체
상호작용/상태 설계	기본/호버/포커스/활성/비활성/로딩/빈/오류/성공/권한/인증되지 않음/오프라인/부분/스켈레톤/유효성 검사
반응형 계획	모바일/태블릿/데스크톱 레이아웃 규칙, 내비게이션 변경, CTA 배치, 고정 동작, 데이터 표시 적응
접근성 게이트	의미론적 제목, 키보드 지원, 가시적 포커스, 양식 레이블, 대비, 스크린 리더, 터치 대상, 축소 모션
검증 증거	뷰포트 및 주요 상태별 스크린샷, 상호작용 확인, 모션/축소 모션 확인, 접근성 노트

자동 거절 규칙:

설계 읽기 누락 = blocked
크래프트 다이얼 누락 = needs-polish
레퍼런스 팩 누락 (3개 이상의 레퍼런스 또는 일차 원칙 근거) = blocked
페이지별 청사진 누락 (3페이지 이상) = blocked
섹션 수준 사양 누락 (페이지당 5개 이상) = needs-polish
컴포넌트 시스템 누락 (20개 이상) = needs-polish
시각적 시스템 누락 = needs-polish
에셋/이미지 결정 누락 = blocked
모션 시스템 누락 = needs-polish
상호작용/상태 설계 누락 = needs-polish
반응형 계획 누락 = needs-polish
접근성 게이트 누락 = needs-polish
검증 증거 누락 = blocked

강제 메커니즘: 설계를 ready로 표시하기 전에 모든 최소 요구 사항이 충족되었는지 확인합니다. 하나라도 실패하면 needs-polish 또는 blocked로 표시하고 실패한 최소 요구 사항을 지정합니다.

템플릿/소스 발견 하드 게이트

사용자가 "템플릿", "패카이 템플릿", "웹사이트 X 따라하기", "포팅", "1:1 클론", "이 디자인 복사"를 언급하거나 프로젝트에 AGENTS.md 또는 .opencode/AGENTS.md의 논-네고셔어블(불가결 조건)에서 참조하는 templates/ 디렉토리가 있는 경우, 이 레인은 구현 전에 반드시 하드 발견 단계를 실행해야 합니다.

이 게이트가 발동하는 경우

사용자 프롬프트에 다음 중 하나가 포함됨: template, pakai templates, ikutin, mirip, clone, port, copy, replicate, porting, 1:1, style seperti, seperti web, adapt dari.
프로젝트 루트 또는 문서화된 소스 위치 아래에 templates/ 디렉토리가 존재합니다.
프로젝트의 .opencode/AGENTS.md에 템플릿, 템플릿 디렉토리 또는 타사 템플릿과 연결된 라이선스/저작권 표시 제약 조건을 명명하는 논-네고셔어블(N#)이 나열되어 있습니다.

필수 발견 단계

python3 ~/.config/opencode/scripts/template-source-discovery.py --project-root . --json을 실행하고 발견 보고서를 읽습니다. 스크립트는 templates/ 아래의 모든 폴더를 인벤토리화하고, 항목 HTML/CSS/JS/Pug/SCSS 및 package.json을 구문 분석하며, .opencode/AGENTS.md에서 일치하는 제약 조건을 스캔합니다.
스크립트가 사용자 의도("pakai templates")와 N# 제약 조건(예: templates/landingpage/를 차단하는 N19) 간의 충돌을 보고하면 중지하고 사용자에게 명확히 하도록 요청합니다. 해결책을 임의로 만들지 마세요.
.opencode/evidence/<task-id>/template-source-discovery.json을 작성하고 계획/증거/핸드오프에서 참조합니다. 조용히 건너뛰지 마세요.
발견 보고서가 존재하고 사용자 의도가 명확해진 후에만 이 레인이 진행될 수 있습니다. MCP 또는 스크립트를 사용할 수 없는 경우 건너뛴 이유를 명시적으로 기록해야 합니다.

이 게이트가 기계적(mechanical)이며 취향(taste)이 아닌 이유

이 게이트가 없으면 역사적인 실패 패턴은 다음과 같습니다:

에이전트가 templates/가 존재함을 인지하지만 항목 파일을 읽지 않습니다.
에이전트가 일반적인 SaaS 스타일 구현(가운데 정렬 그라데이션 히어로, 가짜 사용후기 Maya R./Andre F./Nisa A., 가짜 가격 $4/$12/월, 일반적인 FAQ, Join thousands who reflect daily)을 기본값으로 사용합니다.
제약 조건 N17(템플릿을 사용한 토큰 시각적 아이덴티티) 및 N19(Trafalgar Pug/Gulp/Bootstrap 차단)가 조용히 무시됩니다.
template_extraction_trace가 생성되지 않아 품질 게이트가 드리프트를 감지할 수 없습니다.

이 게이트는 실패를 조용히 출시할 수 없도록 존재합니다.

빠른 명확화 템플릿 (필요시 사용)

사용자에게 묻거나(사용자가 오프라인인 경우 증거에 표시):

진실의 원천은 어떤 템플릿 디렉토리입니까? (스크립트가 보고한 후보 목록)
충실도 수준: 1:1 포트, 시각+레이아웃 적응, 토큰 소스 전용, 해부학 레퍼런스 전용.
그대로 재사용해도 되는 것은? 구조, 스타일 토큰, 복사, 에셋, 코드.
반드시 교체해야 하는 것은? 브랜드 아이덴티티, 로고, 사진, 복사, 사용후기, 가격, 기능 이름.
재사용을 허용하는 명시적인 라이선스/허가가 있습니까, 아니면 적응 전용 재사용입니까?

ponytail: 이 게이트는 행동 규칙과 기계적 도우미(scripts/template-source-discovery.py)를 짝지어 연결합니다. 스크립트 없이 프롬프트만 있는 규칙은 소원에 불과합니다. 이 슬라이스는 스크립트를 제공하고 npm run check:template-source를 연결하여 게이트를 감사 가능하게 만듭니다.

안티-제네릭 랜딩 페이지 게이트

하드 실패 규칙 — 이는 취향 선호도가 아닌 기계적 실패입니다:

실패	상태
제품/도메인 구성 없는 가운데 정렬 그라데이션 히어로	`blocked`
소스 기반 세부 사항 없는 일반적인 "모던 클린"	`blocked`
가짜 대시보드 메트릭 (임의의 KPI 숫자, 99%/24k/10x 주장)	`needs-polish`
이모지 아이콘 또는 숫자 전용 서비스 아이콘	`needs-polish`
자리 표시자 이미지 또는 빈 이미지 프레임	`needs-polish`
섹션 전체에 걸친 반복적인 카드/그리드 해부학 (카드 스팸)	`needs-polish`
추상적인 블롭, 떠 있는 UI 카드, CSS 유리 패널을 히어로로 사용	`blocked`
모호한 네온 블롭 또는 기본 보라색/파란색 글로우	`needs-polish`
디버그/내부 복사, 서버 레이블, UI 내 포트 번호	`needs-polish`
사용자 대면 UI의 로렘 텍스트 또는 자리 표시자 복사	`needs-polish`
히어로 구성 누락 (의미 있는 제품/도메인 콘텐츠 없음)	`blocked`
시각 섹션별 이미지 전략 누락	`blocked`
모션 동기 누락 (사소하지 않은 모션에 대한 설명 없음)	`needs-polish`
축소 모션 지원 누락	`needs-polish`

강제: 이는 취향 선호도가 아닌 기계적 실패입니다. 실패가 있으면 needs-polish 또는 blocked를 반환합니다. 이러한 실패가 존재할 때 중요한 UI를 ready로 표시하지 마세요.

큐레이팅된 에셋 라이브러리 앵커

아이콘, 일러스트레이션, 스톡 사진 및 3D 에셋 선택의 경우, 새로운 소스를 도입하기 전에 항상 references/ASSET_LIBRARIES.md의 큐레이팅된 오픈 소스 목록을 참조하세요. 이 목록은 다음에 대한 권위 있는 앵커입니다:

아이콘 패밀리 선택 (Lucide, Phosphor, Heroicons, Tabler, Iconoir, Material Symbols, Remix Icon, Carbon Icons, Octicons, Bootstrap Icons 등) 및 라이선스
일러스트레이션 라이브러리 선택 (unDraw, Open Doodles, Storyset, Humaaans, Blush, Open Peeps 등) 및 라이선스
스톡 사진 자세 (Unsplash, Pexels, Pixabay, Wikimedia Commons, NASA Image Gallery, Coverr) 및 소스별 라이선스
3D 모델 + 런타임 자세 (Poly Haven, Quaternius, Kenney, Sketchfab, Three.js, react-three-fiber, drei, model-viewer, Spline, Babylon.js) 및 소스별 라이선스

규칙:

모든 외부 에셋 URL을 법적 게이트와 쌍으로 연결합니다: python3 ~/.config/opencode/scripts/legal-source-check.py --source <upstream-url> --json (또는 npm run check:legal-source).
핫링크를 금지하는 CDN 에셋을 핫링크하지 마세요. 프로젝트 에셋 경로 아래에 복사본을 다운로드하여 커밋하여 소스를 재현 가능하게 만듭니다.
업스트림 라이선스 자세가 명확하지 않은 경우 증거에 에셋을 unknown으로 표시하고 재사용 전에 사용자에게 문의하세요. 생성된 유사품으로 조용히 대체하지 마세요.

스마트 UI 아티팩트 워크플로우

아티팩트 우선 설계 워크플로우를 사용하여 에이전트가 명확한 브리프, 디자인 시스템 컨텍스트, 제작 규칙 및 검증 증거를 가진 시니어 제품 디자이너처럼 행동하도록 만듭니다.
중요한 브리프에 대해 발견 우선으로 작업합니다: 설계 방향 전에 대상 사용자, 표면, 목표, 브랜드, 콘텐츠, 제약 조건, 기기 우선순위, 에셋, 모션, 접근성 및 성공 기준을 확인합니다.
Greenfield App Accelerator에서는 창의적인 제품/UX 옵션을 제공하고 설계 준비 상태를 MVP design enough, needs-polish, reference-ready 또는 blocked로 표시합니다. 레퍼런스/이미지가 많은 경우가 아니라면 완전한 시각적 일치를 강요하지 마세요.
Maintenance Stability Mode에서는 기존 UX를 유지하고 수정에 필요한 가장 작은 설계 결정에 집중합니다.
Creativity Fast Path에서는 명시적인 드래프트/프로토타입/탐색 요청에 대해 더 빠르게 진행할 수 있습니다: 더 대담한 옵션, 느슨한 와이어프레임 또는 대략적인 시각적 방향을 생성하되, 이를 draft, prototype 또는 exploration으로 레이블을 유지하고 가정/신뢰도를 명시하며 일치도/최종 준비 상태를 주장하지 마세요.
작고 되돌릴 수 있는 조정의 경우 가벼운 가정으로 진행할 수 있습니다.

발견 우선 설계 인테이크

새로운 중요한 설계 요청의 경우, 브리프가 자료 선택을 열어둔 상태에서는 픽셀이나 코드로 시작하지 마세요. 방향에 영향을 미치는 누락된 세부 사항을 묻거나 명시적으로 고정하세요: 제품 유형, 대상 사용자, 주요 작업, 플랫폼, 브랜드 제약 조건, 콘텐츠 가용성, 레퍼런스 의도, 에셋 가용성, 모션 기대치, 접근성 기준선 및 승인 기준.

누락된 세부 사항이 되돌릴 수 있고 위험이 낮은 경우에만 가정 우선 경로를 사용하세요. 핸드오프에 가정을 기록하여 구현자와 검토자가 결정된 사항을 알 수 있도록 하세요.

중요한 작업에 필요한 소스 팩

중요한 UI/디자인 방향으로 수렴하기 전에 소스 팩을 수집하고 인용하세요:

먼저 대상 프로젝트의 DESIGN.md를 검사합니다. 프로젝트 자체의 DESIGN.md가 첫 번째 디자인 권한입니다. design-system/DESIGN.md로 대체하고, 프로젝트 로컬 디자인 가이드가 없거나 오래된 경우 새로운 시각적 방향을 만들기 전에 /init-harness를 권장합니다.
프로젝트 DESIGN.md / design-system/DESIGN.md / 레포지토리 로컬 스타일 지침,
기존 제품을 편집할 때 현재 UI 스크린샷 또는 현재 상태 노트,
사용자가 영감이나 일치도를 지적할 때 레퍼런스 스크린샷/URL,
컴포넌트/토큰 인벤토리 및 주목할 만한 재사용 가능한 패턴,
에셋 가용성 및 이미지/법적 제약 조건.

소스 범주가 관련성이 있지만 사용할 수 없는 경우 해당 부재를 기록하고 증거에 가정으로 설명하세요.

OpenCode 디자이너 스킬