danielmiessler/LifeOS

음성 알림 (필수 첫 번째 작업)

curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Webdesign 스킬 실행 중", "voice_enabled": true}' > /dev/null

기능

두 가지 경로를 통해 웹 인터페이스를 설계하고 통합합니다. ClaudeDesign은 Interceptor 스킬을 통해 Anthropic의 claude.ai/design 제품을 제어한 후 결과를 코드베이스에 통합합니다. DirectDesign은 로컬 참조에서 로드된 Anthropic의 오픈소스 프론트엔드 디자인 철학을 사용하여 인라인으로 디자인을 작성합니다. 기본 라우팅: 짧고 임시적인 코드베이스 내 작업은 DirectDesign으로, 여러 페이지 또는 공유 가능한 프로토타입은 ClaudeDesign으로 전송됩니다.

문제점

좋은 웹 UI를 만들기 위해서는 일반적으로 실제 코드베이스에 접근할 수 없는 시각적 도구와 싸우거나, 처음부터 직접 코딩하여 매번 동일한 일반적인 기본값으로 끝나는 경우가 많습니다. 두 가지 실패 모드는 반대 방향으로 작용합니다. 시각적 우선 도구는 정교함을 제공하지만 핸드오프 간격이 발생하고, 코드를 직접 작성하면 통합은 되지만 미학이 평범해집니다. 이 스킬은 두 가지 경로를 하나의 지붕 아래 제공합니다. 검토가 중요한 경우 claude.ai/design을 통한 시각적 왕복, 또는 속도와 코드베이스 내 반복이 중요한 경우 실제 미학 원칙이 로드된 인라인 디자인을 제공하며, 요청에 따라 적절한 경로로 라우팅합니다.

작동 방식

Webdesign은 웹 UI 생성을 위한 세 가지 경로를 다룹니다. 상황에 맞는 경로를 선택하고, 의도가 모호할 경우 이름별로 옵션을 제시합니다. 우리는 항상 현재 라이브 상태의 Claude Design 버전을 구동합니다. 고정된 버전은 없습니다.

경로 1 — DirectDesign (기본 작업 도구, {{DA_NAME}}이 인라인으로 디자인 작성)

{{DA_NAME}}은 Anthropic의 오픈소스 frontend-design 미학 원칙을 인라인으로 로드하여 디자인을 직접 작성합니다. 핵심 프롬프트 내용은 github.com/anthropics/skills/tree/main/skills/frontend-design(MIT 라이선스)에서 References/FrontendDesignPhilosophy.md로 미러링됩니다 — 레지스터 목록, 안티-기본 규칙, 유형 페어 레시피, 모션 어휘, 색상 규율. 자체 포함: 런타임 종속성, 브라우저, 인증 불필요. 이 스킬이 생성한 모든 실제 디자인을 배송한 경로입니다. 워크플로우: DirectDesign.

경로 2 — 네이티브 Claude Design CLI (코드 통합 + 디자인 시스템 동기화에 선호)

Anthropic은 Claude Code 내에서 공식 /design 및 /design-sync 명령어를 출시했습니다(2026년 6월, Pro/Max/Team/Enterprise에서 GA — 공식 문서: support.claude.com/en/articles/14604416). /design-sync는 코드베이스의 실제 디자인 시스템을 Claude Design으로 가져오고 변경 사항을 다시 푸시하며, /design은 터미널에서 디자인을 생성 및 편집합니다. 이는 수동으로 만든 Interceptor 핸드오프 번들 장치를 대체하는 결정적이고 공식적인 방법입니다. 코드와 관련된 모든 작업에 선호합니다. 워크플로우: NativeDesignSync.

경로 3 — Interceptor를 통한 ClaudeDesign (실험적 시각 검토 대체 수단)

⚠️ 검증되지 않았으며 현재 작동하지 않습니다. 이 경로는 Interceptor 스킬을 통해 claude.ai/design 웹 캔버스를 제어하여 시각적 검토를 제공합니다. interceptor-test Chrome 프로필에 인증된 claude.ai 세션이 필요하지만, 현재 로그인되어 있지 않으며, 한 번도 전체적으로 실행된 적이 없습니다 (이 스킬의 모든 실제 실행은 DirectDesign을 사용했습니다). 시각적 웹 캔버스가 구체적으로 필요하고 로그인이 먼저 설정된 경우에만 사용하세요. 워크플로우: CreatePrototype, ExtractDesignSystem, RefinePrototype, WebsiteToRedesign, ExportToCode, IntegrateIntoApp, DeployDesign. 도구: DriveClaudeDesign.ts.

라우팅 규칙

사용자가 경로를 지정하지 않고 "멋진 디자인" / "디자인 해줘"를 요청할 경우:

• 짧고 임시적인 코드베이스 내 작업은 DirectDesign을 기본값으로 사용 — 속도와 컨텍스트 내 반복.
• 실제 코드베이스 디자인 시스템을 동기화하거나 코드 중심 디자인 작업을 할 때는 네이티브 CLI(/design-sync)를 사용하고 명령어를 사용할 수 있는 경우.
• 시각적 웹 캔버스 검토가 명시적으로 필요한 경우에만 ClaudeDesign(경로 3)을 사용하며, 일회성 로그인이 필요하고 검증되지 않았음을 기억하세요.

통합 인식 작동 (중요)

이 스킬은 종종 더 큰 사이트 작업의 하위 단계로 호출됩니다 — 블로그 게시물 작성, 관리 대시보드 구축, 마케팅 페이지 배송. 상위 컨텍스트에서 호출될 때 스킬은:

• 기존 프로젝트 컨텍스트를 입력으로 수용: 프레임워크, 토큰 파일, 컴포넌트 디렉토리, 배포 대상.
• 출력을 기존 앱에 대한 diff/패치로 생성하며, 독립적인 HTML 파일이 아닙니다.
• 기존 디자인 토큰과 컴포넌트 패턴을 존중하며, 사용자가 전체 재설계를 요청하지 않는 한 덮어쓰지 않습니다.
• 통합 작업을 Workflows/IntegrateIntoApp.md를 통해 라우팅합니다.

처음부터 새로 디자인하는 경우, 스킬은 자체 포함된 프로토타입을 생성하고 선택적으로 새 앱을 스캐폴딩합니다.

사용자 지정

사용자별 디자인 선호도(색상 팔레트, 타이포그래피, 간격 그리드, 애니메이션 타이밍, 프레임워크 기본값)는 다음 위치에 있습니다:

~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Webdesign/
├── PREFERENCES.md     # 디자인 토큰, 선호 프레임워크
├── README.md
└── EXTEND.yaml

스킬은 PREFERENCES.md가 있으면 읽고 해당 토큰을 Claude Design의 브리프와 다운스트림 핸드오프 번들에 전달합니다. 사용자 지정 레이어가 없으면 스킬은 Claude Design 자체 시스템 추출 출력을 기본값으로 사용합니다.

워크플로우 라우팅

워크플로우를 실행할 때 다음 알림을 출력합니다:

**Webdesign**에서 **WorkflowName** 실행 중...

워크플로우	트리거	파일
DirectDesign (경로 1 — 기본, {{DA_NAME}}이 인라인으로 작성)	"멋진 디자인 만들어줘", "이걸 직접 디자인해", "디자인 직접 해", "멋진 거 디자인해", "프론트엔드 미학", "브루탈리스트/에디토리얼/레트로/맥시멀리스트 UI", "프로토타입"/"목업"/"claude design"이 없는 짧은 임시 디자인 요청	Workflows/DirectDesign.md
NativeDesignSync (경로 2 — 코드 작업에 선호)	"/design", "/design-sync", "디자인 동기화", "디자인 시스템 동기화", "Claude Design으로 디자인 시스템 가져오기", "코드를 Claude Design으로 푸시", "네이티브 디자인 명령어"	Workflows/NativeDesignSync.md
CreatePrototype (경로 3 — 실험적, claude.ai/design 구동)	"프로토타입 디자인", "프로토타입 생성", "목업", "디자인 구축", "claude design", "claude.ai/design 사용"	Workflows/CreatePrototype.md
ExtractDesignSystem (경로 3)	"디자인 시스템 추출", "토큰 가져오기", "브랜드 추출"	Workflows/ExtractDesignSystem.md
RefinePrototype (경로 3)	"반복", "개선", "간격 조정", "색상 변경"	Workflows/RefinePrototype.md
WebsiteToRedesign (경로 3)	"이 사이트 재설계", "이 URL 재구축", "현대화"	Workflows/WebsiteToRedesign.md
ExportToCode (경로 3 대체 — /design-sync 선호)	"코드로 내보내기", "코드로 배송", "Claude Code로 보내기", "핸드오프 처리"	Workflows/ExportToCode.md
IntegrateIntoApp (경로 3 대체 — /design-sync 선호)	"이것을 통합", "앱에 패치", "기존 코드베이스에 적용"	Workflows/IntegrateIntoApp.md
DeployDesign (경로 3)	"디자인 배포", "프로덕션에 배송"	Workflows/DeployDesign.md

코드 중심 작업(내보내기, 통합, 디자인 시스템 추출/동기화)의 경우 경로 2(NativeDesignSync → /design-sync)를 선호합니다. 위의 경로 3 번들 워크플로우는 웹 캔버스에서 작업할 때 문서화된 대체 수단으로 남아 있지만, 검증되지 않았으며 테스트 프로필 로그인이 필요합니다.

사전 조건 (사전 점검)

경로 1(DirectDesign)은 아무것도 필요하지 않습니다 — 브라우저, 인증 불필요. 경로 2(네이티브 CLI)는 Claude Design을 포함하는 Claude 구독과 최신 Claude Code만 필요합니다(명령어가 표시되지 않으면 /update). 아래 확인 사항은 경로 3(Interceptor를 통한 ClaudeDesign)에만 적용됩니다:

1. Interceptor 스킬 사용 가능 — which interceptor가 경로를 반환해야 합니다. 그렇지 않으면 사용자에게 먼저 Skill("Interceptor") 설정을 호출하도록 지시합니다.
2. 인증된 claude.ai 세션 — interceptor-test Chrome 프로필이 claude.ai에 로그인되어 있어야 합니다. 실행 시 확인합니다(인증되지 않은 프로필은 앱이 아닌 마케팅 월에 도달합니다). 그렇지 않은 경우, 경로 3 워크플로우를 실행하기 전에 일회성 헤드 로그인이 필요합니다.
3. Claude Design 액세스 — Claude 구독에 Claude Design이 포함되어야 함(Pro, Max, Team, 또는 관리자 옵트인이 있는 Enterprise).
4. IntegrateIntoApp의 경우: 상위 프로젝트 경로 + 프레임워크 식별자(next, astro, vitepress, vite-react, vue, vanilla)가 컨텍스트에 전달되어야 합니다.

누락된 사전 조건 → 명확한 해결 단계와 함께 중단합니다. 절대 조용히 대체하지 마세요.

주의사항

여기에 교훈을 축적합니다. 주의사항에 정보 밀도가 가장 높습니다.

• 두 경로, 하나의 스킬. ClaudeDesign(CreatePrototype 등)은 claude.ai/design을 구동합니다. DirectDesign은 References/FrontendDesignPhilosophy.md를 사용하여 {{DA_NAME}}이 인라인으로 디자인을 작성합니다. 혼동하지 마세요. 사용자의 의도가 모호할 때는 두 가지를 명명된 선택 사항으로 제시하고 선택하게 하세요. 절대 조용히 라우팅하지 마세요.
• 네이티브 우선 — 코드와 토큰이 진실의 원천이며, Figma는 종속성이 아닙니다. 디자인 시스템을 가져오려면 저장소를 연결하거나(Claude Design은 코드에서 실제 컴포넌트와 토큰을 읽음) 토큰/컴포넌트 파일을 업로드하고, 절대 .fig 내보내기를 사용하지 마세요. 양방향 Figma 왕복(디자인 → .fig, 또는 코드 → 편집 가능한 Figma 프레임)을 추가하지 마세요. 디자인은 코드베이스에 있으며 외부 교환 파일이 아닙니다. 저장소가 없는 시각적 검토가 필요할 경우 URL/스크린샷 공유로 해결하고, Figma에 스킬을 결합하지 마세요.
• DirectDesign은 자체 포함됩니다. 미학 원칙은 References/FrontendDesignPhilosophy.md에 있습니다(anthropics/skills MIT 소스에서 미러링됨). 업스트림 frontend-design Claude Code 플러그인이 설치될 필요 없이 DirectDesign은 모든 LifeOS 환경에서 작동합니다.
• 네이티브 /design + /design-sync가 이제 코드 중심 경로입니다(확인됨). Anthropic의 공식 문서(support.claude.com/en/articles/14604416)는 두 명령어를 모두 문서화하고 있으며, 2026년 6월부터 Pro/Max/Team/Enterprise에서 GA입니다. /design-sync는 양방향 코드베이스↔디자인 시스템 동기화를 수행합니다. 코드 중심 작업에는 Interceptor 핸드오프 번들 장치 대신 사용하세요. 공개 REST API나 MCP 서버는 아직 없습니다. CLI 명령어가 프로그래밍 방식 인터페이스입니다. 표시되지 않으면 /update를 실행하세요.
• ClaudeDesign/Interceptor 경로(경로 3)는 검증되지 않았으며 현재 차단되었습니다. 한 번도 전체적으로 실행된 적이 없습니다. 이 스킬의 모든 실제 실행은 DirectDesign을 사용했습니다. interceptor-test 프로필이 claude.ai에 로그인되어 있지 않으므로 DriveClaudeDesign.ts는 앱이 아닌 마케팅 월에 도달합니다. 도구는 접근성 트리 휴리스틱(composer는 role=textbox/contenteditable, send는 /send|submit/, export는 /export/)으로 컨트롤을 대상으로 하므로 이동된 버튼이 차단 요소가 아닙니다 — 누락된 인증과 네이티브 CLI 대체가 문제입니다. 경로 3을 신뢰하기 전에: 테스트 프로필을 claude.ai에 한 번 로그인한 후, 감독 하에 한 번 실행하세요.
• 실제 Chrome 필요. Interceptor 스킬을 사용하세요. LifeOS에서 유일하게 승인된 브라우저 자동화입니다. Claude Design의 UI는 claude.ai의 전체 세션 상태에 의존합니다. CDP 기반 자동화는 봇 감지를 유발하고 세션 쿠키를 삭제합니다.
• 핸드오프 번들은 단일 파일이 아닌 디렉토리입니다. 번들에는 PROMPT.md, 선택적 tokens.json, components/, assets/, 프레임워크별 스캐폴딩이 포함됩니다. 전체 디렉토리를 단위로 취급하세요.
• frontend-design 플러그인이 자동 활성화됩니다. 핸드오프 번들이 Claude Code에 제공되면 플러그인(공식 마켓플레이스에 이미 설치됨)이 자동으로 프론트엔드 작업을 처리합니다. 수동으로 호출하지 마세요.
• Claude Design의 디자인 시스템 추출은 온보딩 중에 실행됩니다. Claude Design이 이해하기를 원하는 새 코드베이스의 경우 CreatePrototype 전에 먼저 ExtractDesignSystem을 실행하세요. 그렇지 않으면 Claude Design은 일반 기본값을 사용하고 토큰을 덮어씁니다.
• 통합 ≠ 덮어쓰기. IntegrateIntoApp은 기존 코드 위에 diff를 생성합니다. 사용자가 기존 UI를 대체하는 전체 재설계를 원하는 경우 명시적으로 플래그를 지정하고 확인을 받으세요.
• Canva 내보내기는 편집 가능합니다. 사용자가 비개발자(마케터, 창업자)가 디자인을 개선하기를 원하는 경우 Workflows/ExportToCode.md를 --format canva와 함께 사용하세요.
• 실시간 협업 없음. Claude Design은 Figma와 같은 멀티플레이어 편집을 지원하지 않습니다. 비동기 검토를 위해 URL 내보내기로 공유하세요.
• Enterprise 게이트. Enterprise 계정은 관리자가 조직 설정에서 Claude Design을 활성화해야 claude.ai에 팔레트 아이콘이 나타납니다.
• 세션 할당량. Claude Design 생성은 토큰 사용량이 많습니다. 2026년 6월 업데이트부터 사용량은 claude.ai 채팅, Claude Code 및 Cowork와 하나의 풀을 공유합니다. 더 이상 별도 할당량이 아닙니다. 지속적인 디자인 작업에는 Pro가 얇으며 Max를 권장합니다.
• 디자인 시스템 우선이 토큰 해결책입니다. 가장 큰 토큰 소모는 매번 브랜드를 재추론하고 수정하는 것입니다. ExtractDesignSystem을 한 번 실행하여 시스템을 고정된 재사용 가능한 참조로 만드세요. 이후 모든 생성은 추측 대신 이를 재사용합니다. 수정 주기가 적어지면 프로젝트 수명 동안 훨씬 적은 토큰이 사용됩니다. 이는 할당량 소모에 대항하는 가장 효과적인 단일 조치입니다.
• 출물 충실도 ≠ 프로덕션 준비. Claude Design은 정교한 시각 요소를 생성하지만, 핸드오프 코드는 종종 검증 및 a11y 검토가 필요합니다. 통합 후 Tools/VerifyDesign.ts를 실행하세요.
• 비전은 추측하지 않습니다. 프롬프트가 반응형 중단점, 대비 요구 사항 또는 다크 모드 동작을 지정하지 않으면 Claude Design은 대상 앱과 일치하지 않을 수 있는 기본값을 선택합니다. 브리프에 명시적으로 지정하세요.

예제

예제 1: 브리프에서 프로토타입 생성

사용자: "AI 보안 스타트업의 가격 페이지 디자인 — 에디토리얼 미학, 다크만"
→ CreatePrototype 워크플로우 호출
→ 사전 점검: Interceptor + 인증된 claude.ai 세션
→ 명시적 미학, 제약 조건, 차별화를 포함한 브리프 구성
→ 도구를 통해 claude.ai/design 구동

…

[번역을 위해 잘림]