Experiment 01 · 公開中

Anti Card. ランディングに最適化されたUIライブラリ。

AIでWebサービスを作ると、機能はちゃんと動きます。でもデザインはなんというか、「AIで作った感」が出てしまいます。

なぜでしょう。既存のUIライブラリがCMS向けに作られているからではないでしょうか。CMSにはよく合いますが、ランディング画面では不利に働きます。そこで、AIがより正確に理解し、ランディングのエンドユーザー画面に特化したUIライブラリOSSプロジェクトを始めます。

5 Principles

1. 01カード型ボックスを最小化バイブコーディングで作ると、カードの中にまたカード、その中にまたカードが積み上がりがちです。私たちはここに注目します。丸いボックスで領域を囲わず、境界は別の信号で示します。
2. 02ヘアライン(1pxの線)ボックスではなく一本の線。領域の始まりと終わりを1pxのヘアラインだけで知らせます。ボックスよりずっと軽く、本文が際立ちます。
3. 03smallcapsラベル「カード内のカテゴリラベル」はボックスを呼び込むパターンです。12px大文字、字間0.08em。小さく整った一行がその役割を担います。
4. 04空間(余白)領域を作るのはボックスではなく余白です。セクション間100〜160pxの大きな余白。画面が呼吸し、階層はその呼吸の上に組まれます。
5. 05行レイアウトカードグリッドではなく行。一画面により多くの情報が自然に展開し、階層は本文サイズとメタ列で決まります。

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)のすべてのページがアンチカードコンポーネントで作られています。