큐레이션 · 오픈 · 무료

Val Town

JavaScript를 즉시 작성하고 배포할 수 있는 친절한 serverless 플랫폼입니다.

01

디자인 DNA

스크립트를 빠르게 배포할 수 있는 개발자들을 위한 친근한 동네 카페

02

컬러

강렬한 시안 악센트를 사용하여 주요 작업을 위한 고대비 다크 온 라이트 기반.

03

타이포그래피

geometric-sans · humanist-sans · slab-mono

• display48px · 700
• headline36px · 700
• body16px · 400
• caption14px · 400
• code16px · 400

04

여백

섹션 간 넉넉한 수직 패딩(일반적으로 96px)을 보장하는 base-4 시스템으로 명확한 시각적 분리를 제공합니다.

05

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

1px solid rgba(0,0,0,0.1)

0 20px 25px -5px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 8px 10px -6px rgba(0,0,0,0.1)

06

레이아웃

왼쪽에 텍스트, 오른쪽에 복잡하게 겹쳐진 복합 이미지가 있는 중앙 정렬 히어로 섹션으로 시작하며, 그 뒤에 스택된 콘텐츠 섹션이 이어집니다.

07

모션과 인터랙션

대화형 요소에 대한 표준 색상 및 배경색 전환 · 버튼과 링크의 부드러운 hover 및 focus 상태 변화

버튼과 링크에 대한 미묘한 배경색 변화 또는 투명도 변화. · 배경색 전환을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 주요 버튼은 강렬한 시안 배경에 어두운 텍스트를 사용한 알약 모양입니다. 보조 버튼은 미묘한 테두리와 어두운 텍스트를 사용한 알약 모양입니다.
• card 미묘한 그림자와 둥근 모서리를 가진 다크 테마 카드로, 사용자 후기 및 기능 하이라이트에 사용됩니다.
• chip 최소한으로 사용되며, 주로 UI 목업 내 배지 또는 작은 레이블로 보입니다.
• input 표준 패딩과 둥근 모서리를 가진 깨끗하고 테두리가 있는 입력 필드입니다.
• hero 대담한 타이포그래피 헤드라인, 부제목, 두 개의 주요 작업 버튼, 그리고 제품 인터페이스의 크고 겹쳐진 복합 이미지가 특징인 분할 레이아웃입니다.

09

보이스와 금지 목록

• 톤 친절하고 접근하기 쉬우며 약간 장난스러우면서도 기술적으로 유능합니다.
• 헤드라인 직접적이고 이점 중심적이며 캐주얼하고 환영하는 어조로 작성되었습니다.
• CTA 즉각적인 참여를 권장하기 위해 '시작'이나 '복사'와 같은 단순한 동사를 사용하는 작업 중심적입니다.

• 헤드라인에 세리프 타이포그래피를 사용하지 마세요 — 스크린샷에는 전체적으로 대담한 기하학적 sans-serif 서체가 보입니다.
• 기본값으로 다크 테마를 사용하지 마세요 — 주요 배경은 깨끗하고 밝은 흰색입니다.
• 가혹하거나 포화된 악센트 색상을 사용하지 마세요 — 주요 악센트는 밝지만 접근 가능한 시안(#2EC4FF)입니다.
• 날카롭고 사각형 모서리를 사용하지 마세요 — UI는 둥근 모서리를 사용하며, 버튼의 경우 종종 알약 모양(999px)을 사용합니다.
• 모든 곳에 무거운 드롭 섀도우를 사용하지 마세요 — 그림자는 미묘하며, 주로 플로팅 카드와 복합 이미지에 사용됩니다.
• 레이아웃을 조밀하게 만들지 마세요 — 디자인은 넉넉한 여백과 패딩을 사용하며, 특히 주요 섹션 간에 그렇습니다.
• 피하기: 지나치게 복잡하거나 전문 용어가 많은 기술 언어
• 피하기: 공격적이거나 긴박한 판매 중심 카피
• 피하기: 공식적, 딱딱하거나 기업적인 어조의 문구

10

팩 안의 실제 스크린샷

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

11

System Prompt

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