小さく揃えて、
すぐ貼れるミニデザインシステム
Frame UI は、色・文字・余白のトークンと10個の基本コンポーネントだけで組んだ、軽量なUIキットです。依存ゼロのHTML＋CSS。
- 10コンポーネント
- 2実例パターン
- 0外部依存
Tokens
すべての見た目はCSS変数から。テーマ切替もトークンの差し替えだけです。
Color
accent
--accentaccent-2
--accent-2success
--successwarning
--warningdanger
--dangerfg
--fgsurface
--surfacebg
--bgTypography
Display 40/700見出し Aa
Title 24/700タイトル Aa
Body 16/400本文テキスト。読みやすさを最優先にした行間1.7。
Caption 13/500キャプション・補足
Spacing
--s1 4px--s2 8px--s3 12px--s4 16px--s5 24px--s6 40px--s7 64pxComponents
触れるライブプレビュー。各カードはそのまま切り出して使えます。
ヒント文や検証メッセージを下に。
DefaultNewLiveBetaError
カードタイトル
短い説明文がここに入ります。
概要タブの中身です。
仕様タブの中身です。
履歴タブの中身です。
保存しました変更は自動で同期されます
まだ何もありません
最初のアイテムを作成しましょう。
FKAIUIABC+5
Patterns
コンポーネントを組み合わせた実例。
FK
fk2000@fk_2000 · 2時間
AIFrame UI を作りました。トークン＋10コンポーネントだけの、すぐ貼れるミニデザインシステム。
Frame UI
小さく揃える
デザインシステム入門
デザインシステム入門
デザインUI
トークンから始めるミニデザインシステムの作り方
FKfk2000 · 5分で読める♡ 42
About
Frame UI は fk2000 によるデザイン実験です。AIと一緒に、小さく・速く・揃ったUIを作ることをテーマにしています。LP・UIキット・SNSクリエイティブのご相談はお気軽に。