The CSS Design Framework
for AI and Humans

軽量でビルド不要。どんなサイトにも導入できます。
あなたはもう、CSS設計に悩む必要はありません。

<h1 class="u--trim -fw:700 -fz -lh:xs -lts:s -ta:center" style="--fz: clamp(2rem, 0.6667rem + 5.3333vw, 4rem)">
  The CSS Design Framework
  <br />
  for AI and Humans
</h1>
<p class="-fz:s -fz_sm -fz_md -lh:m -c:text-2 -ta:center -my:40" style="--fz_sm: var(--fz--m); --fz_md: var(--fz--l)">
  軽量でビルド不要。どんなサイトにも導入できます。
  <br />
  あなたはもう、CSS設計に悩む必要はありません。
</p>
<div class="l--cluster -jc:center -g:15">
  <a class="l--flex -ai:center -p:10 -c:base -bdrs:20 -fw:500 -td:none -hl:s" href="/docs/installation/">
    <span class="-px:10">Get Started</span>
  </a>
  <button class="l--flex set--plain -ai:center -p:10 -bgc:base -bdrs:20 -bxsh:10 -hl:s" type="button" data-modal-open="search-modal">
    <span class="-px:10 -o:pp">Search documentation...</span>
    <span class="-px:10 -py:5 -c:text -bgc:base-2 -bdrs:10 -fz:s -lh:1 -lts:s -d:none -d_md -bd" style="--d_md: inline-block">
      ⌘K
    </span>
  </button>
</div>

Tabキーはインデントの挿入に使われます。エディターの外へフォーカスを移動するには、Escキーを押してからTabキーを押してください。

Features

洗練された設計理論

Lism CSSは、Webサイトの構造的な基盤を素早くスムーズに構築するための軽量CSSフレームワークです。自然で心地よいリズムがデザインに生まれるよう、CSSアーキテクチャをゼロから設計しました。

レイアウトプリミティブ

Stack, Flex, Grid, Columns など、よく使うレイアウトパターンをレイアウトプリミティブとして提供。組み合わせるだけでサイトの骨組みが完成します。

ハーモニックスケール

余白・フォントサイズ・行間を調和的な比率で設計。自然と心地よいリズムをデザインに生み出すタイポグラフィ設計です。

デザイントークン

カラー・フォントサイズ・余白・角丸・シャドウなどを段階的なCSS変数で一元管理。サイト全体の一貫性を保ちます。

Propertyクラス

-fz:l, -p:20 のような直感的なクラス名で素早くスタイリング可能。形式が明確で短縮記法なのにAIが迷いません。

CSSレイヤー構造

@layer による厳格なCSSレイヤー設計。詳細度の衝突を防ぎ、拡張性と保守性を両立します。

レスポンシブ

CSS変数とクラスを組み合わせた独自のレスポンシブ手法。軽量なのに柔軟で幅広いレイアウトに対応できます。

Artificial Intelligence

AI ツール連携

Lism CSSはAIエージェントとの親和性を重視して設計されています。MCPサーバーとSkills、そして機械可読なドキュメントを提供することで、 Claude CodeやCursorなどのAIツールがLismの体系を正確に把握し、意図通りのコードを生成できます。

MCPサーバー

Claude CodeやCursor、VS Code等のAIコーディングツールにLism CSSの仕様を提供します。AIがLism CSSの最新ドキュメントやAPI情報をリアルタイムで参照しながらコーディングを支援するため、独自の命名規則に不安がある場合でも、正しいクラス名やProps指定をAIがガイドしてくれます。