큐레이션 · 오픈 · 무료

Browserbase

Browserbase는 AI 에이전트를 위한 신뢰할 수 있고 프로그래밍 가능한 웹 인터페이스를 제공합니다.

01

디자인 DNA

AI 에이전트를 위한 산업 등급 발전소

02

컬러

높은 가시성과 기술적 정밀함을 위해 활기 있는 오렌지 강조색을 사용한 흙빛 중성 배경.

03

타이포그래피

grotesque-sans · monospace

• display187px · 500
• heading36px · 500
• body16px · 400
• caption12px · 500

대형 디스플레이 제목에는 타이트한 음수 자간을 사용합니다 · 소형 라벨에는 대문자 트래킹이 넉넉합니다 · Weight 500는 UI 및 디스플레이 텍스트의 표준입니다

04

여백

일관된 4px 그리드 기반 간격 시스템

05

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

1px solid black

06

레이아웃

넉넉한 수직 간격과 넓은 마진을 갖춘 중앙 정렬 콘텐츠

07

모션과 인터랙션

인터랙티브 요소의 부드러운 배경색 및 색상 트랜지션 · 모달 또는 오버레이의 불투명도 및 가시성 변화

부드러운 트랜지션을 사용한 미묘한 색상 또는 배경 변화 · 배경색 변경을 통한 즉각적인 시각적 응답

08

컴포넌트

• button 흰색 텍스트의 솔리드 블랙 필 또는 검정 텍스트의 아웃라인 필
• card 간단한 콘텐츠 블록을 포함한 연한 노란색 또는 크림색 배경
• chip 대문자 텍스트와 미묘한 테두리를 갖춘 소형 둥근 모서리 태그
• input 명확한 테두리가 있는 표준 텍스트 입력
• hero 활기 있는 오렌지 텍스트 하이라이트를 사용한 대형 디스플레이 타이포그래피

09

보이스와 금지 목록

• 톤 기술적이고 직접적이며 매우 유능한
• 헤드라인 오렌지색으로 하이라이트된 키워드를 포함한 대담하고 강렬한
• CTA 종종 화살표를 사용하는, 행동 지향적이고 명확한

• 부드러운 파스텔을 사용하지 않습니다 — 스크린샷은 날카로운 블랙과 활기 있는 오렌지를 보여줍니다
• 과도하게 둥근 모서리를 사용하지 않습니다 — 스크린샷은 날카로운 필 모양의 버튼과 사각형 테두리를 보여줍니다
• 넓은 마진을 사용하지 않습니다 — 스크린샷은 넉넉한 수직 패딩을 사용하는 중앙 정렬의 밀집 레이아웃을 보여줍니다
• 텍스트에 연한 회색을 사용하지 않습니다 — 스크린샷은 가독성을 위해 고대비 블랙과 다크 그레이를 보여줍니다
• 장식용 세리프를 사용하지 않습니다 — 스크린샷은 깨끗하고 현대적인 grotesque-sans 타이포그래피를 보여줍니다
• 미묘한 그라데이션을 사용하지 않습니다 — 스크린샷은 플랫 컬러 블록과 솔리드 하이라이트를 보여줍니다
• 피하기: 가벼운 마케팅 용어
• 피하기: 지나치게 복잡한 기술적 설명
• 피하기: 수동태
• 피하기: 불확실한 CTA
• 피하기: 과도한 느낌표 사용

10

팩 안의 실제 스크린샷

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

11

System Prompt

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