AI UI 컴포넌트 시스템 빌더 (재사용 가능한 디자인 시스템 및 일관성 엔진)
제품 전체의 일관성을 보장하는 확장 가능한 UI 컴포넌트 시스템을 구축하세요.

프롬프트 개요
추천 팁
컴포넌트를 한 번 디자인하고 모든 곳에서 재사용하면 제품의 확장 속도가 빨라지고 즉시 더 전문적으로 보입니다.
운영팀 제공NexusAi Technology해결하는 문제
대부분의 초기 단계 제품은 컴포넌트가 표준화되지 않아 UI가 불일치하며, 이는 열악한 UX와 확장성의 어려움으로 이어집니다.
재사용 가능한 컴포넌트 엔진
확장 가능한 UI 시스템을 구축합니다.
디자인 일관성 시스템
제품 전반에 걸쳐 균일한 디자인을 보장합니다.
확장 가능한 UI 프레임워크
재디자인 없이 제품 성장을 지원합니다.
AI 프롬프트 지침
확장 가능한 UI 컴포넌트 프레임워크를 전문으로 하는 시니어 디자인 시스템 아키텍트로서 역할을 수행하세요.
귀하의 과업은 UI 화면을 일관성, 확장성 및 효율성을 보장하는 재사용 가능한 컴포넌트 시스템으로 변환하는 것입니다.
컨텍스트:
UI 요소가 일관성 없이 복제되면 제품의 시각적 확장에 실패합니다. 강력한 컴포넌트 시스템은 더 빠른 개발, 더 나은 UX 및 더 쉬운 유지보수를 보장합니다.
입력값:
1. UI 화면 또는 제품 아이디어
2. 대상 플랫폼 (웹/모바일)
3. 제품 복잡도 수준
출력 요구 사항:
섹션 1 — 컴포넌트 카테고리
컴포넌트 그룹 정의:
- 내비게이션
- 입력 (Inputs)
- 데이터 표시
- 액션
섹션 2 — 핵심 컴포넌트 목록
재사용 가능한 컴포넌트 정의:
- 버튼
- 카드
- 폼 (Forms)
- 리스트
섹션 3 — 컴포넌트 구조
각 컴포넌트별 정의:
- 용도
- 변형 (Variants)
- 상태 (호버, 액티브, 비활성)
섹션 4 — 디자인 일관성 규칙
다음에 대한 규칙 정의:
- 간격 (Spacing)
- 타이포그래피
- 색상
섹션 5 — 인터랙션 패턴
컴포넌트 전반의 표준 동작 정의.
섹션 6 — 확장성 로직
제품 복잡도에 따른 시스템 성장 방식 설명.
섹션 7 — 최종 디자인 시스템 출력
Stitch 또는 Figma에서 구현 준비가 된 구조화된 시스템 제공.
규칙:
- 일회성 컴포넌트 지양
- 재사용 우선순위 설정
- 화면 간 일관성 보장
예상 결과
재사용 가능한 컴포넌트, 상태 및 일관성 규칙이 포함된 구조화된 UI 디자인 시스템.
실행 과정
단계 1 — ChatGPT 또는 Gemini에서 컴포넌트 시스템 생성
프롬프트를 ChatGPT 또는 Gemini에 붙여넣으세요. UI 화면이나 아이디어를 입력하면 구조화된 디자인 시스템을 받게 됩니다.
10–15분단계 2 — Claude에서 시스템 일관성 검증
Claude를 사용하여 불일치 사항과 중복 컴포넌트를 식별하고 확장성을 개선하세요.
10–15분단계 3 — Stitch에서 컴포넌트 구현
Stitch를 사용하여 일관된 컴포넌트 로직을 기반으로 UI 화면을 생성하세요.
15–25분단계 4 — Figma에서 디자인 시스템 구축
개발 전달을 위해 Figma에서 재사용 가능한 컴포넌트를 생성하세요.
30–60분
