# hello-design

**Repository Path**: dkbnull/hello-design

## Basic Information

- **Project Name**: hello-design
- **Description**: 中国互联网产品官网设计系统集合。基于真实网站提取 DESIGN.md 设计规范文档，配合可视化 HTML 预览，帮助 AI 编码工具生成视觉一致的 UI。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-08
- **Last Updated**: 2026-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">
  Hello Design
</h1>
<p align="center">
  <a href="https://github.com/dkbnull/hello-design" target="_blank">
     <img src="https://img.shields.io/badge/GitHub-仓库-blue?logo=github">
  </a>
  <a href="https://gitee.com/dkbnull/hello-design" target="_blank">
     <img src="https://img.shields.io/badge/Gitee-仓库-red?logo=gitee">
  </a>
  <img src="https://img.shields.io/badge/License-MIT-yellow">
</p>
<p align="center">
  <img src="https://img.shields.io/badge/协同办公_效率工具-8-brightgreen">
  <img src="https://img.shields.io/badge/开发者工具_AI_IDE-5-blue">
  <img src="https://img.shields.io/badge/项目管理_协作-3-blueviolet">
  <img src="https://img.shields.io/badge/设计工具-2-9cf">
  <img src="https://img.shields.io/badge/支付_金融-7-red">
  <img src="https://img.shields.io/badge/云服务_通信-5-orange">
  <img src="https://img.shields.io/badge/电商_建站-4-yellow">
  <img src="https://img.shields.io/badge/出行_住宿-3-green">
  <img src="https://img.shields.io/badge/消费_科技-2-inactive">
</p>

## 项目简介

中国互联网产品官网设计系统集合。基于真实网站提取 DESIGN.md 设计规范文档，配合可视化 HTML 预览，帮助 AI 编码工具生成视觉一致的 UI。

## DESIGN.md

将 `DESIGN.md` 文件复制到你的项目中，然后对你的 AI 智能体说：“为我构建一个看起来像这样的页面”，即可生成与该设计语言保持视觉一致的高质量用户界面。

本方案基于真实的设计深度构建——包括经过分析的模式、设计令牌（tokens）和规则——旨在生成高质量的用户界面，而非浅层次的输出。

## 什么是 DESIGN.md？

[DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview/) 是 Google Stitch 提出的概念——一份纯文本设计系统文档，AI智能体读取后可生成风格一致的 UI。

只需将 DESIGN.md 放入项目根目录，任何 AI 编码智能体即可理解你的 UI 应该长什么样。

| 文件 | 谁读取 | 定义什么 |
|------|--------|----------|
| `AGENTS.md` | 编码智能体 | 如何构建项目 |
| `DESIGN.md` | 设计智能体 | 项目应该看起来什么样 |

## 收录

共收录 **41** 个中国互联网产品官网的设计系统分析。

### 协同办公 & 效率工具

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| 飞书 | https://www.feishu.cn/ | [feishu](designs/feishu/) | 飞书蓝品牌色，6个AI功能Tab切换，产品矩阵三维度展示 |
| 飞书多维表格 | https://www.feishu.cn/product/base | [feishu-base](designs/feishu-base/) | 飞书蓝体系，AI生成卡片，多维表格交互预览 |
| 飞书日历 | https://www.feishu.cn/product/calendar | [feishu-calendar](designs/feishu-calendar/) | 飞书蓝体系，AI会议卡片，日历视图交互 |
| 钉钉 | https://www.dingtalk.com/ | [dingtalk](designs/dingtalk/) | 钉钉蓝品牌色，产品轮播卡片，AI产品卡片与角色标签 |
| 语雀 | https://www.yuque.com/ | [yuque](designs/yuque/) | 语雀绿品牌色，知识库文档风格，编辑器原生体验 |
| Wolai | https://www.wolai.com/ | [wolai](designs/wolai/) | Wolai紫品牌色，块编辑器风格，Notion-like界面 |
| Tower | https://tower.im/ | [tower](designs/tower/) | Tower蓝品牌色，项目管理看板风格，简洁工具感 |
| boardmix博思白板 | https://boardmix.cn/ | [boardmix](designs/boardmix/) | 博思蓝品牌色，AI标识渐变，白板无限画布美学 |

### 开发者工具 & AI IDE

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| TRAE | https://www.trae.cn/ | [trae](designs/trae/) | 深色画布，亮蓝强调色，编号式功能导航，AI渐变光晕 |
| 腾讯云CodeBuddy | https://www.codebuddy.ai/ | [codebuddy](designs/codebuddy/) | 深色IDE风格，场景标签页，AI徽章，阶段卡片 |
| 腾讯云EdgeOne Pages | https://pages.edgeone.ai/ | [edgeone-pages](designs/edgeone-pages/) | 深色终端美学，代码高亮，部署按钮，模板卡片 |
| 阿里云函数计算 | https://www.aliyun.com/product/fc | [aliyun-fc](designs/aliyun-fc/) | 阿里云橙品牌色，流程节点，代码块，技术文档风格 |
| 稀土掘金 | https://juejin.cn/ | [juejin](designs/juejin/) | 掘金蓝品牌色，标签色体系，开发者社区信息密度 |

### 项目管理 & 协作

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| PingCode | https://pingcode.com/ | [pingcode](designs/pingcode/) | PingCode蓝品牌色，CTA按钮，项目管理工具感 |
| ONES | https://ones.cn/ | [ones](designs/ones/) | ONES蓝品牌色，Logo墙，CTA按钮，企业级简洁 |
| 维格表Vika | https://vika.cn/ | [vika](designs/vika/) | Vika多彩品牌色，电子表格风格，数据驱动美学 |

### 设计工具

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| Pixso | https://pixso.cn/ | [pixso](designs/pixso/) | Pixso紫品牌色，设计工具原生感，CTA按钮 |
| 即时设计 | https://js.design/ | [jsdesign](designs/jsdesign/) | 即时设计蓝品牌色，Figma-like界面，CTA按钮 |

### 支付 & 金融

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| 支付宝 | https://www.alipay.com/ | [alipay](designs/alipay/) | 支付宝蓝品牌色，信任感设计，金融级安全感 |
| 支付宝国际汇款 | https://global.alipay.com/ | [alipay-global](designs/alipay-global/) | 支付宝蓝体系，国际化留白，跨境汇款流程可视化 |
| 微信支付 | https://pay.weixin.qq.com/ | [wechat-pay](designs/wechat-pay/) | 微信绿品牌色，简洁信任感，支付安全视觉 |
| 银联云闪付 | https://cn.unionpay.com/ | [unionpay](designs/unionpay/) | 银联红品牌色，金融权威感，支付场景展示 |
| 熊猫速汇 | https://www.pandaremit.com/ | [pandaremit](designs/pandaremit/) | 熊猫绿品牌色，跨境汇款流程，CTA按钮 |
| 微众银行 | https://www.webank.com/ | [webank](designs/webank/) | 微众蓝品牌色，数字银行简洁感，金融科技风 |
| 网商银行 | https://www.mybank.cn/ | [mybank](designs/mybank/) | 网商橙品牌色，小微企业金融，温暖服务感 |

### 云服务 & 通信

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| 腾讯 | https://www.tencent.com/zh-cn/ | [tencent](designs/tencent/) | 腾讯蓝品牌色，企业门户大气感，科技与人文结合 |
| 腾讯轻联 | https://hiflow.tencent.com/ | [hiflow](designs/hiflow/) | 腾讯蓝体系，流程节点，应用Logo网格，模板卡片 |
| 腾讯云邮件推送 | https://cloud.tencent.com/product/ses | [tencent-ses](designs/tencent-ses/) | 腾讯云蓝品牌色，技术文档风格，云服务专业感 |
| 阿里云邮件推送 | https://www.alibabacloud.com/product/directmail | [aliyun-directmail](designs/aliyun-directmail/) | 阿里云橙品牌色，技术产品页，留白哲学 |
| 网易邮箱大师 | https://dashi.163.com/ | [dashi163](designs/dashi163/) | 网易红品牌色，邮件客户端原生感，平台下载按钮 |

### 电商 & 建站

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| 店匠Shoplazza | https://www.shoplazza.com/ | [shoplazza](designs/shoplazza/) | Shoplazza蓝品牌色，AI建站卡片，FAQ手风琴 |
| Shopline | https://shoplineapp.cn/ | [shopline](designs/shopline/) | Shopline绿品牌色，CTA按钮，Slogan展示 |
| 凡科建站 | http://jz.faisco.com/ | [faisco](designs/faisco/) | 凡科橙品牌色，模板卡片，促销徽章，行业筛选 |
| 上线了 | https://www.sxl.cn/ | [sxl](designs/sxl/) | 上线了蓝品牌色，建站模板展示，简洁SaaS风格 |

### 出行 & 住宿

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| 滴滴出行 | https://www.didiglobal.com/ | [didi](designs/didi/) | 滴滴橙品牌色，新闻卡片，社会价值卡片，留白哲学 |
| 途家民宿 | https://www.tujia.com/ | [tujia](designs/tujia/) | 途家橙品牌色，民宿摄影驱动，温暖旅行感 |
| 小猪民宿 | https://www.xiaozhu.com/ | [xiaozhu](designs/xiaozhu/) | 小猪粉品牌色，民宿图片网格，搜索为中心 |

### 消费 & 科技

| 网站 | 官网 | 目录 | 设计特征 |
|------|------|------|----------|
| 小米 | https://www.mi.com/ | [xiaomi](designs/xiaomi/) | 小米橙品牌色，产品大图驱动，极简电商美学 |
| 比亚迪 | https://www.byd.com/ | [byd](designs/byd/) | 比亚迪深色体系，车系入口，全屏摄影，极细线美学 |

## 每个目录包含什么

| 文件 | 用途 |
|------|------|
| `DESIGN.md` | 设计系统规范（YAML front matter + Markdown），AI 智能体读取此文件 |
| `README.md` | 网站名称与官网地址 |
| `index.html` | 可视化预览页面，展示色板、排版、圆角、间距、组件 |

## DESIGN.md 包含什么

每个文件遵循 [Stitch DESIGN.md 格式](https://stitch.withgoogle.com/docs/design-md/specification/)，包含：

| # | 章节 | 内容 |
|---|------|------|
| 1 | 概览 | 视觉主题、氛围、设计哲学 |
| 2 | 色彩 | 品牌色、表面色、文字色、语义色（含 hex 值与功能角色） |
| 3 | 排版 | 字体族、完整层级表（字号/字重/行高/字距） |
| 4 | 布局 | 间距体系、网格、留白哲学 |
| 5 | 层级与深度 | 阴影体系、表面层级、装饰深度 |
| 6 | 形状 | 圆角体系、摄影与插画几何 |
| 7 | 组件 | 按钮、卡片、导航、Tab 等组件及其状态 |

## 如何使用

1. 找到目标网站的 `DESIGN.md` 文件
2. 复制到你的项目根目录
3. 告诉 AI 智能体："按照 DESIGN.md 的风格生成页面"

## 本地预览

```bash
# 安装依赖并启动预览服务器
npx http-server designs -p 8080
```

浏览器打开 http://localhost:8080 ，点击任意目录下的 `index.html` 查看可视化设计系统。

## 致谢

参考项目 [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) 提供了 DESIGN.md 格式规范与国际网站设计分析。

## License

MIT License - 详见 [LICENSE](LICENSE)

本仓库是从公开网站中提取的设计系统文档的精选合集。所有 `DESIGN.md` 文件均按“原样”提供，不附带任何担保。提取的设计令牌（design tokens）代表公开可见的 CSS 值。我们不主张对任何网站视觉形象的所有权。这些文档的存在旨在帮助 AI 智能体生成视觉一致的 UI。