# 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

Hello Design

## 项目简介 中国互联网产品官网设计系统集合。基于真实网站提取 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。