技能 ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

低风险 ⚙️ 外部命令📁 文件系统访问🌐 网络访问🔑 环境变量⚡ 包含脚本

生成设计令牌、验证使用情况并创建品牌化幻灯片

当令牌在原始层、语义层和组件层之间未能一致应用时，设计系统往往会崩溃。此技能可从 JSON 令牌定义生成 CSS 变量，验证代码中的令牌使用情况，并通过 Chart.js 集成创建符合品牌的幻灯片演示。

支持: Claude Codex Code(CC)

🥉 72 青铜

下载技能 ZIP

在 Claude 中上传

前往设置 → 功能 → 技能 → 上传技能

开启并开始使用

测试它

正在使用“ckm:design-system”。 Generate CSS design tokens from my tokens.json and create a Tailwind config for my Next.js project.

预期结果:

CSS 输出，具有三层令牌结构，以 :root 块形式组织，包含原始令牌、语义令牌和组件令牌
Tailwind 配置文件，包含映射到 CSS 变量的颜色引用，用于 tailwind.config.js

正在使用“ckm:design-system”。 Create a 5-slide pitch deck for a fintech startup. Include a revenue chart.

预期结果:

HTML 文件，包含品牌化的幻灯片组，包括标题、问题、带卡片的解决方案、收入增长柱状图和 CTA 幻灯片
引用设计令牌的 CSS，用于所有颜色、字体和间距，确保品牌合规

正在使用“ckm:design-system”。 Find the best chart type to show quarterly revenue growth across four product lines.

预期结果:

图表推荐：分组柱状图，用于比较多个产品线在不同季度的数据
针对具体场景的指导，说明何时使用、何时避免，以及 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.

已扫描文件

4,805

分析行数

发现项

审计总数

低风险问题 (9)

data/slide-backgrounds.csv:7 data/slide-charts.csv:22-26 data/slide-copy.csv:2-26 SKILL.md:42-48

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.

references/component-specs.md:40-46 SKILL.md:54-61 references/token-architecture.md:7-18

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.

scripts/fetch-background.py:144-184

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.

scripts/slide-token-validator.py:30

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.

scripts/generate-slide.py:632

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.

scripts/embed-tokens.cjs:86 scripts/generate-tokens.cjs:184

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.

SKILL.md:190

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.

scripts/search-slides.py:10

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.

multiple:1

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)

📁 文件系统访问 (17)

scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:197 scripts/generate-tokens.cjs:198 scripts/generate-tokens.cjs:178 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:198 scripts/validate-tokens.cjs:99 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:226 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:231

🌐 网络访问 (28)

🔑 环境变量 (7)

scripts/fetch-background.py:208 scripts/fetch-background.py:213 scripts/fetch-background.py:213 scripts/fetch-background.py:214 scripts/slide_search_core.py:430 scripts/slide_search_core.py:431 scripts/slide_search_core.py:432

⚡ 包含脚本 (1)

scripts/search-slides.py:10-14

审计者: claude

质量评分

架构

100

可维护性

内容

社区

安全

规范符合性

你能构建什么

前端开发者创建设计系统

前端开发者需要为新项目建立一致的设计令牌系统。此技能从 JSON 令牌定义生成 CSS 变量，验证组件是否使用令牌而非硬编码值，并生成用于集成的 Tailwind 配置。

设计师构建品牌化演示文稿

设计师需要创建符合品牌指南的融资演示文稿。此技能生成使用设计令牌定义颜色、排版和间距的 HTML 幻灯片。通过 Chart.js 提供图表选项，并从 Pexels 获取精选背景图片。

DevOps 工程师自动化设计令牌流水线

DevOps 工程师在 CI 流水线中设置自动化的令牌生成和验证。此技能提供 CLI 脚本，用于生成 CSS、根据令牌使用规则验证代码库，以及将令牌嵌入独立的 HTML 文件中。

试试这些提示

从 JSON 配置生成令牌

Generate CSS design tokens from my tokens.json file using the three-layer structure. Use the primitive to semantic to component pattern.

验证代码库中的令牌使用情况

Validate my src/ directory for hardcoded hex colors and pixel values. Report all violations and suggest which design tokens should be used instead.

创建带图表的融资演示文稿

Create an 8-slide investor pitch deck for a SaaS analytics platform. Include a title slide, problem slide, solution slide with feature grid, metrics slide, revenue chart slide, testimonial slide, comparison table slide, and CTA closing slide. Use our brand design tokens.

应用 Duarte 火花线叙事技巧

Create a 9-slide deck using the Duarte sparkline narrative structure. Alternate between What Is (frustration) and What Could Be (hope) beats. Use pattern breaking at positions 3 and 6. Search slide strategies for 'investor pitch' and recommend layouts for each slide.