기업·CR-DS-SY-001

디자인 시스템 빌더

브랜드 컬러 하나로 토큰·컴포넌트·스토리북까지, 나만의 디자인 시스템 초안을 5분 만에

SAAH 품질관리기준 통과

NVIDIA SkillSpector 보안 검사 통과— 위험점수 0/100
SAAH 품질관리 기준 통과— review-evaluate · 주작
유용성 80점 이상— 출시 기준 통과

디자인 시스템디자인 토큰StorybookReactTailwind컴포넌트 라이브러리UI 코드생성

상세 설명

🎯 이런 분께 적합

디자인 시스템을 처음부터 만들 리소스가 없는 1인 개발자·스타트업, 기존 컴포넌트 라이브러리를 확장하려는 프론트엔드 개발자, 리브랜딩에 맞춰 디자인 토큰을 재설계하려는 담당자에게 적합합니다.

💡 무엇을 해드리나

주 컬러·폰트·톤앤매너를 입력하면 디자인 토큰(색상 shade·spacing·radius), React+TypeScript+Tailwind CSS 컴포넌트 코드, Storybook 스토리 파일까지 이어지는 일관된 디자인 시스템 초안을 한 번에 생성합니다. React·Tailwind·Storybook 버전을 지정하지 않으면 기본값을 적용하고 상단에 명시합니다.

📋 결과로 받으시는 것

디자인 토큰(tokens/tokens.json)
기본 컴포넌트 코드(Button·Input·Card·Badge, 파일 경로 포함)
요청 시 추가 컴포넌트(Modal·Form·Navigation·Tabs 등, 최대 4개씩)
Storybook 스토리 파일

⏱ 사용 방법

주 컬러(HEX)·폰트·톤앤매너·대상 프레임워크를 입력하세요. 값을 지정하지 않으면 React 18+Tailwind v3+Pretendard 기준 기본값이 적용됩니다.

📖 대표 시나리오

스타트업 신규 서비스 디자인 시스템 초안

1인 개발자가 새 SaaS 서비스의 디자인 시스템을 처음부터 만들 여유가 없어 초안이 필요함

입력 예시
주 컬러: #6366F1
폰트: Pretendard
톤앤매너: 모던하고 신뢰감 있는
프레임워크: React + TypeScript + Tailwind CSS

결과 요약
10단계 shade 디자인 토큰, Button·Input·Card·Badge 4종 컴포넌트 코드, Storybook 스토리 파일까지 받습니다.

사내 프로젝트 컴포넌트 라이브러리 확장

프론트엔드 개발자가 이미 만든 기본 컴포넌트에 Modal·Tabs를 추가하고 싶어함

입력 예시
주 컬러: #10B981
폰트: Pretendard
톤앤매너: 깔끔하고 실용적인
요청: 기본 Button·Input·Card·Badge에 이어 Modal, Tabs 컴포넌트도 같은 토큰 체계로 추가해줘

결과 요약
기존 토큰 체계를 재사용한 Modal·Tabs 컴포넌트 코드와 Storybook 스토리 파일을 받습니다.

리브랜딩 프로젝트 디자인 토큰 재설계

중소기업 마케팅 담당자가 브랜드 리뉴얼에 맞춰 새 주 색상 기반 디자인 토큰이 필요함

입력 예시
주 컬러: #F97316
폰트: Pretendard
톤앤매너: 활기차고 친근한
프레임워크: React + TypeScript + Tailwind CSS v3

결과 요약
새 주 색상 기반 50~900 shade 토큰과 기본 4종 컴포넌트 코드, Storybook 스토리 파일 경로별 산출물을 받습니다.

바로 사용하기

에이전트 실행

투입 AI

📎 파일 첨부 (클릭 또는 드래그·다중 최대 10개·개별 50MB·총 200MB)