Hello Design
项目简介
中国互联网产品官网设计系统集合。基于真实网站提取 DESIGN.md 设计规范文档，配合可视化 HTML 预览，帮助 AI 编码工具生成视觉一致的 UI。
DESIGN.md
将 DESIGN.md 文件复制到你的项目中，然后对你的 AI 智能体说：“为我构建一个看起来像这样的页面”，即可生成与该设计语言保持视觉一致的高质量用户界面。
本方案基于真实的设计深度构建——包括经过分析的模式、设计令牌（tokens）和规则——旨在生成高质量的用户界面，而非浅层次的输出。
什么是 DESIGN.md？
DESIGN.md 是 Google Stitch 提出的概念——一份纯文本设计系统文档，AI智能体读取后可生成风格一致的 UI。
只需将 DESIGN.md 放入项目根目录，任何 AI 编码智能体即可理解你的 UI 应该长什么样。
| 文件 | 谁读取 | 定义什么 |
|---|---|---|
AGENTS.md |
编码智能体 | 如何构建项目 |
DESIGN.md |
设计智能体 | 项目应该看起来什么样 |
收录
共收录 41 个中国互联网产品官网的设计系统分析。
协同办公 & 效率工具
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| 飞书 | https://www.feishu.cn/ | feishu | 飞书蓝品牌色，6个AI功能Tab切换，产品矩阵三维度展示 |
| 飞书多维表格 | 飞书多维表格｜AI 驱动的表格与业务系统搭建平台 - 飞书官网 | feishu-base | 飞书蓝体系，AI生成卡片，多维表格交互预览 |
| 飞书日历 | 飞书日历｜可共享的智能团队日程与会议管理工具 - 飞书官网 | feishu-calendar | 飞书蓝体系，AI会议卡片，日历视图交互 |
| 钉钉 | https://www.dingtalk.com/ | dingtalk | 钉钉蓝品牌色，产品轮播卡片，AI产品卡片与角色标签 |
| 语雀 | https://www.yuque.com/ | yuque | 语雀绿品牌色，知识库文档风格，编辑器原生体验 |
| Wolai | https://www.wolai.com/ | wolai | Wolai紫品牌色，块编辑器风格，Notion-like界面 |
| Tower | https://tower.im/ | tower | Tower蓝品牌色，项目管理看板风格，简洁工具感 |
| boardmix博思白板 | https://boardmix.cn/ | boardmix | 博思蓝品牌色，AI标识渐变，白板无限画布美学 |
开发者工具 & AI IDE
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| TRAE | https://www.trae.cn/ | trae | 深色画布，亮蓝强调色，编号式功能导航，AI渐变光晕 |
| 腾讯云CodeBuddy | https://www.codebuddy.ai/ | codebuddy | 深色IDE风格，场景标签页，AI徽章，阶段卡片 |
| 腾讯云EdgeOne Pages | https://pages.edgeone.ai/ | edgeone-pages | 深色终端美学，代码高亮，部署按钮，模板卡片 |
| 阿里云函数计算 | 函数计算FC - 全托管Serverless计算服务 - 弹性高可用 - 阿里云 | aliyun-fc | 阿里云橙品牌色，流程节点，代码块，技术文档风格 |
| 稀土掘金 | https://juejin.cn/ | juejin | 掘金蓝品牌色，标签色体系，开发者社区信息密度 |
项目管理 & 协作
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| PingCode | https://pingcode.com/ | pingcode | PingCode蓝品牌色，CTA按钮，项目管理工具感 |
| ONES | https://ones.cn/ | ones | ONES蓝品牌色，Logo墙，CTA按钮，企业级简洁 |
| 维格表Vika | https://vika.cn/ | vika | Vika多彩品牌色，电子表格风格，数据驱动美学 |
设计工具
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| Pixso | https://pixso.cn/ | pixso | Pixso紫品牌色，设计工具原生感，CTA按钮 |
| 即时设计 | https://js.design/ | jsdesign | 即时设计蓝品牌色，Figma-like界面，CTA按钮 |
支付 & 金融
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| 支付宝 | https://www.alipay.com/ | alipay | 支付宝蓝品牌色，信任感设计，金融级安全感 |
| 支付宝国际汇款 | https://global.alipay.com/ | alipay-global | 支付宝蓝体系，国际化留白，跨境汇款流程可视化 |
| 微信支付 | https://pay.weixin.qq.com/ | wechat-pay | 微信绿品牌色，简洁信任感，支付安全视觉 |
| 银联云闪付 | https://cn.unionpay.com/ | unionpay | 银联红品牌色，金融权威感，支付场景展示 |
| 熊猫速汇 | https://www.pandaremit.com/ | pandaremit | 熊猫绿品牌色，跨境汇款流程，CTA按钮 |
| 微众银行 | https://www.webank.com/ | webank | 微众蓝品牌色，数字银行简洁感，金融科技风 |
| 网商银行 | https://www.mybank.cn/ | mybank | 网商橙品牌色，小微企业金融，温暖服务感 |
云服务 & 通信
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| 腾讯 | Tencent 腾讯 | tencent | 腾讯蓝品牌色，企业门户大气感，科技与人文结合 |
| 腾讯轻联 | https://hiflow.tencent.com/ | hiflow | 腾讯蓝体系，流程节点，应用Logo网格，模板卡片 |
| 腾讯云邮件推送 | 邮件推送SES_邮箱推送_邮件营销- 腾讯云 | tencent-ses | 腾讯云蓝品牌色，技术文档风格，云服务专业感 |
| 阿里云邮件推送 | 邮件推送_事务邮件_通知邮件_批量邮件-阿里云 | aliyun-directmail | 阿里云橙品牌色，技术产品页，留白哲学 |
| 网易邮箱大师 | https://dashi.163.com/ | dashi163 | 网易红品牌色，邮件客户端原生感，平台下载按钮 |
电商 & 建站
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| 店匠Shoplazza | https://www.shoplazza.com/ | shoplazza | Shoplazza蓝品牌色，AI建站卡片，FAQ手风琴 |
| Shopline | https://shoplineapp.cn/ | shopline | Shopline绿品牌色，CTA按钮，Slogan展示 |
| 凡科建站 | http://jz.faisco.com/ | faisco | 凡科橙品牌色，模板卡片，促销徽章，行业筛选 |
| 上线了 | https://www.sxl.cn/ | sxl | 上线了蓝品牌色，建站模板展示，简洁SaaS风格 |
出行 & 住宿
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| 滴滴出行 | https://www.didiglobal.com/ | didi | 滴滴橙品牌色，新闻卡片，社会价值卡片，留白哲学 |
| 途家民宿 | https://www.tujia.com/ | tujia | 途家橙品牌色，民宿摄影驱动，温暖旅行感 |
| 小猪民宿 | https://www.xiaozhu.com/ | xiaozhu | 小猪粉品牌色，民宿图片网格，搜索为中心 |
消费 & 科技
| 网站 | 官网 | 目录 | 设计特征 |
|---|---|---|---|
| 小米 | https://www.mi.com/ | xiaomi | 小米橙品牌色，产品大图驱动，极简电商美学 |
| 比亚迪 | https://www.byd.com/ | byd | 比亚迪深色体系，车系入口，全屏摄影，极细线美学 |
每个目录包含什么
| 文件 | 用途 |
|---|---|
DESIGN.md |
设计系统规范（YAML front matter + Markdown），AI 智能体读取此文件 |
README.md |
网站名称与官网地址 |
index.html |
可视化预览页面，展示色板、排版、圆角、间距、组件 |
DESIGN.md 包含什么
每个文件遵循 Stitch DESIGN.md 格式，包含：
| # | 章节 | 内容 |
|---|---|---|
| 1 | 概览 | 视觉主题、氛围、设计哲学 |
| 2 | 色彩 | 品牌色、表面色、文字色、语义色（含 hex 值与功能角色） |
| 3 | 排版 | 字体族、完整层级表（字号/字重/行高/字距） |
| 4 | 布局 | 间距体系、网格、留白哲学 |
| 5 | 层级与深度 | 阴影体系、表面层级、装饰深度 |
| 6 | 形状 | 圆角体系、摄影与插画几何 |
| 7 | 组件 | 按钮、卡片、导航、Tab 等组件及其状态 |
如何使用
- 找到目标网站的
DESIGN.md文件 - 复制到你的项目根目录
- 告诉 AI 智能体：“按照 DESIGN.md 的风格生成页面”
本地预览
# 安装依赖并启动预览服务器
npx http-server designs -p 8080
浏览器打开 http://localhost:8080 ，点击任意目录下的 index.html 查看可视化设计系统。
致谢
参考项目 awesome-design-md 提供了 DESIGN.md 格式规范与国际网站设计分析。
License
MIT License - 详见 LICENSE
本仓库是从公开网站中提取的设计系统文档的精选合集。所有 DESIGN.md 文件均按“原样”提供，不附带任何担保。提取的设计令牌（design tokens）代表公开可见的 CSS 值。我们不主张对任何网站视觉形象的所有权。这些文档的存在旨在帮助 AI 智能体生成视觉一致的 UI。