Stats
Actions
Tags
From 더블유아일랜드 디자인 시스템
더블유아일랜드 사내 도구(AI Hub 등)의 UI를 만들거나 수정할 때 따라야 하는 디자인 시스템 가이드. 화면·컴포넌트·HTML/CSS를 새로 만들거나, 색상·버튼·입력창·리스트·뱃지·탭·토글·아이콘· 타이포그래피를 추가/변경하거나, 다크모드·테마·디자인 토큰 작업을 하거나, 버튼 라벨·안내 문구· 에러 메시지 같은 카피(문구)를 쓸 때 반드시 이 스킬을 사용하세요. ai-hub 프로젝트의 index.html / style.css 등을 편집할 때 특히 적용합니다. "버튼 추가해줘", "색 바꿔줘", "이 화면 만들어줘", "UI 좀 손봐줘", "다크모드 입혀줘", "문구 다듬어줘" 처럼 명시적으로 '디자인 시스템'을 언급하지 않는 요청에도 적용해, W-ISLAND Blue · 중립 그레이 컬러 토큰 · Pretendard 타이포 · 라인 아이콘 규칙 · 컴포넌트 패턴 · 해요체 UX 라이팅 6원칙을 일관되게 지키도록 합니다.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wisland-design-system:wisland-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
더블유아일랜드 사내 도구의 화면을 만들거나 고칠 때, 모든 직군(디자이너·MD·CS·물류·경영·회계·지원팀)이 **같은 기준으로 일관된 경험**을 받도록 하기 위한 가이드입니다. 시각 자료의 원본은 스타일 가이드 사이트(https://w-island.github.io/style-guide/)에 있어요. 색상 칩·아이콘·컴포넌트를 눈으로 확인하려면 그 사이트를 열면 됩니다.
더블유아일랜드 사내 도구의 화면을 만들거나 고칠 때, 모든 직군(디자이너·MD·CS·물류·경영·회계·지원팀)이 같은 기준으로 일관된 경험을 받도록 하기 위한 가이드입니다. 시각 자료의 원본은 스타일 가이드 사이트(https://w-island.github.io/style-guide/)에 있어요. 색상 칩·아이콘·컴포넌트를 눈으로 확인하려면 그 사이트를 열면 됩니다.
UI 작업이 들어오면 다음 순서로 진행하세요.
references/tokens.md를 읽으세요.references/components.md의 패턴을 가져다 쓰세요.references/ux-writing.md의 규칙을 따릅니다.style.css에 이미 변수/클래스가 있으면 그걸 우선 따르고, 없을 때만 이 토큰을 추가하세요. 토큰 이름과 값이 충돌하면 사용자에게 알려주세요.대상 앱이 이미 의미 토큰(--accent, --bg, --text-* 등)과 컴포넌트 클래스(.btn-primary, .switch 등)를 갖고 있고 화면을 JS로 렌더링한다면, 컴포넌트 CSS를 그대로 붙여넣지 마세요. 클래스가 충돌해 기존 UI가 깨지고, 정적으로 삽입한 마크업은 JS 렌더링에 덮어쓰여 사라집니다.
대신 앱의 기존 토큰 "값"을 디자인 시스템 팔레트로 리매핑하세요. 마크업·JS를 건드리지 않고 :root / [data-theme="dark"]의 변수 값만 바꾸면 앱 전체가 한 번에 정렬됩니다. 매핑 예: --accent → blue-500 (#0f52ba), --text-primary → gray-1000, --danger → status-negative (#d6173a). 적용 전 충돌하는 토큰(특히 액센트)은 사용자에게 먼저 알리고, 다크 모드 값은 가독성을 위해 한두 단계 밝은 blue를 쓰세요.
핵심 원칙은 아래에 요약돼 있습니다. 구체적인 값과 패턴이 필요할 때만 참조 파일을 여세요(컨텍스트 절약).
#1577cc) — 차분하고 흰 글씨 대비가 좋아 버튼·링크·선택 상태에 씁니다. 밝은 로고색 #1da4ff는 blue-400(브랜드 하이라이트) 로 로고·강조에만.#f9fafb, 카드 #ffffff, hover #f2f4f6. 크림 등 따뜻한 색은 쓰지 않아요.txt-*, bg-*, border-* 의미 토큰을 씁니다. raw gray/hex 직접 사용 금지.references/tokens.md)#ECEAE3) + 밝은 페리윙클 블루 액센트.#3BCC4B, 실패 #d6173a. 서브 컬러는 쓰지 않습니다.references/tokens.md.search, share)·없으면 형태 기준(chevron-down).design-system.html의 Iconography 섹션에 SVG path로 있습니다. 새 아이콘이 필요하면 같은 규칙(line·round·24그리드)으로 그립니다.references/components.md)한 줄 요약 — 자세한 규칙과 예시는 references/ux-writing.md:
닫기)사내 도구라도 사용자를 가두거나 속이지 않습니다: ①진입 직후 화면 가로막기 금지 ②뒤로가기 막기 금지 ③거절 경로 항상 제공 ④예상 밖 전면 노출 금지 ⑤버튼 라벨은 결과가 보이게. (상세: references/ux-writing.md)
references/tokens.md — 컬러(SAPPHIRE·그레이·투명도) · 의미 토큰(text/bg/border/status/diff) · 타이포 스케일 · 바로 붙여넣는 CSS :root 블록references/components.md — 버튼·입력창·리스트로우·뱃지·탭·토글·캘린더 + 로고 락업·GNB/LNB 내비게이션(카테고리 정렬 원칙)의 HTML/CSS 패턴references/ux-writing.md — 해요체 6원칙 Before/After + UX 5원칙Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub w-island/style-guide --plugin wisland-design-system