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。