# 5 流派真实参考站点

> 参考是用来**抄结构 / 学手感**的，不是用来照搬的。看完关掉，再写自己的。
> 商用敏感：huashu-design 项目仅个人 license，所有结构 / 工作流参考必须改写后落地。

## 1. BOLD-MINIMAL

- [Stripe](https://stripe.com) — 业内勇敢极简天花板，注意 hero 字号节奏
- [Linear](https://linear.app) — 黑底版的极简样板
- [Vercel](https://vercel.com) — 几何排版与极锐利强调色
- [Apple · Newsroom](https://www.apple.com/newsroom/) — 大字 hero + 衬线 + 单强调
- [Pitch](https://pitch.com) — 强调色更跳，但留白依旧

## 2. EDITORIAL

- [The New York Times Magazine](https://www.nytimes.com/section/magazine) — 数字版杂志范本
- [The Verge](https://www.theverge.com/) — 现代化编辑感
- [Pitchfork](https://pitchfork.com) — 评分文章的栅格密度
- [It's Nice That](https://www.itsnicethat.com) — 设计杂志的当代演绎
- [The Markup](https://themarkup.org) — 调查报道，衬线为主

## 3. BRUTALIST

- [Bloomberg Businessweek · 特别报道](https://www.bloomberg.com/businessweek) — 粗黑边、错位标题
- [Are.na](https://www.are.na) — 网格暴露，零装饰
- [Read.cv](https://read.cv) — Mono + 极致黑白
- [Praxis](https://www.praxis.cool) — 当代 brutalist 教科书
- 反例：自我标榜 brutalist 但只是把字调粗的 SaaS landing → **不要看**

## 4. RETRO-FUTURE

- [Cyberpunk 2077 · Official](https://www.cyberpunk.net/cn/zh) — 霓虹双色对撞
- [Are.na · Vaporwave](https://www.are.na/search?q=vaporwave) — 80s 美学合集
- [Replit](https://replit.com)（部分 landing） — 终端 / mono 与现代结合
- [The Outpost](https://outpost.pub) — neon + grain 的现代演绎
- 反例：任何"紫渐变蓝"的 SaaS 落地页 → **不要看**

## 5. ORGANIC

- [Notion · 早期版本](https://web.archive.org/web/2018*/notion.so) — 暖底 + 不规则插画
- [Medium · Stories](https://medium.com) — 衬线 + 暖纸感
- [Headspace](https://www.headspace.com) — 圆滑形状 + 柔色
- [Mailchimp](https://mailchimp.com) — 手绘插画 + 暖色组合
- [Squarespace · Templates "Five"](https://www.squarespace.com) — 手写体出现的尺度

## 6. MOBILE-NATIVE · 移动原生 ⭐v2.1

### 6.1 iOS HIG

- [Apple HIG 官方](https://developer.apple.com/design/human-interface-guidelines/) — 必读，所有结构规范
- [Apple Music](https://www.apple.com/cn/apple-music/) — 自家 App，不用系统蓝的最佳范例
- [Things 3 by Cultured Code](https://culturedcode.com/things/) — HIG 教科书级 GTD 应用
- [Linear · iOS App](https://linear.app) — 现代化 HIG 典范
- [SwiftUI Component Library](https://www.swiftuiux.com/) — 抄结构不抄默认皮

### 6.2 Material Design 3

- [m3.material.io](https://m3.material.io/) — 官方 token / component 文档
- [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) — seed → dynamic color 在线生成
- [Google Calendar / Tasks · Android](https://play.google.com/store/apps/details?id=com.google.android.calendar) — 第一方 MD3 示范
- [Read You](https://github.com/Ashinch/ReaderYou) — 开源 MD3 RSS 客户端，Compose 全栈
- 反例：直接套 Material UI 默认紫的 web mock → **不要看**

### 6.3 HarmonyOS 鸿蒙

- [HarmonyOS 设计指南官方](https://developer.huawei.com/consumer/cn/design/) — 必读
- [华为商城 App](https://m.vmall.com/) — 一方应用，灵动色块 + 大圆角范本
- [华为运动健康 App](https://consumer.huawei.com/cn/mobileservices/health/) — 数据可视化与场景化
- [鸿蒙生态合作 App 精选](https://developer.huawei.com/consumer/cn/forum/) — 论坛精华案例集
- 反例：套 EMUI 默认皮没改 token 的 demo → **不要看**

## 7. 小程序（MOBILE-NATIVE 子集）⭐v2.2

### 7.1 微信小程序

- [微信小程序设计指南](https://developers.weixin.qq.com/miniprogram/design/) — 平台官方
- 喜茶 / 茶颜悦色 / Manner 小程序 — 自有 brand color，**不套 WeUI 默认绿**的样板
- 三顿半小程序 — 极简 + 排版 + 暖色，对标 ORGANIC 流派
- 即刻小程序 — 内容型小程序的字体 / 间距功底
- 反例：所有 hero 都是「全屏 banner + 5 个圆角胶囊 + 商品 grid」千篇一律的 → **不要看**

### 7.2 支付宝小程序

- [支付宝小程序设计指南](https://opendocs.alipay.com/mini/design) — 平台官方
- 蚂蚁森林 / 蚂蚁庄园 / 健康码 — 蚂蚁系一方应用，灵动卡片 + 微动效
- 飞猪 / 口碑 / 大众点评（部分 H5）— 内容密度的极致样板
- 反例：直接套 antd-mini 默认皮的 demo → **不要看**

### 7.3 抖音小程序 ⭐v4.2

- [抖音开放平台 · 设计指南](https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/) — 平台官方
- 抖音电商一方小程序（如"抖音商城")— 视频流 + 商品卡的样板
- 各品牌抖音小程序 hero 视频（不强求 starter 复刻，看节奏即可）
- 反例：直接套 TTUI / Tt-Mini-UI 默认皮的 demo → **不要看**

### 7.4 快手小程序 ⭐v4.3

- [快手小程序开放平台](https://mp.kuaishou.com/docs/develop/) — 平台官方文档
- 快手商城小程序 — 一方应用，电商场景的样板
- 快手主播店铺小程序 — 内容驱动型小程序的导购卡片
- 反例：直接套 KSUI / kuaishou-uikit 默认皮的 demo → **不要看**

### 7.5 四端通用参考

- [Awesome MiniApp](https://github.com/topics/miniapp) — GitHub 上多端框架与精选
- 「小程序设计周刊」公众号 — 行业更新
- [Taro](https://taro-docs.jd.com/) / [Uni-app](https://uniapp.dcloud.net.cn/) — 三端编译框架，自动复用代码

---

## 看参考的姿势

1. 一次只看 1 个流派，看完关掉再开下一个
2. 每个站点 ≤ 5 分钟，记住 1 个具体细节就够（不是整体氛围）
3. 写代码前再看一次 SKILL.md §四 硬红线，确保没顺手抄回 AI Slop
4. 抄完检查：oklch 配色 ✓、非默认字体 ✓、无紫渐变 ✓、无圆角 + 左竖条卡片 ✓、无统一 16px 圆角 ✓