Experiment 01 · 공개됨

Anti Card. 랜딩에 최적화된 UI 라이브러리.

AI로 웹 서비스를 만들면 기능은 잘 돌아갑니다. 그런데 디자인은 뭐랄까, 'AI가 만든 티'가 납니다.

왜일까. 기존 UI 라이브러리들이 CMS에 특화되어 있어서가 아닐까. CMS에는 잘 맞지만 랜딩 화면에는 불리하게 작용합니다. 그래서 AI가 더 잘 알아듣고, 랜딩 사용자 화면에 특화된 UI 라이브러리 OSS 프로젝트를 시작합니다.

5 Principles

1. 01카드형 박스 최소화유독 바이브코딩으로 만들면 카드 안에 또 카드, 그 안에 또 카드가 쌓입니다. 우리는 이 부분에 주목합니다. 둥근 박스로 영역을 가두지 않고, 경계는 다른 신호로 표시합니다.
2. 02헤어라인 (1px 한 줄)박스 대신 한 줄. 영역의 시작과 끝을 1px 헤어라인으로만 알립니다. 박스보다 훨씬 가볍고, 그래서 본문이 도드라집니다.
3. 03smallcaps 라벨"카드 안 카테고리 라벨"은 박스를 부르는 패턴입니다. 12px uppercase에 자간 0.08em. 작고 단정한 한 줄이 그 자리를 대신합니다.
4. 04공간 (여백)박스가 영역을 만드는 게 아니라 여백이 영역을 만듭니다. 섹션 사이 100~160px의 큰 여백. 화면이 호흡하고, 위계는 그 호흡 위에 잡힙니다.
5. 05행 레이아웃카드 그리드 대신 행입니다. 한 화면에 더 많은 정보가 자연스럽게 펼쳐지고, 위계는 본문 크기와 meta 컬럼으로 잡힙니다.

Layers

• Layer 1

  AI Skill

  현재 어떤 식으로 움직일지 설계하는 단계입니다. Claude·Cursor·ChatGPT 같은 AI에 system prompt 또는 skill로 설치해서, 라이브러리를 import 하지 않아도 안티 카드 톤의 코드를 생성하게 만드는 그림. 본격 구현은 React 컴포넌트가 충분히 갖춰진 다음 단계.

  구상 중
• Layer 2

  React 컴포넌트

  npm install @freeive/anti-card. Tailwind 기반, dark/light 자동, 12개 타이포 토큰. 현재 64개 컴포넌트.

  공개됨
• Layer 3

  UI 프롬프트 인디케이터

  Next.js의 dev 인디케이터처럼 개발 화면 위에 떠 있는 요소 인디케이터. 컴포넌트를 클릭하면 해당 요소의 정보(컴포넌트명, props, 톤 가이드)를 프롬프트로 정확하게 전달합니다. AI가 "어떤 요소를 어떻게" 알게 하는 다리.

  구상 중

이 사이트(freeive.com)의 모든 페이지가 안티 카드 컴포넌트로 만들어져 있습니다.