Design.md

Source: https://github.com/VoltAgent/awesome-design-md at f6961238d5cd
License: MIT
Read the English original

This edition is an AI-assisted translation.

開発者向けWebサイトによるDesign.md分析の収集

DESIGN.md 厳選集

あなたのプロジェクトにDesign.mdをコピーし、AIエージェントに「こんなページをビルドする」と伝え、デザイン言語と視覚的に一貫性のある高品質のUIを生成します。

分析パターン、トークン、ルールなど、高品質のUI生成のために、表面レベルの出力ではなく、実際の設計深さで構築されています。

DESIGN.md とは？

DESIGN.md Google Stitchが紹介する新しいコンセプトです。 一貫性のあるUIを生成するためにAIエージェントが読み込まれたプレーンテキスト設計システム文書。

マークダウンファイルだけです。 Figma のエクスポート、JSON のスキーマ無し、特別な工具細工無し。 プロジェクトルートやAIコーディングエージェントやGoogle Stitchにドロップすると、UIがどのように見えるかを即座に理解できます。 Markdown は LLM が最も読みやすいフォーマットなので、解析や設定には何もありません。

ファイル	誰がそれを読んでいるか	それが定義するもの
AGENTS.md	コーティング剤	プロジェクトをビルドする方法
DESIGN.md	デザインエージェント	プロジェクトがどのように見えるか、そして感じるべきか

このリポジトリは、使いやすいDesign.mdファイルを提供します実際のウェブサイトから抽出。

DESIGN.md をリクエスト

お問い合わせDESIGN.md をリクエスト 特定のウェブサイトのために、あなただけに配信されたプライベートリクエストを含みます。

AI デザイン・開発エコシステムツール

AIで製品を出荷しますが、誰もがそれを投稿しないため、すべての起動はまだ静かに死にます。EveryFeed AIアシスタントをソーシャルワークスペースに差し込み、35以上のチャネルでドラフト、スケジュール、および公開します。

👉 AI コーディングエージェントや Web ビルダーで UI を制作する開発者、デザイナー、バイブコーダーと並んで、あなたの製品を紹介しましょう。 GitHubで#150をグローバルにランク付け。 開発者、デザイナー、バイコーダが使用するコミュニティリソース。

コレクション

AI・LLM プラットフォーム

• Claude - AnthropicのAIアシスタント。 暖かいテラコッタのアクセント、きれいな編集レイアウト
• Cohere - エンタープライズAIプラットフォーム 活気あるグラデーション、データリッチなダッシュボードの美的
• ElevenLabs - AIボイスプラットフォーム ダークシネマティックUI、オーディオ波形の美学
• Minimax - AIモデル提供者。 ネオンのアクセントが付いている折目の暗いインターフェイス
• Mistral AI - オープン・ウェイト LLM プロバイダー。 フランスのミニマリズム、パープルトーン
• Ollama - ローカルでLMを実行します。 ターミナルファースト、モノクロのシンプルさ
• OpenCode AI - AIコーディングプラットフォーム 開発者中心のダークテーマ
• Replicate - API で ML モデルを実行します。 きれいな白いキャンバス、コードフォワード
• Runway - 編集映画フェスティバルの美的であるAIクリエイティブツールプラットフォーム — シネマティックダークヒーロー、ペーパーホワイト読書バンド、独創的なサンス、純粋な黒の丸薬CTA。
• Together AI - オープンソースのAIインフラ。 技術的な、青写真様式の設計
• VoltAgent - AIエージェントフレームワーク Void-black キャンバス、エメラルドアクセント、ターミナルネイティブ
• xAI - Elon MuskのAIラボ。 スタークモノクロ、未来主義

開発者ツールと IDE

• Cursor - AI初のコードエディタ。 洗練されたダークインターフェイス、勾配アクセント
• Expo - React ネイティブプラットフォーム。 ダークテーマ、タイトなレター、コード中心
• Lovable - AIフルスタックビルダー。 遊び心のあるグラデーション、フレンドリーな開発者の美的
• Raycast - 生産性の進水器。 洗練されたダーククローム、鮮やかなグラデーションアクセント
• Superhuman - 速い電子メール クライアント。 プレミアムダークUI、キーボード優先、パープルグロー
• Vercel - フロントエンドの展開プラットフォーム。 黒いおよび白い精密、Geistの壷
• Warp - 現代ターミナル。 ダークIDEのようなインターフェイス、ブロックベースのコマンドUI

バックエンド、データベース、DevOps

• ClickHouse - 迅速な分析データベース。 黄色のアクセント、技術的な文書様式
• Composio - ツール統合プラットフォーム。 カラフルな統合アイコンでモダンなダーク
• HashiCorp - インフラの自動化 企業クリーニング、黒および白
• MongoDB - ドキュメントデータベース。 グリーンリーフブランディング、開発者向けドキュメントフォーカス
• PostHog - プロダクト分析。 遊び心のあるヘッジホッグブランディング、開発者向けダークUI
• Sanity - ダークファーストの編集マーケティング面を備えたヘッドレスコンテンツプラットフォーム — 112px ディスプレイタイプ、IBM Plex Mono テクニカル眉毛、および最高優先度 CTA のために予約された単一のサンゴ赤のアクセント。
• Sentry - エラー監視。 ダークダッシュボード、データ高密度、ピンクパーアクセント
• Supabase - オープンソースのFirebase代替。 ダークエメラルドテーマ、コードファースト

生産性向上ツールと SaaS

• Cal.com - オープンソーススケジューリング。 クリーンニュートラルUI、開発者指向のシンプルさ
• Intercom - 顧客のメッセージング。 フレンドリーな青パレット、会話UIパターン
• Linear - エンジニア向けプロジェクト管理 超小型、精密な、紫色のアクセント
• Mintlify - ドキュメントプラットフォーム。 きれいで、緑に集中される、読書最適化される
• Notion - オールインワンワークスペース。 暖かいミニマリズム、serif の見出し、柔らかい表面
• Resend - 開発者向けメール API 最小ダークテーマ、モノスペースアクセント
• Zapier - オートメーションプラットフォーム 暖かいオレンジ、フレンドリーなイラスト主導

デザイン・クリエイティブツール

• Airtable - スプレッドシートデータベースのハイブリッド。 多彩な、友好的な、構造されたデータ審美的
• Clay - クリエイティブ・エージェンシー 有機性形状、ソフトグラデーション、アート指向のレイアウト
• Figma - コラボレーション設計ツール。 活気に満ちた多色刷り、遊び心のあるけれども専門
• Framer - ウェブサイトビルダー。 黒と青、モーション・ファースト、デザイン・フォーワード
• Miro - ビジュアルコラボレーション 明るい黄色のアクセント、無限のキャンバスの美的
• Webflow - ビジュアルウェブビルダー。 、磨かれたマーケティングの場所の審美的な青集中される

フィンテック・暗号資産

• Binance - 暗号交換。 モノクローム、取引床の緊急時のBold Binance Yellow
• Coinbase - 暗号交換。 青いアイデンティティ、信頼できる焦点を合わせた、機関的な感じをきれいにして下さい
• Kraken - 暗号取引プラットフォーム。 濃厚なダークUI、データ密なダッシュボード
• Mastercard - グローバル決済ネットワーク 暖かいクリームのキャンバス、軌道の丸薬の形、編集者の暖かさ
• Revolut - デジタルバンキング。 洗練された暗いインターフェイス、勾配カード、fintechの精密
• Stripe - 決済インフラ シグネチャーパープルグラデーション、重量-300エレガンス
• Wise - 国際送金。 明るい緑のアクセント、友好的および明確

E コマース・小売

• Airbnb - 旅行市場。 暖かいサンゴのアクセント、写真撮影主導、ラウンドUI
• Meta - テック小売店。 写真撮影優先、バイナリライト/ダーク表面、メタブルーCTA
• Nike - 陸上小売店。 Monochrome UI、大型のアッパーケースFutura、フルブル写真
• Shopify - Eコマースプラットフォーム。 ダークファーストシネマティック、ネオングリーンアクセント、超ライトディスプレイタイプ
• Starbucks - コーヒー小売の旗艦。 4層地球緑システム、温暖なクリームキャンバス、独自の SoDoSans typography

メディア・コンシューマーテック

• Apple - 家電製品 プレミアムホワイトスペース、SF Pro、シネマティックイメージ
• HP - PC、プリンターメーカー 純粋な白いキャンバス、HPの電気青い信号CTA、幾何学的なForma DJRのマイクロ、青いchevronの装飾
• IBM - エンタープライズテクノロジー カーボン設計システム、構造された青いパレット
• NVIDIA - GPU計算。 緑黒いエネルギー、技術的な力の審美的
• Pinterest - ビジュアルディスカバリープラットフォーム 赤いアクセント、石の格子、イメージ ファースト
• PlayStation - ゲームのコンソール小売。 三面チャンネルレイアウト、シアンホバースケールの相互作用
• SpaceX - 宇宙技術。 星の黒と白、フルブルなイメージ、未来
• Spotify - 音楽ストリーミング。 暗い、太字型、アルバムアート主導の鮮やかな緑色
• The Verge - 技術編集媒体。 酸ミントと紫外線アクセント、マヌカ表示タイプ
• Uber - モビリティプラットフォーム。 冷たい黒と白、タイトなタイプ、都市エネルギー
• Vodafone - 世界の電気通信のブランド。 記念碑的なアッパーケースディスプレイ、Vodafoneレッドチャプターバンド
• WIRED - テックマガジン ペーパー白の広シート密度、注文のserifのインク ブルーのリンク

自動車

• BMW - 高級自動車。 暗い優れた表面、精密なドイツ工学美的
• BMW M - 自動車の性能。 Motorsport-inspiredのコントラスト、M色のアクセント、精密主導のレイアウト
• Bugatti - 高級ハイパーカー。 映画館黒いキャンバス、モノクロのausterity、記念碑的な表示タイプ
• Ferrari - 高級自動車。 Chiaroscuro 黒白の編集者、フェラーリ赤、極端な間隔
• Lamborghini - 高級自動車。 真の黒い大聖堂、金のアクセント、LamboTypeの注文のNeoGrotesk
• Renault - フランス自動車 Vivid aurora グラデーション、NouvelR 独自のタイプフェイス、ゼロ半径ボタン
• Tesla - 電気自動車。 ラジカル・サブトラクション、シネマティック・フル・ビューポート・フォト、ユニバーサル・サンズ

レトロ Web · DESIGN.md ノスタルジア

1990年代のウェブから抽出されたDESIGN.mdファイル。 1 つをドロップし、AI エージェントに長時間正確なヴィンテージ UI を構築するために伝えます。

• Dell (1996) - カタログ-era 企業の網。 リテラルブラックページフレーム、フラットカラーブロック「リブボンカード」、オンスローマボディ、ハンドカットGIFステッカー(新登場!) 破裂、賞のシール、斜めプロダクト写真)。
• Nintendo.com (2001) - Y2K “console chrome” ウェブ。 ブラシをかけた両足首の斜めの金属のパネル、半音点のカーボン ナフ ロウイングのアンバーは、回路板の英雄分野およびピクセル マリオの歓迎の泡上のArial-Black box-artワードマークを輪郭にしました。

各 DESIGN.md の内容

各ファイルが続くStitch DESIGN.md 形式 延長セクションを使って:

#	セクション	キャプチャとは
1	ビジュアルテーマと大気	気分、密度、設計哲学
2	カラーパレット&ロール	セマンティック名+六角+機能的役割
3	ティポグラフィルール	フォントファミリー、フル階層テーブル
4	コンポーネントスタイリング	ボタン、カード、入力、状態のナビゲーション
5	レイアウトの原則	間隔のスケール、格子、空白の哲学
6	深さ及び高度	影システム、表面階層
7	ドッツとドンッツ	ガードレールとアンチパターンの設計
8	責任ある行動	ブレイクポイント、タッチターゲット、コラボレーション戦略
9	エージェントのプロンプトガイド	クイックカラーリファレンス、既製のプロンプト

各サイトには以下が含まれます。

ファイル	ミッション
DESIGN.md	デザインシステム(エージェントが読む)
preview.html	色の腕時計、タイプ スケール、ボタン、カードを示す視覚カタログ
preview-dark.html	暗い表面が付いている同じカタログ

使い方

1. サイトのコピーDESIGN.mdプロジェクトルートへ
2. 使用するAIエージェントに通知します。

コントリビューション

お問い合わせお問い合わせ ガイドラインについて

• 既存のファイルを改善する: 間違った色、不足しているトークン、弱い記述を修理して下さい
• レポートの問題: 何かが消えているかどうかをお知らせください

広報開始前に、広報担当までお申し付けください。問題を開く あなたの考えを論議し、メンテナーからのフィードバックを得るために最初に。

ライセンス

MITライセンス - 参照ライセンス

このリポジトリは、パブリックWebサイトから抽出されたデザインシステム文書のキュレーションコレクションです。 すべてのDESIGN.mdファイルは保証なしで「あります」提供されます。 抽出されたデザイントークンは、パブリックに表示されるCSS値を表します。 サイトの視覚的アイデンティティの所有権を主張しません。 これらの文書は、AIエージェントが一貫したUIを生成するのに役立ちます。