큐레이션 · 오픈 · 무료

Wrdlss Club

사용자의 존재와 상호작용에 반응하는 인터랙티브 ASCII 아트 놀이터.

01

디자인 DNA

예술적 캔버스 겸 해커의 터미널

02

컬러

엄격한 모노크롬, 흰색 배경의 고대비 흑백

03

타이포그래피

monospace

• display48px · 400
• body16px · 100

모든 텍스트는 고정폭으로, 엄격한 격자 기반 정렬을 형성합니다 · 주요 콘텐츠에 얇은 글꼴 두께(100)가 광범위하게 사용됩니다 · UI 요소에는 대문자 변환을 적용합니다

04

여백

고정폭 문자가 본질적인 타이포그래피 격자를 형성합니다

05

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

1px solid rgb(229,231,235)

06

레이아웃

ASCII 캔버스용 단일 열 전체 너비 레이아웃

07

모션과 인터랙션

텍스트 요소의 페이드인 전환 · ASCII 문자의 지속적 생성

포인터 커서가 클릭 가능한 요소를 나타냅니다 · 새로운 ASCII 아트 문자 생성을 트리거합니다

08

컴포넌트

• button 포인터 커서가 적용된 최소화된 대문자 텍스트 버튼
• card 시각적 블록 역할을 하는 ASCII 아트 요소
• chip [CHROME 131.0.0.0]과 같은 괄호로 감싸진 메타데이터 태그
• input 표시 없음
• hero 대규모 생성형 ASCII 아트 필드

09

보이스와 금지 목록

• 톤 기술적, 예술적, 그리고 직접적
• 헤드라인 대형 ASCII 아트 구도
• CTA 최소화된 괄호 감싸진 UI 요소

• 화려한 그라디언트를 사용하지 마세요 — 스크린샷은 엄격한 흑백을 보여줍니다
• 세리프 폰트를 사용하지 마세요 — 스크린샷은 전체적으로 고정폭을 보여줍니다
• 드롭 섀도우를 추가하지 마세요 — 스크린샷은 완전히 평평한 표면을 보여줍니다
• 두꺼운 글꼴 두께를 사용하지 마세요 — 스크린샷은 두께 100이 지배적임을 보여줍니다
• 둥근 UI 요소를 추가하지 마세요 — 스크린샷은 날카로운 기하학적 형태를 보여줍니다
• 화려한 악센트를 사용하지 마세요 — 스크린샷은 악센트 색상이 없음을 보여줍니다
• 피하기: 화려한 그라디언트
• 피하기: 장식적 타이포그래피
• 피하기: 복잡한 내비게이션 메뉴

10

팩 안의 실제 스크린샷

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

11

System Prompt

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