design-system-starter
일관된 디자인 시스템 구축
토큰, 컴포넌트, 문서가 서로 어긋나면서 팀은 종종 일관성 없는 UI를 출시합니다. 이 스킬은 확장 가능한 디자인 시스템을 위해 Claude, Codex, Claude Code에 구조화된 지침을 제공합니다.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "design-system-starter" from https://skillstore.io/skills/ariegoldkin-design-system-starter.md and its manifest at https://skillstore.io/api/skills/ariegoldkin-design-system-starter/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"design-system-starter" 사용 중입니다. SaaS 대시보드 디자인 시스템의 기반을 만드세요.
예상 결과:
시맨틱 색상, 타입 스케일, 간격 스케일, 반경, 그림자, 대비 요구사항을 포함하는 토큰 계획입니다.
"design-system-starter" 사용 중입니다. 공유 React 라이브러리를 위한 컴포넌트를 정의하세요.
예상 결과:
Button, Input, FormField, Card, Modal, Navigation 패턴과 접근성 기대사항을 포함한 컴포넌트 로드맵입니다.
"design-system-starter" 사용 중입니다. 리디자인 전에 현재 UI kit를 감사하세요.
예상 결과:
토큰 적용 범위, 컴포넌트 일관성, 문서 품질, 테마 적용, WCAG 준수 격차에 대한 체크리스트 기반 검토입니다.
보안 감사
안전All 63 static findings are false positives caused by documentation syntax, relative imports, keyboard-event properties, public links, schema metadata, or design-system language. The reviewed files contain no command execution, path traversal, secret handling, unauthorized networking, prompt injection, or malicious intent.
위험 요인
⚙️ 외부 명령어 (50)
🌐 네트워크 접근 (2)
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/ariegoldkin-design-system-starter/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/ariegoldkin-design-system-starter?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/ariegoldkin-design-system-starter?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ariegoldkin-design-system-starter/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/ariegoldkin-design-system-starter.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 인용
AI Agent Hub. (2026). design-system-starter security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/ariegoldkin-design-system-starter/audits/9BibTeX 인용
@techreport{ai-agent-hub-ariegoldkin-design-system-starter-2026,
author = {AI Agent Hub},
title = {design-system-starter security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/ariegoldkin-design-system-starter/audits/9},
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-starter security audit report (audit version 9)"
version: "1.0.0"
type: report
authors:
- name: "AI Agent Hub"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ariegoldkin-design-system-starter/audits/9"
identifiers:
- type: other
value: "skillstore:ariegoldkin-design-system-starter:audit:9"
description: "Skillstore immutable audit report identifier"
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
새 UI Kit 시작
구현이 시작되기 전에 토큰 카테고리, 기본 컴포넌트, 문서화 표준을 만듭니다.
제품 인터페이스 표준화
공유 토큰, 컴포넌트 API, 접근성 요구사항을 중심으로 디자이너와 엔지니어를 정렬합니다.
컴포넌트 품질 감사
기존 라이브러리의 토큰 적용 범위, 컴포넌트 일관성, 문서, WCAG 격차를 검토합니다.
이 프롬프트를 사용해 보세요
Use design-system-starter to propose color, typography, spacing, radius, and shadow tokens for a new web app.
Use design-system-starter to define Button, Input, Card, Modal, and Navigation APIs with variants and accessibility notes.
Use design-system-starter to audit my component library for token use, naming consistency, keyboard behavior, and documentation gaps.
Use design-system-starter to create a migration plan, governance rules, and documentation checklist for adopting our design system.
모범 사례
- 컴포넌트 변형을 추가하기 전에 토큰과 명명 규칙부터 시작하세요.
- 모든 인터랙티브 컴포넌트의 대비, 키보드 동작, 레이블을 검증하세요.
- 컴포넌트의 목적, props, 변형, 접근성, 예시를 함께 문서화하세요.
피하기
- 공유 토큰을 우회하는 일회성 컴포넌트 스타일을 만드는 것.
- 공유 시맨틱 토큰 없이 다크 모드를 별도의 테마로 취급하는 것.
- 사용 지침, 지원 중단 규칙, 접근성 참고 사항 없이 컴포넌트를 출시하는 것.
자주 묻는 질문
이 스킬이 프로덕션 코드를 자동으로 생성하나요?
어떤 프론트엔드 스택을 대상으로 하나요?
접근성 지침이 포함되어 있나요?
다크 모드에도 도움이 되나요?
기존 디자인 시스템에도 유용한가요?
외부 서비스에 연결되나요?
개발자 세부 정보
작성자
AI Agent Hub라이선스
MIT
작성자 버전
v1.0.0
Skillstore 리비전
r2
참조
89edfdc710d0846129dcee6a929477b04f08052c
유지보수 최신성
2026. 7. 26.
사용량
7 다운로드 · 297 조회