Experiment 01 · 공개됨

안티 카드 — 카드 안에 카드를 쌓지 않는다.

ChatGPT · Claude · Cursor · v0가 찍어내는 UI는 거의 다 카드 안에 카드를 쌓습니다. 모든 사이트가 닮아갑니다. 안티 카드는 위계·공간·여백으로 다시 짜는 1인 랩의 UI 라이브러리 + AI 스킬입니다.

5 Principles

1. 01박스 거부둥근 박스로 영역을 가두지 않는다. shadcn식 카드 그리드 거부.
2. 02헤어라인border 1px 한 줄로 영역의 시작/끝을 표시. 박스보다 가벼운 영역 구분.
3. 03smallcaps 라벨12px uppercase + 자간 0.08em. 카드 없이 카테고리를 가장 가볍게 알리는 신호.
4. 04공간 (여백)박스 대신 충분한 패딩과 마진으로 영역을 정의. 100~160px 섹션 여백.
5. 05행 레이아웃카드 그리드 대신 행. 한 화면에 더 많은 정보를 자연스럽게 펼치고 위계는 본문 크기·meta로.

Two layers

• Layer 1

  AI Skill

  Claude / Cursor에 system prompt로 설치. 라이브러리 import 없이도 AI가 안티 카드 톤으로 코드 생성. 각 컴포넌트의 prompt 탭(Playground)에서 그대로 복사해 사용.

  진짜 본체
• Layer 2

  React 컴포넌트

  npm install @freeive/anti-card — Tailwind 기반, dark/light 자동, 12개 타이포 토큰.

  보조

살펴보기

• Playground

  각 컴포넌트의 시각·코드·AI 프롬프트. 별도 호스팅(GitHub Pages).↗

  컴포넌트 카탈로그 · 6 탭
• GitHub

  저장소·이슈·CHANGELOG. ISC 라이선스.↗

  @freeive/anti-card

이 사이트(freeive.com)의 모든 페이지가 안티 카드 컴포넌트로 만들어져 있습니다. 메인 / Heritage / Talk / Lab — 살아있는 dogfooding.