스킬 design-system-starter
📦

design-system-starter

낮은 위험

접근성 높은 디자인 시스템 구축

팀은 토큰, 컴포넌트, 접근성 규칙을 함께 정의하지 않아 일관성 없는 UI를 만드는 경우가 많습니다. 이 스킬은 제품 팀 전반에서 재사용 가능한 디자인 시스템을 위한 실용적인 시작 프레임워크를 제공합니다.

지원: Claude Codex Code(CC)
📊 73 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

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

3

토글을 켜고 사용 시작

Agent용 리소스

AI Agent, 크롤러 또는 스크립트가 전체 페이지 대신 깔끔한 컨텍스트가 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/ariegoldkin-design-system-starter.md 서명된 manifest GET /api/skills/ariegoldkin-design-system-starter/manifest 서명된 lockfile GET /api/skills/ariegoldkin-design-system-starter/lockfile

테스트해 보기

"design-system-starter" 사용 중입니다. SaaS 대시보드를 위한 디자인 시스템 기반이 필요합니다.

예상 결과:

  • 뉴트럴, 브랜드, 피드백, 간격, 타이포그래피, 반경, 고도 결정 사항을 다루는 토큰 계획.
  • 버튼, 입력, 레이블, 카드, 모달, 테이블, 내비게이션부터 시작하는 컴포넌트 인벤토리.
  • 각 컴포넌트의 사용법, 변형, props, 접근성 참고 사항, 예시를 포함한 문서 개요.

"design-system-starter" 사용 중입니다. 출시 전에 컴포넌트 체크리스트를 검토해 주세요.

예상 결과:

  • 토큰, 컴포넌트 상태, 접근성, 문서, 테스트, 테마, 릴리스 거버넌스를 아우르는 우선순위 감사.
  • 출시 차단 요소, 후속 개선 사항, 디자인 및 엔지니어링 팀의 소유 영역 목록.

"design-system-starter" 사용 중입니다. 테마 전환기 패턴을 설계하도록 도와주세요.

예상 결과:

  • 의미 기반 토큰, 사용자 선호 저장, 시스템 선호 감지, 접근 가능한 컨트롤 레이블을 사용하는 테마 접근 방식.
  • 컴포넌트, 포커스 상태, 대비 요구 사항 전반에서 라이트 모드와 다크 모드를 테스트하기 위한 가이드.

보안 감사

낮은 위험
v6 • 6/28/2026

Static analysis reported many high-risk patterns, but context review found documentation examples, Markdown code fences, relative imports, design token color values, and public reference URLs. No malicious intent, credential access, command execution, data exfiltration, or prompt injection evidence was found. The only notable behavior is a benign example that stores a theme preference in localStorage.

5
스캔된 파일
2,557
분석된 줄 수
5
발견 사항
6
총 감사 수
낮은 위험 문제 (5)
SKILL.md:25-28references/component-examples.md:7-76checklists/design-system-checklist.md:202templates/component-template.tsx:7-11
False Positive: Markdown Code Fences Flagged as Commands
The external command findings are Markdown fenced code blocks, inline file references, and TypeScript examples. No shell execution primitive, subprocess call, or command construction was found in the reviewed context.
references/component-examples.md:13templates/component-template.tsx:15
False Positive: Relative Imports Flagged as Path Traversal
The filesystem findings are static React import examples using a relative utility path. They do not read user-controlled paths, write files, or traverse the host filesystem at runtime.
references/component-examples.md:478-487
Benign Browser Storage Example
The browser storage finding stores and reads only a light or dark theme preference. No credential, token, personal data, or network transfer is associated with this example.
templates/design-tokens-template.json:2SKILL.md:473
False Positive: Public Documentation URLs Flagged as Network Risk
The network findings are a design token schema URL and a link to a public contrast checker. They are references in data or documentation, not runtime calls that send data externally.
templates/design-tokens-template.json:180templates/design-tokens-template.json:251-274templates/component-template.tsx:128-133SKILL.md:327-344
False Positive: Color Tokens and Keyboard Examples Flagged as Sensitive or Malicious
Weak cryptography, C2 keyword, and key-file findings map to design token names, hex colors, size labels, and keyboard event examples. No cryptographic implementation, certificate material, malware command channel, or secret file content was found.
감사자: codex 감사 이력 보기 →

품질 점수

41
아키텍처
100
유지보수성
87
콘텐츠
71
커뮤니티
80
보안
78
사양 준수

만들 수 있는 것

제품 디자인 시스템 시작

새 제품 UI를 위한 첫 번째 토큰 계층, 컴포넌트 인벤토리, 문서화 계획을 만듭니다.

프론트엔드 컴포넌트 표준화

React 템플릿과 예시를 사용해 컴포넌트 API, 변형, 접근성, 스타일링 규칙을 정렬합니다.

기존 UI 라이브러리 감사

체크리스트를 적용해 누락된 토큰, 부족한 문서, 접근성 격차, 거버넌스 문제를 식별합니다.

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

토큰 기본 구조 만들기 
웹 앱을 위한 스타터 디자인 토큰 구조를 정의하도록 도와주세요. 색상, 타이포그래피, 간격, 반경, 그림자를 포함해 주세요.
컴포넌트 아키텍처 계획 
디자인 시스템 스타터를 사용해 내 제품 대시보드를 위한 원자, 분자, 유기체, 페이지 템플릿을 제안해 주세요.
접근성 범위 개선 
계획된 이 컴포넌트들을 WCAG 2.1 AA 관점에서 감사해 주세요. 대비, 키보드 내비게이션, 레이블, ARIA 사용에 집중해 주세요.
기존 시스템 현대화 
현재 컴포넌트 라이브러리를 평가하고 토큰, 컴포넌트 API, 테마, 문서, 거버넌스를 위한 마이그레이션 계획을 작성해 주세요.

모범 사례

  • 브랜드 변경 시 컴포넌트를 다시 작성하지 않아도 되도록 의미 기반 토큰부터 시작하세요.
  • 키보드 지원과 스크린 리더 기대 사항을 포함해 모든 컴포넌트의 접근성 동작을 문서화하세요.
  • 팀이 중단을 유발하는 업데이트를 채택하기 전에 변경 사항의 버전을 명확히 지정하고 마이그레이션 노트를 제공하세요.

피하기

  • 모든 컴포넌트 안에 브랜드 색상을 직접 하드코딩하지 마세요.
  • 비활성화, 로딩, 포커스, 오류, 빈 상태 없이 컴포넌트를 출시하지 마세요.
  • 구현이 완료된 뒤 문서화를 선택 사항으로 취급하지 마세요.

자주 묻는 질문

이 스킬이 전체 컴포넌트 라이브러리를 만들어 주나요?
아니요. 컴포넌트 라이브러리를 만들거나 개선하는 데 도움이 되는 템플릿, 예시, 체크리스트, 가이드를 제공합니다.
어떤 프레임워크를 가장 잘 지원하나요?
예시는 React와 TypeScript에 가장 적합하지만, 디자인 시스템 개념은 다른 프론트엔드 스택에도 적용됩니다.
디자인 토큰 작업에 도움이 되나요?
예. 기본 토큰, 의미 기반 역할, 타이포그래피, 간격, 반경, 그림자, 테마를 위한 토큰 구조를 포함합니다.
접근성을 자동으로 확인하나요?
아니요. WCAG 중심의 가이드와 체크리스트 항목을 제공하지만, 자동 및 수동 테스트는 여전히 필요합니다.
디자이너가 코드를 작성하지 않고도 사용할 수 있나요?
예. 디자이너는 컴포넌트를 직접 구현하지 않고도 아키텍처, 토큰, 문서, 감사 가이드를 사용할 수 있습니다.
감사에서 이를 낮은 위험으로 표시한 이유는 무엇인가요?
정적 분석 결과는 오탐으로 검토되었지만, 커뮤니티 콘텐츠는 신중한 검토가 필요하므로 보고서는 낮은 위험 라벨을 유지합니다.

개발자 세부 정보

작성자

AI Agent Hub

라이선스

MIT

리포지토리

https://github.com/ArieGoldkin/ai-agent-hub/tree/main/skills/design-system-starter

참조

main

파일 구조

📁 checklists/

📄 design-system-checklist.md

📁 references/

📄 component-examples.md

📁 templates/

📄 component-template.tsx

📄 design-tokens-template.json

📄 SKILL.md