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 代理“ 建立一个这样的页面 ” , 并生成与设计语言保持视觉一致的高质量 UI 。

以真实的设计深度——包括分析的图案,符号,规则——为高质量UI生成,而不是表面级输出.

什么是 DESIGN.md？

DESIGN.md 是Google Stitch提出的一个新概念。 一个纯文本设计系统文件,AI代理读取生成一致的UI.

这只是一个减记文件。 没有Figma出口 没有JSON计划 没有特殊的工具 把它扔到您的项目根中, 任何AI编码代理 或Google Stitch 立即理解你的UI应该是什么样子 。 Markdown是 LLMs 读得最好的格式,所以没有任何分析或配置.

文件	谁看的?	它的定义
AGENTS.md	编码代理	如何建设项目
DESIGN.md	设计代理人	项目的外观和感觉

此 repo 提供可随时使用的 DESIGN. md 文件摘自真实网站.

申请 DESIGN.md

你当然可以申请 DESIGN.md 特定网站,包括专门为您提出的私人请求。

AI 设计与开发生态工具

你用AI运送产品,但每次发射都静静地死去,因为没有人发表有关它的文章.EveryFeed 将你的AI助理插入一个社会工作空间, 负责起草、安排和发布35+频道—— 没有代理, 没有营销雇佣。

👉 展示您的产品，与使用 AI 编码代理和网页构建工具打造界面的开发者、设计师和氛围编程者并列。 在GitHub上全球排名为#150. 一个被开发者,设计者,和气温编码器使用的社区资源.

收录内容

AI 与 LLM 平台

• Claude - Anthropic的人工智能助手. 温暖的terracotta口音,干净的编辑版式
• Cohere - 企业AI平台. 振动梯度,数据丰富的仪表板美学
• ElevenLabs - AI语音平台. 黑暗影视UI,音频波形美学
• Minimax - AI型号供应商. 粗体带有霓虹口音的暗界面
• Mistral AI - 开放式LLM供应商. 法国工程的最小化,紫色
• Ollama - 本地运行 LLMS 。 终端第一,单色简洁
• OpenCode AI - AI编码平台. 以开发者为中心的黑暗主题
• Replicate - 通过API运行ML模型. 干净的白色帆布, 代码前导
• Runway - AI创意工具平台 配有编辑电影-节日美学——电影黑暗英雄,纸白阅读乐队,单专有桑,纯黑丸CTAs.
• Together AI - 开源AI基础设施. 技术、蓝图式设计
• VoltAgent - AI代理框架. 浮雕黑帆布、翡翠口音、终极内在
• xAI - 埃隆·穆斯克的人工智能实验室. 斯塔克一色调,未来主义的最小主义

开发工具与 IDE

• Cursor - AI-第一代码编辑器. Sleek 暗界面,梯度重音
• Expo - 反应原生平台. 黑暗主题, 紧凑的字母间隔, 代码中心
• Lovable - AI全垒打建设者. 游戏的梯度, 友好的 dev 美学
• Raycast - 生产力发射器。 Sleek 深色铬,充满活力的梯度口音
• Superhuman - 快递客户端. Premium 暗 UI, 键盘第一, 紫色光
• Vercel - 前端部署平台. 黑白精度, Geist 字体
• Warp - 现代终端. 类似 Dark 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 - 全能工作空间. 温暖的最小化, 静音标题, 软表面
• Resend - 为开发者发送电子邮件 API. 最小的黑暗主题, 单空重音
• Zapier - 自动化平台. 温暖的橙色,友好的插图驱动

设计与创意工具

• Airtable - 电子表格-数据库混合。 彩色、友好、结构化的数据美学
• Clay - 创意机构. 有机形状、软梯度、艺术定向布局
• Figma - 协作设计工具. 充满活力的多颜色, 玩的又专业
• Framer - 网站建设者. 粗体黑色和蓝色,先动,先设计
• Miro - 视觉协作. 明亮的黄色口音,无限的画布美学
• Webflow - 视觉网建设者. 蓝调、光泽的市场美学

金融科技与加密货币

• Binance - 密码交换 单色的粗体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 - 4. 空间技术。 史塔克 黑白 丰满的影像 未来
• Spotify - 音乐流传. 深色、粗体、专辑艺术驱动的生动绿色
• The Verge - 科技社论媒体. 酸薄和紫外线口音,马努卡显示类型
• Uber - 流动平台. 粗体黑白 紧身型 城市能源
• Vodafone - 全球电信品牌. 单词大写显示, Vodafone 红色章节带
• WIRED - 科技杂志. 纸张- 白色宽表密度, 自定义的 serif, 墨水- 蓝色链接

汽车

• BMW - 奢侈汽车. 黑暗的溢价表面,精确的德国工程美学
• BMW M - 性能汽车. 汽车运动启发式对比,M色口音,精密驱动布局
• Bugatti - 奢侈超车. 电影黑色画布 单色的紧缩 巨大的展示类型
• Ferrari - 奢侈汽车. Chiaroscuro黑白社论,法拉利红极稀少
• Lamborghini - 奢侈汽车. 真正的黑色大教堂,金色口音,兰博Type风俗 Neo-Grotesk
• Renault - 法国汽车. 紫极度梯度、 NouvelR 专有类型面、 零辐射按钮
• Tesla - 电动车辆. 激进减法、电影全视场摄影、世界圣人

复古网站 · DESIGN.md 怀旧风格

周六系列——DESIGN.md从1990年代的网络上提取的文件. 放下一个 告诉你的人工智能代理 建立一个周期精确的虚拟界面

• Dell (1996) - 目录时代企业网. 字面黑页框,平面色块”肋骨牌”,块状的Helvetica-Black标题凌驾于Times Roman body之上,以及手剪GIF标签(NEW! 冲锋枪、奖章、贝贝产品照片)。
• Nintendo.com (2001) - Y2K”锥形铬”网. Brushed-periwinkle的金属面板,半圆形的碳导航发光琥珀,在电路板英雄场上概述了Arial-Black盒艺术字签,以及像素马里奥欢迎泡.

每份 DESIGN.md 包含哪些内容

每个文件都遵循Stitch DESIGN.md 格式 有扩展的段落:

#	节次	它捕捉到的东西
1	视觉主题和大气	潮湿、密度、设计哲学
2	颜色调色板角色( L)	语义名称 + hex + 功能角色
3	字法规则	字体家族, 完整的等级表
4	组件样式	按钮、卡片、输入、状态导航
5	布局原理	间距缩放、 网格、 空白哲学
6	深度与高度	影子系统,表面等级
7	做和别做	设计护栏和防标
8	反应行为	断点、触摸目标、崩溃战略
9	代理快速指南	快速颜色参考, 随时可用提示

每个网站包括:

文件	目的
DESIGN.md	设计系统(代理阅读)
preview.html	显示颜色表、类型尺度、按钮、牌的视觉目录
preview-dark.html	黑色表面的相同目录

使用方法

1. 复制一个网站的DESIGN.md输入您的工程根
2. 告诉你的人工智能特工使用它。

贡献

见捐款额 准则。

• 改进现有文件: 修正错误的颜色, 缺少的符号, 描述薄弱
• 报告问题曰:若有东西视而不见,请知之.

在打开公关前,请打开一个问题 首先讨论你的想法,并获得维护者的反馈.

许可证

麻省理工学院执照 - 看自由主义

这个寄存器是从公共网站提取的设计系统文件的整理汇编. 所有DESIGN.md文件都提供”as is”,没有保证. 提取的设计符代表了公开可见的CSS值. 我们不声称拥有任何地点的视觉身份。 这些文件的存在是为了帮助AI代理生成一致的UI.