Tabキーはインデントの挿入に使われます。エディターの外へフォーカスを移動するには、Escキーを押してからTabキーを押してください。
Features
洗練された設計理論
Lism CSS は、心地よいレイアウトを素早く簡単に組むための軽量CSSフレームワークです。数学的に美しく、調和の取れたリズムがデザインの中に自然と生まれるよう、CSS設計をゼロから構築しました。
レイアウトプリミティブ
Flex, Grid, Stack, Columns など、頻出するレイアウトパターンをプリミティブクラスとして提供。組み合わせるだけでサイトの骨組みが完成します。
ハーモニックスケール
余白・フォントサイズ・行間などを調和的な比率で設計。デザインに自然と心地よいリズムを生み出すタイポグラフィ設計を標準で用意しています。
デザイントークン
カラー・タイポグラフィ・余白・角丸・シャドウなどの値を、段階ごとにCSS変数として提供。サイト全体の一貫性を保ち、再利用性を高めます。
Propertyクラス
単一のCSSプロパティに対応するユーティリティクラスを-prop:valueという明確な形式で定義。AIが迷いづらく、人も直感的にスタイリングできます。
CSSレイヤー構造
@layer による厳格なCSSレイヤー設計。詳細度の衝突を防ぐだけでなく、クラスの役割に合わせて自然に分類でき、拡張性と保守性を両立します。
レスポンシブ
クラス(-prop_bp)とCSS変数(--prop_bp)を組み合わせた独自のレスポンシブ手法を考案。ファイルは軽量のまま、幅広いレイアウトに対応できます。
Artificial Intelligence
AIツール連携
Lism CSSはAIエージェントとの親和性を重視して設計されています。MCPサーバーとSkills、そしてAIが読み取りやすいドキュメントを提供することで、 Claude CodeやCodex、CursorなどのAIコーディングエージェントがLismの体系を正確に把握し、意図通りのコードを生成できます。
MCPサーバー
MCPサーバーを接続すると、AIエージェントが Lism CSS の仕様を検索・取得できるようになります。コンポーネントの使い方やProps、デザイントークンなど、必要な情報をコーディング中に参照できます。
Connect MCP →Skills
Lism CSS の使い方をAIエージェントに伝えるスキルを用意しています。Lism CSS独自の命名規則や設計思想をAIが正しく理解することで、ベストプラクティスに従った正確なコードを生成できます。
Install Skills →Templates
Lism CSS テンプレート
Lism CSS を使ったテンプレートやデザインパターンを配布しています。コピー&ペーストで簡単に試せるので、ぜひサイト制作の土台として活用してください。
