DESIGN.md のサンプル：Web サイトとアプリ向けの無料テンプレート。

よい DESIGN.md を書くいちばん早い方法は、完成したものから始めることです。ここでは、Web サイトとダッシュボード向け 12 件、モバイルアプリ向け 12 件の、24 の無料サンプルを紹介します。どれもライトモードとダークモードの色、フォント、タイプスケール、角の半径、余白、使い方のルールを備えたプレーンな Markdown ファイルで、エージェントは URL から読み込めます。

2026年11月6日更新 · 約 5 分で読めます

完成した DESIGN.md とは

DESIGN.md は、デザイントークンを書いた YAML のフロントマターと、その使い方を説明するセクションからなります。Swiss のサンプルを短くしたものを示します。

---
version: alpha
name: 'Swiss'
colors:
  primary: '#D70015'
  on-primary: '#FFFFFF'
  surface: '#FFFFFF'
  on-surface: '#0A0A0A'
typography:
  headline-lg:
    fontFamily: 'Archivo'
    fontSize: 56px
    fontWeight: 700
rounded:
  md: 0px
---

## Overview

Swiss follows the International Typographic Style: big grotesque type,
a strict grid, square corners and lots of white.

## Do's and Don'ts

- Do make the headline the biggest thing on the page.
- Don't round corners or add shadows.

完全版のファイルには、セカンダリとターシャリの色、ディスプレイから小さな文字までのタイプスケール、余白、コンポーネント、レイアウトも含まれます。形式そのものについては、DESIGN.md：Codex にデザインシステムを渡すを参照してください。

Web サイトとダッシュボード向けの DESIGN.md サンプル

Paper（エディトリアル）：落ち着いて、控えめで、読みやすい。丁寧に組まれた本のページのように。 DESIGN.md
Swiss（ミニマルグリッド）：黒、白、そして 1 色のシグナルレッド。厳格なグリッドの上で。 DESIGN.md
Ledger（ダーク SaaS ダッシュボード）：数字のための高密度なダーク UI。ターミナルのようなアンバーのアクセント。 DESIGN.md
Mono（開発者ドキュメント）：真っ白なページ、Geist の書体、コバルトブルー 1 色。ドキュメントと開発者ツールのために。 DESIGN.md
Atelier（ラグジュアリーファッション）：アイボリー、インク、洗練されたセリフ体。ファッションブランドのルックブックのように。 DESIGN.md
Noir（ダークポートフォリオ）：黒、骨のような白、巨大なセリフ体。色は作品だけ。 DESIGN.md
Harbor（エンタープライズ B2B）：ネイビー、余白、安定した構成。本格的な B2B プロダクトのために。 DESIGN.md
Nordic（北欧風 SaaS）：落ち着いたブルー、やわらかなグレー、静かな自信。生産性ツールのために。 DESIGN.md
Clinic（医療・ヘルスケア）：落ち着いたティール、明快な文字、平易な言葉。ヘルスケアのサイトのために。 DESIGN.md
Terra（アースカラーのエコブランド）：モス、リネン、クレイ。大地に寄り添うブランドのために。 DESIGN.md
Chalk（親しみやすい教育）：明るく、丸みがあり、励ましてくれる。いい教室のように。 DESIGN.md
Pop（ネオブルータリズム）：太い黒の輪郭線、ハードシャドウ、レモンイエロー。あえてうるさく。 DESIGN.md

モバイルアプリ向けの DESIGN.md サンプル

アプリのサンプルには、スマートフォンの画面に必要なルールが加わります。タッチ領域、下部のタブバー、画面の余白、数字の組み方です。

Stride（フィットネスアプリ）：大きな縦長の数字と、エネルギッシュなオレンジ。動くためのアプリに。 DESIGN.md
Pantry（フード注文アプリ）：温かく、親しみやすく、食欲をそそる。フードと注文のアプリのために。 DESIGN.md
Calm（ウェルネスアプリ）：やわらかなセージ、穏やかなセリフ体、息をつける余白。 DESIGN.md
Wallet（家計・金融アプリ）：わかりやすい残高、穏やかなグリーン、信頼できる数字。 DESIGN.md
Focus（タスク管理アプリ）：真っ白なページに青が 1 色。タスクとの間に、余計なものは何もない。 DESIGN.md
Chatter（メッセージングアプリ）：丸いふきだし、親しみやすいティール、会話が主役。 DESIGN.md
Voyage（旅行アプリ）：全幅の写真、オーシャンブルー、絵はがきのようなセリフ体。 DESIGN.md
Boutique（ファッションショッピングアプリ）：端まで広がる写真、Bodoni のセリフ体、白地に黒。ショーウィンドウのように。 DESIGN.md
Quest（ゲーミフィケーション学習アプリ）：連続記録、XP、ぷっくりしたボタン。練習をゲームのように感じさせる。 DESIGN.md
Care（ヘルスケアアプリ）：1 画面に 1 つのわかりやすいタスク。さっと済ませたい患者さんのために。 DESIGN.md
Vinyl（音楽・ポッドキャストアプリ）：まずジャケットアート。ホットピンクの再生ボタンと、聴くための暗い部屋。 DESIGN.md
Hearth（スマートホームアプリ）：暗く静かなホーム画面にともる、温かいアンバーの光。 DESIGN.md

各名前はライトモードとダークモードのライブプレビューにリンクし、各 DESIGN.md のリンクはプレーンなファイルを開きます。

サンプルの使い方

システムのページにあるプロンプトをコピーして、Codex か Claude Code に貼り付けます。エージェントは、ファイルをプロジェクトに DESIGN.md として保存し、すべての画面でそれに従います。
またはファイルをダウンロードして、プロジェクトのルートに自分で置きます。Codex は AGENTS.md は自動で読みますが DESIGN.md は読まないので、AGENTS.md にそのファイルを指す 1 行を加えます。
必要なところを変える。 メインカラーを自社のブランドカラーに差し替えるか、エージェントにフォントの調整を頼み、残りはそのまま使います。

DESIGN.md はプレーンテキストの形式なので、同じファイルが Google Stitch など、それを読むほかのツールでも使えます。

よくある質問

これらの DESIGN.md テンプレートは無料ですか？

はい。どのサンプルも、自分のプロジェクトで自由にコピーして使えます。

モバイルアプリ向けの DESIGN.md サンプルはありますか？

はい。サンプルのうち 12 件はモバイルアプリ向けで、フィットネスやフード注文から、バンキング、メッセージング、スマートホームのアプリまであります。

自分で DESIGN.md を作れますか？

はい。DESIGN.md ジェネレーターで、自分の色、フォント、角の半径、余白から作れます。