큐레이션 · 오픈 · 무료

StackBlitz

StackBlitz는 브라우저 기반 클라우드 IDE로, 최신 웹 팀에 번개처럼 빠르고 안전한 개발 환경을 제공합니다.

01

디자인 DNA

브라우저 기반 개발을 위한 고성능 엔진입니다.

02

컬러

단일의 선명한 블루 악센트를 사용하여 속도와 집중력을 강조하는 고대비 다크 UI입니다.

03

타이포그래피

humanist-sans · monospace

• display94px · 700
• heading40px · 700
• body16px · 400
• small13px · 500

대형 디스플레이 타이포그래피에는 Manrope를, 본문/UI 텍스트에는 Inter를 사용합니다. · 제목에 타이트한 자간을 유지하여 밀도 높고 강렬한 느낌을 만듭니다. · 기술적이거나 코드 관련 스니펫에는 Roboto Mono를 사용합니다.

04

여백

주요 섹션 간에는 넉넉한 간격을, UI 컴포넌트 내부에는 타이트한 패딩을 사용합니다.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(255, 255, 255, 0.12)

rgba(0, 0, 0, 0.32) 0px 4px 8px 0px · rgba(255, 255, 255, 0.1) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset

06

레이아웃

전체 폭의 다크 히어로 섹션, 중앙 정렬된 콘텐츠 칼럼, 그리고 나란히 배치된 비교 그리드를 사용하는 표준 고급 마케팅 사이트 레이아웃입니다.

07

모션과 인터랙션

콘텐츠 표시를 위한 부드러운 페이드 및 슬라이드 트랜지션. · UI 상태 변경을 위한 탄성/플렉스 트랜지션.

인터랙티브 요소에서 미세한 색상 변화 또는 불투명도 변경. · 상태 변경을 통한 즉각적인 피드백.

08

컴포넌트

• button 흰색 텍스트와 알약 모양 또는 큰 반경을 가진 단색 블루 주요 버튼; 미세한 hover 상태.
• card 미세한 테두리가 있는 다크 표면, 주로 데이터나 기능 비교에 사용됩니다.
• chip 데이터 테이블 내 상태 표시기 또는 작은 태그에 사용됩니다.
• input 미세한 인셋 그림자와 얇은 테두리가 있는 미니멀한 다크 입력 필드입니다.
• hero 대담한 배경 그라디언트와 은은한 와이어프레임 형태의 UI 일러스트레이션이 있는 대규모 타이포그래피 중심의 히어로 섹션입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 기술적이며 직접적입니다.
• 헤드라인 대담하고 이점 중심적이며, 종종 주요 키워드를 강조하기 위해 대규모 타이포그래피를 사용합니다.
• CTA 'Try Bolt.new'와 같이 간단하고 행동 지향적인 레이블입니다.

• 흰색 배경을 사용하지 마세요 — 스크린샷은 다크하고 근접 블랙의 주요 배경을 보여줍니다.
• 세리프 서체를 사용하지 마세요 — 스크린샷은 깔끔하고 현대적인 산세리프 타이포그래피를 보여줍니다.
• 여러 경쟁 악센트 색상을 사용하지 마세요 — 스크린샷은 단일의 지배적인 블루 악센트를 보여줍니다.
• 주요 버튼에 큰 border-radius를 사용하지 마세요 — 스크린샷은 직사각형 또는 약간 둥근 버튼을 보여줍니다.
• 포커스 상태에 얇고 밝은색 윤곽선을 사용하지 마세요 — 스크린샷은 고대비 흰색 또는 블루 테두리를 사용합니다.
• 지나치게 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 은은하고 어두운 톤의 그라디언트 또는 단색 다크 표면을 사용합니다.
• 피하기: 모호한 마케팅 용어
• 피하기: 명확한 이점 없는 지나치게 복잡한 기술 설명
• 피하기: 수동적인 표현

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko