Awesome Design.MD - 有名Webサイトのデザインシステムを自分のサイトに適用する

 (github.com/VoltAgent)
117 ポイント 投稿者 xguru 24 일 전 | 5件のコメント | WhatsAppで共有
  • DESIGN.mdは、Google Stitchが導入した概念で、AIエージェントが読み取って一貫したUIを生成するためのテキストデザイン文書
  • Figma、JSONスキーマ、別個のツール類なしで、Markdownファイル1つをプロジェクトルートにコピーするだけで、AIコーディングエージェントが即座にUIスタイルを認識
  • 既存のAGENTS.mdと対をなし、DESIGN.mdは視覚的な外観と雰囲気を定義
  • 各ファイルは、カラーパレット、タイポグラフィ、コンポーネントのスタイリング、レイアウト、レスポンシブ動作など9つの標準セクションで構成
  • 各サイトごとにDESIGN.md + preview.html + preview-dark.htmlの3点セットを提供
  • Claude、Vercel、Stripe、Notion、Figma、Cursorなど、AI・開発ツール・フィンテック・エンタープライズ分野の60以上のサービスのデザインシステムを収録
    • 目的のサイトのDESIGN.mdをプロジェクトルートにコピーし、AIエージェントにそのファイルを参照してUIを構築するよう指示
    • **「こういう見た目のページを作って」**の一言で、元サイトに一致するUIを生成可能
  • MITライセンス

各DESIGN.mdファイルの構成

  • Stitch DESIGN.mdフォーマットに従い、以下の9つのセクションへ拡張して構成

    # セクション 含まれる内容
    1 Visual Theme & Atmosphere ムード、密度、デザイン哲学
    2 Color Palette & Roles 色名 + HEX + 機能的役割
    3 Typography Rules フォントファミリー、全体の階層テーブル
    4 Component Stylings ボタン、カード、入力、ナビゲーションおよび状態
    5 Layout Principles スペーシング尺度、グリッド、余白の哲学
    6 Depth & Elevation シャドウシステム、サーフェス階層
    7 Do's and Don'ts デザインガイドラインとアンチパターン
    8 Responsive Behavior ブレークポイント、タッチターゲット、縮小戦略
    9 Agent Prompt Guide 色のクイックリファレンス、すぐ使えるプロンプト

収録コレクション

  • AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
  • Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
  • Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
  • Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
  • Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
  • Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

関連記事

5件のコメント

 
hidarite 24 일 전

コンセプトは良いですし、有用そうではありますが……
Webデザインにも著作権があるはずですし、
このように丸ごとコピーして適用することに著作権上の問題はないのか、また商道徳の観点から問題はないのか、気になります。
 
tsboard 18 일 전

私もすぐにその発想が浮かびました。最近はAIサービスやエージェントが、何か超法規的な権限を持っている状態をそのまま前提にしている気がします。こんなふうに半ば目隠しされたような状態で進んでいいのかな？という…
 
kaydash 23 일 전

いいですね。フロントエンドやデザインをされる方は、こういうものをあらかじめ作っておいてから始めるんですね
 
m00nlygreat 24 일 전

でも、普通はフロントエンドフレームワークの中にデザインシステムをコード断片の形で持っていて、これを共通で使うべきではないですか……？

DESIGN.md に従うというのは、そのカラーや指示事項を毎回恣意的に生成するという意味のように思えますが……
 
hmmhmmhm 24 일 전

単なるコピーではなく、複数のデザインシステムをもとに新しいデザインシステムを作り出す用途で使われるとよさそうです。