デザインシステム
AI エージェント向けのデザインシステム。
Web サイトやアプリにぴったりのデザインシステム（色、フォント、タイプスケール、角の半径、余白を、ライトとダークの両方で）を選び、DESIGN.md ファイル、shadcn テーマ、プロンプト 1 つのどれかで、そのまま Codex や Claude Code に渡せます。
プラットフォーム
スタイル
用途
24 件のデザインシステム
- PaperWeb落ち着いて、控えめで、読みやすい。丁寧に組まれた本のページのように。見出しは Source Serif 4
- SwissWeb黒、白、そして 1 色のシグナルレッド。厳格なグリッドの上で。見出しは Archivo
- LedgerWeb数字のための高密度なダーク UI。ターミナルのようなアンバーのアクセント。見出しは IBM Plex Sans
- MonoWeb真っ白なページ、Geist の書体、コバルトブルー 1 色。ドキュメントと開発者ツールのために。見出しは Geist
- AtelierWebアイボリー、インク、洗練されたセリフ体。ファッションブランドのルックブックのように。見出しは Cormorant Garamond
- NoirWeb黒、骨のような白、巨大なセリフ体。色は作品だけ。見出しは Instrument Serif
- HarborWebネイビー、余白、安定した構成。本格的な B2B プロダクトのために。見出しは Plus Jakarta Sans
- NordicWeb落ち着いたブルー、やわらかなグレー、静かな自信。生産性ツールのために。見出しは Manrope
- ClinicWeb落ち着いたティール、明快な文字、平易な言葉。ヘルスケアのサイトのために。見出しは Source Sans 3
- TerraWebモス、リネン、クレイ。大地に寄り添うブランドのために。見出しは DM Serif Display
- ChalkWeb明るく、丸みがあり、励ましてくれる。いい教室のように。見出しは Nunito
- PopWeb太い黒の輪郭線、ハードシャドウ、レモンイエロー。あえてうるさく。見出しは Unbounded
- Strideアプリ大きな縦長の数字と、エネルギッシュなオレンジ。動くためのアプリに。見出しは Barlow Condensed
- Pantryアプリ温かく、親しみやすく、食欲をそそる。フードと注文のアプリのために。見出しは Bricolage Grotesque
- Calmアプリやわらかなセージ、穏やかなセリフ体、息をつける余白。見出しは Newsreader
- Walletアプリわかりやすい残高、穏やかなグリーン、信頼できる数字。見出しは Manrope
- Focusアプリ真っ白なページに青が 1 色。タスクとの間に、余計なものは何もない。見出しは Instrument Sans
- Chatterアプリ丸いふきだし、親しみやすいティール、会話が主役。見出しは Plus Jakarta Sans
- Voyageアプリ全幅の写真、オーシャンブルー、絵はがきのようなセリフ体。見出しは DM Serif Display
- Boutiqueアプリ端まで広がる写真、Bodoni のセリフ体、白地に黒。ショーウィンドウのように。見出しは Bodoni Moda
- Questアプリ連続記録、XP、ぷっくりしたボタン。練習をゲームのように感じさせる。見出しは Nunito
- Careアプリ1 画面に 1 つのわかりやすいタスク。さっと済ませたい患者さんのために。見出しは Source Sans 3
- Vinylアプリまずジャケットアート。ホットピンクの再生ボタンと、聴くための暗い部屋。見出しは Syne
- Hearthアプリ暗く静かなホーム画面にともる、温かいアンバーの光。見出しは Outfit
各デザインシステムの中身
- ライトモードとダークモードの色。 shadcn や Tailwind と同じ、役割ごとの名前が付いています：background、primary、muted、border、ring、そして 5 つのチャートカラー。すべての文字色は、背景に対して WCAG のコントラスト基準を満たします。
- フォントとタイプスケール。 Google Fonts のフォントで、ディスプレイから小さな注釈まで、サイズ、行の高さ、文字間隔を定義しています。
- 角の半径、余白、影。 Web サイト向けにはグリッド、モバイルアプリ向けにはタッチ領域、タブバー、画面の余白も含みます。
- 使い方のルール： 何のためのものか、どのコンポーネントを作るか、何を避けるか。エージェントが、そのシステムならするはずの判断をできるようにします。
使い方は 3 通り
- プロンプトをコピーして、Codex か Claude Code に貼り付けます。エージェントはそのシステムのプレーンテキストの DESIGN.md を参照し、プロジェクトに保存して、すべての画面でそれに従います。
- DESIGN.md をダウンロードして、プロジェクトのルートに自分で置きます。DESIGN.md：Codex にデザインシステムを渡すを参照してください。
- shadcn テーマをインストールします。コマンド 1 つで済みます。Tailwind v4 のプロジェクトなら、
globals.cssを貼り付けるだけでも使えます。
24 のデザインシステムはすべて GitHub でも公開しています。DESIGN.md ファイルと shadcn テーマも含まれます：ummydev/design-md。
Web 向けとアプリ向け
Web 向けのシステムは、ランディングページ、マーケティングサイト、ドキュメント、ダッシュボード用に作られています。アプリ向けのシステムはスマートフォンの画面用で、大きめのタッチ領域、下部のタブバー、iOS と Android で読みやすい文字サイズを備えています。どのシステムにも独自の見た目があり、紫のグラデーションやグラスモーフィズムなど、AI が作ったインターフェースを似た見た目にしてしまうパターンを避けて選んでいます。
よくある質問
これらのデザインシステムは無料ですか？
はい。どのデザインシステムも、自分のプロジェクトで無料でコピー、ダウンロード、利用できます。
Codex と Claude Code 以外の AI ツールでも使えますか？
はい。DESIGN.md はプレーンな Markdown なので、プロジェクト内のファイルを読めるエージェントなら従えます。shadcn テーマは、どの shadcn や Tailwind のプロジェクトでも使えます。
デザインシステムを変更できますか？
はい。DESIGN.md や CSS 変数を編集するか、エージェントに調整を頼みます。たとえば、メインカラーを自社のブランドカラーに差し替えられます。