·frontend-design-system
</>

frontend-design-system

supercent-io/skills-template

일관되고 확장 가능한 프런트엔드 개발을 위해 명확한 디자인 토큰, 레이아웃 규칙, 동작 안내 및 접근성 검사를 사용하여 프로덕션급 UI 디자인을 생성합니다.

84설치·2트렌드·@supercent-io

설치

$npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system

SKILL.md

프로덕션 수준의 UI 디자인을 위한 스킬입니다. 명확한 디자인 토큰, 레이아웃 규칙, 모션 가이드라인, 접근성 체크를 통해 일관되고 확장 가능한 프론트엔드 개발을 지원합니다.

Issue: UI feels generic Cause: 시각적 방향이나 토큰 없음 Solution: 스타일 레퍼런스와 팔레트 제공

Issue: Layout breaks on mobile Cause: 반응형 그리드 규칙 없음 Solution: 브레이크포인트와 스태킹 동작 정의

일관되고 확장 가능한 프런트엔드 개발을 위해 명확한 디자인 토큰, 레이아웃 규칙, 동작 안내 및 접근성 검사를 사용하여 프로덕션급 UI 디자인을 생성합니다. 출처: supercent-io/skills-template.

원본 보기

인용 가능한 정보

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

설치 명령어
npx skills add https://github.com/supercent-io/skills-template --skill frontend-design-system
카테고리
</>개발 도구
인증됨
최초 등록
2026-02-18
업데이트
2026-02-18

빠른 답변

frontend-design-system이란?

일관되고 확장 가능한 프런트엔드 개발을 위해 명확한 디자인 토큰, 레이아웃 규칙, 동작 안내 및 접근성 검사를 사용하여 프로덕션급 UI 디자인을 생성합니다. 출처: supercent-io/skills-template.

frontend-design-system 설치 방법은?

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

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

https://github.com/supercent-io/skills-template