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.

由開發者焦點網站解析 DESIGN. md 分析。

Awesome DESIGN.md 精選集

將 DESIGN.md 复制到您的專案中, 告訴您的 AI 代理商「建立一頁看起來像這樣,

建設於真正的設計深度, 包括分析的樣式、符號與規則,

什麼是 DESIGN.md？

DESIGN.md 是Google Stitch引入的新概念。由AI代理讀取以產生一致的UI的純文字設計系統文件.

這只是一份降級檔案沒有Figma出口沒有JSON計劃沒有特殊工具把它丟進你的專案根以及任何AI編碼代理商或是Google Stitch Markdown 是 LLMS 最好的讀取格式, 所以沒有什麼可以分析或設定的。

文件	誰看的?	它的定義
`AGENTS.md`	編碼代理程式	如何建立專案
`DESIGN.md`	设计代理	計畫的樣子和感覺

此 repo 提供即用 DESIGN. md 文件摘自真正的網站。

申請 DESIGN.md

你可以申請 DESIGN.md 包括專門給你的私人要求

AI 設計與開發生態工具

你用AI運送產品但每次發射都會悄悄死去因為沒人發表EveryFeed 將你的人工智能助理插入一個社交工作區,

👉 展示您的產品，與使用 AI 程式設計代理和網頁建置工具打造介面的開發者、設計師及氛圍程式設計者並列。

_{GitHub全球排名#150。由發展者、設計者和氣象編碼器使用。}

收錄內容

AI 與 LLM 平台

Claude - Anthropic的AI助手。溫暖的terracotta口音, 清潔的編輯版式
Cohere - 企業AI平台. 振動梯度, 數據豐富的儀表板美學
ElevenLabs - AI语音平台. 黑暗影院化的UI,音波形美學
Minimax - AI模型提供者. 粗體的有霓虹口音的暗介面
Mistral AI - 開放量级 LLM 提供者。法式最小化紫色
Ollama - 在本地執行 LLMS 。終點第一, 單色簡單
OpenCode AI - AI編碼平台. 以開發者为中心的黑暗主題
Replicate - 通过 API 執行 ML 模型。清除白帆布, 代碼向前
Runway - AI的創意工具平台,
Together AI - 開源AI基建. 技術型、蓝图型
VoltAgent - AI代理框架. Void-black 畫布,翡翠口音,終端本地化
xAI - Elon Musk的人工智能實驗室史塔克一色未來的最小化

開發工具與 IDE

Cursor - AI第一密碼編輯器 Sleek 暗介面, 梯度口音
Expo - 反应原生平台. 暗主題、緊密的字母間距、代碼中心
Lovable - AI的全堆建者。滑稽的梯度, 友好的 dev 美學
Raycast - 生产力發射器。 Sleek 深色铬, 生動的梯度口音
Superhuman - 快速電子郵件客戶端。 Premium 暗 UI, 鍵盤第一, 紫色光
Vercel - 前端部署平台. 黑白精度, Geist 字体
Warp - 现代终端. 黑暗的 IDE 類型介面, 基于區塊的命令 UI

後端、資料庫與 DevOps

ClickHouse - 快速分析資料庫。黃色的技術文件樣式
Composio - 工具集成平台. 現代暗色與多彩整合圖示
HashiCorp - 基建自动化. 整體、黑白
MongoDB - 文件數據庫。綠葉品牌,開發者文件焦點
PostHog - 產品分析游戲刺客品牌, 開發者友好的黑暗 UI
Sanity - 沒有頭部的內容平台,
Sentry - 監控錯誤。暗色的儀表板數據通訊粉色的口音
Supabase - 開源Firebase替代。暗翡翠主題, 代碼第一

效率工具與 SaaS

Cal.com - 開源排程。清潔中性 UI, 面向開發者的簡體
Intercom - 客戶信息友好的藍色調色板, 聊天的 UI 樣式
Linear - 工程師的專案管理超微量精准紫色口音
Mintlify - 文件平台. 清潔綠色讀取优化
Notion - 全體工作區溫度最小化、平面標題、軟表面
Resend - 給發展者的電子郵件 API 。最小的黑暗主題, 單位口音
Zapier - 自动化平台. 溫暖的橙色, 友好的插圖驱动

設計與創意工具

Airtable - 電子表-數據庫混合。彩色、友好、結構的數據美學
Clay - 創意社. 有机外形、軟梯度、藝術導向布局
Figma - 合作設計工具. 活力充沛的多顏色, 玩的又專業
Framer - 网站建立者. 粗体黑藍,先動,先設計
Miro - 視覺合作明亮的黃色口音無限的畫布美觀
Webflow - 视觉网建设者. 藍色的油光的市場美學

金融科技與加密貨幣

Binance - 加密交流。黃色粗金色,交易地板緊急
Coinbase - 加密交流。清潔的藍色身份以信任為重心的制度感
Kraken - 加密交易平台. 紫色的深色UI、數據通訊儀表板
Mastercard - 全球支付网. 熱奶油畫布軌道藥丸形社論溫暖
Revolut - 數位銀行 Sleek 暗介面、梯度卡、精度
Stripe - 付款基础设施。簽署紫色梯度, 重量300 优雅
Wise - 國際匯款明亮的綠色口音,友好而清晰

電子商務與零售

Airbnb - 旅行集市。溫暖的珊瑚口音, 由攝影導演, 四舍五入的UI
Meta - 科技零售店. 攝影第一二進位光/暗表面 Meta Blue CTAs
Nike - 田径零售. 單色UI,大寫Futura,全血攝影
Shopify - 电子商务平台. 黑暗第一影院霓虹綠色口音超光亮顯示型態
Starbucks - 咖啡零售旗舰。四層土綠系統暖奶油畫布專有的SoDoSans排印

媒體與消費科技

Apple - 消費電子 SF Pro, 電影影像
HP - 電腦和打印机制造器纯白帆布, HP 電子藍色信號 CTA, 几何 Forma DJR Micro, 藍色切夫龍裝飾
IBM - 企業科技. 碳设计系統,结构化藍色調色板
NVIDIA - GPU计算. 綠黑色能量技術力量美學
Pinterest - 視覺發現平台紅色口音、泥石流、影像第一
PlayStation - 遊戲控制台零售三表面通道布局, 青色徘徊大小
SpaceX - 航天科技. 史塔克黑白血淋淋的影像
Spotify - 音樂流傳黑暗、粗野、專輯藝術的動畫綠色
The Verge - 科技社論媒體. 酸薄和紫外線口音, Manuka 顯示型態
Uber - 行動平台粗体黑白緊身型城市能量
Vodafone - 全球通訊品牌. 單寫大寫顯示, Vodafone 紅色章節目
WIRED - 科技雜誌. 紙- 白色寬表密度、自訂 serif、墨水藍色連結

汽車

BMW - 奢侈汽車黑暗的外表, 精确的德國工程美學
BMW M - 性能汽車 M色口音、精密導動布局
Bugatti - 奢侈超級車電影黑畫布單色的收縮偉大的展示類型
Ferrari - 奢侈汽車 Chiaroscuro黑白社論,
Lamborghini - 奢侈汽車真正的黑色大教堂,金色口音,蘭博Type定制的Neo-Grotesk
Renault - 法國汽車公司動力極光梯度, NouvelR 專有型態, 0 光度按鍵
Tesla - 電車極小的減法、影院全視門攝影、世界聖誕老人

復古網站 · DESIGN.md 懷舊風格

周六系列 – DESIGN. 讓你的人工智能代理建立期間準確的Uintage UI

Dell (1996) - 星表時代企業網. 字面黑頁框, 平整的顏色區塊「肋骨卡」, 暴雨、獎章、裝飾品照片
Nintendo.com (2001) - Y2K”锥形铬”网. 透過電路板英雄球場, 以及像素馬利奧歡迎泡泡,

每份 DESIGN.md 包含哪些內容

每個檔案都遵循Stitch DESIGN.md 格式有延伸區段 :

#	款次	它抓住的是什么
1	視覺主題與大气	混合、密度、設計哲學
2	彩色調色板角色( D)	語法名稱 + ix + 功能角色
3	字法規則	字型家族, 完整階級表
4	元件	按鈕、卡片、輸入、與狀態的通訊
5	佈局原理	間距大小、网格、空白哲學
6	深度與高度	影子系統, 表面階層
7	做和不做	防護鐵和防毒面具
8	反應行為	中斷點、觸摸目標、崩潰策略
9	代理提示指南	快速顏色參考, 即時使用提示

每一网站包括:

文件	目的
`DESIGN.md`	設計系統( 代理書目)
`preview.html`	顯示顏色表、型號、按鈕、牌的視覺目錄
`preview-dark.html`	黑色表面的同一個目錄

使用方式

复制網站DESIGN.md插入您的專案根
叫你的人工智能特工用它

貢獻

看捐款指南。

改善已有檔案: 修正錯誤的顏色, 缺少的符號, 描述薄弱
文件: 如果有東西在望, 告訴我們

在開公關前,請開啟一期首先討論你的主意從維護者那里得到回應

授權

麻省理工學院執照自由

這個寄存器是從公共網站提取的設計系統文件的整理集。所有 DESIGN. md 檔案都是「照樣」提供的, 沒有保證。提取的設計符號代表了公開可见的 CSS 值。我們不聲稱擁有任何網站的視覺身份這些文件的存在有助于AI代理產生一致的UI.

HagiCode

HagiCode 是面向專案開發的 AI 編碼工作台：豐富、便利的介面互動讓規劃、Agent 執行與專案工作更容易上手和跟進，帶來更投入的開發體驗。

透過豐富、便利的介面互動，讓規劃、Agent 執行與專案工作更容易上手和跟進。

造訪 HagiCode 閱讀文件

智慧OpenSpec 工作流程將意圖轉化為從提案、設計、任務到交付的可執行路徑。
高效多 Agent 並行推進研究、實作與審查，並支援多儲存庫變更與你熟悉的 Agent CLI。
有趣豐富、便利的介面互動讓規劃、Agent 執行與專案工作更容易上手和跟進，帶來更投入的開發體驗。

下載 Windows 版

從 Microsoft Store 取得

所有下載

HagiCode 透過豐富、便利的介面互動，讓規劃、Agent 執行與專案工作更容易上手和跟進：https://www.hagicode.com/

讓想法化為交付成果。

HagiCode 是面向專案開發的 AI 編碼工作台：以 OpenSpec 工作流程規劃變更，多 Agent 並行執行，再由 Hero Scenario 讓進度一目了然，將想法化為交付成果。

下載 HagiCode 產品文件

智慧: OpenSpec 工作流程將意圖轉化為從提案到交付的可執行路徑。
高效: 多 Agent 並行推進研究、實作與審查。
有趣: 豐富、便利的介面互動，讓規劃、Agent 執行與專案工作更容易跟進。