์คํฌ design-system
๐ฆ
design-system
v1.0.0 ์ฝํ
์ธ ๋ฆฌ๋น์ r1 ์์ โ๏ธ ์ธ๋ถ ๋ช
๋ น์ด๐ ํ์ผ ์์คํ
์ ๊ทผ๐ ๋คํธ์ํฌ ์ ๊ทผ๐ ํ๊ฒฝ ๋ณ์โก ์คํฌ๋ฆฝํธ ํฌํจ
Build Consistent Design Systems and Slides
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
์ง์: Claude Codex Code(CC)
๋ด ์์ด์ ํธ๋ก ์ค์น
์ด ์์ฒญ์ ์์ด์ ํธ์ ๋ณต์ฌํ์ธ์. ๊ณต์ Skill ํ์ด์ง์ ๋งค๋ํ์คํธ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค.
์์ด์ ํธ ์์ฒญ
Review the Skillstore skill "design-system" from https://skillstore.io/skills/nextlevelbuilder-design-system.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.์์ด์ ํธ๋ ๊ณ์ํด์ ๊ณํ์ ํ์ํ๊ณ ๋ณด์ ์ ์ฑ ์์ ์๊ตฌํ๋ ํ์ธ์ ์์ฒญํด์ผ ํฉ๋๋ค.
์์ด์ ํธ๊ฐ ์ฝ๊ธฐ ์ฌ์ด ๋ฆฌ์์ค
AI ์์ด์ ํธ, ํฌ๋กค๋ฌ, ์คํฌ๋ฆฝํธ๊ฐ ์ ์ฒด ํ์ด์ง ๋์ ์ ๋ฆฌ๋ ์ปจํ ์คํธ๋ง ํ์ํ ๋ ์ด ๋งํฌ๋ฅผ ์ฌ์ฉํ์ธ์.
ํ ์คํธํด ๋ณด๊ธฐ
"design-system" ์ฌ์ฉ ์ค์ ๋๋ค. Create a token architecture for a healthcare dashboard with accessible blue and teal branding.
์์ ๊ฒฐ๊ณผ:
- Primitive palette with accessible blue, teal, neutral, spacing, radius, and typography scales.
- Semantic roles for surfaces, text, actions, status, borders, and focus indicators.
- Component aliases for buttons, cards, inputs, tables, and alerts.
"design-system" ์ฌ์ฉ ์ค์ ๋๋ค. Specify a primary button with complete interaction states.
์์ ๊ฒฐ๊ณผ:
A state matrix covers background, text, border, shadow, focus ring, loading, and disabled behavior using semantic aliases.
"design-system" ์ฌ์ฉ ์ค์ ๋๋ค. Plan a nine-slide investor pitch for a workflow product.
์์ ๊ฒฐ๊ณผ:
A slide sequence links narrative goals to layouts, copy formulas, emotional beats, chart choices, and token-based visual treatments.
๋ณด์ ๊ฐ์ฌ
์์ v1 โข 2026. 8. 28. ๋ฒ์ ๋ณ ๋ณด๊ณ ์ ์ด๊ธฐ
Most static findings are syntax collisions involving Markdown, JavaScript templates, dictionary keys, CSS, or deliberate local file tooling. Confirmed risks are third-party asset requests and a Chart.js CDN example that executes remote code without integrity metadata.
27
์ค์บ๋ ํ์ผ
4,866
๋ถ์๋ ์ค ์
26
๊ฒํ ํญ๋ชฉ
0
์คํ ๋ฌด์๋จ
๊ธฐ๋ฅ ๊ฒํ ํญ๋ชฉ (26)
์ด ์คํฌ์ ๋ํด ์์๋ ์ ์๋ ์ค์ ๋ก์ปฌ ๊ธฐ๋ฅ์ด๋ฏ๋ก ๊ฒํ ๊ฐ ํ์ํ์ง๋ง, ํ์ธ๋ ์ ์์ ๋์์ผ๋ก๋ ์ง๊ณ๋์ง ์์ต๋๋ค.
์ค๊ฐ
Hardcoded URL
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
The example loads executable Chart.js code from a CDN without integrity metadata, creating a remote supply-chain dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/2582937/pexels-photo-2582937.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3182812/pexels-photo-3182812.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184338/pexels-photo-3184338.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3182773/pexels-photo-3182773.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/1181622/pexels-photo-1181622.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184339/pexels-photo-3184339.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184298/pexels-photo-3184298.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3760529/pexels-photo-3760529.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/897817/pexels-photo-897817.jpeg?auto=compress&cs=tinysrgb&w=1920',
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184292/pexels-photo-3184292.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184644/pexels-photo-3184644.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/2582937/pexels-photo-2582937.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3184287/pexels-photo-3184287.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/1181675/pexels-photo-1181675.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
'https://images.pexels.com/photos/3861958/pexels-photo-3861958.jpeg?auto=compress&cs=tinysrgb&w=1920
Generated background CSS can request this curated Pexels image, creating a genuine but low-severity third-party network dependency.
๋ฎ์
Hardcoded URL
<link rel="preconnect" href="https://fonts.googleapis.com">
Generated slides contact Google Fonts when opened, exposing a low-severity external dependency and privacy-relevant network request.
๋ฎ์
Hardcoded URL
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wgh
Generated slides contact Google Fonts when opened, exposing a low-severity external dependency and privacy-relevant network request.
์ํ ์์ธ
โ๏ธ ์ธ๋ถ ๋ช ๋ น์ด (50)
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/tests/test_validate_tokens.py:24 scripts/tests/test_validate_tokens.py:3 scripts/tests/test_validate_tokens.py:6 scripts/validate-tokens.cjs:33-46 scripts/validate-tokens.cjs:175 scripts/validate-tokens.cjs:185 scripts/validate-tokens.cjs:187 scripts/validate-tokens.cjs:188 scripts/validate-tokens.cjs:189 scripts/validate-tokens.cjs:190 scripts/validate-tokens.cjs:200 scripts/validate-tokens.cjs:202 scripts/validate-tokens.cjs:222 scripts/validate-tokens.cjs:226 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
๐ ํ์ผ ์์คํ ์ ๊ทผ (15)
scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 scripts/generate-slide.py:649 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:221 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:226
๐ ๋คํธ์ํฌ ์ ๊ทผ (29)
scripts/fetch-background.py:144 scripts/fetch-background.py:145 scripts/fetch-background.py:146 scripts/fetch-background.py:149 scripts/fetch-background.py:150 scripts/fetch-background.py:151 scripts/fetch-background.py:154 scripts/fetch-background.py:155 scripts/fetch-background.py:156 scripts/fetch-background.py:159 scripts/fetch-background.py:160 scripts/fetch-background.py:163 scripts/fetch-background.py:164 scripts/fetch-background.py:167 scripts/fetch-background.py:168 scripts/fetch-background.py:171 scripts/fetch-background.py:172 scripts/fetch-background.py:175 scripts/fetch-background.py:176 scripts/fetch-background.py:179 scripts/fetch-background.py:180 scripts/fetch-background.py:183 scripts/fetch-background.py:184 scripts/fetch-background.py:197 scripts/generate-slide.py:24 scripts/generate-slide.py:49 scripts/generate-slide.py:50 SKILL.md:190 templates/design-tokens-starter.json:2
๐ ํ๊ฒฝ ๋ณ์ (6)
โก ์คํฌ๋ฆฝํธ ํฌํจ (1)
๊ฐ์ฌ์: codex
์ด ๋ณด๊ณ ์ ๊ณต์ ๋ฐ ์ธ์ฉ
๋ฒ์ ์ด ์ง์ ๋ ํ๊ฐ ๋ณด๊ณ ์, ์ค๋ฆฝ ๋ฐฐ์ง, ์๋ฒ ๋ ์นด๋ ๋ฐ ์ธ์ฉ์ ๊ณต์ ํ์ธ์. Skillstore๋ ๊ทผ๊ฑฐ๋ฅผ ๋ณด๊ณ ํ์ง๋ง ์ด Skill์ ์์ ์ฌ๋ถ๋ฅผ ํ๋จํ์ง ์์ต๋๋ค.
๋ณด๊ณ ์ ๋งํฌ ๋ณต์ฌ
https://skillstore.io/skills/nextlevelbuilder-design-system/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown ๋ฐฐ์ง
[](https://skillstore.io/skills/nextlevelbuilder-design-system?utm_source=security_passport_badge)HTML ๋ฐฐ์ง
<a href="https://skillstore.io/skills/nextlevelbuilder-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>์๋ฒ ๋ ์นด๋
<iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-design-system.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>ํ์ ์ธ์ฉ (APA ยท BibTeX ยท CFF)
APA ์ธ์ฉ
nextlevelbuilder. (2026). design-system security audit report (audit version 1) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-design-system/audits/1BibTeX ์ธ์ฉ
@techreport{nextlevelbuilder-nextlevelbuilder-design-system-2026,
author = {nextlevelbuilder},
title = {design-system security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/nextlevelbuilder-design-system/audits/1},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-system security audit report (audit version 1)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-08-28"
url: "https://skillstore.io/skills/nextlevelbuilder-design-system/audits/1"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-design-system:audit:1"
description: "Skillstore immutable audit report identifier"
Skillstore ์ ์
์ด ์ ์์ ์ด์ ์ฆ๊ฑฐ ์ ๋ขฐ๋: ์ค๊ฐ 68
์ํคํ
์ฒ
100
์ ์ง๋ณด์์ฑ
87
์ฝํ
์ธ
65
์ปค๋ฎค๋ํฐ
83
์ฌ์ ์ค์
๋ง๋ค ์ ์๋ ๊ฒ
Create a Product Design Foundation
Define reusable color, spacing, typography, state, and component tokens for a new interface.
Implement Token-Based Frontends
Generate CSS variables, prepare Tailwind mappings, and inspect source files for hardcoded values.
Produce Brand-Aligned Presentations
Select slide strategies and generate structured HTML decks using shared design tokens.
์ด ํ๋กฌํํธ๋ฅผ ์ฌ์ฉํด ๋ณด์ธ์
Create Starter Tokens
Create a three-layer token plan for [product]. Use [brand colors], [typefaces], and an eight-point spacing scale.
Specify a Component
Define tokens and states for a [component]. Include default, hover, active, focus, disabled, loading, and error behavior.
Audit Token Usage
Review [project directory] for hardcoded colors, spacing, and typography. Group findings by file and propose existing token replacements.
Design a Strategic Deck
Plan a [slide count]-slide [deck type] for [audience]. Map each slide to a layout, emotion, copy formula, chart, and token treatment.
๋ชจ๋ฒ ์ฌ๋ก
- Define raw values once, then reference them through semantic and component aliases.
- Validate generated assets and source files before handoff or publication.
- Review remote dependencies and replace them with approved local assets when offline delivery matters.
ํผํ๊ธฐ
- Do not place raw colors or spacing values directly inside component styles.
- Do not create component tokens before defining stable semantic roles.
- Do not treat automated token checks as complete visual or accessibility validation.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
What token layers does this skill use?
It uses primitive values, semantic purpose aliases, and component-specific aliases.
Can it generate CSS variables?
Yes. The included generator reads token data and produces CSS variables or Tailwind color configuration.
Can it validate an existing codebase?
Yes. Its validators detect selected hardcoded colors, dimensions, fonts, and missing token references.
Does it create presentation slides?
Yes. It includes slide guidance, searchable datasets, and an HTML generator for supported slide types.
Does the background tool download images?
No. It returns curated Pexels URLs, search links, and CSS overlay suggestions.
Does it require network access?
Core token work is local. Generated presentations may request Pexels images, Google Fonts, or the documented Chart.js CDN asset.
๊ฐ๋ฐ์ ์ธ๋ถ ์ ๋ณด
์์ฑ์
nextlevelbuilder๋ผ์ด์ ์ค
MIT
์์ฑ์ ๋ฒ์
v1.0.0
Skillstore ๋ฆฌ๋น์
r1
๋ฆฌํฌ์งํ ๋ฆฌ
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/8bd29e775453ebcae52b6e6514fbf134df0c5770/.claude/skills/design-system์ฐธ์กฐ
1c60d9c259d059779d2f73f6f85ed0008e352830
์ ์ง๋ณด์ ์ต์ ์ฑ
2026. 8. 29.
์ฌ์ฉ๋
2 ๋ค์ด๋ก๋ ยท 1 ์กฐํ
ํ์ผ ๊ตฌ์กฐ
๐ data/
๐ slide-charts.csv
๐ slide-copy.csv
๐ slide-layouts.csv
๐ slide-strategies.csv
๐ slide-typography.csv
๐ references/
๐ component-specs.md
๐ component-tokens.md
๐ primitive-tokens.md
๐ semantic-tokens.md
๐ scripts/
๐ embed-tokens.cjs
๐ fetch-background.py
๐ generate-slide.py
๐ generate-tokens.cjs
๐ search-slides.py
๐ slide_search_core.py
๐ tests/
๐ validate-tokens.cjs
๐ SKILL.md
๐ templates/