design-system
Source of truth for color tokens and UI design rules.
Install
mkdir -p .claude/skills/design-system-yeon-intergation-platform && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18591" && unzip -o skill.zip -d .claude/skills/design-system-yeon-intergation-platform && rm skill.zipInstalls to .claude/skills/design-system-yeon-intergation-platform
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
서비스별 색상 토큰 규칙. 새 UI 작업, 색상 추가, 서비스 테마 확인 시 로드한다.Key capabilities
- →Access project's design system documentation
- →Retrieve color token rules
- →Verify color token usage
- →Load rules for new UI work
- →Load rules for color additions
- →Load rules for service theme checks
How it works
This skill acts as a thin wrapper that immediately calls to read the project's design system documentation. It then applies these rules authoritatively.
Inputs & outputs
When to use design-system
- →Check design rules
- →Verify color token usage
- →Reference design system
About this skill
design-system
이 파일은 Codex 측 얇은 wrapper다. 실제 규칙의 출처는 아래 SSOT다.
Source of Truth
docs/agent-rules/design-system.md
Execution
Read("docs/agent-rules/design-system.md")를 즉시 호출하여 전체 내용을 받는다.- 그 문서의 규칙을 authoritative하게 따른다.
- 이 wrapper를 직접 수정하지 않는다. 규칙 변경은 SSOT 파일에서만 한다.
When not to use it
- →Modifying the wrapper directly
- →Changing rules outside of the SSOT file
Limitations
- →This file is a thin wrapper
- →Actual rules originate from `docs/agent-rules/design-system.md`
- →Does not modify the wrapper directly
How it compares
This skill ensures that all design system queries are resolved against a single source of truth, preventing inconsistencies that might arise from multiple or outdated documentation sources.
Compared to similar skills
design-system side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| design-system (this skill) | 0 | 2mo | No flags | Beginner |
| theme-factory | 61 | 3mo | No flags | Beginner |
| brand-guidelines | 9 | 3mo | No flags | Beginner |
| canvas-design | 26 | 3mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
theme-factory
anthropics
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
brand-guidelines
anthropics
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
canvas-design
anthropics
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
game-art
davila7
Game art principles. Visual style selection, asset pipeline, animation workflow.
interactive-portfolio
davila7
Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio.
windows-3-1-web-designer
erichowens
Expert in authentic Windows 3.1 aesthetic for modern web applications. Creates pixel-perfect retro UI with beveled borders, system gray palettes, and program manager styling. Use for retro-themed web apps, 90s desktop aesthetics, nostalgic landing pages, pixel-art adjacent experiences. Activate on "windows 3.1", "retro ui", "beveled borders", "win31", "program manager", "90s aesthetic", "pixel art", "hotdog stand". NOT for vaporwave aesthetics (neon gradients, glowing text), glassmorphism, macOS/iOS styling, flat design, material design.