Imported from cjrain-12505614/douzone-forge-marketplace (douzone-forge-v1.16.0/skills/dz-frontend-design/SKILL.md). Install upstream with npx skills add cjrain-12505614/douzone-forge-marketplace --skill dz-frontend-design. Copyright stays with the author (원본 frontend-design 라이선스 준수 (Complete ter).

dz-frontend-design

Anthropic 공식 frontend-design 플러그인의 핵심을 douzone-forge 플러그인 안으로 흡수한 미러 스킬. Cowork 환경에서 원본 frontend-design 직접 호출이 불가한 갭 (TASK-S-05 핵심) 의 폴백 수단 으로 신설.

1. When to use — 호출 우선순위

본 스킬은 원본 frontend-design 의 폴백이다. 호출 우선순위는 환경에 따라 다르다.

원본 우선 원칙: 본 스킬은 라이선스·유지보수 비용을 감수한 미러이므로, 원본이 호출 가능한 환경에서는 항상 원본을 우선한다. 원본 frontend-design 이 향후 Cowork 에서도 정식 호출 가능해지면 본 스킬은 폴백 의무를 잃고 archive 대상이 된다.

트리거

다음 표현이 등장하면 본 스킬 또는 원본 frontend-design 을 호출:

• "프론트 디자인 적용해줘"
• "고품질 HTML 작성해줘"
• "보고서를 시각화해줘"
• "대시보드 디자인해줘"
• "frontend-design 적용"
• "이 데이터를 잘 보이게 정리해줘 / 시각화"
• "발표 자료용 HTML"
• "엔터프라이즈 보고서 만들어줘"

When NOT to use — 본 스킬을 호출하지 않는 경우

• 단순 마크다운 정리 — 시각화 없이 텍스트만 정돈하는 작업은 본 스킬 불필요
• ONEFFICE 환경 대상 — dz-html-oneffice-builder 가 ONEFFICE 제약 (dzeditor 컨테이너 보존 등) 까지 통합 처리한다. 본 스킬은 ONEFFICE 외부 자체완결 HTML 산출물 전용
• 그래프·차트 라이브러리 핵심 작업 — Chart.js·D3 등 라이브러리 사용이 핵심인 경우, 본 미학 가이드는 보조적으로만 적용

2. Design Thinking — BOLD 미학 방향 우선 결정

코드 작성 전에 컨텍스트를 파악하고 명확한 미학 방향을 선택한다. 절충안 금지.

2.1 4축 파악

• Purpose: 이 인터페이스가 풀어야 하는 문제는? 누가 사용하는가?
• Tone: 극단을 선택한다. brutally minimal / maximalist chaos / retro-futuristic / organic-natural / luxury-refined / playful-toy / editorial-magazine / brutalist-raw / art-deco-geometric / soft-pastel / industrial-utilitarian — 등에서 영감을 받되, 컨텍스트에 진정으로 맞는 방향을 새로 정의한다.
• Constraints: 기술 요구사항 (프레임워크 · 성능 · 접근성 · 인쇄)
• Differentiation: 이 디자인을 잊을 수 없게 만드는 한 가지는?

2.2 더존비즈온 컨텍스트 — 기본 톤 권장

본 플러그인의 주 사용 영역은 엔터프라이즈 거버넌스 · 기획·설계 보고서 · 본부장/CPO 의사결정 자료다. 다음 톤이 기본 권장 후보:

• Editorial Gravity — FT Weekend × 금융 연차보고서 × 건축 매거진 톤. 차분한 권위감. {이름} 수석의 보고서·발표 자료에 적합.
• Refined Minimalism — 흰 여백 + 정밀 그리드 + 한정된 색상. 공식 발표·이사회 보고에 적합.
• Industrial Utilitarian — Bloomberg Terminal 톤. 고밀도 데이터 모니터링 대시보드.
• Soft Editorial Light — 따뜻한 페이퍼 톤 + 세리프 헤드라인. 통합본·운영 가이드.

⚠️ 기본 톤 권장은 출발점일 뿐. 사용자가 명시적으로 maximalist · playful · brutalist 등 다른 방향을 요청하면 그대로 따른다. 본 컨텍스트 안내가 미학 다양성을 제약하면 안 된다.

2.3 CRITICAL — 명확한 방향, 정밀 실행

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

미학 의도가 명확하면 어느 극단이든 통한다. 중간 어딘가에서 머뭇거리는 디자인은 항상 실패한다.

3. Frontend Aesthetics Guidelines

3.1 Typography — 글꼴은 가장 큰 미학 결정

• 회피 폰트: Inter · Roboto · Arial · system fonts · Space Grotesk — 모두 AI 슬롭의 시그니처. 매 세션마다 흔한 선택으로 수렴하지 말 것
• 권장 페어링: 특징적 디스플레이 폰트 + 정제된 본문 폰트 조합
• 한국어 본문: Pretendard Variable (cdn.jsdelivr.net/gh/orioncactus/pretendard) 기본. Noto Sans KR 가능. 한국어 가독성·자간·문자 폭 우수
• 한국어 디스플레이/세리프: Noto Serif KR · 본명조 (조선일보 명조 톤) 또는 한국어 미지원 세리프(Fraunces · Bricolage · Newsreader 등)와 Pretendard 의 영문/한글 분리 운용
• 영문 디스플레이 권장 후보: Fraunces (가변 SOFT/opsz, 편집디자인 적합) · Newsreader · Bricolage Grotesque · IBM Plex Serif · Spectral · Crimson Pro · Instrument Serif
• 모노스페이스: JetBrains Mono · IBM Plex Mono (Consolas·Courier 회피)
• font-feature-settings: "ss01", "tnum" 등으로 숫자 폭 통일 (재무·표 표시에 결정적)

3.2 Color & Theme — 단일 강조색 + 헤어라인

• CSS variables 로 일관성 보장
• 지배 색 + 날카로운 강조색 이 균등 분포 팔레트보다 우수
• 회피 컬러: 보라색 그라데이션 + 흰 배경 (AI 슬롭 시그니처) · 무의미한 무지개 그라데이션
• 다크/라이트 모드는 컨텍스트에 따라 결정 — 매번 다크에 수렴 금지
• 더존 권장: 따뜻한 페이퍼 톤 (#f4ecdc 류) + 잉크 블랙 + burnt sienna(#b54822) 단일 강조 / 또는 차가운 다크 네이비 + 호박색 강조 등
• 헤어라인 (1px @ 12% opacity) 으로 정보 구분 — 박스·shadow 남발보다 우수

3.3 Motion — 임팩트 모먼트 1회

• HTML 은 CSS-only 우선. React 는 Motion (framer-motion) 사용 가능 시 활용
• 고임팩트 1회 > 산만한 마이크로 모먼트 — 초기 페이지 로드 시 staggered reveal (animation-delay) 한 번이 호버 위글 100개보다 우수
• 스크롤 트리거 · 호버 상태는 surprise 요소가 있을 때만 사용
• prefers-reduced-motion: reduce 미디어 쿼리로 모션 비활성화 옵션 반드시 제공
• 엔터프라이즈 거버넌스 톤에서는 모션 최소화 (fade-in 캐스케이드 정도만)

3.4 Spatial Composition — 예상 깨기

• 비대칭 · 그리드 깨기 · 의도적 오버랩 · 대각 흐름
• 12컬럼 그리드 기반에서 의도적으로 spans 깨기
• 관대한 음의 공간 OR 통제된 고밀도 — 중간 어딘가 회피

3.5 Backgrounds & Visual Details — 분위기와 깊이

• 단색 배경 디폴트 금지
• 컨텍스트에 맞는 텍스처 적용: gradient mesh · noise texture · 기하학 패턴 · layered transparency · dramatic shadow · 장식 보더 · custom cursor · grain overlay
• 페이퍼 톤에서는 SVG noise filter 로 종이 질감 부여 (feTurbulence + feColorMatrix)
• 엔터프라이즈 톤에서는 절제 — grain · subtle 만 사용, 화려한 텍스처 회피

3.6 일반 금지사항 (AI 슬롭 회피)

• 흔한 폰트 (Inter · Roboto · Arial · system)
• 진부한 컬러 스킴 (특히 보라색 그라데이션 + 흰 배경)
• 예측 가능한 레이아웃·컴포넌트 패턴
• 컨텍스트 특화 캐릭터가 없는 쿠키 커터 디자인

4. 구현 결과물 요건

다음 4축을 모두 충족해야 한다:

1. Production-grade and functional — 실제 동작하는 코드. 데모용 더미 X
2. Visually striking and memorable — 미학적으로 강렬하고 기억에 남는다
3. Cohesive with a clear aesthetic point-of-view — 일관된 미학 관점
4. Meticulously refined in every detail — 모든 디테일이 정밀하게 다듬어짐

4.1 복잡도 매칭

Match implementation complexity to the aesthetic vision.

• Maximalist 디자인: 풍부한 코드 + 광범위한 애니메이션·효과
• Minimalist / Refined 디자인: 절제 · 정밀 · 간격·타이포·서브틀 디테일에 집중

우아함은 비전을 잘 실행하는 데서 나온다 — 분량이 아니라.

5. 더존비즈온 컨텍스트 보강

5.1 한국어 본문 처리

• 본문 한국어 + 영문 혼용 시 Pretendard Variable 단일 폰트로 처리 (자체 영문 글리프 우수)
• 한국어 줄높이 1.55 ~ 1.65 권장 (라틴 1.4 ~ 1.5 보다 약간 높게)
• 영문 강조 (이탤릭 · 굵게) 시 한국어와 폰트 분리 시 자간·줄높이 미스매치 점검

5.2 인쇄 친화

• 더존 보고서는 PDF 변환·인쇄 동반 — @media print 블록 필수
• 배경 grain · 노이즈는 인쇄 시 제거
• page-break-inside: avoid 로 섹션·테이블 페이지 단절 방지
• 링크는 인쇄 시 underline 제거 또는 출력 URL 병기 옵션

5.3 ONEFFICE 환경 분리

• 본 스킬은 자체완결 HTML 산출물 전용
• ONEFFICE 문서 주입 (편집모드 HTML 삽입) 이 핵심인 작업은 dz-html-oneffice-builder 또는 dz-oneffice-writer 호출 — 본 스킬과 혼동 금지

5.4 PRJ 코드 표기 규칙 준수

본 스킬로 작성되는 HTML 산출물에서도 규칙/프로세스/공용-개인-경계-규칙.md 및 PRJ 코드 표기 규칙 (CLAUDE.md "PRJ 코드 표기 규칙" 섹션) 준수. PRJ 코드 단독 사용 금지 — 항상 프로젝트명과 함께 표기. 예: Amaranth10-Claude-Forge 구축(PRJ-2026-014).

6. 검증 체크리스트 (작성 후)

산출 직전 자가 점검:

• 폰트 선택이 Inter · Roboto · Arial · Space Grotesk 회피했는가?
• 컬러 팔레트가 보라색 그라데이션 + 흰 배경 진부 패턴이 아닌가?
• 미학 방향이 한 가지로 명확한가 (절충 회피)?
• 한국어 본문 폰트 처리가 가독성 우수한가 (Pretendard 등)?
• prefers-reduced-motion 미디어 쿼리가 있는가?
• @media print 블록으로 인쇄 친화가 되어 있는가?
• PRJ 코드 단독 사용 없는가 (프로젝트명과 병기)?
• 결과물이 "쿠키 커터 AI 디자인" 으로 보이지 않는가?

7. 라이선스 · 유지보수 정책

7.1 라이선스

본 스킬은 Anthropic claude-plugins-official 마켓플레이스의 frontend-design 플러그인 핵심을 미러한 폴백 수단이다. 원본 라이선스 (LICENSE.txt) 의 조건을 그대로 준수한다.

원본 위치: ~/.claude/plugins/cache/claude-plugins-official/frontend-design/unknown/skills/frontend-design/SKILL.md

• 본 미러는 원본 핵심 보존을 우선으로 하되, 한국어 풀이 · 더존 컨텍스트 보강은 본 플러그인 (douzone-forge) 자체 작업으로 추가
• 원본의 라이선스 조항을 위반하는 사용은 금지
• 본 스킬을 외부 재배포할 경우 원본 출처 명기 의무

7.2 유지보수 정책 — 분기 (Divergence) 관리

• 원본 변경 감지: Anthropic 측 frontend-design 갱신 시 본 미러를 검토하고 동기화 필요
• 분기 정책: 본 미러가 원본과 의미 있게 분기 (예: 한국어 컨텍스트 핵심 추가) 한 경우, SKILL.md 본문 상단에 분기 명시
• archive 조건: Anthropic frontend-design 이 Cowork 에서도 정식 호출 가능해지면 본 스킬은 폴백 의무를 잃는다. 그 시점에 _archive/ 로 이동, plugin.json 에서 제거

7.3 본 스킬 신설 사유 (히스토리)

• 2026-05-12 — {이름} 수석 옵션 B 결재 (Cowork ↔ Claude Code 플러그인 상속 갭 폴백 신설). PRJ-2026-013 기술위원회 AI 개발툴 TFT 트랙의 부산물로 식별된 갭. 옵션 C (cowork-to-claudecode-migration.md SSoT 갱신) 와 병행 채택.

8. 본 스킬 vs 관련 스킬

9. 호출 예시

9.1 Cowork 환경에서 폴백 사용 — 보고서 시각화

사용자: "이 통합본을 frontend-design 으로 시각화해줘"

1. Cowork 환경 인지 → 원본 frontend-design 활성화 여부 확인 (실패 시 본 폴백 진입)
2. 본 스킬 §2 Design Thinking 4축 파악 → 미학 방향 결정 (예: Editorial Gravity)
3. §3 Aesthetics Guidelines 적용 → 폰트 · 컬러 · 모션 · 레이아웃 결정
4. §5 더존 컨텍스트 보강 (한국어 처리 · 인쇄 친화 · PRJ 표기) 적용
5. §6 검증 체크리스트 통과 후 산출

9.2 Claude Code 환경에서는 본 스킬 호출 거절

사용자: "/dz-frontend-design 으로 디자인해줘" (Claude Code 환경)

→ 응답: "Claude Code 환경에서는 frontend-design:frontend-design 원본 직접 호출이 우선입니다. 본 폴백 스킬은 Cowork 환경 전용입니다. 원본으로 진행하겠습니다." → 원본 호출로 위임.

본 SKILL.md 는 Anthropic frontend-design 플러그인 핵심을 douzone-forge 플러그인 안에 미러한 폴백 수단. 원본 라이선스 준수. 2026-05-12 {이름} 수석 옵션 B 결재 신설.