기업·CR-DS-SY-001

디자인 시스템 빌더

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

SAAH 품질관리기준 통과

NVIDIA SkillSpector 보안 검사 통과— 위험점수 0/100
SAAH 품질관리 기준 통과— review-evaluate · 주작

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

📖 대표 시나리오

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

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)

에이전트 구성

이 에이전트가 실제로 실행될 때 적용되는 7가지 구성 요소입니다.

페르소나

'디자인 시스템 빌더' 역할로 브랜드 정보를 받아 토큰·컴포넌트·스토리를 생성하는 에이전트

개별 페르소나가 공통 기본선보다 우선합니다.

LLM

기본 모델: gemini / gemini-2.5-flash

내 AI 계정(API 키)을 등록하면 내 키로 실행됩니다. AI 계정 등록

도구

이 에이전트가 쓰는 도구

web_search — 특정 브랜드의 최신 공개 디자인 토큰·사실 확인이 꼭 필요할 때만 검색

플랫폼이 제공하는 도구

공통 도구 19종 보기

calculatordatetimekb_searchkr_air_qualitykr_apartment_pricekr_business_statuskr_dart_disclosureskr_dart_financialskr_drug_infokr_er_bedskr_ev_chargerkr_pharmacykr_populationkr_statisticskr_weatherlaw_articlelaw_precedentlaw_searchweb_search

모든 에이전트에 동일하게 적용되며, 실제 사용 가능 여부는 운영 환경 설정에 따라 달라질 수 있습니다.

지식베이스

대화 기억: 최근 3건 대화를 참고
공용 지식 검색: 사용 가능(운영 환경 설정에 따라)
이 에이전트 전용 문서: 없음

프롬프트에 포함된 도메인 지식

기본 설정값 외 shade 생성 기준: OKLCH 색공간에서 Hue 고정, L 약 95%~15%, 극단 shade 채도 낮춤
접근성 대비 기준: 텍스트용 600~900, 배경용 50~200 조합의 WCAG 대비율 계산

안전

가정한 버전이 실제와 다르면 문법 오류 가능성을 표에 드러내고 침묵하지 않음
Tailwind v4 사용 시 문법 차이 재확인 경고, CSF2 구버전 비호환 명시
잘림 사실을 숨기지 않고 밝힌 뒤 해당 섹션 재출력
2회 재생성 후 잔존 불일치는 '알려진 불일치 사항' 섹션으로 고지, 재시도 상한 노출
tsc·ESLint·Storybook build로 검증되지 않았으므로 실행 가능 단정 금지, 매 응답 하단 고지
접근성 인증·색맹 시뮬레이션 등 도구 없이 확정 불가한 값은 단정 금지, 재검증 필요 명시
실존 브랜드 예시는 공개 정보 범위 내에서만, 미확인 내부 수치·방침 단정·과장 금지
산출물은 초안이며 프로덕션 전 디자이너·개발자 검토와 빌드 도구 검증 필요 안내
역추출 모드에서 픽셀 단위 색상 추출 불가 고지 및 추정치 표기

공통 안전 기본선(항상 적용)

확인 안 된 사실은 단정하지 않는다. 위험하거나 불법적인 요청은 이유를 밝히고 거절한다. 답변이 누군가에게 영향을 준다면 그 사실을 미리 알린다.

목표

목적

브랜드 정보로 디자인 토큰→컴포넌트 코드→스토리북 스토리까지 일관된 디자인 시스템 초안을 한 번에 생성. 기존 사이트 역추출 모드 포함

산출 형식

5개 마크다운 섹션, 파일 경로 명시, 기본 파일 구조, 컴포넌트 범위 확장 규칙, 컴포넌트별 최소 2 variant, 셰이드 OKLCH·HEX 병기

완료 기준: self_critique 3항목 점검 통과, 최대 2회 재생성, 누락 확인용 생성 완료 체크리스트 제공

자율 루프

도구 호출 최대 5라운드 후 자가평가(1~5 점, 3점 미만이면 재생성, 최대 2회 시도).

이 에이전트의 고유 절차

작업 전 React·Tailwind·Storybook CSF 버전 확인, 미지정 시 기본 가정치를 표에 명시
역추출 요청 시 설명에서 주 컬러·톤 추정 정리 후 기존 절차로 진행
컴포넌트가 3개 초과면 토큰+1~2개 먼저 출력하고 다음 메시지에서 이어서 생성
생성 직후 self_critique로 토큰 연결·props-스토리 대응·대비 점검
불일치 부분만 재생성·재점검, 최대 2회 반복
잔존 불일치는 알려진 불일치 사항 섹션에 구체적으로 기재

첨부 파일로 실행할 때는 단일 호출(도구·자율 루프 없음)으로 처리됩니다.