·css-tokens
</>

css-tokens

ibutters/claudecodeplugins

일관된 스타일을 위해 CSS 사용자 정의 속성을 사용하여 토큰 시스템을 디자인합니다. 색상 팔레트, 간격 비율, 타이포그래피 시스템 및 테마(어두운/밝은 모드)를 만드는 데 사용합니다. 디자인 토큰, CSS 변수, 테마, 색상 시스템, 간격 비율 또는 일관된 스타일에 대한 요청에 따라 트리거됩니다.

0설치·0트렌드·@ibutters

설치

$npx skills add https://github.com/ibutters/claudecodeplugins --skill css-tokens

SKILL.md

| Button | --color-primary, --space-2/4, --radius-md, --text-sm | | Input | --color-border, --space-2/3, --radius-md, --text-base | | Card | --color-surface, --space-4, --radius-lg, --shadow-md | | Badge | --color-, --space-1/2, --radius-full, --text-xs |

일관된 스타일을 위해 CSS 사용자 정의 속성을 사용하여 토큰 시스템을 디자인합니다. 색상 팔레트, 간격 비율, 타이포그래피 시스템 및 테마(어두운/밝은 모드)를 만드는 데 사용합니다. 디자인 토큰, CSS 변수, 테마, 색상 시스템, 간격 비율 또는 일관된 스타일에 대한 요청에 따라 트리거됩니다. 출처: ibutters/claudecodeplugins.

터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/ibutters/claudecodeplugins --skill css-tokens 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다

보안 인증 완료, 신뢰할 수 있는 코드 원클릭 설치, 간편한 설정 Claude Code, Cursor 등 지원

원본 보기

인용 가능한 정보

AI/검색 인용용 안정적인 필드와 명령어.

설치 명령어
npx skills add https://github.com/ibutters/claudecodeplugins --skill css-tokens
카테고리
</>개발 도구
인증됨
최초 등록
2026-02-01
업데이트
2026-02-18

빠른 답변

css-tokens이란?

일관된 스타일을 위해 CSS 사용자 정의 속성을 사용하여 토큰 시스템을 디자인합니다. 색상 팔레트, 간격 비율, 타이포그래피 시스템 및 테마(어두운/밝은 모드)를 만드는 데 사용합니다. 디자인 토큰, CSS 변수, 테마, 색상 시스템, 간격 비율 또는 일관된 스타일에 대한 요청에 따라 트리거됩니다. 출처: ibutters/claudecodeplugins.

css-tokens 설치 방법은?

터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/ibutters/claudecodeplugins --skill css-tokens 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다

소스 저장소는 어디인가요?

https://github.com/ibutters/claudecodeplugins