프롬프트 라이브러리로 돌아가기
프롬프트 라이브러리이미지 프롬프트

UI 스타일 시스템 보드

8px 그리드, 컬러 토큰, 타이포그래피 스케일, 컴포넌트 상태, 정렬된 레이아웃 예시가 포함된 다중 페이지 UI 스타일 시스템 보드를 만듭니다.

디자인 시스템UI 키트타이포그래피
미리보기

이미지 프롬프트

추천 모델

Seedream 5.0 Lite

출력 형식

이미지 프롬프트 템플릿

미리보기

이미지 프롬프트

컬러 토큰, 타이포그래피 스케일, 컴포넌트 상태, 반응형 레이아웃 예시를 보여주는 UI 스타일 시스템 보드 미리보기.

시스템 일관성, 그리드 정렬, 편집 가능한 토큰, 제품 준비가 된 UI 예시에 초점을 둔 UI 스타일 시스템 보드 미리보기.

전체 프롬프트

UI 스타일 시스템 보드

8px 그리드, 컬러 토큰, 타이포그래피 스케일, 컴포넌트, 반응형 레이아웃이 포함된 다중 페이지 UI 스타일 시스템 보드.

추천 모델: Seedream 5.0 Lite출력 형식: 이미지 프롬프트 템플릿
전체 프롬프트
이미지 프롬프트
[PRODUCT_OR_BRAND]를 위한 정교한 다중 페이지 UI 스타일 시스템 보드를 만드세요. 하나의 깔끔한 미리보기 캔버스 위에 응집력 있는 디자인 페이지 세트로 시스템을 제시하세요. 모든 페이지에 엄격한 8px 간격 그리드, 일관된 여백, 정확한 정렬, 명확한 계층 구조를 사용하세요. 기본색, 보조색, 중립색, 의미 색상, 배경색 견본이 있는 컬러 토큰 패널을 포함하세요. 제목, 본문, 캡션, 숫자 스타일이 있는 타이포그래피 스케일을 포함하세요. 버튼, 입력 필드, 카드, 내비게이션, 배지, 빈 상태를 보여주는 컴포넌트 시트를 포함하고, 데스크톱과 모바일 비율을 보여주는 두 가지 반응형 레이아웃 예시를 추가하세요. 전체 시스템은 시각적으로 일관되고 편집 가능해야 하며, SaaS 제품, 크리에이터 도구, 이커머스 브랜드 또는 내부 대시보드에 적합해야 합니다. 필요한 곳에만 현실적인 플레이스홀더 문구를 사용하고, 라벨은 읽기 쉬울 만큼 짧게 유지하세요. 실제 로고, 복사한 디자인 시스템, 사용자가 제공하지 않은 브랜드명, 왜곡된 타이포그래피, 일관되지 않은 간격, 맞지 않는 그림자, 장식적 혼잡, 접근성이 낮은 대비, 그리드를 깨는 컴포넌트 예시는 피하세요.

사용 메모

실행 전에 제품 유형, 브랜드 톤, 팔레트 방향, 컴포넌트 목록, 레이아웃 예시, 접근성 요구사항을 바꾸세요.

프롬프트 FAQ

이 프롬프트를 사용하기 전에

입력, 모델 적합도, 결과를 약하게 만들지 않으면서 템플릿을 조정하는 방법을 빠르게 확인하세요.

무엇을 먼저 맞춤 설정해야 하나요?

제품 유형, 브랜드 톤, 기본 팔레트, 타이포그래피 성격, 컴포넌트 범위, 예시가 마케팅 중심인지 대시보드 중심인지 먼저 정의하세요.

이 프롬프트로 사용할 수 있는 디자인 시스템을 만들 수 있나요?

탐색과 발표를 위한 시각적 스타일 시스템 보드를 만듭니다. 실제 프로덕션 UI token으로 전환하기 전에 간격, 대비, 타이포그래피, 컴포넌트 동작을 검토하세요.

이미지를 게시하기 전에 무엇을 확인해야 하나요?

라벨이 읽기 쉬운지, 색상 견본이 서로 구분되는지, 타입 계층이 명확한지, 컴포넌트가 같은 간격 논리를 공유하는지, 실제 브랜드 시스템을 복사하지 않았는지 확인하세요.

이 모드의 다른 프롬프트