日本語

← 一覧に戻る

48Kスターリポジトリ:AIライティングのフロントエンドを停止する66設計システム

itadol5j

Arise-design-mdアーキテクチャ

リードはAIのフロントエンドUIの問題を解決する: eyesome-design-md

AI、フロントエンドの問題は何ですか?UIは醜い。お問い合わせ AIエージェントが生成するフロントエンドインターフェイスは、デザイン感覚が欠けていることが多いため、カラーミックスは混同され、レイアウトが調整されていません。

この倉庫お問い合わせその他の組織 66 DESIGN.mdファイル、あなたのAIの代理店を直接発生させますピクセルレベルの精度 UIお問い合わせ

DESSIGN.mdとは?

デザイン:md Google Stitchで導入された新しいコンセプト:

  • 純粋なテキストの設計システム: Markdown ファイル定義 UI デザイン仕様
  • LLMは最もわかりやすいです。: マークダウンはLMLに最適なフォーマットです
  • 必要性無し、Figma。: 設計ファイルのエクスポート、JSON スキーマ不要
  • インサート: ルートディレクトリに置くと、AIエージェントはすぐに理解します

比較:

ドキュメント 誰が読みますか? 何を定義しますか?
AGENTS.mdの特長 セクション プロジェクトの構築方法
デザイン:md デザイン法 プロジェクトの提示方法

66 設計システム

利用できる設計mdです66 すぐに利用できる DESIGN.md ファイルすべてのエリアで:

株式会社アイエイアイ

  • Claude、OpenAI、Cohere、Eleven Labs、Mistral AI、XAI、等。
  • Google Gemini、AI、VoltAgent など

開発者ツール

  • Vercel、Cursor、Raycast、Warp、可愛、博覧会
  • Supabese、Stanley、線形、postHog、Sanity、等。

金融技術

  • ストライプ, Coinbase, Binance, Revolut, Wise
  • 研摩、空気テーブル、等。

ブランドサイト

  • アップル、テスラ、ナイキ、BMW、フェラーリ、ランボルギーニ
  • Spotify、Airbnb、Pinterst、Uber、Vergeなど

デザインツール

  • Figma、Framer、Miro、Webflow、Notion、等。

使用方法

3つのステップ。: : :

# 1. 复制 DESIGN.md 到项目根目录
# 比如：复制 vercel/DESIGN.md 到你的项目

# 2. 告诉 AI Agent 使用这个设计
"用 DESIGN.md 的设计规范，帮我生成一个首页"

# 3. AI Agent 生成像素级精确的 UI

です。 AIエージェントが自動的に次のようになります。

  • DESSIGN.md色の指示を読みます
  • 正しいフォントと文字を適用
  • 正しい間隔およびレイアウトを使用して下さい
  • デザインシステムに合ったコンポーネントを生成

DESSIGN.md には?

各Design.mdは9 完全な設計コードの章: : :

トピックス コンテンツ
ビジュアルテーマ 大気、密度、設計哲学。
2. 色の規範 セマンティック名+ヘックス+機能ロール
3. フォントルール フォントファミリー、完全な階層
4. 部品様式 ボタン、カード、入力フレーム、ナビゲーションなど
5. レイアウトの主義 間隔の比率、格子、空白の哲学
6. 深さのレベル 影システム、表面レベル
7. 規範的な指導 カラムとリバースモードの設計
ソリューション ブレイクポイント、タッチターゲット、フォールディング戦略
エージェントヒント クイックカラーリファレンス、既製のヒント

📁 各サイトに含まれるもの

  • デザイン:md設計システム文書(AIエージェント読み取り)
  • 申し訳ございません。ビジュアルプレビュー(カラー、フォント、コンポーネント)
  • お問い合わせ: ダークモードプレビュー

設計システム例

いくつかの古典的な例:

プロフィール

  • 黒い及び白い精密、Gistの壷
  • 極めてシンプル、コード優先

アップル。

  • 白、SF Pro フォントの多数
  • フィルムレベルの写真、高度なセンス。

ストライプ。

  • サインパープルグラデーション
  • 重量-300。

テスラ。

  • 非常に減らされた設計
  • 映画レベルのフルスクリーン写真、ユニバーサルサンズ

インフォメーション

何と言ってもわからない。 AIがフロントエンドを書く方法を完全に変更する: : :

  • 66 すぐに利用できる DESIGN.md ファイル
  • AI企業、デベロッパの「機器、金融、ブランドなど」のカバレッジ
  • 純粋なMarkdownのフォーマット、LMは最もよく理解しました
  • 3つのステップは十分です:ZoomをプロジェクトのZoom AIにコピーして下さい完全なUIを発生させます
  • Googleのステッチの概念、公式に支えられる

その後、AIは前面の端を醜く書いた。

GitHubで: : :https://github.com/VoltAgent/awasome-design-md

Googleのステッチ: : :https://stitch.withgoogle.com/docs/design-md/overview/