余白で構造を作る、
1 枚で完結する UI フレームワーク

Akizakura は kawaii-music.moe のデザイン規則を 1 枚の CSS にまとめた軽量フレームワークです。線を最小限にし、近接と余白で情報のまとまりを伝えます。

visibility デモを見る download CSS を入手 LLM 向け完全ガイド code GitHub

特徴

1 枚で完結

依存ゼロ。<link> 1 行で全コンポーネントが使えます。

デザイントークン

色・余白・角丸はすべて CSS 変数。:root を上書きすればテーマを差し替えられます。

余白で構造を作る

区切り線は最後の手段。近接と余白でまとまりを表現する設計思想です。

レスポンシブは 768px 一点

ブレイクポイントは 1 つだけ。考えることを減らし、破綻を防ぎます。

アクセシブルなフォーカス

入力・ボタンに統一したフォーカスリング。キーボード操作でも迷いません。

LLM フレンドリー

llms.txt を同梱。生成 AI に正しいマークアップを書かせられます。

クイックスタート

HTML の <head> に以下を追加します（URL は自分の公開先に置き換えてください）。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://akizakura.pages.dev/akizakura.css">

あとはクラスを当てるだけです。

<div class="container stack">
  <div class="card card--bordered">
    <h3>カード</h3>
    <p>余白と並びで構造を伝えます。</p>
  </div>
  <button class="btn btn--primary">保存</button>
</div>

設計原則

カードをネストさせない。 階層化したくなったら見出し + 本文に並べ直す。
区切る線は最小限にする。 まず余白で構造が読めないかを考える。
区切りは並びから感じさせる。 近接・余白で「自然にまとまりが分かる」状態を目指す。

LLM で使う

smart_toy

生成 AI にこのフレームワークでマークアップを書かせるときは、 llms-full.txt をコンテキストに渡してください。全トークン・全コンポーネント・設計原則を 1 ファイルにまとめています。