스킬 ckm:design-system
📦

ckm:design-system

낮은 위험 ⚙️ 외부 명령어📁 파일 시스템 액세스🌐 네트워크 접근🔑 환경 변수⚡ 스크립트 포함

디자인 토큰 생성, 사용 검증 및 브랜드 슬라이드 제작

디자인 시스템은 프리미티브, 시맨틱, 컴포넌트 레이어 전반에 걸쳐 토큰이 일관되게 적용되지 않을 때 자주 무너집니다. 이 스킬은 JSON 토큰 정의에서 CSS 변수를 생성하고, 코드에서 토큰 사용을 검증하며, Chart.js와 통합된 브랜드 준수 슬라이드 프레젠테이션을 제작합니다.

지원: Claude Codex Code(CC)
🥉 72 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"ckm:design-system" 사용 중입니다. tokens.json에서 CSS 디자인 토큰을 생성하고 내 Next.js 프로젝트를 위한 Tailwind 설정을 만들어줘.

예상 결과:

  • 프리미티브, 시맨틱 토큰, 컴포넌트 토큰이 포함된 :root 블록으로 구성된 3계층 토큰 구조의 CSS 출력
  • tailwind.config.js에서 사용할 CSS 변수를 참조하는 색상 매핑이 포함된 Tailwind 설정 파일

"ckm:design-system" 사용 중입니다. 핀테크 스타트업을 위한 5슬라이드 피치 데크를 만들어줘. 수익 차트를 포함해줘.

예상 결과:

  • 제목, 문제, 카드가 있는 솔루션, 수익 성장 막대 차트, CTA 슬라이드를 포함한 브랜드 슬라이드 데크 HTML 파일
  • 모든 색상, 글꼴, 간격에 디자인 토큰을 참조하는 CSS로 브랜드 준수 보장

"ckm:design-system" 사용 중입니다. 4개 제품군의 분기별 수익 성장을 보여주는 최적의 차트 유형을 찾아줘.

예상 결과:

  • 차트 추천: 여러 제품군을 분기별로 비교하기 위한 그룹화된 막대 차트
  • 사용 시기, 피해야 할 상황, Chart.js 구현 참고사항에 대한 맥락별 가이드

보안 감사

낮은 위험
v1 • 5/26/2026

Static analysis flagged 561 potential issues (risk score 100/100), but AI evaluation confirms nearly all are false positives. Over 400 'Weak cryptographic algorithm' detections are hex color codes in design token CSV data and CSS examples (e.g. #2563EB). Over 150 'Shell backtick execution' detections are shell command examples in Markdown documentation and legitimate build tool invocations. The only true positive is subprocess.run in slide-token-validator.py which delegates to an internal validation script with low risk. The skill is a legitimate design system toolkit with no malicious intent, no credential exfiltration, and no command injection vulnerabilities.

26
스캔된 파일
4,805
분석된 줄 수
14
발견 사항
1
총 감사 수
낮은 위험 문제 (9)
Hex color values in design token data flagged as cryptographic algorithms
FALSE POSITIVE: Over 400 'Weak cryptographic algorithm' detections. The static analyzer matched hex color codes (e.g. #2563EB, #F59E0B, #0D0D0D) in CSV design data files and CSS documentation examples. These are design token color values, not cryptographic material. Design system data and CSS documentation legitimately contain hex color codes for brand colors, UI colors, and CSS examples.
Shell command examples in Markdown documentation
FALSE POSITIVE: Over 150 'Ruby/shell backtick execution' detections in Markdown reference files. These are code examples showing users how to run commands like 'node scripts/generate-tokens.cjs' or 'python scripts/search-slides.py'. They are documentation, not executable code being injected at runtime. No dynamic command construction from user input.
Hardcoded image URLs in fetch-background.py
FALSE POSITIVE: Curated Pexels stock photo URLs hardcoded in fetch-background.py. These are pre-selected, free-to-use images for slide backgrounds. URLs point to images.pexels.com, a legitimate stock photography platform. No credential exfiltration or malicious network activity.
subprocess.run delegation in slide-token-validator.py
TRUE POSITIVE (low risk): Script uses subprocess.run to delegate validation to html-token-validator.py with sys.argv[1:] forwarded as arguments. This is a standard wrapper pattern. Risk is low because it only calls a known internal validator script.
Path traversal sequence in generate-slide.py
FALSE POSITIVE: The string '../../../assets/design-tokens.css' on line 632 is a computed relative path from the slide output directory to the shared design tokens CSS file. This is a hardcoded constant, not user-controlled input. No path traversal vulnerability exists.
Standard filesystem operations in build and validation scripts
FALSE POSITIVE: Node.js fs operations detected in embed-tokens.cjs, generate-tokens.cjs, and validate-tokens.cjs. These are standard file I/O operations for reading design token files, writing CSS output, and scanning codebases for token compliance. All operations are local to the project directory.
Chart.js CDN URL in SKILL.md
FALSE POSITIVE: Hardcoded URL 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/...' in SKILL.md line 190. This is a legitimate CDN URL for the Chart.js library used in slide HTML generation. It is a static reference, not dynamically constructed.
Dynamic import pattern in search-slides.py
FALSE POSITIVE: 'Dynamic import() expression' detected at line 10. This is actually a standard Python 'from slide_search_core import ...' statement. The static analyzer misidentified the Python import syntax as a dynamic JavaScript import expression.
Heuristic dangerous combination warning
FALSE POSITIVE: The heuristic analyzer flagged a 'dangerous combination' of code execution, network, and credential access across the codebase. Evaluation confirms all operations are legitimate: subprocess calls run internal build tools, network requests go to stock photo CDNs and Chart.js CDN, and 'credential' matches are false positives on CSV config lookups and hardcoded hex colors. No data exfiltration path exists.

위험 요인

⚙️ 외부 명령어 (201)
references/component-specs.md:40-46 references/component-specs.md:46-83 references/component-specs.md:83-89 references/component-specs.md:89-106 references/component-specs.md:106-119 references/component-specs.md:119-168 references/component-specs.md:168-173 references/component-specs.md:173-191 references/component-specs.md:191-204 references/component-tokens.md:7-47 references/component-tokens.md:47-51 references/component-tokens.md:51-79 references/component-tokens.md:79-83 references/component-tokens.md:83-102 references/component-tokens.md:102-106 references/component-tokens.md:106-130 references/component-tokens.md:130-134 references/component-tokens.md:134-149 references/component-tokens.md:149-153 references/component-tokens.md:153-169 references/component-tokens.md:169-173 references/component-tokens.md:173-191 references/component-tokens.md:191-195 references/component-tokens.md:195-214 references/primitive-tokens.md:9-23 references/primitive-tokens.md:23-27 references/primitive-tokens.md:27-40 references/primitive-tokens.md:40-44 references/primitive-tokens.md:44-61 references/primitive-tokens.md:61-67 references/primitive-tokens.md:67-91 references/primitive-tokens.md:91-95 references/primitive-tokens.md:95-129 references/primitive-tokens.md:129-133 references/primitive-tokens.md:133-145 references/primitive-tokens.md:145-149 references/primitive-tokens.md:149-164 references/primitive-tokens.md:164-168 references/primitive-tokens.md:168-184 references/primitive-tokens.md:184-188 references/primitive-tokens.md:188-203 references/semantic-tokens.md:9-23 references/semantic-tokens.md:23-27 references/semantic-tokens.md:27-34 references/semantic-tokens.md:34-38 references/semantic-tokens.md:38-44 references/semantic-tokens.md:44-48 references/semantic-tokens.md:48-53 references/semantic-tokens.md:53-57 references/semantic-tokens.md:57-62 references/semantic-tokens.md:62-66 references/semantic-tokens.md:66-72 references/semantic-tokens.md:72-76 references/semantic-tokens.md:76-90 references/semantic-tokens.md:90-94 references/semantic-tokens.md:94-100 references/semantic-tokens.md:100-104 references/semantic-tokens.md:104-121 references/semantic-tokens.md:121-125 references/semantic-tokens.md:125-141 references/semantic-tokens.md:141-145 references/semantic-tokens.md:145-160 references/semantic-tokens.md:160-164 references/semantic-tokens.md:164-187 references/semantic-tokens.md:187-193 references/semantic-tokens.md:193-206 references/semantic-tokens.md:206-212 references/semantic-tokens.md:212-215 references/states-and-variants.md:31-38 references/states-and-variants.md:38-52 references/states-and-variants.md:52-59 references/states-and-variants.md:59-70 references/states-and-variants.md:70-75 references/states-and-variants.md:75-81 references/states-and-variants.md:81-87 references/states-and-variants.md:87-99 references/states-and-variants.md:99-100 references/states-and-variants.md:100-116 references/states-and-variants.md:116-130 references/states-and-variants.md:130-136 references/states-and-variants.md:136-146 references/states-and-variants.md:146-166 references/states-and-variants.md:166-184 references/states-and-variants.md:184-188 references/states-and-variants.md:188-207 references/states-and-variants.md:207-229 references/states-and-variants.md:229-241 references/tailwind-integration.md:9-57 references/tailwind-integration.md:57-63 references/tailwind-integration.md:63-113 references/tailwind-integration.md:113-119 references/tailwind-integration.md:119-126 references/tailwind-integration.md:126-132 references/tailwind-integration.md:132-172 references/tailwind-integration.md:172-176 references/tailwind-integration.md:176-187 references/tailwind-integration.md:187-191 references/tailwind-integration.md:191-216 references/tailwind-integration.md:216-220 references/tailwind-integration.md:220-230 references/tailwind-integration.md:230-239 references/tailwind-integration.md:239-243 references/tailwind-integration.md:243-249 references/token-architecture.md:7-18 references/token-architecture.md:18-32 references/token-architecture.md:32-60 references/token-architecture.md:60-66 references/token-architecture.md:66-92 references/token-architecture.md:92-98 references/token-architecture.md:98-121 references/token-architecture.md:121-127 references/token-architecture.md:127-135 references/token-architecture.md:135-139 references/token-architecture.md:139-147 references/token-architecture.md:147-162 references/token-architecture.md:162-168 references/token-architecture.md:168-172 references/token-architecture.md:172-184 references/token-architecture.md:184-189 references/token-architecture.md:189-192 references/token-architecture.md:192-195 references/token-architecture.md:195-207 references/token-architecture.md:207-213 references/token-architecture.md:213-224 scripts/embed-tokens.cjs:77 scripts/embed-tokens.cjs:90 scripts/embed-tokens.cjs:92 scripts/embed-tokens.cjs:97 scripts/generate-tokens.cjs:32-40 scripts/generate-tokens.cjs:109-114 scripts/generate-tokens.cjs:114-119 scripts/generate-tokens.cjs:119-124 scripts/generate-tokens.cjs:124-126 scripts/generate-tokens.cjs:129-132 scripts/generate-tokens.cjs:132-134 scripts/generate-tokens.cjs:151 scripts/generate-tokens.cjs:155-161 scripts/generate-tokens.cjs:179 scripts/generate-tokens.cjs:199 scripts/slide-token-validator.py:30 scripts/validate-tokens.cjs:33-46 scripts/validate-tokens.cjs:180 scripts/validate-tokens.cjs:190 scripts/validate-tokens.cjs:192 scripts/validate-tokens.cjs:193 scripts/validate-tokens.cjs:194 scripts/validate-tokens.cjs:195 scripts/validate-tokens.cjs:205 scripts/validate-tokens.cjs:207 scripts/validate-tokens.cjs:227 scripts/validate-tokens.cjs:231 SKILL.md:27 SKILL.md:31-37 SKILL.md:37-40 SKILL.md:40-49 SKILL.md:49-54 SKILL.md:54-56 SKILL.md:56-59 SKILL.md:59-61 SKILL.md:61-67 SKILL.md:67-68 SKILL.md:68-69 SKILL.md:69-70 SKILL.md:70-71 SKILL.md:71-72 SKILL.md:72-73 SKILL.md:73-88 SKILL.md:88-89 SKILL.md:89-90 SKILL.md:90-91 SKILL.md:91-92 SKILL.md:92-98 SKILL.md:98-116 SKILL.md:116-117 SKILL.md:117-118 SKILL.md:118-119 SKILL.md:119-123 SKILL.md:123-134 SKILL.md:134-140 SKILL.md:140-141 SKILL.md:141-142 SKILL.md:142-143 SKILL.md:143-144 SKILL.md:144-145 SKILL.md:145-146 SKILL.md:146-147 SKILL.md:147-151 SKILL.md:151-166 SKILL.md:166-171 SKILL.md:171-173 SKILL.md:173-180 SKILL.md:180-181 SKILL.md:181 SKILL.md:181-189 SKILL.md:189-208 SKILL.md:208-212 SKILL.md:212-222 SKILL.md:222-227 SKILL.md:227-229 SKILL.md:229-233 SKILL.md:233-235
📁 파일 시스템 액세스 (17)
🌐 네트워크 접근 (28)
🔑 환경 변수 (7)
⚡ 스크립트 포함 (1)
감사자: claude

품질 점수

68
아키텍처
100
유지보수성
87
콘텐츠
34
커뮤니티
72
보안
74
사양 준수

만들 수 있는 것

디자인 시스템을 구축하는 프론트엔드 개발자

프론트엔드 개발자가 새 프로젝트를 위해 일관된 디자인 토큰 시스템을 구축해야 합니다. 이 스킬은 JSON 토큰 정의에서 CSS 변수를 생성하고, 컴포넌트가 하드코딩된 값 대신 토큰을 사용하는지 검증하며, 통합을 위한 Tailwind 구성을 생성합니다.

브랜드 프레젠테이션을 제작하는 디자이너

디자이너가 브랜드 가이드라인을 따르는 피치 데크를 만들어야 합니다. 이 스킬은 색상, 타이포그래피, 간격에 디자인 토큰을 사용하는 HTML 슬라이드를 생성합니다. Chart.js를 통한 차트 옵션과 Pexels의 큐레이션된 배경 이미지를 포함합니다.

디자인 토큰 파이프라인을 자동화하는 DevOps 엔지니어

DevOps 엔지니어가 CI 파이프라인에서 자동화된 토큰 생성 및 검증을 설정합니다. 이 스킬은 CSS 생성, 토큰 사용 규칙에 대한 코드베이스 검증, 토큰을 독립형 HTML 파일에 내장하기 위한 CLI 스크립트를 제공합니다.

이 프롬프트를 사용해 보세요

JSON 설정에서 토큰 생성
tokens.json 파일에서 3계층 구조를 사용하여 CSS 디자인 토큰을 생성해줘. 프리미티브에서 시맨틱, 컴포넌트 패턴을 따라야 해.
코드베이스의 토큰 사용 검증
내 src/ 디렉토리에서 하드코딩된 hex 색상과 픽셀 값을 검증해줘. 모든 위반 사항을 보고하고 대신 사용해야 할 디자인 토큰을 제안해줘.
차트가 포함된 피치 데크 생성
SaaS 분석 플랫폼을 위한 8슬라이드 투자자 피치 데크를 만들어줘. 제목 슬라이드, 문제 슬라이드, 기능 그리드가 있는 솔루션 슬라이드, 지표 슬라이드, 수익 차트 슬라이드, 추천사 슬라이드, 비교표 슬라이드, CTA 마무리 슬라이드를 포함해야 해. 우리 브랜드 디자인 토큰을 사용해줘.
Duarte 스파크라인 기법 적용
Duarte 스파크라인 내러티브 구조를 사용하여 9슬라이드 데크를 만들어줘. '있는 그대로'(불만)와 '있을 수 있는 것'(희망) 비트를 번갈아 배치해줘. 3번과 6번 위치에 패턴 브레이킹을 사용해줘. '투자자 피치'에 대한 슬라이드 전략을 검색하고 각 슬라이드에 추천 레이아웃을 알려줘.

모범 사례

  • 최대 유연성과 테마 전환을 위해 원시 값으로 프리미티브 토큰을 먼저 정의한 다음, 시맨틱 토큰을 통해 매핑하고 마지막으로 컴포넌트별 토큰으로 매핑하세요.
  • 공유 전에 하드코딩된 색상이나 글꼴을 발견하기 위해 생성된 HTML 슬라이드를 항상 토큰 검증기로 검증하세요.
  • 슬라이드 위치와 감정 매개변수를 사용한 맥락적 검색을 활용하여 패턴 브레이킹과 감정적 대비가 있는 데크를 만들어 청중의 참여도를 높이세요.

피하기

  • 컴포넌트 CSS 파일에서 원시 hex 색상을 사용하지 마세요. 테마 일관성을 위해 항상 var()를 통해 디자인 토큰을 참조하세요.
  • design-tokens.css 파일을 임포트하지 않고 슬라이드를 만들지 마세요. 모든 시각적 속성은 토큰 변수를 사용해야 합니다.
  • 시맨틱 토큰 레이어를 건너뛰지 마세요. 컴포넌트를 프리미티브에 직접 매핑하면 테마 전환과 유지보수가 어려워집니다.

자주 묻는 질문

디자인 토큰 JSON은 어떤 파일 형식을 따라야 하나요?
JSON은 3계층 구조를 따라야 합니다: 프리미티브(원시 색상, 간격, 타이포그래피 값), 시맨틱(목적 기반 별칭, 예: --color-primary), 컴포넌트(컴포넌트별 토큰, 예: --button-bg). 각 토큰은 $value와 $type 필드를 가집니다.
이 스킬로 PowerPoint나 Google Slides 파일을 생성할 수 있나요?
아니요. 이 스킬은 CSS 디자인 토큰이 내장된 HTML 슬라이드를 생성합니다. 출력은 모든 브라우저에서 열 수 있는 독립형 HTML 파일이지만, PowerPoint나 Google Slides로 직접 가져올 수는 없습니다.
슬라이드에 새 배경 이미지를 추가하려면 어떻게 하나요?
배경 이미지는 슬라이드 유형(히어로, 팀, 추천사 등)별로 구성된 무료 Pexels 사진 큐레이션 세트에서 선택됩니다. scripts/fetch-background.py의 CURATED_IMAGES 딕셔너리에 추가 Pexels 이미지 URL을 추가하여 확장할 수 있습니다.
토큰 검증기는 무엇을 확인하나요?
검증기는 CSS, JSX, TSX 및 기타 소스 파일에서 하드코딩된 hex 색상, RGB 색상, 픽셀 값, rem 값을 스캔합니다. 이를 디자인 토큰에 대한 var() 참조로 대체할 것을 제안합니다. 토큰 정의 파일과 일반적인 예외는 건너뜁니다.
디자인 토큰에서 Tailwind 테마를 만들려면 어떻게 하나요?
--format tailwind 플래그와 함께 generate-tokens.cjs 스크립트를 사용하세요. 그러면 시맨틱 색상 토큰을 CSS 변수 참조를 사용하여 Tailwind 색상 이름에 매핑하는 색상 설정 객체가 생성됩니다.
슬라이드 생성이 애니메이션을 지원하나요?
네. 슬라이드 시스템에는 animate-fade-up, animate-stagger, animate-scale, animate-chart, animate-count, animate-pulse와 같은 CSS 애니메이션 클래스가 포함되어 있습니다. 맥락적 검색은 슬라이드 목표와 감정에 따라 애니메이션 클래스를 추천합니다.