メニュー
프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은 omd:remember.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션 타이밍·이징·동심원 radius·tabular-nums·44px 타깃·focus ring·prefers-reduced-motion 등. 'feel 좋게 다듬어줘', '인터페이스 디테일 적용', 'feel 점검', '마이크로 인터랙션 손봐줘', 'make this feel better', 'polish the interactions', 「インターフェースの細部を詰めて」, 「介面細節打磨」 류에 트리거. 브랜드 토큰은 DESIGN.md(omd:apply)가 우선.
화면 전체나 신규 surface를 처음부터 디자인할 때의 진입점 — Discovery→Wireframe→Components→Microcopy→Validation 파이프라인을 omd-master 오케스트레이터로 실행. 트리거: '랜딩페이지', '랜딩 페이지', '랜딩 만들어줘', '홈 화면', '첫 화면', '프로토타입', '그럴싸한', '구색 갖춰', 'first screen', 'first impression', 'landing page', 'landing', 'prototype', 'MVP UI', 'home', 'production-ready', 'wireframe to production', '랜딩 처음부터', 'production-ready', '一からデザイン', '從頭設計'. 자연어 발화('그럴싸한 랜딩 만들어줘', 'MVP UI 잡아줘', '프로토타입이라도 구색 갖춰서')에도 자동 트리거. 단일 컴포넌트 수정은 omd:apply.
프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의 요청에 트리거. CLAUDE.md / AGENTS.md / Cursor rule shim도 함께 설치.
선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference/<id>/ 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드 에셋 가져와줘', 'X 사이트 패칭', 'X reference 캡쳐', 'X 라이브 스타일 추출', '브랜드 자료 받아와' 류 요청에 트리거. omd:init 직후 또는 omd:harness 중간에 호출 가능. DESIGN.md는 이 스킬이 만들지 않음 (omd:init 책임).
URL 또는 brand id 입력 → 3-tier 검증 파이프라인(Tier 1 라이브 + Tier 2 getdesign/refero + Tier 3 reconcile)으로 references/<id>/DESIGN.md를 신규 생성(CREATE)하거나 기존 섹션을 검증·갱신(UPDATE). '레퍼런스 추가/수정', 'X DS 검증', 'X 컴포넌트 다시 뽑아줘' 류에 트리거.
10개 brand 일괄 reference 추가 + 문서 카운트 sync + hyperframes 기반 promo MP4 생성. '10개씩 추천해줘', '한국 IT 10개 추가하고 영상까지', 'batch-launch', 'X 카테고리에서 10개 더' 류 트리거. 매 회 reference count +10, gitignored promo video 1편.
| name | omd:apply |
| description | 프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init 우선. 화면 전체 신규 디자인은 omd:harness, 교정 기록은 omd:remember. |
DESIGN.md를 모든 UI/디자인 작업의 권위 있는 컨텍스트로 사용한다. 단일 책임은 두 가지:
복합 작업을 인라인으로 처리하면 안 된다. 이 스킬의 가장 중요한 책임은 언제 dispatch할지 정확히 판단하는 것.
다음 중 하나가 감지되면 SKILL 전체를 로드한다.
작업 시작 전에 어떤 처리 경로인지 결정한다. 다음 표를 위에서부터 순차 매칭, 첫 번째 매칭 행으로 진행:
| 사용자 요청 패턴 | 처리 경로 | 이유 |
|---|---|---|
| "에셋 / 아이콘 / 일러스트 / 차트 / 사진 / 로고 / 그래프 / SVG 만들어" | dispatch omd-asset-curator | 매체 선택 + 스택 매칭이 전문 영역 |
| "메인 화면 / landing / 전체 디자인 / 처음부터 / 와이어프레임" | 사용자에게 /omd-harness 추천 | 10-phase 파이프라인이 적합 |
| "접근성 / a11y / 색약 / 키보드 네비" 감사 | dispatch omd-a11y-auditor | 전문 감사 |
| "마이크로카피만 다듬어 / 카피 톤 정리 / empty state 문구 전부" 복수 | dispatch omd-microcopy | voice 일관성 |
| "사용자 시나리오 / 페르소나 walk through / 4명 입장에서 검토" | dispatch omd-persona-tester | adversarial 4-페르소나 |
| "이 카피 좋은지 / hero 카피 약점 / 섹션별 카피 전문가 의견 / A/B 후보" | dispatch omd-ux-writer | UX writing 분석 + 대안 + 근거 |
| "이 인터랙션 / 모션 / 포커스 / 모바일 / 지각 성능 / 섹션별 UX 약점" | dispatch omd-ux-engineer | 코드 레벨 인터랙션 감사 + fix |
| "랜딩 / 메인 화면 / 페이지 전체를 전문가 의견으로 개선" | dispatch omd-ux-writer + omd-ux-engineer (병렬) | 두 트랙 동시 — writing + engineering |
| "이게 왜 안 좋은지 critique / postmortem / root cause" | dispatch omd-critic | 비판적 분석 |
| "DESIGN.md 만들어 / reference 골라 / 카탈로그에서 추천" | dispatch omd-init skill (또는 omd-add-reference) | reference 매칭 |
| "preference 정리 / 누적된 교정 반영 / DESIGN.md 업데이트" | dispatch omd-learn skill | fold-in 로직 |
| "이 한 줄 / 이 컬러 / 이 spacing 좀" 단발 명확 | 인라인 처리 | 분명한 단일 변경 |
| 위 어디에도 안 맞는 자유로운 디자인 작업 | 인라인 처리 후 Phase 3 (교정 캡처) | 일반 케이스 |
dispatch가 정해지면 즉시 Agent 툴 호출 (master 경유 X — 우리가 omd-apply로 트리거됐다는 건 master 컨텍스트 밖이라는 의미). 그 후 인라인 처리는 하지 않고, 서브에이전트가 반환한 결과를 사용자에게 정리만 해서 전달.
dispatch가 아니라 인라인 처리로 분기됐을 때만 진행:
DESIGN.md를 전체 읽는다. 요약 금지, Read 툴로 직접 로드..omd/preferences.md가 있으면 같이 읽는다. status: pending 엔트리는 아직 DESIGN.md에 반영 안 된 교정 — DESIGN.md보다 우선 적용.DESIGN.md frontmatter의 bootstrapped_from 또는 .omd/init-context.json의 reference_id로 brand id를 얻고, assets/_reference/<id>/가 존재하면:
tokens.json — live_overrides 블록 우선structure.json — composition cues (hero/cta/nav idiom)fonts.json — live_observed: true 항목은 출력 HTML <head>에 html_link 그대로 박을 것. 미로드 시 시스템 fallback으로 둥근 폰트 mismatch.screenshots/hero-desktop.png — UI 작업이 hero/landing 류면 Read 툴로 이미지로 직접 읽고 시각 grounding.omd/init-context.json의 mode 필드):
clone → 헤더 logo는 assets/_reference/<id>/logo.<ext> 직접 사용. project root에 CLONE-MODE.md + replace-checklist.md가 있어야 함.inspired (또는 미지정) → 헤더 logo는 [YOUR LOGO] placeholder. captured 자산은 product DOM 미사용..omd/preferences.md (pending)
> assets/_reference/<id>/tokens.json#live_overrides (visual surface tokens만)
> DESIGN.md (essence: voice/principles/motion 철학·canonical token)
> framework defaults
DESIGN.md 없으면 사용자에게 알리고 omd:init 스킬 트리거. 임의 생성 금지.
턴 종료 전에 다음 중 하나가 있었는지 확인:
감지되면 omd:remember 스킬을 트리거한다 (CLI 호출 X — .omd/preferences.md에 직접 append). 트리거 메서드: omd-remember SKILL.md의 Step 1-6 절차를 따라 Edit 툴로 파일 수정.
교정 기록 시 턴 끝에 한 줄:
Logged to .omd/preferences.md — say "preference 정리해줘" later to fold into DESIGN.md.
일반 작업에는 불필요. 과한 알림 금지.
omd remember, omd learn 등) 금지 — 1.0.0부터 모두 스킬 prose