# Design Skill Lab: design resource catalogue

> 812 hand-curated design resources for designers and coding agents, in 15 domains. One line per resource: name — url — 中文说明 — best for — [tier · reach]. Tier S is the first place to look; reach is what a plain web fetch got (static, js, blocked, unknown).
> Generated from catalog/resources.jsonl, data as of 2026-09-27. Source: https://github.com/caocong1/design-skill-lab

## Websites · 网站设计 (web)

### Curated site galleries · 精选网站画廊
- A1 Gallery — https://a1.gallery — 标签齐全的当代网站画廊，每站拆成内页与区块并附实测配色、字体与间距；另有 MCP 供智能体取结构化数据。 — Broad, well-tagged curation of current sites, each broken into interior pages and sections with a measured colour palette, type stack and spacing [S · static]
- Recent Design — https://recent.design — 每日人工策展的灵感站，Godly 的继承者；除分类网站外还收 OG 图、应用商店截图、应用图标，并有按安装量排的设计 skills 榜。 — Daily human-curated design inspiration and the successor of Godly (godly.website redirected here, checked 2026-09-27): websites by category plus OG images, App Store screenshots, app icons and a ranked list of design agent skills [S · static]
- Siteinspire — https://www.siteinspire.com — 克制耐看的网站画廊（2008 年起 1 万+ 站），偏字体与编辑排版；另有免登录的只读 MCP，智能体可直接检索。 — Long-running, restrained editorial curation (10,000+ sites since 2008); best for typographic, editorial and studio sites with staying power, and the only big gallery with a public no-auth MCP server [S · blocked]
- Httpster — https://httpster.net — 收录风格各异、有性格的网站画廊，专门对冲 SaaS 同质化；想跳出模板感时按类型翻找。 — Eclectic, personality-rich sites; a counterweight to SaaS sameness [A · static]
- Hover States — https://www.hoverstat.es — 收录以交互为创意的实验性网站画廊，先看录屏短片筛选，再打开原站体验真实行为。 — Alternative and experimental web design where interaction is the idea [A · static]
- Curated Design — https://www.curated.design — 分类齐整的网站画廊，全页截图规格统一；适合按类目快速横向扫一遍找方向。 — Clean multi-category gallery with consistent full-page captures [A · static]
- Seesaw — https://www.seesaw.website — 更新快的新站收录，标签细到风格、字体和框架；想找用某种字体的真实网站时来这里筛。 — Fast-moving curation of new sites, tagged by type, style and even typeface [A · static]
- The Whimsical Web — https://whimsical.club — 收录有趣、有个性的个人小站；想给产品加点“人味”和惊喜时挑一个有趣的交互来学，别照搬整站。 — Curated list of personal and small sites with an extra bit of fun; a direct antidote to templated SaaS pages [A · static]
- Minimal Gallery — https://minimal.gallery — 极简网站灵感库，专收留白、字体主导的安静页面；找低饱和、排版驱动的参考时按分类筛选。 — Minimal websites: whitespace, type-led layouts, quiet palettes [A · blocked]
- Klikkentheke — https://klikkentheke.com — 收录平面设计师自己做、给同行看的网站，字体驱动、反模板；brief 要编辑感或艺术学院气质时翻它。 — Websites by and for graphic designers: type-driven, cultural, anti-template [A · blocked]
- Maxibestof — https://maxibestof.one — 偏工作室与作品集的网站库，另拆出区块库（数百个 hero、页脚、功能区）与在用字体库；查单一区块或字体搭配时用。 — Opinionated library of studio and portfolio sites plus the sections they are built from (hundreds of heroes, footers and feature blocks) and the fonts they use [A · blocked]
- Best Website Gallery — https://bestwebsite.gallery — 一位策展人长期维护的优质网站选集，可按颜色和标签筛选；找特定色调或门类的参考时用。 — One curator's long-running pick of quality sites with colour and tag filters [B · static]
- Siiimple — https://siiimple.com — 极简主义网站档案馆，按分类浏览；找简约风格时当 Minimal Gallery 之外的第二来源用。 — Minimalist sites archive; useful second source after Minimal Gallery [B · static]
- Web Design Museum — https://www.webdesignmuseum.org — 1991–2006 年网页设计史档案馆，可按年份或站点时间线浏览；做复古、Y2K 或早期互联网美学时来取证。 — History of web design 1991-2006; reference for retro, Y2K and early-web aesthetics [B · blocked]

### Landing pages and SaaS marketing · 落地页与 SaaS 官网
- One Page Love — https://onepagelove.com — 2008 年起人工精选的单页站与落地页（9000+），每站有整页截图、点评和体裁、风格、平台、字体、区块标签；另有免费免密钥 MCP。 — 9,000+ human-curated one-page sites and landing pages since 2008, each with a full-length screenshot, a written review and tags for genre, style, platform, typeface and page sections [S · static]
- Landingfolio — https://www.landingfolio.com — 落地页灵感库，可按 hero、定价、FAQ、CTA 等组件拆开对比；灵感页免费，模板付费。 — Landing pages plus a component-level view (hero, pricing, FAQ, CTA); templates are paid [A · static]
- LP Archive (LPアーカイブ) — https://rdlp.jp/lp-archive — 4.6 万+ 日本长落地页（LP），每日更新，可按行业、颜色、调性筛；研究日式竖长营销页，但别原样搬给欧美用户。 — 46,000+ Japanese landing pages (LP), updated daily and searchable by industry, colour and taste [A · static]
- Land-book — https://land-book.com — 筛选最细、每日更新的落地页画廊，另有从入选站点裁出的区块库（hero、定价、FAQ、CTA、页脚）；做营销页时的主力参考。 — Largest well-filtered landing-page gallery, updated daily, with a section library (hero, features, pricing, FAQ, CTA, footer…) cropped from featured sites [A · blocked]
- Lapa Ninja — https://www.lapa.ninja — 落地页截图库，整页长图能看出区块顺序；按行业和配色分组，写 landing page 结构前先翻。 — Landing pages with full-page screenshots, grouped by industry and by colour [A · blocked]
- SaaS Landing Page — https://saaslandingpage.com — 只收 SaaS 落地页的图库，可按定价、功能、关于等页面类型筛选，横向对比同类页面的做法。 — SaaS-only landing pages, also sliced by page type (pricing, features, about) [A · blocked]
- Saaspo — https://saaspo.com — SaaS 站点库，按页面、区块类型与风格索引；写 hero、定价、页脚时直接查对应区块。 — SaaS sites indexed by page type, section type, style and stack [A · blocked]
- Landing Love — https://www.landing.love — 专收动效出色的落地页，以视频录屏展示；滚动与加载编排是关键时来这里看。 — Landing pages chosen for their motion, shown as video captures [B · static]

### Section and element galleries · 版块与元素画廊
- Really Good Emails — https://reallygoodemails.com — 邮件设计的标杆参考，按场景分类且每封附 HTML 源码；做 onboarding、收据、newsletter 邮件时查它。 — The reference for email design, with code view per email [S · static]
- Navbar Gallery — https://navbar.gallery — 只收导航：导航栏、超级菜单、下拉、侧边栏和移动端菜单；链接多又带 CTA 时来这里对照。 — Navigation only: navbars, mega menus, dropdowns, sidebars, mobile menus [A · static]
- Supahero — https://supahero.io — 只收 Hero 首屏的专门库；定首屏策略（产品图、大字排版、视频、交互）之前先扫一遍。 — Hero sections only, a focused library of above-the-fold compositions [A · static]
- Unsection — https://www.unsection.com — 按区块分类的网站画廊（首屏、功能、定价、FAQ、页脚等，5000+ 站）；只纠结某一个区块时横向对比十个同类解法。 — Section-first gallery (5,000+ sites) filterable by hero, features, pricing, FAQ, testimonials, team, footer and more [A · static]
- Email Love — https://emaillove.com — 按类型与品牌标签整理的邮件设计精选库；做邮件模板时翻，Really Good Emails 之外的第二来源。 — Curated email designs and components, tagged by type and brand [A · blocked]
- Footer — https://www.footer.design — 只收页脚的灵感站，看导航结构、法律信息、newsletter 与收尾大字排版的做法。 — Footers only: sitemap structure, legal, newsletter, big-type sign-offs [B · static]
- CTA Gallery — https://www.cta.gallery — 真实网站的 CTA 区块与按钮合集；打磨收尾段时对照别人的构图和文案写法。 — Call-to-action sections and buttons from real sites [B · static]
- Pricing Pages — https://pricingpages.design — 定价页与方案表的专项画廊；对比方案数量、推荐方案的强调手法和切换开关的样式。 — Pricing pages and plan tables [B · static]
- 404s — https://www.404s.design — 404 页面合集，错误页和空状态是品牌语气露脸的地方；找文案调性和插画路子时刷一遍。 — 404 pages: a good source for brand voice in error and empty states [B · static]
- Bento Grids — https://bentogrids.com — 真实网站的 bento 网格布局合集，风潮已过；确定要用时再参考它的模块尺寸与节奏。 — Bento-grid layouts collected from real sites [B · js]

### Niche and regional galleries · 细分与地区画廊
- SANKOU! — https://sankoudesign.com — 日本网站画廊，行业、页面、颜色、版式筛选很细；做中文排版时最接近的高质量参照。 — Japanese web gallery with fine-grained filters; the closest high-quality reference for CJK typographic layout [S · static]
- Dark Mode Design — https://www.darkmodedesign.com — 只收深色主题网站，研究暗色界面的表面层级与克制的强调色；要打开原站读真实色值。 — Dark-themed sites only; study surface layering and accent restraint in dark UI [A · static]
- Ecomm.design — https://ecomm.design — 电商网站灵感库，可按平台、品类和技术栈筛选；做时尚、食品、美妆等垂直电商时按类目翻。 — E-commerce sites filterable by platform, category and tech stack [A · static]
- MUUUUU.ORG — https://muuuuu.org — 日本长滚动网站精选，以工艺见长；研究纵向节奏和日英混排字体时的第一站。 — Japanese long-scroll sites curated for craft [A · static]
- Responsive Web Design JP — https://responsive-jp.com — 日本网站三端同屏展示，桌面、平板、手机排版并排对照；研究跨断点重排构图时用它。 — Shows each site at desktop, tablet and phone widths side by side [A · static]
- I/O 3000 — https://io3000.com — 老牌日本网站画廊，可按类目、标签和颜色筛；看日企官网、招聘站的中日文标题字号与行长。 — Long-running Japanese gallery of domestic and overseas sites with category, tag and colour filters [A · static]
- Web Design Clip — https://webdesignclip.com — 收录 6000+ 日本网站，可按行业（企业、招聘、地产…）与技术标签筛；对比日本站点如何排布密集的中日文内容。 — 6,000+ Japanese sites filterable by industry (company, recruit, estate…) and build tag (WordPress, Shopify, Next.js) [A · static]
- Korea Web Design — https://koreawebdesign.com — 精选韩国网站，桌面与移动分开收录；研究韩文排版最好的公开参考，定 CJK 字号行高前与中日站点对照。 — Curated Korean websites with separate desktop and mobile picks; the best public reference for Hangul typographic layout [A · static]
- Bestfolios — https://www.bestfolios.com — 设计师作品集、案例研究与简历的精选库；搭作品集结构、学案例叙事时参考。 — Designer portfolios, case studies and resumes [A · js]
- 81-web.com — https://81-web.com — 日本网页设计画廊，可按类目与颜色筛选；CJK 排版参考的第二来源。 — Japanese web design gallery with category and colour filters [A · js]
- Commerce Cream — https://commercecream.com — 好看电商店面的画廊，多为 Shopify；用来研究真实约束下的商品页与购物车模式。 — Best-looking e-commerce storefronts, mostly Shopify [A · unknown]
- Brutalist Websites — https://brutalistwebsites.com — 粗野主义网站档案，附设计师短访谈；要做生糙、反精致的方向时来这里找参照。 — Web brutalism archive with short designer interviews [B · static]
- personalsit.es — https://personalsit.es — 个人网站目录，全是不商业、有个性的排版与布局；想找非商业版式灵感时随手翻。 — Directory of personal sites; human, idiosyncratic web design [B · static]
- Made in Webflow — https://webflow.com/made-in-webflow — Webflow 社区作品库，含可克隆项目；质量参差，主要用来拆开看交互效果的实现方式。 — Community showcase with cloneable projects; uneven quality, good for interaction mechanics [B · static]
- Framer Gallery — https://www.framer.com/community/gallery/ — Framer 官方作品画廊，反映无代码圈当下的流行风向；当趋势指标看，别当标准。 — Sites built in Framer; shows what is fashionable in the no-code design crowd [B · static]
- S5-Style — https://www.s5-style.com — 高品质日本网站画廊，企业官网、招聘站、服务站居多；判断中日文排版精致度时的第三参考。 — Japanese gallery of high-quality corporate, recruiting and service sites [B · js]

### Award sites · 获奖站点
- Awwwards — https://www.awwwards.com — 网页设计奖项站点，看动效与视觉的野心天花板；评审不管可用性与转化，只当野心参考。 — Jury-scored showcase of ambitious web work; strongest for motion, WebGL and art direction [S · static]
- CSS Design Awards — https://www.cssdesignawards.com — 按 UI、UX 与创新三个维度打分的设计奖项站；拿它做 Awwwards 之外的第二意见。 — Award gallery scored on UI, UX and innovation [A · static]
- The Webby Awards gallery — https://winners.webbyawards.com — Webby 奖获奖与提名作品库，覆盖网站、应用、社媒、视频与 AI 类别；按年份和类别看业界奖励了什么。 — Searchable gallery of Webby winners and nominees across websites, apps, social, video and AI categories [A · static]
- The FWA — https://thefwa.com — 老牌数字体验奖项，偏实验与沉浸式；做活动站或 campaign 类项目时来找前沿参照。 — Long-running award for cutting-edge digital experiences [A · js]
- GDWEB Design Awards — https://www.gdweb.co.kr/main/ — 韩国网页设计奖与作品库（지디웹），本地代理商常用的企业与品牌站参考；看韩文企业站时与 Korea Web Design 对照。 — Korean web design award and gallery that local agencies use as a practical reference for corporate and brand sites [B · static]

### Conversion and copy · 转化与文案
- Marketing Examples — https://marketingexamples.com — 营销拆解博客，用短篇幅分析文案、落地页和转化手法；动笔写 hero 区标题前先读几篇。 — Short, concrete teardowns of copy, landing pages and conversion tactics [S · static]
- Julian Shapiro: Landing Pages — https://www.julian.com/guide/startup/landing-pages — 讲落地页结构最清楚的指南：Hero、社会证明、特性、异议、CTA；当页面叙事的检查清单用。 — The clearest handbook on landing-page structure: hero, social proof, features, objections, CTA [A · static]
- Demand Curve: The Frontier library — https://www.demandcurve.com/frontier-library — 增长团队的实操 playbook 合集，含首屏与落地页拆解；起草 hero 区前先看首屏那一篇。 — Growth playbooks including above-the-fold and landing-page teardowns [A · static]
- GoodUI — https://goodui.org — 带 A/B 测试结果的 UI 模式库，连输掉的方案也公开；提案前先查它有没有证据。 — UI patterns backed by A/B test results, including ones that lost [A · static]
- Mailchimp Content Style Guide — https://styleguide.mailchimp.com — Mailchimp 公开的内容风格指南：写作原则、语气语调、语法、网页元素、邮件与社媒写法；按钮、报错、标题文案的默认规则。 — Public content style guide: writing principles, voice and tone, grammar, web elements, email, social and accessible writing [A · static]
- Swipe File — https://swipefile.com — 广告、落地页与文案的大型 swipe file，附点评；卡在文案表达时按格式检索。 — Large swipe file of ads, landing pages and copy with commentary [B · static]

## Product UI · 产品界面 (app-ui)

### Real-product screens and flows · 真实产品界面与流程
- Mobbin — https://mobbin.com — 真实 App 界面与流程的最大图库，按页面类型、组件和流程检索；免费额度少且需登录。 — Largest library of real app screens and flows across iOS, Android and web, searchable by screen type, UI element and flow [S · static]
- Page Flows — https://pageflows.com — 录屏加标注的真实用户流程库，覆盖引导、升级、退订；问题是流程顺序而非单屏时查，多为付费。 — Recorded user flows (video plus annotated screenshots) for onboarding, upgrading, cancelling and more [A · static]
- SaaSFrame — https://www.saasframe.io — 按类目整理 SaaS 界面：仪表盘、设置、弹窗、表格、邮件加落地页；部分库内容需付费。 — SaaS UI by category: dashboards, settings, modals, tables, emails, plus landing pages [A · static]
- UI Notes — https://uinotes.com — 收录国内应用的界面与流程截图，相当于本土版 Mobbin；用来看国内用户习惯的模式。 — Screens and flows of Chinese apps; the closest equivalent to Mobbin for the domestic market [A · static]
- Really Good UX — https://goodux.appcues.com — 带批注的产品 UX 案例库，引导与激活类最强；按模式筛选，每条都解释为什么好。 — Annotated examples of good product UX moments, strongest on onboarding and activation [A · static]
- Deceptive Patterns — https://deceptive.design — 暗黑模式的分类学与耻辱柱，附法律案例；增长点子上线前先对照类型表查一遍。 — Taxonomy and hall of shame of manipulative patterns, with legal cases [A · static]
- Refero — https://refero.design — 真实产品的网页与 iOS 界面截图库，按页面类型、模式、元素可搜；做 SaaS 界面先搜它，部分内容需付费。 — Real product screens for web apps and iOS, searchable by page type, pattern and element; strong for SaaS [A · js]
- Nicelydone — https://nicelydone.club — 按页面和组件整理的 SaaS 产品截图库，做仪表盘、设置页、引导流程时直接翻。 — SaaS web-app screens and flows sorted by component and page [A · blocked]
- ScreensDesign — https://screensdesign.com — 移动端流程录屏库，主打订阅制 App 的引导页和付费墙；另收 App Store 截图设计。 — Mobile app flows as videos with onboarding and paywall focus [B · static]
- Paywall Screens — https://www.paywallscreens.com — 订阅制 App 付费墙截图库；比较套餐布局、试用话术与法务文案摆放位置时用。 — Paywall screens from subscription apps [B · static]
- UserOnboard — https://www.useronboard.com — 各家产品新手引导的逐屏拆解加点评，做首次启动体验前先读一两篇找反面教材。 — Step-by-step onboarding teardowns with commentary [B · static]
- Collect UI — https://collectui.com — 按组件归类的概念稿合集，好看但大多没上线；只取视觉处理灵感，别当落地依据。 — Concept shots grouped by component or screen type; pretty but unshipped - check against real-product libraries [B · static]

### Component references · 组件参考
- The Component Gallery — https://component.gallery — 组件横向对照表，同一个组件在几十个设计系统里的命名、结构和实现并排可查。 — Every common UI component with its names and implementations across dozens of design systems, linked to their docs and code [S · static]
- UI Guideline — https://www.uiguideline.com — 汇总各大设计系统的组件规范，讲清部件结构、属性与状态；命名和列状态时来查。 — Component standards synthesised from many design systems: anatomy, properties, states [A · static]
- Open UI — https://open-ui.org — W3C 社区的组件解剖研究，横向对比各系统的命名与行为；给部件和状态起名时查它的矩阵。 — W3C community research on component anatomy, naming and behaviour across systems [A · static]
- Checklist Design — https://www.checklist.design — 组件、页面、流程各自该包含什么的清单库；交付前拿对应清单逐项核对，防漏项。 — Checklists of what a component, page or flow must include [A · js]
- UX Patterns for Developers — https://uxpatterns.dev — 92 个以上 UI 模式，每个都写了结构、最佳实践、无障碍与测试，并提供 MCP 与 llms.txt；实现陌生模式前先查。 — 90+ UI patterns, each documented with anatomy, best practices, accessibility and testing, framework-agnostic, with an MCP server and llms.txt for agents [A · blocked]
- UI Playbook — https://uiplaybook.dev — 组件最佳实践速查，按组件列出该做和不该做；画稿前花两分钟过一遍避免低级错误。 — Documented collection of component best practices [B · static]

### Platform guidelines · 平台规范
- WeChat Mini Program Design Guidelines — https://developers.weixin.qq.com/miniprogram/design/ — 微信小程序官方设计规范：导航与胶囊按钮、反馈、触控热区、字体与色彩；动手画界面前必读。 — Official mini-program rules: navigation and the capsule button, feedback, touch targets, typography and colour [S · static]
- Apple Human Interface Guidelines — https://developer.apple.com/design/human-interface-guidelines — Apple 各平台界面的权威规范，含 Liquid Glass 材质、布局、字体与导航；站点是 JS 应用，需用浏览器工具读。 — Authoritative conventions for every Apple platform, including the current Liquid Glass material, layout, typography, navigation and app icons [S · js]
- Material Design 3 — https://m3.material.io — Google 的设计系统，含 M3 Expressive、动态取色、色彩角色、字阶、形状与动效；按 Foundations、Styles、Components 顺序读。 — Google's system including M3 Expressive: colour roles and dynamic colour, type scale, shape, motion, adaptive layout, components [S · js]
- HarmonyOS Design — https://developer.huawei.com/consumer/cn/design/ — 华为 HarmonyOS 官方设计规范，含多设备自适应布局、HarmonyOS Sans、图标与动效，附资源下载。 — Official HarmonyOS guidelines: multi-device adaptive layout, HarmonyOS Sans, icons, motion, colour, plus resource downloads [S · js]
- Apple Design Resources — https://developer.apple.com/design/resources/ — Apple 官方 UI 套件、设备边框、SF Symbols 与字体下载；按目标系统版本选包，授权限做 Apple 平台设计。 — Official UI kits, device bezels, SF Symbols app, Icon Composer and fonts [A · static]
- Android design guidance — https://developer.android.com/design — Android 官方设计指南，补 Material 没覆盖的部分：系统栏、边到边、大屏折叠屏、Wear、TV 等。 — Platform specifics Material does not cover: system bars, edge-to-edge, large screens and foldables, widgets, Wear, TV, XR [A · static]
- Fluent 2 — https://fluent2.microsoft.design — 微软跨平台设计系统，含 token、组件、动效和无障碍规范；做微软生态产品时照它对齐。 — Microsoft's cross-platform design system: tokens, components, motion, accessibility [A · static]
- Windows app design — https://learn.microsoft.com/en-us/windows/apps/design/ — Windows 11 桌面应用设计规范：标题栏、导航、材质、字体、输入；做 Electron 或 Tauri 应用要原生感时读。 — Desktop conventions for Windows 11 apps: title bar, navigation view, materials, typography, input [A · static]
- Command Line Interface Guidelines — https://clig.dev — 命令行界面设计准则，讲输出、报错、帮助和参数的以人为本原则；产品界面是终端时读。 — Human-first principles for CLI design: output, errors, help, flags, interactivity [A · static]
- Douyin Mini App design guidelines (抖音小程序设计规范) — https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/design/design-specification/Design-Principles/Design-Principles — 抖音小程序的设计原则与分行业规范；同一小程序要上多个宿主时，与微信、支付宝规范一起读。 — Design principles and industry-specific specifications for Douyin mini apps [A · static]
- Alipay Mini Program design — https://opendocs.alipay.com/mini/design — 支付宝小程序的设计规范与组件指引；同时上微信和支付宝时配合微信规范一起用。 — Alipay's mini-program design specification and component guidance [A · js]
- DingTalk design resources (钉钉设计开放资源) — https://open.dingtalk.com/document/design — 钉钉开放平台的设计资源：合作方应用上钉体验指南与审核、酷应用体验设计指南、应用图标规范与资源下载。 — DingTalk's open-platform design guides: partner-app experience standards and review, cool-app (酷应用) design, app-icon specs and downloadable resources [A · js]
- Feishu design specifications (飞书设计规范) — https://open.feishu.cn/document/tools-and-resources/design-specification/message-card-design-specifications — 飞书开放平台设计规范，消息卡片（机器人与通知）部分最有用，另有网页应用与图标指引。 — Feishu/Lark open-platform design specs, strongest on message cards for bots and notifications, plus web-app and icon guidance [A · js]
- GNOME HIG — https://developer.gnome.org/hig/ — GNOME 的桌面应用规范，写得清楚紧凑；就算不在 Linux 做设计，patterns 章的通用桌面建议也值得读。 — Clear, compact desktop-application guidelines; good general desktop advice even off Linux [B · static]
- Flutter UI design docs — https://docs.flutter.dev/ui/design — Flutter 中 Material 与 Cupertino 的落地方式及自适应、响应式指引；配合目标平台的规范一起看。 — How Material and Cupertino are expressed in Flutter, adaptive and responsive guidance [B · static]

### Published design systems · 公开的设计系统
- Carbon Design System — https://carbondesignsystem.com — IBM 的设计系统，高密度企业界面、数据表格与数据可视化的最佳公开参考；Apache-2.0 协议。 — IBM's system: the best public reference for dense enterprise UI, data tables, data visualisation and AI labelling [S · static]
- GOV.UK Design System — https://design-system.service.gov.uk — 英国政府设计系统，表单、报错与分步流程的模式都有研究背书；清晰与无障碍的标杆，MIT。 — Research-backed patterns for forms, errors and step-by-step services; the gold standard for clarity and accessibility [S · static]
- Ant Design — https://ant.design — 中文企业级后台的事实标准：设计价值观、布局、数据录入与展示、反馈加组件库；MIT 协议。 — The de facto standard for Chinese enterprise admin products: design values, layout, data entry, data display, feedback, plus the component library [S · static]
- Atlassian Design System — https://atlassian.design — 复杂产品套件的设计系统，token、组件与内容文案指引都写得扎实；重点看基础与内容两章。 — Well-documented tokens, components and content guidance for complex product suites [A · static]
- GitHub Primer — https://primer.style — GitHub 的设计系统，导航、列表、代码类组件齐全且逐个附无障碍说明；做开发者工具产品时参考；MIT。 — Developer-tool UI: navigation, lists, code-adjacent components, accessibility notes per component [A · static]
- Vercel Geist — https://vercel.com/geist/introduction — Vercel 的极简设计系统，颜色、字体、栅格、图标、组件俱全；做开发者工具界面时的克制范本。 — Vercel's minimal system: colours, typography, grid, icons, components [A · static]
- AWS Cloudscape — https://cloudscape.design — AWS 的控制台设计系统，讲资源表格、创建流程、仪表盘与生成式 AI 模式；Apache-2.0。 — Patterns for complex cloud consoles: resource tables, create flows, dashboards, generative-AI patterns [A · static]
- GitLab Pajamas — https://design.gitlab.com — GitLab 完全开放的设计系统，用法指引异常坦诚，还含 AI 与人交互的模式；MIT。 — Fully open design system with unusually candid usage guidance, including AI-human interaction [A · static]
- U.S. Web Design System — https://designsystem.digital.gov — 美国联邦政府网站设计系统，组件和模式以无障碍为底线；政务、受监管场景的信任感参考。 — Accessible public-sector components, tokens and patterns [A · static]
- Wise Design — https://wise.design — Wise 的消费金融设计系统，品牌表达与内容规范都出彩；做有性格又好用的 C 端产品时参考。 — A modern consumer-fintech system with strong brand expression and content guidelines [A · static]
- Semi Design — https://semi.design — 抖音团队的设计系统，带设计转代码工具与主题商店；做内容平台后台可参考，MIT 协议。 — Douyin's design system with design-to-code tooling and theme store [A · static]
- Design Systems Repo — https://designsystemsrepo.com/design-systems/ — 公开设计系统的目录，附文档、代码与工具链接；找同行业可比系统时从这里入手。 — Directory of public design systems with links to their docs, code and tools [A · static]
- Digital Agency Design System (デジタル庁デザインシステム) — https://design.digital.go.jp/dads/ — 日本数字厅的政府设计系统（v2.18 测试版）：设计语言、组件、指南与无障碍，附 Figma、HTML 与 React 示例，全站也提供 Markdown 版。 — Japan's government design system (v2.18, beta): design language, components, guidelines and accessibility, with Figma data, HTML and React examples; the whole site is also offered as Markdown [A · static]
- SmartHR Design System — https://smarthr.design — 日本 B2B SaaS 的设计系统，日文写作规范与无障碍指南尤其扎实；做高密度日文业务界面时读。 — Japanese B2B SaaS system notable for its Japanese writing rules and accessibility guidance [A · static]
- Adobe Spectrum — https://spectrum.adobe.com — Adobe 面向专业创意工具的设计系统，密度、色彩与多语言排版讲得深；新版是 Spectrum 2。 — System for professional creative tools; strong on density, colour and international typography [A · js]
- Arco Design — https://arco.design — 字节跳动的企业级设计系统，含设计规范与风格定制平台；比 Ant Design 视觉更轻，MIT。 — ByteDance's enterprise system with design guidelines and a style-customisation platform [A · js]
- TDesign — https://tdesign.tencent.com — 腾讯的设计体系，一套价值观横跨 Web、移动端、小程序和 Flutter；多端同发时选它；MIT。 — Tencent's system spanning web, mobile, mini-program and Flutter with shared design values [A · js]
- KRDS (Korea Design System) — https://www.krds.go.kr — 韩国政府设计系统：原则、组件、服务模式、代码与 Figma；韩文公共服务或表单密集场景参考，可与 GOV.UK 对照。 — Korea's government design system: principles, components, service patterns, code and Figma [A · js]
- Shopify Polaris and app design guidelines — https://shopify.dev/docs/apps/design — Shopify 应用设计指南（Built for Shopify 要求、移动优先、与后台一致）与改为 Web Components 的 Polaris；做商家后台类界面时读。 — Shopify's app design guidelines (Built for Shopify requirements, mobile-first admin UI, consistency with the admin) and Polaris, now a web-component framework across App Home, Admin, Checkout and POS [B · static]
- Astro UX Design System — https://www.astrouxds.com — 面向航天运控台的设计系统：状态语义、暗色控制室界面、监控模式；做监控大屏可参考。 — Design system for space-operations consoles: status semantics, dark control-room UI, monitoring patterns [B · static]
- Siemens Industrial Experience — https://ix.siemens.io — 西门子开源的工业设计系统，面向工厂和设备软件界面；做工业、IoT 产品时参考。MIT。 — Open industrial design system for plant and device software [B · js]
- LINE Design System — https://designsystem.line.me — LINE 超级 App 的设计系统，覆盖日本、台湾、泰国市场；以聊天为中心的东亚移动产品参考。 — LINE's system for a messaging super-app used across Japan, Taiwan and Thailand [B · js]

### Details and out-of-category sources · 细节与跨界来源
- Game UI Database — https://www.gameuidatabase.com — 数万张游戏界面截图库，可按画面类型、控件、配色筛选；做 HUD、浮层或高密度满屏界面时翻。 — Tens of thousands of game screens filterable by screen type, controls, style, colour and layout; superb for HUDs, overlays and information-dense full-screen UI [A · blocked]
- Interface In Game — https://interfaceingame.com — 按游戏和界面元素归档的游戏 UI 截图与视频库，做 HUD 或游戏化界面时看动效表现。 — Game interface screenshots and videos by title and element [A · blocked]
- Design Spells — https://www.designspells.com — 收录已上线产品里讨巧的小细节和彩蛋，短视频呈现；产品缺一个记忆点时来翻。 — Small delightful details and easter eggs from shipped products, as short videos [A · blocked]
- HUDS+GUIS — https://www.hudsandguis.com — 影视与游戏里的幻想 UI 合集；做控制室式科幻视觉时参考，可用性别当真。 — Fantasy UI from film, TV and games [B · static]
- Sci-fi Interfaces — https://scifiinterfaces.com — 对科幻电影界面做严肃批判分析的博客；想从电影 UI 借点子之前先读它。 — Critical analysis of fictional interfaces: what would and would not work [B · static]
- Little Big Details — https://littlebigdetails.com — 收集产品中贴心小细节的档案馆；想给界面加点便宜又讨喜的东西时翻一翻。 — Archive of thoughtful small UI details [B · static]

## Data visualisation · 数据可视化 (dataviz)

### Chart choice and design guides · 图表选择与设计指引
- From Data to Viz — https://www.data-to-viz.com — 从数据类型到图表的决策树，附常见错误清单；定稿任何图表前先读它的 Caveats 页。 — Decision tree from data type to chart, with a caveats section on common mistakes [S · static]
- Urban Institute Data Visualization Style Guide — https://urbaninstitute.github.io/graphics-styleguide/ — 最完整的公开图表风格指南：带色值的配色、字体层级、标注与逐类图表规则，全部在一个静态页面上。 — The most complete public chart style guide: palette with hex values, type hierarchy, annotation, and rules per chart type, all on one static page [S · static]
- FT Visual Vocabulary — https://ft-interactive.github.io/visual-vocabulary/ — FT 的图表选择器，按数据里的关系（偏差、相关、排名、分布、随时间变化等）分类；先定关系再选图。 — Chart chooser organised by the relationship in the data (deviation, correlation, ranking, distribution, change over time, part-to-whole, spatial, flow) [S · js]
- Data Viz Project — https://datavizproject.com — 图表类型大目录，可按功能、输入和形状筛选；想找不那么俗套的图表形式时用它。 — Large catalogue of chart types filterable by function, input and shape [A · static]
- Carbon data visualization — https://carbondesignsystem.com/data-visualization/getting-started/ — IBM Carbon 的企业图表规范：配色板、坐标轴、图例、仪表盘与无障碍规则，做后台图表照它执行。 — Practical rules for enterprise charts: colour palettes, axes, legends, dashboards, accessibility [A · static]
- Chartability — https://chartability.fizz.studio — 数据可视化的无障碍审计启发式清单；任何承载关键信息的图表都该过一遍。 — Audit heuristics for accessible data visualisation [A · static]
- Datawrapper blog and Academy — https://www.datawrapper.de/blog — Datawrapper 团队的博客与 Academy：图表设计实操，数据配色系列最值得读，Academy 按图表类型讲惯例，也可直接用它的免费工具快速试图。 — Working knowledge from the Datawrapper team on chart design, strongest on colour for data, plus the Academy's per-chart-type how-tos and a free chart, map and table tool [A · static]
- The Visual Display of Quantitative Information — https://www.edwardtufte.com/book/the-visual-display-of-quantitative-information/ — Tufte 的量化信息视觉呈现，讲数据墨水比、chartjunk 与图形诚信；做任何图表仪表盘的原理书。 — Tufte on data-ink, chartjunk and graphical integrity [A · static]
- Storytelling with Data — https://www.storytellingwithdata.com/books — 讲商业图表设计与数据叙事的实用书；给管理层做汇报和仪表盘时读，付费。 — Practical business chart design and narrative [A · static]
- ONS data visualisation guidance — https://service-manual.ons.gov.uk/data-visualisation — 英国国家统计局的图表、表格与配色指南：选图、无障碍配色、标题与标注；面向公众的统计数据，清晰和可访问优先于新奇。 — UK Office for National Statistics guidance on charts, tables and colour: chart choice, accessible colour, titles, annotation and the specifications behind its published charts [A · static]
- The Data Visualisation Catalogue — https://datavizcatalogue.com — 按功能（比较、分布、占比、关系）检索的图表类型目录，每种图附结构说明、适用场景与工具；与 FT Visual Vocabulary 搭配找不常见的图表。 — Chart-type catalogue searchable by function (comparison, distribution, part-to-whole, relationships) with anatomy, when-to-use notes and tool lists per chart [A · static]
- Fundamentals of Data Visualization — https://clauswilke.com/dataviz/ — Claus Wilke 的完整在线免费书：选图、配色与常见陷阱、比例墨水原则、点重叠与图形设计；设计图表前先读配色与陷阱章节。 — Claus Wilke's complete book, free online: choosing visualisations, colour use and pitfalls, proportional ink, overlapping points, and figure design [A · static]
- Material 2 data visualization — https://m2.material.io/design/communication/data-visualization.html — Material 2 的数据可视化指南，图表选型、样式、行为与仪表盘布局讲得最清楚的入门之一。 — Still one of the clearest overviews of chart selection, style, behaviour and dashboard layout [A · js]

### Chart libraries · 图表库
- Apache ECharts — https://echarts.apache.org — 功能全的图表库，中文仪表盘与大屏项目的事实主力；定义一次主题对象，别逐图改样式；Apache-2.0。 — Full-featured charting library that most Chinese dashboards and big-screen projects are built on, with a runnable examples gallery, a complete option reference and a theme builder [S · static]
- Vega-Lite — https://vega.github.io/vega-lite/ — 声明式 JSON 交互图表语法，附公开的 JSON Schema；agent 可以把图表当数据输出并在渲染前校验。 — Declarative JSON grammar for interactive charts with a published JSON Schema, so an agent can emit a chart as data and validate it before rendering [S · static]
- AntV — https://antv.antgroup.com — 蚂蚁集团的可视化技术栈与数据图形设计原则；先读设计原则，再翻 G2、G6、L7 的图表示例，MIT。 — Ant Group's visualisation stack (statistical charts, graphs, maps) with design principles for data graphics [A · static]
- Tremor — https://tremor.so — 面向仪表盘与图表的 React 组件库，搭分析类界面很快；默认样式记得重塑，Apache-2.0。 — React and Tailwind components for charts and dashboards; the team joined Vercel in 2025 [A · static]
- D3 — https://d3js.org — 定制数据可视化的底层工具箱；标准图表交给 Observable Plot，非标定制才上 D3；ISC。 — Low-level toolkit for bespoke data visualisation [A · static]
- VisActor — https://www.visactor.io — 字节跳动可视化方案：VChart（叙事图表）、VTable（超大表格）、VMind（AI 生成图表），带 Semi、Arco 主题；已用 Semi/Arco 的项目首选。 — ByteDance's visualisation suite: VChart (narrative charts), VTable (very large interactive tables), VMind (AI chart generation), with themes matching Semi and Arco [A · static]
- Chart.js — https://www.chartjs.org — 简单、与框架无关的 Canvas 图表库（八种基础图表），默认值好、插件多；任何技术栈里做少量标准图表时用。 — Simple, framework-agnostic canvas charts (eight core types) with good defaults and a large plugin ecosystem [A · static]
- Recharts — https://recharts.github.io — 基于 SVG 的可组合 React 图表组件，也是 shadcn/ui 图表的底层，因此是大多数 AI 生成仪表盘的默认；注意 v3 有破坏性变更。 — Composable React chart components on SVG; the engine behind shadcn/ui charts and therefore most AI-generated dashboards [A · static]
- Observable Plot — https://observablehq.com/plot/ — D3 团队出品的图形语法图表库（mark、scale、facet），默认值出色；探索性和编辑型图表首选，D3 太底层时用它。 — Concise grammar-of-graphics chart library from the D3 team: marks, scales and facets with good defaults for exploratory and editorial charts [A · blocked]
- Highcharts — https://www.highcharts.com — 成熟的商业图表库，内置无障碍模块最完善（键盘、声音化、读屏描述），另有股票、地图、甘特图产品；商用必须购买授权。 — Mature commercial chart library with the strongest built-in accessibility module (keyboard, sonification, screen-reader descriptions), plus stock, map and Gantt products [B · static]
- visx — https://visx.airbnb.tech — Airbnb 基于 D3 的底层 React 可视化原语（比例尺、图形、坐标轴、提示框）；需要与设计系统完全一致的定制 React 图表时用。 — Airbnb's low-level React visualisation primitives on D3 (scales, shapes, axes, tooltips) for charts that must match a design system exactly [B · js]

### Dashboards and big-screen · 仪表盘与大屏
- Dashboard Design Patterns — https://dashboarddesignpatterns.github.io — 基于研究的仪表盘模式分类学，梳理页面布局、交互和类型；动手画之前先选定仪表盘类型。 — Research-based taxonomy of dashboard structures, page layouts, interactions and genres [A · static]
- The Big Book of Dashboards — https://www.bigbookofdashboards.com — 真实业务仪表盘按场景归类，逐个附专家点评讲清什么有效、为什么；从相近场景选仪表盘类型与布局。 — Real business dashboards grouped by scenario, each with expert critique of what works and why [A · static]
- Alibaba Cloud DataV — https://datav.aliyun.com/portal — 国内大屏数据可视化的参照系产品，模板体现主流惯例；学布局可以，霓虹光效那套要避开。 — The reference product for Chinese big-screen (data wall) dashboards; templates show prevailing conventions [A · js]
- DataV.GeoAtlas — https://datav.aliyun.com/portal/school/atlas/area_selector — 阿里云 DataV 的中国行政区划 GeoJSON（可到区县），国内地图图表的常用数据源。 — GeoJSON for China's administrative areas down to district level, the usual source for Chinese map charts in ECharts, AntV and big-screen tools [A · js]
- Grafana dashboards — https://grafana.com/grafana/dashboards/ — 数千个真实运维监控面板仓库，看值班工程师实际在用什么数据墙；配 play.grafana.org 看实时行为。 — Thousands of real operations dashboards; shows what on-call engineers actually use [B · static]
- EasyV — https://easyv.cloud — 国产大屏与数字孪生案例库；做数据墙排版布局时的第二参照来源。 — Big-screen and digital-twin case library [B · static]
- GoView — https://gitee.com/dromara/go-view — Dromara 社区开源的拖拽式大屏搭建工具（Vue3 + ECharts + VChart）；用来快速搭大屏布局原型，真正的信息层级仍要手工设计。 — Open-source drag-and-drop big-screen builder (Vue 3, ECharts and VChart) from the Dromara community [B · static]
- DataEase — https://dataease.io — 飞致云开源 BI 工具，可做仪表盘与数据大屏；设计前看它的模板与演示，了解国内企业 BI 用户习惯的结构（筛选、下钻、大屏模式）。 — Open-source BI tool from FIT2CLOUD for dashboards and data screens; shows the conventions Chinese enterprise BI users expect [B · static]
- ECharts community gallery (isqqw) — https://www.isqqw.com — ECharts Gallery 与 Make A Pie 关停后的社区示例站，可搜索、在线改配置；找相近示例再换成项目配色。 — Community ECharts examples that replaced the closed ECharts Gallery and Make A Pie; searchable, with live option editing [B · blocked]

### Exemplary work and data journalism · 优秀作品与数据新闻
- Information is Beautiful Awards — https://www.informationisbeautifulawards.com — 数据可视化与信息图的奖项画廊；做编辑级数据叙事时来这里找野心参考。 — Award showcase for ambitious visualisation and infographics [A · static]
- Our World in Data — https://ourworldindata.org — 数千张风格统一、有标注的交互图表，附来源与数据下载；学标题、副标题、注释和来源行如何让图表自解释。 — Thousands of consistently designed, annotated interactive charts with sources and downloadable data [A · static]
- The Pudding — https://pudding.cool — 用数据讲道理的视觉长文，滚动叙事与编辑型交互的标杆；注意每一步滚动只改变一件事。 — Visual essays that explain ideas with data: the reference for scrollytelling and editorial interaction [A · static]
- The Paper: Meishuke (澎湃新闻·美数课) — https://www.thepaper.cn/list_25635 — 国内最稳定的数据新闻栏目之一：围绕新闻做解释性图表、信息图和数据故事；学中文标题、标注与竖屏手机阅读的版式。 — One of the most consistent Chinese data-journalism desks: explainers, infographics and data stories on current news [A · static]
- Dataviz Inspiration — https://www.dataviz-inspiration.com — 真实数据可视化作品的策展画廊，可按图表类型筛；重点看专业人士怎么做标注与标签。 — Curated real-world data visualisations filterable by chart type [A · js]

### Palettes and colour for data · 数据配色与工具
- ColorBrewer — https://colorbrewer2.org — 研究背书的地图与图表配色工具，分顺序、发散、定性三类；记得勾选色盲安全，Apache-2.0。 — Research-based sequential, diverging and qualitative schemes for maps and charts [S · static]
- How to pick the least wrong colors — https://mattstromawn.com/writing/how-to-pick-the-least-wrong-colors/ — 讲用算法生成保持区分的分类配色的文章；图表系列很多时照它做。 — Algorithmic approach to categorical palettes that stay distinct [A · static]
- Data Color Picker (Learn UI Design) — https://www.learnui.design/tools/data-color-picker.html — 生成间隔均匀的图表配色、单色或发散色阶；图表配色从这里起步，再用 Viz Palette 查色觉问题。 — Generates evenly spaced palettes, single-hue scales and divergent scales for charts and dashboards [A · static]
- iWantHue — https://medialab.github.io/iwanthue/ — 在限定的色相、彩度、明度范围内生成并优化“彼此最可区分”的分类色，可开启色盲优化；类别多的图表用。 — Generates and refines sets of optimally distinct categorical colours inside a chosen hue, chroma and lightness range, with a colour-blind option [A · static]
- Scientific colour maps (Fabio Crameri) — https://www.fabiocrameri.ch/colourmaps/ — 感知均匀、色盲友好的科学色阶（batlow 等），用来替代彩虹色和 jet；热力图、地图与连续色阶时用。 — Perceptually uniform, colour-blind-friendly scientific colour maps (batlow and family) that replace rainbow and jet scales [A · static]
- Viz Palette — https://projects.susielu.com/viz-palette — 把数据配色放进真实图表、并在色盲模拟下检验的工具；发图表前查分类色板。 — Tests a data palette in real chart types under colour-vision deficiencies [A · js]
- chroma.js palette helper — https://gka.github.io/palettes/ — 生成带明度校正与色盲检查的顺序和发散配色；多色相顺序色阶要保持感知均匀时用。 — Builds multi-hue sequential and diverging scales with lightness correction and a colour-blindness check [A · js]
- Coloring for Colorblindness — https://davidmathlogic.com/colorblind/ — 模拟色觉缺陷下的配色效果，并提供经过验证的安全分类配色（Okabe-Ito、Wong、IBM）；分类配色上线前在这里检查。 — Simulates colour-vision deficiencies on a palette and offers known safe categorical palettes (Okabe-Ito, Wong, IBM) [B · js]

## AI design · AI 设计 (ai)

### AI UX patterns and components · AI 交互模式与组件
- Shape of AI — https://www.shapeof.ai — AI 产品交互模式库：导航、输入、调节、约束、信任标识等，附真实案例与适用场景说明。 — Pattern library for AI product UX: wayfinders, inputs, tuners, governors, trust indicators, identifiers, with real examples [S · static]
- Aiverse — https://www.aiverse.design — AI 交互案例库，取自已上线产品并按模式归类；做 AI 功能时按交互类型查当下惯例。 — Library of AI interaction examples from shipped products, organised by pattern [A · static]
- Ant Design X — https://x.ant.design — 蚂蚁的 AI 界面组件体系，附带角色、意图、对话与混合界面的设计范式；搭聊天 UI 前读。MIT。 — AI-interface component system with a published design paradigm for roles, intention, conversation and hybrid UI [A · static]
- Vercel AI Elements — https://elements.ai-sdk.dev — Vercel 的 AI 界面组件：对话、消息、推理、来源、工具调用、输入框；做聊天 UI 从它开始而非从零。 — Components for AI interfaces: conversation, message, reasoning, sources, tool calls, prompt input [A · static]
- assistant-ui — https://www.assistant-ui.com — AI 聊天与 agent 界面的 React 基础组件：会话、流式输出、工具调用 UI、附件、分支与人工确认；别手搓聊天状态，可与 AI Elements 对比。 — React primitives for AI chat and agent interfaces: threads, streaming, tool-call UI, attachments, branching and human approval [A · static]
- Designing for agentic AI (Smashing Magazine, 2026) — https://www.smashingmagazine.com/2026/02/designing-agentic-ai-practical-ux-patterns/ — Smashing 2026 年文章：agent 代用户行动时的控制、授权与问责模式；AI 会“做事”而不只是“回答”的功能都拿它做评审清单。 — Practical patterns for control, consent and accountability when an agent acts on the user's behalf rather than only answering [A · static]
- prompt-kit — https://www.prompt-kit.com — shadcn 风格的 AI 应用积木组件库，聊天界面件齐全；AI Elements 之外的另一个替代选择；MIT。 — Accessible, customisable React building blocks for AI chat (prompt input, message, markdown, code block, reasoning, loaders) in the shadcn copy-in style [B · static]
- json-render — https://json-render.dev — Vercel Labs 的生成式 UI 框架：模型只能输出受你的组件目录约束的 JSON，校验后流式渲染为界面；agent 只允许用批准组件拼 UI 时用。 — Vercel Labs framework where the model emits JSON constrained to your own component catalogue, which is validated and streamed as UI [B · static]
- MateChat — https://matechat.gitcode.com — 华为 DevUI 团队的生成式 AI 体验设计系统与 Vue 对话组件，面向研发工具与 IDE 助手；React 项目对应的是 Ant Design X。 — Huawei DevUI's generative-AI experience language and Vue chat components, tuned for developer tools and IDE assistants [B · static]

### AI product guidelines · AI 产品指引
- Microsoft HAX Toolkit — https://www.microsoft.com/en-us/haxtoolkit/ — 微软的人机 AI 交互十八条指南，附案例库与规划工作簿；评审 AI 功能时当检查清单用。 — Eighteen guidelines for human-AI interaction with a design library of examples and a planning workbook [A · static]
- Carbon for AI — https://carbondesignsystem.com/guidelines/carbon-for-ai/ — IBM 的 AI 界面规范：如何标注 AI 生成内容、如何呈现可解释性；做 AI 标签和说明弹层时参考。 — How an enterprise system marks AI-generated content and exposes explainability [A · static]
- Cloudscape generative AI patterns — https://cloudscape.design/gen-ai/patterns/generative-ai-chat/ — Cloudscape 的生成式 AI 模式：对话、加载态、输出标注与用户授权操作；给企业控制台加助手时照它做。 — Concrete patterns for generative-AI chat, loading states, output labelling and user-authorised actions [A · static]
- MCP Apps — https://modelcontextprotocol.io/extensions/apps/overview — MCP 官方扩展：工具可返回在聊天宿主内沙箱 iframe 中渲染的交互界面（ui:// 资源），取代了 MCP-UI 实验；设计内嵌工具界面前读。 — The official MCP extension for tools that return interactive UI (ui:// resources rendered in a sandboxed iframe inside chat hosts); it superseded the MCP-UI experiments [A · static]
- A2UI — https://a2ui.org — Google 发起的开放协议：agent 以声明式组件目录（而非代码）下发界面，由客户端在 Web、移动与桌面原生渲染；规范迭代快，注意版本。 — Open protocol from Google for agents to send declarative UI (a catalogue of components, not code) that clients render natively on web, mobile and desktop [A · static]
- China: Measures for Labelling AI-Generated Synthetic Content (人工智能生成合成内容标识办法) — https://www.cac.gov.cn/2025-03/14/c_1743654684782215.htm — 国家网信办等四部门《人工智能生成合成内容标识办法》，2025-09-01 起施行：生成的文本、图片、音频、视频、虚拟场景须加显式标识（内容或交互界面中用户可感知的文字、声音、图形）与隐式标识（元数据）。 — The CAC rules in force since 2025-09-01 requiring explicit labels (visible text, sound or graphics in the content or the interaction interface) and implicit labels (metadata) on AI-generated text, images, audio, video and virtual scenes [A · static]
- EU AI Act Article 50: transparency obligations — https://artificialintelligenceact.eu/article/50/ — 欧盟《人工智能法》第 50 条透明义务：与 AI 系统交互时须告知用户，合成内容须以机器可读、可检测的方式标记；2026-08-02 起适用。 — The EU rule that people must be told when they interact with an AI system and that synthetic content must be marked in a machine-readable, detectable way; applies from 2026-08-02 [A · static]
- People + AI Guidebook — https://pair.withgoogle.com/guidebook — Google PAIR 的 AI 产品设计指南，讲心智模型、可解释性、信任与容错；立项期用章节练习。 — Google PAIR's research-based guidance: mental models, explainability and trust, feedback and control, errors and graceful failure [A · js]
- Apple HIG: Generative AI — https://developer.apple.com/design/human-interface-guidelines/generative-ai — Apple 关于负责任地设计生成式 AI 功能的官方指引；配合写作与隐私章节一起读。 — Apple's guidance on designing generative-AI features responsibly [A · js]
- OpenAI UI guidelines for ChatGPT apps (Plugins) — https://developers.openai.com/plugins/concepts/ui-guidelines — 在 ChatGPT 里做应用界面的规范：展示模式（内联卡片、内联轮播、全屏、画中画）各自何时用、卡片布局与操作，并附 @openai/apps-sdk-ui 组件库；时效性强。 — Rules for UI inside ChatGPT: display modes (inline card, inline carousel, fullscreen, picture-in-picture), when to use each, card layout and actions, plus the @openai/apps-sdk-ui component library [B · static]

### AI design tools and generators · AI 设计工具与生成器
- v0 by Vercel — https://v0.app — Vercel 的提示词生成应用工具，带可视化设计模式和海量社区模板；快速出可弃方案，再按自己的流程改。 — Prompt-to-app generator that builds and deploys full-stack web apps, with a visual design mode, reusable design systems and a large community template gallery (apps, landing pages, components, dashboards) [A · static]
- Figma Make — https://www.figma.com/make/ — Figma 的提示词生成应用工具，可把提示与现有画板变成可运行的 React 原型；团队常驻 Figma 时用来出可点击原型。 — Figma's prompt-to-app tool that turns prompts and existing frames into working React prototypes [A · static]
- Relume — https://www.relume.ai — AI 生成营销站的站点地图与线框，背后是面向 Figma、Webflow、React 的大型组件库；做视觉前先用它定信息架构和区块顺序。 — AI sitemap and wireframe builder for marketing sites, backed by a large component library for Figma, Webflow and React [A · static]
- Google Stitch — https://stitch.withgoogle.com — Google Labs 的 AI 界面设计工具：按提示生成界面与变体、读写 DESIGN.md，并通过 MCP 把项目开放给 agent；快速出变体后再落到代码并评审。 — Google Labs' AI UI designer: generates screens and variants from prompts, reads and writes DESIGN.md, and exposes projects to agents through an MCP server [A · js]
- Lovart — https://www.lovart.ai — 无限画布上的 AI 设计 agent，产出 Logo、品牌套件、海报、社媒图与视频；适合探索品牌和活动物料，仍需人工艺术指导。 — AI design agent on an infinite canvas that produces logos, brand kits, posters, social graphics and video [B · static]
- Jimeng AI (即梦) — https://jimeng.jianying.com — 字节跳动的图片与视频生成工具（含智能画布），中文提示理解与图中中文文字表现较好；用于情绪图、主视觉草稿与短动效。 — ByteDance's image and video generator with a smart canvas, strong at understanding Chinese prompts and rendering Chinese text in images [B · static]
- Superdesign — https://superdesign.dev — 开源设计 agent，住在 IDE 里并排生成多个 UI 变体；参考它并行出稿的工作流。 — Open-source design agent that lives in the IDE and generates UI variants side by side [B · js]
- LiblibAI (哩布哩布) — https://www.liblib.art — 国内大型图像生成模型与风格 LoRA 社区，可在线生成；找统一插画风格的模型，逐个核对模型授权。 — Large Chinese community of image-generation models and style LoRAs with online generation [B · js]

### Agent skills and rule sets · agent skill 与规则集
- Anthropic frontend-design skill — https://github.com/anthropics/skills/tree/main/skills/frontend-design — Anthropic 官方前端审美 skill：选定大胆方向、避开 AI 套路脸、盯字体色彩动效构图；当底线基准读。 — Anthropic's own short skill for distinctive front-end aesthetics: commit to a bold direction, avoid generic AI looks, mind typography, colour, motion, composition [S · static]
- Impeccable — https://impeccable.style — 单个设计技能含二十四条命令与一份 AI 味规则目录，规则可无 LLM 确定性检测；Apache-2.0。 — One design skill with 24 commands (shape, critique, audit, polish, distill, bolder, quieter, harden, animate...), a PRODUCT.md that records durable product truth, live in-browser variant iteration, and a catalogue of AI-design tells with deterministic detectors that need no LLM [S · static]
- Vercel Web Interface Guidelines — https://vercel.com/design/guidelines — Vercel 的网页界面规则集，覆盖交互、动效、表单与性能；仓库里的 AGENTS.md 可当评审清单，MIT。 — Concise, opinionated rules for interactions, animation, layout, content, forms, performance and design, shipped with an agent-readable file [S · static]
- taste-skill — https://tasteskill.dev — 流行的反模板化前端技能：读简报、三个拨杆（变化、动效、密度）、真实设计系统加交付前检查；MIT。 — Popular anti-slop front-end skill: brief inference, three dials (variance, motion, density), real design systems, pre-flight check [A · static]
- UI UX Pro Max — https://www.uupm.cc — 可检索的风格、配色、字体搭配与 UX 规则知识库，附设计系统生成器；当查询表用，缺真实 brief 时建议偏泛；MIT。 — Searchable CSV knowledge base of styles, palettes, font pairings and UX rules with a design-system generator [A · static]
- Stitch skills — https://github.com/google-labs-code/stitch-skills — Google Stitch 的 agent 技能集：提示词增强、综合生成 DESIGN.md、经 MCP 出高保真界面稿；做快速视觉变体时用；Apache-2.0。 — Agent skills for Google Stitch: prompt enhancement, DESIGN.md synthesis, screen generation through MCP [A · static]
- Emil Kowalski's skills — https://github.com/emilkowalski/skills — Sonner、Vaul 作者的设计工程 skill 集，含可在 UI 代码上运行的动效评审 review-animations；动效评审可直接借用。 — Design-engineering skills from the author of Sonner and Vaul, including review-animations, a motion critique an agent can run on UI code [A · static]
- Motion AI Kit — https://motion.dev/docs/ai-kit — Motion 官方 skill 与 MCP：让 agent 查最新 Motion 文档，另有 CSS 弹簧生成、过渡编辑器与 MotionScore 性能审计（后几项需 Motion+）。 — Motion's official skill and MCP server: current Motion docs for the agent, plus CSS spring generation, a transition editor and MotionScore performance audits [A · static]
- skills.sh — https://skills.sh — Vercel 运营的开放 agent skill 目录，带安装量排行与 npx skills 安装器；看安装量判断哪些设计 skill 真有人用。 — Vercel's open agent-skills directory with install counts, plus the npx skills installer [A · static]
- UI Skills — https://www.ui-skills.com — 给构建界面的 agent 用的强硬约束清单，拿它和自己的规则对照查漏补缺；MIT。 — Opinionated constraint lists for agents building interfaces [B · static]
- interface-design — https://interface-design.dev — 专注让跨会话设计决策保持一致的 skill，面向仪表盘和应用；可借鉴的思路：把决策存进系统文件；MIT。 — Skill focused on keeping design decisions consistent across sessions for dashboards and apps [B · static]
- awesome-agent-skills — https://github.com/VoltAgent/awesome-agent-skills — 各家 agent skill 的汇总目录，其中包含设计类条目；想跟踪新出现的设计 skill 时定期翻它；MIT。 — Directory of agent skills across vendors, including design skills [B · static]
- Rams — https://www.rams.ai — 商业化设计评审引擎：按 348 条公开规则（九类，含一类 AI 套路）给 UI 改动打 0-100 分，可作 skill、MCP 或 GitHub App；拿它的规则分类对标自己的评审量表。 — Commercial design-review engine that scores UI changes 0-100 against 348 published rules in nine categories (including one for AI anti-patterns), via a skill, an MCP server or a GitHub app [B · static]

### Agent-readable formats · 面向 agent 的格式
- DESIGN.md specification — https://github.com/google-labs-code/design.md — Google Labs 的开放格式，用一个 Markdown 文件向 AI 代理描述设计系统；按此产出 DESIGN.md 供 Stitch 等消费；Apache-2.0。 — Google Labs' open format for describing a visual identity to coding agents in one Markdown file (YAML tokens plus prose), with a CLI that lints contrast and structure and diffs two versions [S · static]
- awesome-design-md — https://getdesign.md — 收集知名产品视觉体系的 DESIGN.md 合集，可当风格基因研究材料；学方法可以，照抄品牌不行。 — Collection of DESIGN.md files describing the visual systems of well-known products [A · static]
- Refero Styles — https://styles.refero.design — 从 2000+ 个真实产品网站提取的设计风格（颜色、字体、间距、组件），每套附 DESIGN.md；当风格基因研究材料，别用来克隆品牌。 — Design systems extracted from 2,000+ real product sites (colours, type, spacing, components), each with a DESIGN.md [A · static]
- llms.txt — https://llmstxt.org — 在站点根目录放 /llms.txt（Markdown 索引，常配 llms-full.txt）为 agent 指路的约定；不少设计系统已提供。 — The convention of a /llms.txt Markdown index (and often llms-full.txt) that points agents at clean documentation; many design systems now ship one [A · static]
- AGENTS.md — https://agents.md — 给 coding agent 的仓库说明文件开放约定（写给 agent 的 README），现由 Linux 基金会下的 Agentic AI Foundation 管理。 — The open Markdown convention for repository instructions to coding agents (a README for agents), now stewarded under the Linux Foundation [A · static]
- Agent Skills specification — https://agentskills.io — 本套件所用的开放 SKILL.md 格式：一个文件夹包含 SKILL.md（名称、描述、指令）及可选的脚本、参考资料与模板；发布 skill 前对照检查。 — The open SKILL.md format this suite is written in: a folder with SKILL.md (name, description, instructions) plus optional scripts, references and templates [A · static]

### Design MCP servers · 设计相关 MCP 服务
- Chrome DevTools MCP — https://developer.chrome.com/docs/devtools/agents — 给 agent 一只真 Chrome：截图、DOM、计算样式和性能轨迹都能取；渲染-查看闭环的眼睛。Apache-2.0。 — Gives an agent a real Chrome: screenshots, DOM, computed styles, performance traces [S · static]
- Figma MCP server — https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server — Figma 官方 MCP：为生成代码提供设计上下文、变量、组件与截图；2026 年起新增 use_figma，可创建和编辑 Figma 设计稿、FigJam 与 Slides。 — Figma's official MCP server: design context, variables, components and screenshots for code generation, and since 2026 use_figma, a general-purpose tool that creates and edits Figma Design, FigJam and Slides files [A · static]
- Framelink Figma MCP — https://www.framelink.ai — 社区版 Figma MCP 服务，给 AI agent 喂简化后的布局数据；官方 MCP 不可用时的替代方案，MIT 协议。 — Community MCP server that gives agents simplified Figma layout data [A · static]
- shadcn/ui registry and MCP — https://ui.shadcn.com/docs/mcp — 通过 MCP 让 agent 浏览并安装 shadcn 兼容注册表里的真实组件，避免凭空编造不存在的组件；MIT。 — Lets agents browse and install components from shadcn-compatible registries [A · static]
- Playwright MCP — https://github.com/microsoft/playwright-mcp — 让代理通过 Playwright 操控浏览器的 MCP；当另一双眼睛用，适合多视口截图；Apache-2.0。 — Browser automation for agents through Playwright [A · static]
- Storybook MCP — https://storybook.js.org/docs/ai/mcp/overview — Storybook 官方 MCP 插件：把组件清单、文档与 stories 开放给 agent，让它复用项目里的真实组件而不是新造。 — Storybook's official MCP addon: exposes the component manifest, docs and stories so agents reuse the project's real components instead of inventing new ones [A · static]
- Mobbin MCP — https://mobbin.com/mcp — 让 agent 用自然语言检索 Mobbin 上 60 万+ 真实产品界面与流程；研究阶段先拉三个已上线的先例再动笔。 — Lets agents search Mobbin's 600,000+ real product screens and flows in natural language [A · static]
- Official MCP Registry — https://registry.modelcontextprotocol.io — MCP 协议项目官方的服务器注册表，带公开 JSON API；找厂商 MCP 时先查这里，再信第三方列表。 — The protocol project's official registry of MCP servers, with a public JSON API [A · js]
- 21st MCP and CLI (formerly Magic MCP) — https://21st.dev/mcp — 21st.dev 的 CLI 与 MCP：检索社区组件库、读真实代码、连同依赖一起安装，或用 AI 草拟变体；装进来后按项目 token 重设样式。 — 21st.dev's CLI and MCP server: search the community component catalogue, read the real code, install a component with its dependencies, or sketch variants with AI [B · static]
- MasterGo Magic MCP — https://github.com/mastergo-design/mastergo-magic-mcp — MasterGo 官方 MCP：把设计稿转成结构化 DSL 交给 coding agent；国内团队用 MasterGo 时接入。 — MasterGo's official MCP server that turns design files into a structured DSL for coding agents [B · static]

## Accessibility · 无障碍 (a11y)

### Standards and law · 标准与法规
- WCAG 2.2 Quick Reference — https://www.w3.org/WAI/WCAG22/quickref/ — 可按等级筛选的 WCAG 2.2 全部成功准则与技法速查；做无障碍评审时引用准则编号说话。 — Filterable list of every WCAG 2.2 success criterion with techniques [S · static]
- GB/T 37668-2019 Internet content accessibility (信息技术 互联网内容无障碍可访问性技术要求与测试方法) — https://openstd.samr.gov.cn/bzgk/std/newGbInfo?hcno=35ECC696805C1A67C93B74FB6D0D8EFB — 中国互联网网页与移动应用无障碍的国家标准（2020-03-01 实施，现行）：可感知、可操作、可理解、兼容四类要求加测试方法，与 WCAG 2.0 基本对应。 — China's national web and app accessibility standard (current since 2020-03-01): perceivable, operable, understandable and compatible requirements with test methods, closely aligned with WCAG 2.0 [A · static]
- European Accessibility Act and EN 301 549 — https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/european-accessibility-act-eaa_en — 欧盟《无障碍法案》（2025-06-28 起适用于电商、银行、电子书、交通票务等）与其协调标准 EN 301 549（网页部分对应 WCAG 2.1 AA）。 — The EU law in force since 2025-06-28 for e-commerce, banking, e-books, transport ticketing and more, and EN 301 549, the harmonised standard whose web clauses follow WCAG 2.1 AA [A · static]
- Section508.gov — https://www.section508.gov — 美国联邦 ICT 无障碍官方站：修订版 508 标准（引用 WCAG 2.0 AA）、测试方法与采购指引；面向美国联邦客户时读。 — US federal ICT accessibility: the Revised 508 Standards (WCAG 2.0 AA by reference), test methods and procurement guidance [A · static]
- ADA Title II web and mobile rule (US DOJ) — https://www.ada.gov/resources/2024-03-08-web-rule/ — 美国司法部 ADA 第二章规则：州与地方政府的网站和移动应用须达到 WCAG 2.1 AA，含合规期限。 — The US Department of Justice rule requiring WCAG 2.1 AA for state and local government web content and mobile apps, with compliance dates [A · static]
- China Internet age-friendly and accessibility platform (适老化及无障碍公共服务平台) — http://wza.isc.org.cn — 工信部适老化通用设计规范（网站与 APP）、相关标准（GB/T 37668、T/ISC 0007-2021）与认证的官方平台；面向国内用户的产品上线前必查。 — Home of MIIT's age-friendly (适老化) design specifications for websites and apps, the related standards (GB/T 37668, T/ISC 0007-2021) and the certification scheme [A · js]

### Testing tools · 检测工具
- axe-core and axe DevTools — https://github.com/dequelabs/axe-core — 嵌入最广的无障碍规则引擎（axe DevTools、Lighthouse 与大量 CI 工具都基于它），可在任意页面或测试中运行。 — The most widely embedded accessibility rules engine (behind axe DevTools, Lighthouse and many CI tools); runs in any browser page or test [S · static]
- WAVE — https://wave.webaim.org — WebAIM 的可视化检测工具，把错误、对比度问题和结构（标题、地标、ARIA）直接标在页面上。 — WebAIM's evaluator that overlays errors, contrast failures and structure (headings, landmarks, ARIA) directly on the page [A · static]
- Accessibility Insights — https://accessibilityinsights.io — 微软免费的无障碍工具（Web、Windows、Android），Assessment 模式会引导完成自动化测不到的人工检查。 — Microsoft's free tools for web, Windows and Android, with a guided Assessment that walks through the manual checks automation misses [A · static]
- Colour Contrast Analyser (CCA) — https://vispero.com/lp/color-contrast-checker/ — 免费桌面对比度检测器，吸管可取屏幕任意像素（照片上的文字、渐变、截图、设计稿）；颜色不在代码里时用。 — Free desktop contrast checker whose eyedropper samples any pixel on screen: text over photos, gradients, screenshots and design files [A · static]
- Pa11y — https://pa11y.org — 开源命令行无障碍检测工具（可选 HTML_CodeSniffer 或 axe 引擎），pa11y-ci 可批量检查 URL 列表。 — Open-source command-line accessibility tester (HTML_CodeSniffer or axe runners) with a CI variant for lists of URLs [A · static]
- NVDA screen reader — https://www.nvaccess.org — 免费开源的 Windows 读屏软件，手动测试最常用（苹果设备用系统自带的 VoiceOver）。 — The free, open-source Windows screen reader most used for manual testing, alongside VoiceOver on Apple devices [A · static]
- Stark — https://www.getstark.co — 设计工具与代码中的无障碍套件：对比度、色觉模拟、焦点顺序与替代文本标注；交付前在 Figma 里标好焦点顺序。 — Accessibility suite for design tools and code: contrast, vision simulation, focus order and alt-text annotations [B · static]

### Accessible patterns and guidance · 无障碍模式与指引
- ARIA Authoring Practices Guide — https://www.w3.org/WAI/ARIA/apg/patterns/ — W3C 官方交互模式指南，给出每种组件的键盘行为与 ARIA 角色；写自定义交互组件规格前必读。 — Canonical keyboard interaction and ARIA roles for each widget pattern (combobox, menu, tabs, dialog) [S · static]
- Inclusive Components — https://inclusive-components.design — 深入讲解无障碍组件模式：开关、菜单、标签页、卡片、通知；动手做组件前先读对应文章。 — Accessible component patterns explained in depth (toggles, menus, tabs, cards, notifications) [A · static]
- A11Y Project checklist — https://www.a11yproject.com/checklist/ — 大白话写成的 WCAG 无障碍检查清单；设计正式交付前先逐项过一遍。 — Plain-language checklist in which every item links the WCAG criterion it maps to, grouped by content, code, keyboard, images, headings, forms, media, appearance and animation [A · static]
- Sara Soueidan and Practical Accessibility — https://www.sarasoueidan.com — Sara Soueidan 关于无障碍前端（可访问名称、自定义控件、SVG、CSS 生成内容）的深度文章，以及面向设计与开发的 Practical Accessibility 课程。 — Deep articles on accessible front-end (accessible names, custom controls, SVG, CSS-generated content) and the Practical Accessibility video course for designers and developers [A · static]
- MDN Accessibility and ARIA reference — https://developer.mozilla.org/en-US/docs/Web/Accessibility — 面向 agent 也易读的无障碍 HTML 与 ARIA 角色、状态、属性参考，附浏览器支持说明。 — Plain, agent-readable reference for accessible HTML and every ARIA role, state and property, with browser-support notes [A · static]
- Adrian Roselli — https://adrianroselli.com — 对真实组件模式（表格、折叠、开关、对话框）做严格无障碍测试，并给出各浏览器与读屏软件的实际结果；自创 ARIA 模式前先搜。 — Rigorous accessibility testing of real patterns (tables, disclosures, toggles, dialogs) with screen-reader results across browsers [A · static]
- freee Accessibility Guidelines — https://a11y-guidelines.freee.co.jp — 日本 freee 公司按版本发布的无障碍指南与检查项，逐条对应 WCAG；WCAG 条文太抽象时用它落地。 — Practical, versioned accessibility guidelines and checks from a Japanese SaaS company, each mapped to WCAG [A · static]
- The WebAIM Million — https://webaim.org/projects/million/ — WebAIM 每年对百万个网站首页的自动检测报告：哪些错误最常见，评审时先查哪里。 — Annual automated scan of the top million home pages: which failures are most common, so a review knows where to look first [A · static]

### Inclusive design · 包容性设计
- Microsoft Inclusive Design — https://inclusive.microsoft.design — 微软包容性设计工具包，把残障分为永久、临时与情境三种；写 brief 时用它的 persona spectrum。 — Toolkit framing disability as permanent, temporary and situational [A · static]
- UK Home Office accessibility posters — https://github.com/UKHomeOffice/posters — 英国内政部无障碍设计海报：针对自闭症、低视力、读写障碍、焦虑、行动与听力障碍及读屏用户的宜与忌；评审时对照。 — Do and don't posters for designing for users on the autistic spectrum, with low vision, dyslexia, anxiety, motor or hearing needs, and screen-reader users [A · static]
- Inclusive Design Principles — https://inclusivedesignprinciples.info — 七条包容性设计原则（体验可比、考虑情境、保持一致、给予控制、提供选择、内容优先、增加价值），可当评审提问清单。 — Seven short principles (comparable experience, consider situation, be consistent, give control, offer choice, prioritise content, add value) with examples [A · static]
- Inclusive Design Toolkit (University of Cambridge) — https://www.inclusivedesigntoolkit.com — 剑桥大学的包容性设计工具包：用能力数据、排除计算器和障碍模拟估算一个设计会排除多少人，适老化论证尤其有用。 — Research-based toolkit for measuring how many people a design excludes, with capability data, an exclusion calculator and impairment simulators, strong on ageing users [A · static]
- Making Content Usable for People with Cognitive and Learning Disabilities (W3C) — https://w3c.github.io/coga/content-usable/ — W3C 关于认知与学习障碍的指南和设计模式：目的清晰、帮助可找、防错、减轻记忆负担、简明语言；设计表单与多步骤任务前读。 — W3C guidance and design patterns for cognitive and learning disabilities: clear purpose, findable help, preventing mistakes, memory load, plain language [A · static]

## Motion · 动效 (motion)

### Motion in shipped products · 上线产品动效实录
- 60fps.design — https://60fps.design — 头部 App 界面动效的录屏库，按应用与交互类型筛选；移动端动效参考首选，放慢速度逐帧看。 — Screen recordings of UI animation in shipped apps (mostly iOS), filterable by interaction pattern and app category; the best single source for mobile motion [S · static]
- Spotted in Prod — https://spottedinprod.com — 只收 iOS：上线 App 里出色交互细节的短录屏，可按应用和风格标签浏览；移植到安卓或网页前先转换平台习惯。 — Short recordings of standout interaction details in shipped iOS apps, browsable by app and by style tag (minimal, skeuomorphic, playful, dense...) [S · static]
- Ripplix — https://www.ripplix.com — 7000+ 条真实 App 与网站的界面动效录屏，覆盖移动、网页、手表与 AR/VR，可按元素（引导、成功、下拉、图表等）和行业筛选。 — 7,000+ recorded UI animations from 1,000+ real apps and sites (mobile, web, watch, AR/VR), filterable by element (onboarding, success, dropdown, chart...) and industry [A · static]
- Apple Design Awards — https://developer.apple.com/design/awards/ — 苹果设计大奖历年获奖与入围作品，每个都有上线 App 的视频；「交互」与「趣味」类别就是原生动效的精选合集。 — Winners and finalists each year with video of the shipped app; the Interaction and Delight and Fun categories are a curated reel of platform-native motion [A · static]
- Detail — https://detail.design — 收录让产品显得用心的细小设计决策，每条配短录屏，分设计、交互、动效、文案、无障碍、彩蛋六类；有中文版。 — Curated short recordings of the small decisions that make shipped software feel considered, tagged Design, Interactivity, Motion, Copywriting, Accessibility and Easter Egg [A · static]

### Web motion showcases and asset libraries · 网页动效秀场与素材库
- Codrops — https://tympanus.net/codrops/ — 实验性网页动效博客，附源码与教程：滚动、页面过渡、WebGL、字体动画；演示授权逐个确认。 — Experimental web motion with source and tutorials: scroll effects, page transitions, WebGL, typography animation [S · static]
- Made With GSAP — https://madewithgsap.com — 付费的 GSAP 网页动效合集（2026 年 9 月共 118 个，每周新增），附讲解与可复制代码，另有站点展示页；找滚动、鼠标、拖拽类效果的灵感。 — Paid, growing collection of GSAP web effects (118 in September 2026, one added weekly) with explained, copyable code, plus a showcase page [A · static]
- Olivier Larose blog — https://blog.olivierlarose.com — 逐步复刻获奖网站动效的教程博客；找到想要的效果，照着搭建过程做。 — Tutorials that rebuild award-site animations step by step [A · static]
- nan.fyi — https://www.nan.fyi — 交互式技术随笔，把 SVG 路径、布局动画的底层原理讲到能动手；手写 path 或 FLIP 前读。 — Interactive essays on SVG paths, layout animation and how motion works under the hood [A · static]
- LottieFiles — https://lottiefiles.com — 最大的 Lottie 动画库加配套工具；筛选免费素材，每个动画上线前单独核对许可。 — Huge library of Lottie animations plus tooling [A · blocked]
- CodePen — https://codepen.io — 最大的前端演示集合，几乎每种交互、CSS 与 SVG 动画技巧都有可运行的示例可 fork；站点拦截爬虫，把链接发给用户。 — The largest collection of front-end demos: almost every interaction, CSS and SVG animation technique has a working pen to fork [A · blocked]

### Easing, spring and animation tools · 曲线与弹簧工具
- Easing Wizard — https://easingwizard.com — 缓动曲线生成器，可视调 bezier、弹簧、回弹等效果并实时预览，直接导出含 linear() 的 CSS；调动画手感时用。 — Generate and preview bezier, spring, bounce and wiggle easings, exported as CSS including linear() [S · static]
- Easing Functions Cheat Sheet — https://easings.net — 具名缓动函数的图解速查，附曲线形状与 cubic-bezier 值；挑好曲线直接抄参数。 — Visual reference of the named easing functions with CSS and maths [A · static]
- CSS Spring Easing Generator — https://www.kvin.me/css-springs — 把以感知时长与回弹度描述的弹簧（SwiftUI、Motion 用的同一模型）转成 CSS linear() 缓动和对应的实际时长两个变量；在网页上还原原生弹簧手感时用。 — Turns a spring given as perceptual duration and bounce into a CSS linear() easing plus the matching real duration (--spring-easing and --spring-duration) [A · static]
- Scroll-driven Animations — https://scroll-driven-animations.style — CSS 滚动驱动动画的演示与可视化工具；写 animation-range 时用它的区间可视化器校准。 — Demos and visual tools for CSS scroll-driven animations (timeline ranges, view progress) [A · static]
- View Transitions demos — https://view-transitions.chrome.dev — View Transitions 官方演示集，同文档与跨文档都有；照抄最接近你要做的导航过渡的模式。 — Reference demos for same-document and cross-document view transitions [A · static]
- Jitter — https://jitter.video — 浏览器里的动效设计工具，可导出 Lottie、视频与 GIF；适合做营销动画，不主攻产品内界面。 — Browser-based motion design tool with Lottie, video and GIF export [A · static]
- Rive — https://rive.app — 状态机驱动的交互式矢量动画编辑器加多端运行时；动画需要响应用户输入、跨平台复用时选它。 — Editor and runtimes for interactive vector animation driven by state machines [A · static]
- Lottie format docs — https://lottiefiles.github.io/lottie-docs/ — Lottie JSON 格式的人读版参考（图层、形状、关键帧、缓动），正式规范由 Lottie Animation Community 发布；用代码生成或修改 Lottie 时必备。 — Readable reference of the Lottie JSON format (layers, shapes, keyframes, easing); the formal spec is now published by the Lottie Animation Community [A · static]
- ProtoPie — https://www.protopie.io — 无需写代码的高保真交互原型工具：变量、条件、手机传感器与多屏联动，可在真机上运行；国内外车机与硬件团队常用。 — High-fidelity interaction prototyping without code: variables, conditions, device sensors and multi-screen links, playable on real devices [A · static]
- Chrome DevTools: Animations panel — https://developer.chrome.com/docs/devtools/css/animations — 在任何线上页面检查、慢放（25% 或 10%）、拖动并修改 CSS 与 Web Animations 的时间参数；量参考网站动效最快的办法。 — Inspect, slow down (25% or 10%), scrub and edit the timing of CSS and Web Animations on any live page; the fastest way to measure a reference site's motion [A · static]
- Lottielab — https://www.lottielab.com — 浏览器里的 Lottie 动画编辑器：从 Figma 或 SVG 导入、时间轴编排，导出 Lottie、GIF、MP4，不必用 After Effects。 — Browser editor for Lottie animations: import from Figma or SVG, animate on a timeline, export Lottie, GIF or MP4 without After Effects [A · static]
- Linear easing generator — https://linear-easing-generator.netlify.app — 把 JS 缓动函数或 SVG 路径转成 CSS linear() 的小工具；想用纯 CSS 做弹簧与回弹动画时直接抄结果。 — Converts a JS easing or SVG path into a CSS linear() function (springs and bounces in pure CSS) [A · js]
- cubic-bezier.com — https://cubic-bezier.com — 经典缓动曲线编辑器，支持并排对比；调自定义曲线时和预设对照手感。 — Classic bezier editor with side-by-side comparison [A · js]
- Animista — https://animista.net — CSS 关键帧预设库，直接生成代码；只当起点，时长与缓动都要自己重调。 — Library of CSS keyframe presets with generated code [B · static]

### Official motion guidance and accessibility · 官方动效指引与无障碍
- WWDC18: Designing Fluid Interfaces — https://developer.apple.com/videos/play/wwdc2018/803/ — WWDC18 经典演讲，讲手势驱动、可中断、可改向的界面；做拖拽、抽屉、滑动交互前先看。 — The foundational talk on gesture-driven, interruptible, redirectable interfaces [S · static]
- WWDC23: Animate with springs — https://developer.apple.com/videos/play/wwdc2023/10158/ — Apple 用 duration 和 bounce 讲弹簧动画，取代质量刚度阻尼那套；写任何平台的动效标注都可借用它的词汇。 — Explains springs through duration and bounce instead of mass, stiffness and damping [S · static]
- Carbon motion — https://carbondesignsystem.com/elements/motion/overview/ — IBM Carbon 的双模式动效：效率型（克制、不打扰）与表现型（只留给少数重要时刻），公开 cubic-bezier 曲线与 70–700ms 六档时长 token；搭自家动效 token 的范本。 — IBM's two-mode motion system: productive (efficient, out of the way) versus expressive (for occasional important moments), with published cubic-bezier curves and six duration tokens from 70 ms to 700 ms [A · static]
- NN/g: Animation duration — https://www.nngroup.com/articles/animation-duration/ — NN/g 用证据回答界面动画该持续多久；要顶回拖慢的动画方案时引用它。 — Evidence-based guidance on how long UI animations should last [A · static]
- NN/g: Animation purpose — https://www.nngroup.com/articles/animation-purpose-ux/ — NN/g 文章，讲清动效何时有用：反馈、状态变化、导航隐喻、指示线索；给每个动画找理由时用。 — When motion helps: feedback, state change, navigation metaphors, signifiers [A · static]
- WCAG: Animation from Interactions — https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html — WCAG 条文：交互触发的动画必须能让用户关闭；做动效无障碍的规范性依据，配 2.2.2 一起读。 — The normative basis for letting users disable interaction-triggered motion [A · static]
- web.dev: prefers-reduced-motion — https://web.dev/articles/prefers-reduced-motion — web.dev 讲如何在网页上正确实现 prefers-reduced-motion；推荐按 no-motion-first 模式，先保证无动画可用再加动效。 — How to implement reduced motion well on the web [A · static]
- Designing Safer Web Animation For Motion Sensitivity — https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/ — 讲清哪些动效会诱发前庭不适、如何规避；做视差、缩放和大面积运动前对照检查。 — Which kinds of motion trigger vestibular symptoms and how to design around them [A · static]
- Material 3 motion — https://m3.material.io/styles/motion/overview — Material 3 的动效体系，缓动与时长 token、转场模式和弹簧动效方案；定动效规范时读。 — Motion system with easing and duration tokens, transition patterns and the expressive spring-based motion scheme [A · js]
- Material 2: Speed — https://m2.material.io/design/motion/speed.html — Material 2 讲时长与缓动如何随尺寸、距离、平台变化，至今最清楚；道理比版本长寿。 — Still the clearest public explanation of how duration and easing should vary with size, distance and platform [A · js]
- Apple HIG: Motion — https://developer.apple.com/design/human-interface-guidelines/motion — Apple 的动效准则：有目的、简短、可关闭，尊重减弱动态效果设置；给动效定原则时先读。 — Apple's principles: purposeful, brief, optional motion; respecting Reduce Motion [A · js]
- HarmonyOS motion design principles — https://developer.huawei.com/consumer/cn/doc/design-guides/animation-design-principles-0000001750237392 — 华为 HarmonyOS 动效设计原则：自然流畅、简洁高效、快速响应、运动一致、隐藏等待、凸显品牌，并给出长距离 350ms、短距离 250ms、较短 150ms 的时长上限。 — Huawei's motion principles for HarmonyOS apps with concrete duration caps: long moves within 350 ms, short within 250 ms, small within 150 ms [A · js]
- Fluent 2 motion — https://fluent2.microsoft.design/motion — 微软 Fluent 2 的动效原则与时间指引，讲动画在界面里的职责；要做出 Windows 原生手感时参考。 — Microsoft's motion principles and timing guidance [B · static]
- Ant Motion — https://motion.ant.design — Ant Design 的动效语言与 React 动效组件；做国内企业级产品时用中文读它的动效原则。 — Ant Design's motion language and React motion components [B · js]

### Writing and courses on motion craft · 动效写作与课程
- Emil Kowalski — https://emilkowal.ski — 网页动效工艺最实用的博客，讲缓动、时长、可打断与何时不动；写动效前读他的几篇代表作。 — The most practical writing on web UI animation craft: easing choice, durations, origin-aware and interruptible animation, when not to animate [S · static]
- animations.dev — https://animations.dev — Emil Kowalski 的网页动效课程，兼顾理论与手感；团队要统一动效水准时值得买，付费。 — Emil Kowalski's course on the theory and practice of web animation [A · static]
- Josh W. Comeau — https://www.joshwcomeau.com — 用可交互示例讲透 CSS 过渡、关键帧与弹簧物理的博客，想真正弄懂网页动效原理就读它。 — Interactive explanations of CSS transitions, keyframes, spring physics and linear() [A · static]
- Family Values — https://benji.org/family-values — Family 钱包团队讲简洁、流畅与愉悦的动效原则，配实例；核心一条：每个元素都应从某处来。 — How the Family wallet team thinks about simplicity, fluidity and delight, with examples [A · static]
- Devouring Details — https://devouringdetails.com — Rauno Freiberg 的交互工艺互动手册：23 章，每章附可下载的 React 组件，演示均录自真实代码；付费。 — Rauno Freiberg's interactive reference manual on interaction craft: 23 chapters, each with a downloadable React component, all footage recorded from real code [A · static]
- The physics behind spring animations — https://blog.maximeheckel.com/posts/the-physics-behind-spring-animations/ — 弹簧动画的物理推导长文，质量、刚度、阻尼三个参数配交互例子讲透；数值调弹簧时读。 — Clear derivation of mass, stiffness and damping with interactive examples [A · static]
- web.dev: animations guide — https://web.dev/articles/animations-guide — web.dev 的动画性能指南，讲哪些属性动起来便宜、如何留在合成层；动非常规属性前查表。 — Which properties animate cheaply and how to keep motion on the compositor [A · static]
- The Web Animation Performance Tier List — https://motion.dev/magazine/web-animation-performance-tier-list — Motion 作者 Matt Perry 按开销给网页动画属性分级（合成、重绘、布局、JS）并解释原因；写动效规格时逐个属性查它的等级。 — Matt Perry's ranking of what is cheap and what is expensive to animate on the web (compositor, paint, layout, JS), with the reasons [A · static]
- UX in Motion Manifesto — https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc — 提出动效支持可用性的十二条原则：缓动、错时延迟、父子关系等；用它的术语描述动画编排。 — Twelve principles of how motion supports usability (easing, offset and delay, parenting, transformation, masking...) [A · blocked]

### Native platform motion · 原生平台动效
- SwiftUI Animation — https://developer.apple.com/documentation/swiftui/animation — SwiftUI 动画官方文档，弹簧预设 smooth、snappy、bouncy 及参数都在这；写 iOS 动效、调手感时先查。 — Reference for SwiftUI animations, springs and transitions [A · static]
- Open SwiftUI Animations — https://github.com/amosgyamfi/open-swiftui-animations — 开源的 SwiftUI 动画示例大合集，覆盖常见动效；找到相近效果直接读它的源码；Unlicense（公有领域）。 — Large open collection of SwiftUI animation examples [A · static]
- Compose: choose an animation API — https://developer.android.com/develop/ui/compose/animation/choose-api — Jetpack Compose 动画 API 的官方选型决策树；做任何 Android 动效工作都先从这页开始查。 — Decision tree for Jetpack Compose animation APIs [A · static]
- Flutter animations — https://docs.flutter.dev/ui/animations — Flutter 官方动画文档，讲隐式与显式动画、hero、交错和物理动画；先用隐式组件兜底。 — Implicit versus explicit animation, hero, staggered and physics-based animation in Flutter [A · static]
- flutter_animate — https://pub.dev/packages/flutter_animate — Flutter 的声明式链式动效库，时间参数合理；在 Flutter 里做界面动效的默认选择；BSD-3-Clause。 — Declarative chained effects for Flutter with sensible timing control [A · static]
- React Native Reanimated — https://docs.swmansion.com/react-native-reanimated/ — React Native 的标准动画库：在 UI 线程运行，支持弹簧、布局动画与共享元素转场，配合 Gesture Handler 做跟手交互；MIT。 — The standard animation library for React Native: UI-thread animations, springs, layout and shared-element transitions, paired with Gesture Handler [A · static]
- WeChat Mini Program animation docs — https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html — 微信小程序官方动画文档：CSS 过渡、this.animate 关键帧接口（基础库 2.9.0 起）与动画事件；写动效规格前先确认页面用的渲染引擎。 — Official guide to animation in WeChat Mini Programs: CSS transitions, the this.animate keyframe API (base library 2.9.0+) and animation events [A · static]
- Enhance your UI animations and transitions (WWDC24) — https://developer.apple.com/videos/play/wwdc2024/10145/ — WWDC24 演讲：SwiftUI 与 UIKit 的缩放（zoom）导航转场、用 SwiftUI 动画驱动 UIKit 视图、保持连续的手势动画；设计卡片展开到详情页的转场前看。 — Apple's talk on the zoom navigation transition in SwiftUI and UIKit, animating UIKit views with SwiftUI animations, and gesture-driven animations that stay continuous [A · static]
- ArkUI animation guide — https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-animation — HarmonyOS ArkUI 动画开发指南：属性动画、转场动画、弹簧等动画曲线与帧率要点；交付鸿蒙应用前，把动效 token 映射到这里的参数。 — HarmonyOS developer guide to ArkUI animation: property and transition animation, curves including springs, and frame-rate considerations [A · js]

## Icons · 图标 (icons)

### Icon families · 图标家族
- Lucide — https://lucide.dev — Feather 的社区后继图标库，24px、2px 描边，各框架都有包、可直接取 SVG；中性产品界面的默认选择，ISC 协议。 — Clean 24 px, 2 px-stroke community icon family (successor to Feather) with packages for every framework and a published design guide [S · static]
- Phosphor Icons — https://phosphoricons.com — 六种字重（含 fill、duotone）的图标家族，几何亲和、覆盖广；一个产品只选一种字重，MIT。 — Flexible family in six weights (thin to bold, fill, duotone); friendly geometry, wide coverage [S · js]
- Material Symbols — https://fonts.google.com/icons — Google 的可变图标字体，描边、圆角、锐利三种风格，填充、字重、灰度、视觉字号四轴可调；Apache-2.0。 — Google's variable icon font in outlined, rounded and sharp styles with FILL, wght, GRAD and opsz axes [S · js]
- Tabler Icons — https://tabler.io/icons — 24px 网格上的六千多个图标，描边粗细可调，是免费图标里覆盖面最广的一套；MIT。 — 6,000+ icons on a 24 px grid with adjustable stroke, in outline and filled; the widest free coverage in one consistent style [A · static]
- SF Symbols — https://developer.apple.com/sf-symbols/ — 苹果官方符号体系，与 San Francisco 字重对齐并支持动画；许可限定苹果平台，别用于 Web。 — Apple's symbol system aligned with San Francisco: weights, scales, rendering modes, animation [A · static]
- Heroicons — https://heroicons.com — Tailwind 团队出品的小巧图标集，四种尺寸风格，画法讲究；可直接取 SVG 文件用；MIT。 — Small, well-drawn set in four sizes and styles from the Tailwind team [A · static]
- Iconoir — https://iconoir.com — 1600+ 枚描边风格的开源图标，线条气质比 Lucide 略柔和一点；前端各框架都有现成包，MIT 协议。 — 1600+ stroke icons with a slightly softer character than Lucide [A · static]
- Fluent System Icons — https://github.com/microsoft/fluentui-system-icons — 微软开源图标族，regular 与 filled 两种风格多尺寸齐全；微软生态产品直接用。MIT。 — Microsoft's icon family in regular and filled at many sizes [A · static]
- Carbon icons — https://carbondesignsystem.com/elements/icons/library/ — IBM Carbon 的企业级图标与象形图，按 16/20/24/32px 四种精度设计；配密集型企业级界面用；Apache-2.0。 — Precise enterprise icons and pictograms designed at 16, 20, 24 and 32 px [A · static]
- Bootstrap Icons — https://icons.getbootstrap.com — 两千多个通用图标，SVG 与图标字体两种形态；常规 Web 应用的稳妥选择，MIT 协议。 — 2000+ general-purpose icons, SVG and font [A · static]
- Hugeicons — https://hugeicons.com — 量级很大的多风格图标库，免费档只有一款圆角描边风格；商用前确认所需风格是否在免费档。 — Very large set in many styles; the free tier is one stroke-rounded style [A · static]
- Streamline — https://www.streamlinehq.com — 多风格图标与插画大库，家族内部风格统一；选定一套用到底，免费版需署名回链，付费可免。 — Huge multi-style icon and illustration library with coherent families [A · static]
- lucide-animated — https://lucide-animated.com — 用 Motion 给 Lucide 图标加动效的 React 组件，复制粘贴即用；只点缀关键瞬间，别全用；MIT。 — Lucide icons animated with Motion as copy-paste React components [A · static]
- Fluent Emoji — https://github.com/microsoft/fluentui-emoji — 微软开源的 emoji 集，四种风格（3D、彩色、扁平、高对比），SVG 与 PNG 都有；也能当亲切的点缀插画用；MIT。 — Microsoft's open emoji set in four styles (3D, Color, Flat, High Contrast) as SVG and PNG; usable as friendly spot illustrations [A · static]
- Noto Emoji — https://github.com/googlefonts/noto-emoji — Google 开源的 emoji 字体与图片，另有按码位提供的动画版（Lottie、WebP、GIF）；需要会动的 emoji 时直接按码位取 lottie.json。 — Google's open emoji font and images, plus animated versions (Lottie, WebP, GIF) served per codepoint from fonts.gstatic.com [A · static]
- Ant Design Icons — https://ant.design/components/icon-cn — Ant Design 官方图标集，线框、实底、双色三种主题，国内中后台与企业产品最常见的图标；MIT。 — The icon set of Ant Design in outlined, filled and two-tone themes, the default in Chinese admin and enterprise products [A · static]
- Remix Icon — https://remixicon.com — 中性风格的线性与面性成对图标，国内产品常用；2026 年起改用自有许可，商用免费但禁打包转售。 — Neutral line and fill pairs with broad coverage; widely used in Chinese products [A · js]
- MingCute — https://www.mingcute.com — 三千多个线面成对、配比均衡的圆润风图标，提供 SVG、React、字体与 Figma 多种格式；Apache-2.0。 — 3000+ carefully balanced line and fill pairs with a rounded, friendly feel [A · js]
- HarmonyOS Symbol — https://developer.huawei.com/consumer/cn/design/harmonyos-symbol — 华为 HarmonyOS 系统图标库：具备字体属性、多层配色与分层动效，对应苹果的 SF Symbols；鸿蒙原生应用优先用它。 — Huawei's system symbol library for HarmonyOS: font-like symbols with weights, multi-layer colour modes and layered animation, the counterpart of SF Symbols [A · js]
- Font Awesome — https://fontawesome.com — 无处不在的图标工具包（v7），免费提供 solid、regular 与品牌图标，付费风格很多；自绘图标可照它的 20px 画布与基本形指南。 — The ubiquitous icon toolkit (v7) with a free solid, regular and brands set and many paid styles; a published 20 px canvas and keyshape guide for custom icons [A · js]
- Solar Icons — https://www.figma.com/community/file/1166831539721848736 — 480 Design 出品的 8000+ 图标，六种风格（线性、线性双色、粗体、粗体双色、断线、轮廓），气质圆润；设计用 Figma 文件，代码走 Iconify 的 solar 前缀。 — 8,000+ icons from 480 Design in six styles (linear, line duotone, bold, bold duotone, broken, outline) with a soft, rounded character [A · blocked]
- Untitled UI Icons — https://www.untitledui.com/free-icons — 配合热门 UI kit 设计的 24px 描边图标集；免费档只有线性风格可商用，其余风格付费。 — Tidy 24 px stroke set designed alongside a popular UI kit [B · static]
- Radix Icons — https://www.radix-ui.com/icons — 15px 规格的紧凑图标集，密集界面里比 16px 图标更利落；数据表、工具栏场景适用。MIT。 — Crisp 15 px icons for compact interfaces [B · static]
- Pixelarticons — https://pixelarticons.com — 像素网格图标，走复古或俏皮方向时用；缩放保持基准网格整数倍；免费集 MIT。 — Pixel-grid icons for retro or playful directions [B · static]
- Health Icons — https://healthicons.org — 医疗健康领域的公共版权图标集，补齐通用图标库没有的专科符号，CC0。 — Public-domain medical and health icons [B · static]
- Game-icons.net — https://game-icons.net — 4000+ 游戏与奇幻题材图标，做游戏界面或桌游物料的素材库；CC BY，必须署名。 — 4,000+ game and fantasy glyphs by Lorc, Delapouite and contributors, restylable on the site (colour, background, effects) and downloadable as SVG or PNG [B · static]
- Lordicon — https://lordicon.com — 数量很大的 Lottie 动画图标库，带悬停等交互触发；免费档使用需署名。 — Large animated icon library (Lottie) with interactive triggers [B · static]
- Central Icon System — https://iconists.co/central — 付费图标系统，2000+ 图形、每个约 30 种变体（粗细、圆角、线面）；图标圆角与粗细必须匹配界面 token 时用。 — Paid system of 2,000+ symbols, each in about 30 variants (stroke weights, corner radii, line or solid), for tuning icons to a brand's radius and weight [B · static]
- IconPark — https://iconpark.oceanengine.com — 字节跳动的 2600+ 图标，描边、四种主题和拐角都是参数；Apache-2.0。GitHub 仓库 2023 年已归档，不再更新。 — ByteDance's 2600+ icons whose stroke, theme (outline, filled, two-tone, multi-colour) and joins are props [B · js]

### Search, aggregators and APIs · 搜索、聚合与 API
- Iconify — https://iconify.design — 聚合 150 多个开源图标集的统一 API 和工具层；按需取 SVG，各图标集许可各自标注。 — One API and tooling layer over 150+ open icon sets [S · static]
- The Noun Project — https://thenounproject.com — 概念覆盖最广的象形图标库，冷僻概念也能找到；风格杂不宜混用，免费版需署名，付费免署名。 — The widest range of pictograms for unusual concepts [A · static]
- Yesicon — https://yesicon.app — 支持中文等多语言关键词的 Iconify 图标搜索，覆盖 230+ 开源图标集、32 万+ 图标，并生成各框架代码；搜到后坚持用同一套。 — Iconify-based search with Chinese (and eight other languages) keywords across 320,000+ open-source icons in 230+ sets, with per-framework code snippets [A · static]
- Icones — https://icones.js.org — 快速浏览全部 Iconify 图标集的前端，可复制为 SVG、JSX、Vue 等格式；跨集搜索后选定一族用。 — Fast browser for all Iconify sets with copy-as (SVG, JSX, Vue, data URL) [A · js]
- iconfont — https://www.iconfont.cn — 国内最大的图标平台：海量上传图标、官方品牌与产品图标库、团队项目，可导出 SVG、字体图标或 Symbol 引用；国内团队的默认图标来源。 — China's largest icon platform: millions of uploaded icons, official brand and product sets, team projects and export as SVG, icon font or Symbol JS [A · js]
- SVG Repo — https://www.svgrepo.com — 五十多万个 SVG 与图标合集；各合集许可不同需逐个确认，优先整套取用保证风格统一。 — 500k+ SVG vectors and icon collections [A · blocked]
- Flaticon — https://www.flaticon.com — Freepik 旗下的海量图标素材站，搜索排名靠前；收录主要为了说清授权：免费下载必须署名，优先用本栏的开源图标家族。 — Huge stock-icon marketplace (Freepik) that ranks first in many searches; listed mainly so its licence terms are known [B · blocked]

### Brand and vendor logos · 品牌与厂商 logo
- Simple Icons — https://simpleicons.org — 三千多个单色品牌图标，附官方色值，可走 CDN；SVG 为 CC0，商标权仍在各品牌方。 — 3000+ single-colour brand icons with official hex colours [S · js]
- Lobe Icons — https://lobehub.com/icons — AI 模型与厂商的 SVG 和 React logo 库；要正确的 AI 厂商标志走这条捷径，代码 MIT、商标归原主。 — SVG and React logos of AI models and providers [A · static]
- SVGL — https://svgl.app — 全彩品牌 logo 的 SVG 库，含明暗两套变体和查询 API；做品牌墙时取用。项目 MIT，商标归原厂。 — Full-colour brand SVG logos with light and dark variants and an API [A · static]
- Devicon — https://devicon.dev — 编程语言与开发工具的 Logo 集，含原色、单色与线稿变体，SVG 与字体都有；技术栈展示区统一用一种变体，商标归原所有者；MIT。 — Logos of programming languages and developer tools in original, plain and line variants, as SVG and an icon font [A · static]
- Logo.dev — https://www.logo.dev — 按域名获取公司 Logo 的 API，是已停用的 Clearbit Logo API 的常用替代；仪表盘里的客户 Logo 用它，需免费 token，免费档要署名。 — Company-logo API by domain (img.logo.dev/<domain>?token=...), the common replacement for the retired Clearbit Logo API [A · blocked]

### Icon design guidance · 图标设计指引
- Lucide icon design guide — https://lucide.dev/contribute/icons/design-principles — 24px 描边图标族的数字化设计规则：画布、留白、描边、圆角、视觉平衡；自建图标规范的模板。 — Concrete, numeric rules for a 24 px stroke icon family: canvas, padding, stroke, radii, spacing, optical balance [S · static]
- Fluent 2: Iconography — https://fluent2.microsoft.design/iconography — 微软 Fluent 2 的图标规范：系统、产品与文件类型图标，按固定尺寸出图不缩放、48px 以下简化细节、按形状而非功能命名（盾牌而非安全）。 — Microsoft's rules for system, product and file-type icons: fixed sizes instead of scaling, simplification below 48 px, and literal naming (shield, not security) [A · static]
- Ant Design icon design spec — https://ant.design/docs/spec/icon-cn — Ant Design 图标设计规范：1024 画板、64px 出血位、分层、轮廓线模板，以及准确、简单、节奏、愉悦四原则（偶数原则、去小数点）；写中文图标规范的模板。 — Ant Design's icon rules in Chinese: 1024 artboard with a 64 px bleed, layer structure, keyline templates, and four principles (accurate, simple, rhythmic, pleasant) [A · static]
- Material: designing icons — https://m3.material.io/styles/icons/designing-icons — Material 的图标绘制规范：关键形状、网格、描边、视觉尺寸；用 keyline 统一整套图标的视觉重量。 — Keyline shapes, grid, stroke and corner rules, optical sizes and the variable axes [A · js]
- Apple HIG: SF Symbols — https://developer.apple.com/design/human-interface-guidelines/sf-symbols — Apple 官方讲 SF Symbols 的渲染模式、可变色彩、字重与缩放；为 Apple 平台画自定义符号前必读。 — Rendering modes, variable colour, weights and scales, custom symbol guidance [A · js]

### App icons and favicons · 应用图标与 favicon
- How to Favicon in 2026 — https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs — 现代 favicon 最小方案（2026 年 1 月复核）：HTML 里只放 favicon.ico、icon.svg、apple-touch-icon.png，PWA 再加含 192、512 与 maskable 图标的 manifest。 — The minimal modern favicon set, re-checked January 2026: favicon.ico, icon.svg and apple-touch-icon.png in HTML, plus a web manifest with 192, 512 and maskable icons for PWAs [S · static]
- iOS Icon Gallery — https://www.iosicongallery.com — 精选的 iOS、macOS、watchOS 应用图标画廊；按目标类目研究成熟作品的剪影与配色套路。 — Curated app icons for iOS, macOS and watchOS [A · static]
- macOSicons — https://macosicons.com — macOS 风格应用图标的社区画廊，体量很大；揣摩 macOS 图标语言时参考，仅限个人使用。 — Huge community gallery of macOS-style app icons [A · static]
- Apple Icon Composer — https://developer.apple.com/icon-composer/ — Apple 官方的分层图标制作工具，用 SVG/PNG 图层生成带材质的 App 图标；出苹果平台图标时用。 — Apple's tool for building layered, material-aware app icons from SVG or PNG layers [A · static]
- Maskable.app — https://maskable.app — 预览和编辑 PWA maskable 图标的工具，对照各种遮罩形状检查安全区，发 manifest 前用它过一遍。 — Preview and edit PWA maskable icons against every mask shape [A · static]
- RealFaviconGenerator — https://realfavicongenerator.net — 生成并校验一整套符合现行标准的 favicon 的工具；站点部署上线后跑一遍它的 checker。 — Generates and checks a complete, current favicon package [A · static]
- Apple HIG: App icons — https://developer.apple.com/design/human-interface-guidelines/app-icons — Apple 官方应用图标规范：分层结构、深色/透明/染色外观与各平台形状；导出前对照，规则随系统更新。 — Current rules for layered app icons, appearances (default, dark, clear, tinted) and platform shapes [A · js]
- Icon Kitchen — https://icon.kitchen — 一份图稿生成 Android 自适应图标与 iOS、web、macOS 全套尺寸；出应用图标时省事，导出前先预览蒙版与单色层。 — Generates adaptive Android icons and iOS, web and macOS icon sets from one artwork [A · js]
- HarmonyOS app icon guidelines — https://developer.huawei.com/consumer/cn/doc/design-guides/application-icon-0000001953444009 — 华为 HarmonyOS 应用图标规范：前后景分层、体量网格、自上而下光源、9 种推荐色彩方向与多设备适配；导出鸿蒙图标前逐项核对。 — Huawei's rules for HarmonyOS app icons: foreground and background layers, grid for visual weight, top-down lighting, nine recommended colour directions and multi-device adaptation [A · js]

### SVG tooling · SVG 工具
- SVGOMG — https://jakearchibald.github.io/svgomg/ — SVGO 的可视化前端，压缩 SVG 时实时对照前后差异；保留 viewBox，精度降到变形前回退。 — Visual front end for SVGO with a live diff [S · static]
- SVGO — https://svgo.dev — 多数流水线背后的 SVG 优化器；配置时保留 viewBox、别把描边路径合并掉；MIT。 — The SVG optimiser behind most pipelines [A · static]
- SVG Viewer — https://www.svgviewer.dev — 在线查看、优化并转换 SVG 的小工具，可导出 JSX、React Native、data URI 与 PNG；手写 SVG 代码后用它快速校验。 — View, optimise and convert SVG to JSX, React Native, data URI and PNG [A · static]
- VTracer — https://www.visioncortex.org/vtracer/ — 支持彩色图像的位图转矢量工具；描完草图要重绘干净，别直接交原始描摹；MIT。 — Raster-to-vector tracer that handles colour images [A · static]
- SVG Path Editor — https://yqnn.github.io/svg-path-editor/ — 在线按数值编辑 SVG path 指令，实时预览取整、缩放、平移；把手写路径对齐到网格时用。 — Edit path commands numerically with a live preview: round, scale, translate, convert to relative [A · js]
- Boxy SVG — https://boxy-svg.com — 浏览器里的 SVG 编辑器，输出的标记干净；适合手工修整生成的 SVG 文件。 — Browser-based SVG editor that writes clean markup [B · js]

## Visual assets · 视觉素材 (assets)

### Illustrations · 插画
- unDraw — https://undraw.co — 开源扁平插画库，可按品牌色一键换色后下载；用的人太多，需改造型再用。商用免费。 — Open-source flat illustrations recolourable to a brand hue [A · static]
- Open Peeps — https://www.openpeeps.com — 手绘人物插画库，头、身、姿势等部件可自由拼组；需要快速拼出人物配图时用；CC0。 — Mix-and-match hand-drawn people library [A · static]
- Blush — https://blush.design — 多位艺术家的可定制插画合集，配色和元素可调；同一项目只用一个合集保一致，SVG 和完整库付费。 — Customisable illustration collections from many artists [A · static]
- Recraft — https://www.recraft.ai — 能输出可编辑矢量（SVG）插画与图标、并保存品牌风格的 AI 生成工具，带 API；补齐同风格素材后，在编辑器里清理路径再交付。 — AI generator that outputs editable vector (SVG) illustrations and icons in a saved brand style, with an API [A · static]
- Open Doodles — https://www.opendoodles.com — 松散手绘风插画集，带配色生成器；想要随意亲切调性的页面时用，CC0 可商用。 — Loose sketchy illustration set with a colour generator [B · static]
- Storyset — https://storyset.com — 可自定义配色、可设动画的插画概念库；免费档使用必须署名，介意就付费。 — Customisable and animatable illustration concepts [B · static]
- Absurd Design — https://absurd.design — 超现实手绘墨水插画，跳出扁平矢量的同质化；适合想要怪一点人味儿的品牌；署名免费，会员更多。 — Surreal ink illustrations that stand out from flat-vector sameness [B · static]

### 3D · 3D 素材
- Poly Haven — https://polyhaven.com — 公共领域的 HDRI、PBR 贴图与模型库，质量高且带 API；做 3D 场景打光与材质时当默认来源用，CC0 可商用。 — Public-domain HDRIs, PBR textures and models of high quality [S · static]
- 3dicons — https://3dicons.co — 开源 3D 图标库，每个图标有多个角度和配色的渲染成品；提供 PNG 与 Blender 源文件。CC0。 — Open-source 3D icons rendered in several angles and colours [A · static]
- ambientCG — https://ambientcg.com — 公共领域（CC0）的 PBR 材质库，覆盖常见表面；做 3D 渲染找贴图时的常备第二来源。 — Public-domain PBR materials [A · static]
- Spline — https://spline.design — 浏览器里的 3D 设计工具，支持状态、事件与网页导出，社区有大量可二次创作的场景；嵌入首屏前在中端手机上测体积与加载。 — Browser 3D design tool with states, events and web export, plus a community of remixable scenes [A · static]
- Kenney — https://kenney.nl — 数千个风格统一的 CC0 游戏素材：2D、3D、UI 套件与音效；趣味原型与游戏界面零授权风险。 — Thousands of stylistically consistent CC0 game assets: 2D sprites, 3D models, UI packs and audio [A · static]
- Sketchfab — https://sketchfab.com — 最大的 3D 模型平台，带可嵌入查看器、「可下载」筛选与大量 CC 授权模型；网页使用前查面数与贴图大小，CC BY 模型记下署名。 — The largest 3D model platform, with an embeddable viewer, a Downloadable filter and many Creative Commons models [A · static]
- D.Design — https://d.design — 阿里巴巴设计的堆友平台：原创 3D 头像、场景与元素，标注免费可商用，带在线渲染与 AI 设计工具；同一产品只用一种 3D 风格。 — Alibaba Design's platform: original 3D avatars, scenes and elements marked free for commercial use, with online rendering and AI design tools [A · js]

### Photography and video · 摄影与视频
- Unsplash — https://unsplash.com — 高质量免费摄影库；避开被用滥的图，照片处理风格要统一；可商用但不得转售原图，Unsplash+ 付费。 — High-quality free photography with strong editorial, lifestyle and texture depth; the usual first search for free photos [A · static]
- Coverr — https://coverr.co — 为网页背景而生的素材视频库；多数片段免费许可，使用时记得压缩并备好 poster 帧。 — Stock video made for website backgrounds [A · static]
- Mixkit — https://mixkit.co — 免费视频、音乐与音效素材站；给界面配克制的音效时来这找；按素材类型各有许可。 — Free video clips, music and UI sound effects [A · static]
- The Met Open Access and Collection API — https://metmuseum.github.io/ — 大都会艺术博物馆的免密钥 JSON API，isPublicDomain 为真的藏品附高清 CC0 图片；做编辑、历史与纹理类配图零授权风险。 — Keyless JSON API over the Metropolitan Museum's collection; objects flagged isPublicDomain come with high-resolution CC0 images [A · static]
- Wikimedia Commons — https://commons.wikimedia.org — 最大的自由媒体库：照片、地图、示意图与历史图像，每个文件页写明授权与作者；照抄文件页的授权与署名。 — The largest free media repository: photos, maps, diagrams and historical images, each with its licence and author on the file page [A · static]
- Tuchong Creative — https://stock.tuchong.com — 图虫创意：面向国内的正版商用图片、视频、音频素材库，Adobe Stock 中国区官方独家合作伙伴；国内维权积极，逐张保留授权记录。 — Licensed commercial stock images, video and audio for China; Adobe Stock's exclusive partner in mainland China [A · static]
- Pexels — https://www.pexels.com — 免费照片与素材视频库，带 API；拿来做短背景视频很顺手；可商用。 — Free photos and stock video with an API [A · blocked]
- Openverse — https://openverse.org — WordPress 基金会的开放授权图片与音频搜索引擎，可按授权筛选，另有免登录的 JSON API；筛「可商用、可修改」并保存返回的署名字符串。 — WordPress's search engine for openly licensed images and audio, with licence filters and an anonymous JSON API [A · blocked]
- Smithsonian Open Access — https://www.si.edu/openaccess — 史密森尼学会数百万条 CC0 图像与档案（博物馆、档案馆、动物园），网站与 API 都能搜；编辑和历史类配图零授权风险。 — Millions of CC0 images and records from Smithsonian museums, archives and zoos, searchable on the site and through an API [A · blocked]
- Hellorf — https://www.hellorf.com — 站酷海洛：站酷旗下的正版图片、视频、字体与音乐交易平台；国内第二个正版来源，逐张保留授权记录。 — ZCOOL's licensed marketplace for images, video, fonts and music in China [A · blocked]
- Lummi — https://www.lummi.ai — AI 生成的配图库，风格一致性较好，免费用；正式场合注意披露合成来源，并检查生成痕迹。 — AI-generated stock imagery with consistent styles [B · static]
- Visual China Group — https://www.vcg.com — 国内最大的付费图库，版权管理严格、维权积极；做面向国内的项目别用网上随手找的图。 — Mainland China's dominant paid stock library [B · blocked]

### Mock-ups and screenshot tools · 样机与截图工具
- Shots — https://shots.so — 浏览器里的设备与浏览器样机工具，默认就好看；丢截图、选边框、导出，三步完事。 — Fast browser tool for device and browser mock-ups with good defaults [S · static]
- Pika — https://pika.style — 截图美化与社交分享图模板工具；营销页需要快速出产品展示图时用。 — Screenshot beautifier and social-image templates [A · static]
- Mockuuups Studio — https://mockuuups.studio — 数千个实拍设备场景样机，快速把界面放进手机电脑照片里；克制使用，干净画框更显设计。 — Thousands of photographic device scenes [A · static]
- LS Graphics — https://www.ls.graphics — 高端设备与印刷样机库；做品牌提案展示用；按产品付费，部分免费。 — High-end device and print mock-ups [A · static]
- Rotato — https://rotato.app — 3D 设备样机动画工具，把界面截图放进会动的手机电脑模型里；做发布视频与应用商店预览时用。 — 3D device mock-up animator for product videos [A · static]
- Screen Studio — https://screen.studio — macOS 录屏工具，自动缩放、平滑光标与构图，快速做出精致的产品演示视频；录已完成的界面用于发布与商店预览。 — macOS screen recorder that adds automatic zoom, smoothed cursor movement and framing, for polished product demos [A · static]
- MockUPhone — https://mockuphone.com — 免费的扁平设备边框图，没有场景装饰，快速给截图套壳展示时用。 — Free flat device frames [B · static]

### Backgrounds, gradients, patterns and shaders · 背景、渐变与纹理
- Haikei — https://haikei.app — 色块、波浪、层叠山峰、模糊渐变等背景生成器，导出 SVG 或 PNG；生成素材可免费使用。 — Generators for blobs, waves, layered peaks, blurry gradients, exported as SVG or PNG [S · static]
- fffuel — https://www.fffuel.co — SVG 生成器合集：噪点、颗粒、有机形状、图案和渐变；做纹理背景时按需挑选。 — Collection of SVG generators: noise, grain, organic shapes, patterns, gradients [S · static]
- Paper Shaders — https://shaders.paper.design — 零依赖 shader 组件库，含网格渐变、颗粒、抖动、形变；给网页加实时 shader 背景最干净的选择，Apache-2.0。 — Zero-dependency shader components (mesh gradient, grain, dithering, warp) for React and vanilla JS [S · static]
- Grainient — https://grainient.supply — 颗粒渐变背景、动态渐变与 shader 工具；当美术方向参考，再用代码复刻以掌控细节；有免费和付费包。 — Grainy gradient backgrounds, animated gradients and shader tools [A · static]
- Hero Patterns — https://heropatterns.com — 可调色的可平铺 SVG 背景图案库；给区块加纹理时压低不透明度用，需署名；CC BY 4.0。 — Repeatable SVG background patterns with colour controls [A · static]
- Pattern Monster — https://pattern.monster — 可调参数的 SVG 图案生成器，导出为 CSS 背景或 SVG 文件；给页面做纹理底纹时直接用。 — Customisable SVG pattern generator [A · static]
- gradient.style — https://gradient.style — 现代 CSS 渐变生成器，支持广色域与色彩空间插值；用 oklch 或 oklab 插值可避免中间发灰。 — Modern CSS gradient builder with colour-space interpolation and wide gamut [A · static]
- Josh Comeau gradient generator — https://www.joshwcomeau.com/gradient-generator/ — 按感知色彩模式生成多段渐变的工具，色层丰润；浏览器不支持 oklch 插值时的替代方案。 — Generates lush multi-stop gradients via perceptual colour modes [A · static]
- ShaderGradient — https://shadergradient.co — 动态 3D 渐变定制器，可导出 React、Figma 和 Framer 三种形态；记得导一张静帧给 reduced-motion 场景兜底；MIT。 — Moving 3D gradient customiser with React, Figma and Framer outputs [A · js]
- Unicorn Studio — https://unicorn.studio — 无代码 WebGL 场景搭建工具，做首屏特效；注意运行时体积，离屏时记得暂停。 — No-code WebGL scene builder for hero effects [A · js]
- Shadertoy — https://www.shadertoy.com — GLSL shader 社区，学着色器技法的最佳现场，网页背景动效的灵感源；默认 CC BY-NC-SA，商用前逐条查许可。 — Community of GLSL shaders; unmatched for learning techniques [A · blocked]
- Grainy Gradients (CSS-Tricks) — https://css-tricks.com/grainy-gradients/ — CSS-Tricks 的教程，用 SVG 噪点滤镜加渐变在纯 CSS 里做出颗粒感；抄 feTurbulence 滤镜再调参数。 — The SVG-noise-plus-gradient technique for grain in pure CSS, explained step by step [A · blocked]
- uiGradients — https://uigradients.com — 带名字的两色、三色 CSS 渐变库；审美已经偏旧，只当快速起步的起点；MIT。 — Named two- and three-stop gradients [B · js]

## Brand identity · 品牌 (brand)

### Logo archives · logo 档案
- Logobook — https://www.logobook.com — 世界经典标志档案馆，可按字母、形状、物体、设计师浏览；看某个形态前人是怎么解的。 — Archive of the world's classic logos, browsable by letter, shape, object and designer; images can be saved directly [S · static]
- Logosystem — https://logosystem.co — 当代标志库（1300+），可按类型、颜色、形状、行业筛，每件注明设计师；另有动态 logo 与 App 图标专区。 — Contemporary logos indexed by symbol, letter and designer [A · static]
- Logo Design Love — https://www.logodesignlove.com — David Airey 写了多年的 logo 博客，讲工艺、流程与案例；给客户提方案前先读它的过程文章。 — David Airey's long-running blog on logo craft, process and case studies [A · static]
- Logo Archive — https://logo-archive.org — 5500+ 历史标志档案（以现代主义为主），每件注明设计师与年份；做几何化、减法造型时的参照系。 — 5,500+ historical, mostly modernist marks, each documented with designer and year [A · js]
- Logopedia — https://logos.fandom.com/wiki/Logopedia — 数千个品牌的 Logo 演变时间线档案馆；改版前盘点品牌资产时，看历次更迭留住了什么。 — Logo evolution timelines for thousands of brands [A · blocked]
- Emblemetric — https://www.emblemetric.com — 用商标数据量化分析 logo 趋势；想知道某种颜色或造型在某行业多常见时查它。 — Quantitative analysis of logo trends from trademark data [B · static]
- LogoLounge — https://www.logolounge.com — 会员投稿的大型标志数据库；每年的免费趋势报告值得读，能知道哪些套路该避开。 — Large member-submitted logo database; the annual trend report is free [B · static]

### Identity reviews and rebrand coverage · 品牌评审与重塑报道
- BP&O — https://bpando.org — 深度评测品牌识别与包装项目的博客，眼光挑剔；学识别设计批评的词汇。 — In-depth reviews of identity and packaging projects with a critical eye [S · static]
- Logo News (标志情报局) — https://www.logonews.cn — 中文标志资讯站，收录中外品牌换标与新形象；查某个品牌的标识演变史时直接搜名字。 — The leading Chinese-language chronicle of logo changes and new identities worldwide and in China [S · static]
- Brand New — https://www.underconsideration.com/brandnew/ — 品牌重塑案例的编年史与评论媒体；做 rebranding 前按行业搜档案，低价订阅制。 — The definitive chronicle and critique of identity work and rebrands; low-cost subscription [A · static]
- The Brand Identity — https://the-brandidentity.com — 当代品牌识别项目与新字体发布的在线刊物，摄影讲究；按项目搜索或看 /project 案例了解当下识别设计审美。 — Contemporary identity projects and type releases, well photographed [A · static]
- Identity Designed — https://identitydesigned.com — 由设计工作室亲自撰写的品牌识别案例库，看同行如何讲解和编排自己的作品。 — Identity case studies written by the studios themselves [A · static]
- Mindsparkle Mag — https://mindsparklemag.com — 每日更新的品牌、网页与动效策展杂志；横向扫一遍当下 identity 作品用它。 — Daily curation across branding, web and motion [A · static]
- Rebrand Gallery — https://rebrand.gallery — 品牌焕新案例库，附发布视频；按气质或行业筛，看揭幕短片是怎么编排的。 — Library of brand refreshes and rebrands with their reveal videos [A · static]
- D&AD Awards archive — https://www.dandad.org — D&AD 铅笔奖作品库，覆盖品牌、平面、数字与广告；在奖项档案里按类别和年份看评审奖励了什么。 — Pencil-winning and shortlisted work across branding, graphic design, digital and advertising, with a searchable awards archive [A · static]
- 古田路9号 — https://www.gtn9.com — 国内品牌设计社区与作品集平台；校准本土品牌视觉品味与价位时看。 — Chinese brand-design community and portfolio platform [A · blocked]

### Brand guideline collections · 品牌规范合集
- Brand Guidelines — https://brandguidelines.net — 官方品牌规范文档合集，收 Twitch、Asana 等；写自家规范前挑三个同行对比目录结构。 — Collection of official brand guideline documents (Twitch, Instacart, Asana and more) [A · static]
- Branding Style Guides — https://brandingstyleguides.com — 品牌手册与视觉规范的大型档案馆，很多是 PDF 原文；按行业分类翻，写规范前先找参照。 — Large archive of brand manuals and style guides, many as PDFs [A · static]
- Standards — https://standards.site — 网页版品牌指南平台，附公开范例；研究一份"活的"品牌手册该怎么搭结构。 — Platform for web-native brand guidelines with public examples [A · static]
- Standards Manual — https://standardsmanual.com — 复刻出版 NASA、纽约地铁等经典图形标准手册；预览页能看出严谨系统当年怎么写规范。 — Reissues of landmark graphics standards manuals (NASA, NYCTA, EPA) [A · static]
- Brandfetch — https://brandfetch.com — 按域名取 5000 万+ 公司的 logo、品牌色与字体，有免费 Logo API 与 MCP；凑竞品品牌墙或让智能体取 logo 时用。 — Logos, colours and fonts of 50M+ companies by domain, via search, a free Logo API and an MCP server [A · static]

### Studio case studies · 工作室案例
- Pentagram — https://www.pentagram.com/work — 最有影响力的设计合伙事务所的案例库；按门类与行业筛选品牌识别案例看。 — Case studies from the most influential identity partnership [S · static]
- COLLINS — https://wearecollins.com/case-studies/ — 策略先行的品牌识别案例集，叙事性强；学它如何给每个案子定义问题，而不只看最终呈现。 — Strategy-led identity case studies with strong narrative [A · static]
- Koto — https://koto.com/work — 以乐观气质的科技与初创品牌识别见长的工作室，做数字优先的品牌系统时看它家的作品。 — Optimistic tech and start-up identities [A · static]
- Wolff Olins — https://www.wolffolins.com/work — 大型公司品牌重塑案例集；看一套识别系统如何在庞大组织里铺开。 — Large corporate and public-sector rebrands that show how one idea scales across a big organisation [A · static]
- Ragged Edge — https://raggededge.com/partnerships — 挑战者品牌的识别设计，语气大胆；参考文案调性与视觉怎么配合。 — Challenger-brand identities with bold voice [A · static]
- Porto Rocha — https://portorocha.com — 以文化和动效见长的品牌识别工作室；做为动而生的识别系统时对标它的案例。 — Culture- and motion-forward identity systems [A · static]
- Studio Dumbar/DEPT — https://studiodumbar.com — 动态优先视觉识别的先行者；做生成式、动态识别系统时的参考。 — Pioneers of motion-first visual identity [A · static]

### Naming and trademark search · 命名与商标检索
- 中国商标网 — https://sbj.cnipa.gov.cn — 国家知识产权局商标局官方门户；“商标网上查询”是大陆名称与标志查重的权威来源，面向大陆市场定名前必查。 — Official portal of China's trademark office; its online search (商标网上查询) is the authoritative check for mainland names and marks [A · static]
- Onym — https://guide.onym.co — 命名方法与工具的精选指南；需求里包含起名时按它的流程走。 — Curated guide to naming: process, tools, references [A · static]
- WIPO Global Brand Database — https://branddb.wipo.int — WIPO 全球商标库，支持以图搜图查相似标；给候选 Logo 做初筛用，正式清权仍需律师。 — Worldwide trademark search including image similarity [A · js]
- TMview — https://www.tmdn.org/tmview/ — 跨多国与地区商标局的检索工具，按类别交叉核对名称与图形；定名前先做排查。 — Trademark search across many national and regional offices [A · js]
- USPTO Trademark Search — https://tmsearch.uspto.gov — 美国商标局官方检索（2023 年取代 TESS）；面向美国市场的名称与标志做初筛，不等于法律意见。 — Official US trademark search (replaced TESS in 2023) [A · js]
- Igor Naming Guide (PDF) — https://www.igorinternational.com/process/i/Igor%20Naming%20Guide%202022A.pdf — 命名方法论长文，把名字分成功能、生造、体验、唤起四类并给出评估标准；评审候选名前用它归类。 — Taxonomy of name types (functional, invented, experiential, evocative) with evaluation criteria [A · blocked]
- Tmkoo (标库网) — https://www.tmkoo.com — 标库网：同步商标局数据的第三方商标检索，免费查近似、状态与公告；官方查询前先用它快速初筛。 — Third-party Chinese trademark search mirroring CNIPA data, with free similar-name, status and gazette lookups [B · static]
- Instant Domain Search — https://instantdomainsearch.com — 边输入边查各后缀域名是否可注册，并给替代建议；提案前把候选名过一遍，域名能否拿到会影响名字去留。 — Checks domain availability across TLDs as you type, with generated alternatives [B · static]

## Graphic design · 平面 (graphic)

### Posters and typographic work · 海报与字体排印
- Trend List — https://www.trendlist.org — 给平面与海报设计潮流命名并打标签的档案站；用某个潮流元素前先查它流行多久了。 — Graphic-design trends named and tagged across posters and print [A · static]
- Tokyo TDC (Tokyo Type Directors Club) — https://tokyotypedirectorsclub.org/en/ — 东京字体指导俱乐部年度奖，中日文字体海报、书籍与识别设计最好的档案；看汉字、假名与拉丁字在展示尺度下如何搭配。 — Annual Tokyo TDC awards for letter and word expression; the best archive of CJK typographic posters, books and identities [A · static]
- Type Directors Club (TDC) — https://tdc.org — 纽约字体指导俱乐部年度竞赛（传达设计与字体设计）及获奖作品；找有野心的字体设计参考。 — New York's Type Directors Club: the annual TDC competition for communication design and typeface design, and its winners [A · static]
- 100 Beste Plakate — https://100-beste-plakate.de — 德奥瑞三国“年度 100 张最佳海报”竞赛，最能代表当年字体海报水准的年鉴；看网格、尺度与纯文字方案。 — Annual competition for the 100 best posters from Germany, Austria and Switzerland; the strongest yearly record of typographic poster design [A · static]
- GDC Award (Graphic Design in China) — https://www.gdcaward.com — GDC 设计奖（平面设计在中国）：深圳市平面设计协会 1992 年创办的国内最具影响力平面设计奖，海报、书籍、识别、包装都有；看当下中文字体与品牌设计水准。 — China's leading graphic design award, run by the Shenzhen Graphic Design Association since 1992: juried posters, books, identities and packaging from mainland China, Hong Kong and abroad [A · static]
- Typographic Posters — https://www.typographicposters.com — 数千张当代字体海报，按设计师、工作室、国家索引；按设计师通读，留意网格与尺度对比。 — Thousands of contemporary typographic posters by designer, studio and country [A · js]
- Museum fuer Gestaltung eMuseum — https://www.emuseum.ch — 苏黎世设计博物馆线上馆藏，含瑞士海报传统；按设计师搜 Mueller-Brockmann、Hofmann 看网格原作。 — Online collection of the Zurich design museum, including the Swiss poster tradition [A · blocked]
- Poster House — https://posterhouse.org — 纽约海报博物馆，带历届展览档案；补海报史与流派背景知识的地方。 — Museum dedicated to posters, with exhibition archives [B · static]

### Design history archives · 设计史档案
- Letterform Archive Online — https://oa.letterformarchive.org — 高分辨率字体、字样与平面设计档案馆，免费注册；按年代、工艺、国家找真实的时代参考。 — High-resolution archive of lettering, type specimens and graphic design; free registration [S · static]
- People's Graphic Design Archive — https://peoplesgdarchive.org — 众包平面设计档案库，收日常与少被记录的民间设计；找经典正史之外的野生参考时来挖。 — Crowd-sourced archive including everyday and under-documented graphic design [A · static]
- Paul Rand — https://www.paulrand.design — Paul Rand 作品与著述的完整档案站，他谈 logo 提案与呈现的随笔，给客户汇报前值得重读。 — Comprehensive archive of Paul Rand's work and writing [A · static]
- Design Reviewed — https://designreviewed.com — 免费的平面设计史档案：1 万+ 扫描原件、500+ 设计师档案，跨越 150 年；按设计运动或杂志找真实时代参考，别做仿品。 — Free graphic design history archive: 10,000+ scanned artefacts and 500+ designer profiles across 150 years [A · static]
- AIGA Design Archives — https://designarchives.aiga.org — AIGA 数十年评审入选的美国平面设计档案；按书籍、海报、识别等形制检索。 — Decades of juried American graphic design [A · blocked]
- Cooper Hewitt collection — https://www.si.edu/collections/cooper-hewitt — Smithsonian 设计博物馆馆藏，可按年代、设计师、物件类型检索；不少图片 CC0，逐件确认。 — Smithsonian design museum collection, now browsed through the Smithsonian collections site [A · blocked]

### Presentations and pitch decks · 演示与路演文稿
- Deck Gallery — https://deck.gallery — 精选演示文稿库：路演、品牌规范、报告、作品集与演讲，每页幻灯片单独成页；另有免费 JSON 目录供智能体读取。 — Curated presentation decks: pitch decks, brand guidelines, reports, portfolios and talks, with per-slide pages [A · static]
- Best Pitch Deck — https://bestpitchdeck.com — 1400+ 份已融资创业公司的路演 PPT，附轮次、金额与年份，可按阶段、行业、商业模式筛；先学叙事顺序再谈美化。 — 1,400+ decks from funded start-ups with round, amount and year, filterable by stage, industry and business model [A · static]
- Sequoia: Writing a Business Plan — https://www.sequoiacap.com/article/writing-a-business-plan/ — Sequoia 的商业计划书写法，路演叙事的经典大纲；做投资人 deck 时当默认故事骨架。 — The canonical pitch narrative outline [A · static]
- Pitch Deck Hunt — https://www.pitchdeckhunt.com — 知名融资路演 PPT 合集；搭路演结构时的第二参考源，看真实 deck 怎么排叙事。 — Collection of notable pitch decks [B · static]
- Pitch templates — https://pitch.com/templates — 专业设计的演示文稿模板库；搭建幻灯片版式体系时，参考它的栅格与信息层级。 — Professionally designed presentation templates [B · js]

### Covers and packaging · 封面与包装
- Dieline — https://thedieline.com — 包装设计领域的头部媒体；按类目浏览，摸清货架上的品类惯例。 — Leading packaging-design publication [A · static]
- magCulture — https://magculture.com — Jeremy Leslie 的杂志设计期刊、播客与书店，持续记录独立杂志的封面与内页；编辑排版与封面字体参考。 — Jeremy Leslie's journal, podcast and shop on independent magazines; the best running record of editorial covers and spreads [A · static]
- Pentawards — https://pentawards.com — 全球包装设计竞赛，按品类公布获奖作品并出年度趋势报告；接包装案前先看同品类获奖作品，摸清货架惯例再决定打破哪条。 — The global packaging design competition; winners by category and an annual trends report [A · static]
- The Casual Optimist — https://www.casualoptimist.com — 长期更新的书封设计博客，每月“值得一看的书封”与年度精选；看当下书封的字体与插画走向。 — Dan Wagstaff's long-running blog on book covers, with monthly 'covers of note' round-ups and an annual best-of [A · static]
- Coverjunkie — https://coverjunkie.com — 以创意取胜的杂志封面合集，做单一图像加单一标题的构图时来这找参照。 — Magazine covers chosen for their ideas [A · js]
- Packaging of the World — https://packagingoftheworld.com — 大型包装设计画廊，按品类和国家分类；接到包装案时先扫一遍同品类摸清常见套路。 — Large packaging gallery by category and country [A · blocked]
- Spine — https://spinemagazine.co — 专注书籍封面设计的杂志，讲过程与访谈；看封面方案如何被发展又被否决。 — Book-cover design process and interviews [B · static]

### Publications · 平面出版物
- It's Nice That — https://www.itsnicethat.com — 当代平面设计与插画领域最稳定的编辑声音；培养 UI 之外的 art direction 敏感度。 — The most consistent editorial voice on contemporary graphic design and illustration [S · static]
- Creative Boom — https://www.creativeboom.com — 每日更新的设计资讯站，覆盖平面、品牌与插画；扫一眼了解当下商业作品的水准与风向。 — Broad daily coverage of graphic design, branding and illustration [A · static]
- 数英 DIGITALING — https://www.digitaling.com — 国内广告与营销活动的案例库；按品牌或类目找本土 campaign 的参考。 — Chinese advertising, campaign and brand case library [A · static]
- TOPYS — https://www.topys.cn — 中文创意文化媒体，覆盖设计、广告和艺术；了解国内视觉趋势背后的文化语境时读。 — Chinese creative-culture publication covering design, advertising and art [A · static]
- Eye Magazine — https://www.eyemagazine.com — 国际平面设计评论杂志《Eye》（1990 年创刊），深度评论字体、识别与设计史；按设计师或主题搜旧文，不少可免费读。 — Eye, the international review of graphic design (since 1990): critical features on typography, identity and design history [A · static]
- Communication Arts — https://www.commarts.com — 老牌设计刊物《Communication Arts》：设计、广告、插画、摄影、交互、字体年鉴，另有 Exhibit 与 Webpicks 精选；看评审眼光。 — Communication Arts: juried annuals in design, advertising, illustration, photography, interactive and typography, plus Exhibit and Webpicks features [A · static]
- AIGA Eye on Design — https://eyeondesign.aiga.org — AIGA 旗下的设计评论媒体，2024 年 6 月停刊，旧文仍可读；读它换视角，别当素材库用。 — AIGA's critical publication on design culture and history, discontinued in June 2024; the archive is still online [B · static]
- Abduzeedo — https://abduzeedo.com — 老牌每日更新的灵感博客，覆盖面横跨品牌、3D 和 UI；适合泛泛扫图找感觉。 — Long-running daily inspiration across branding, 3D and UI [B · static]

### Social cards and platform sizes · 社媒图与平台尺寸
- OG Image Gallery — https://www.ogimage.gallery — 收集真实网站 Open Graph 图的画廊；设计社交分享卡片系统之前先看一遍。 — Open Graph images from real sites [A · static]
- Sprout Social: social image sizes — https://sproutsocial.com/insights/social-media-image-sizes-guide/ — 持续更新的各社交平台图片尺寸清单；先在这里查，再去平台官方帮助页复核，数字会过期。 — Continuously updated list of image sizes per platform [A · static]
- Posts Design — https://posts.design — 人工精选的真实社媒帖子与 OG 图画廊，每条链回原帖；做社媒图或分享卡片前看同行实际发了什么。 — Hand-curated gallery of real social posts and Open Graph images from companies, each linked to its source [A · static]
- The Open Graph protocol — https://ogp.me — 链接预览背后的规范：og:title、og:image（含宽高与 alt）、og:type 等；做分享卡片时当检查清单，尺寸再以各平台文档为准。 — The specification behind link previews: og:title, og:image (with width, height and alt), og:type and friends [A · static]
- Canva — https://www.canva.com — 非设计师做社媒图、演示与印刷品的默认工具，带品牌套件、尺寸预设与 AI；客户要自己出物料时，把品牌套件和模板交付到这里。 — The default tool non-designers use for social graphics, decks and print, with brand kits, size presets and AI [A · blocked]
- Gaoding (稿定设计) — https://www.gaoding.com — 稿定设计：国产 Canva 类平台，有小红书、公众号、电商图、海报的模板与尺寸预设；国内市场团队常在这里出图。 — Chinese Canva-class platform with templates and size presets for 小红书, 公众号, e-commerce images and posters [B · blocked]

## Typography · 字体排版 (type)

### Open and free font sources · 开源与免费字体
- Fontsource — https://fontsource.org — 把开源字体打包成 npm 包自托管，附 API；每个字体保留各自的开源协议。 — Self-hostable open fonts as npm packages with an API [S · static]
- Google Fonts — https://fonts.google.com — 最大的开源字体库，有可变字体、语言筛选和 API；建议通过 Fontsource 自托管而非热链，多为 SIL OFL。 — The largest open font library, with variable fonts, language filters and an API [S · js]
- Velvetyne — https://velvetyne.fr — 自由字体铸造厂，专出表现力强的实验性展示字；海报与识别要个性时用；SIL OFL。 — Libre foundry of expressive, experimental display faces [A · static]
- Open Foundry — https://open-foundry.com — 精选开源字体站，展示做得讲究，重质不重量；逐款字体查看各自的开源许可。 — Curated open-source typefaces presented well [A · static]
- Use & Modify — https://usemodify.com — 个人策展的自由字体选集，品味偏优雅与朋克；找不撞脸的开放字体来这，逐字体开源授权。 — Personal selection of beautiful, classy, punk libre fonts [A · static]
- The League of Moveable Type — https://www.theleagueofmoveabletype.com — 开源字体界的鼻祖级字厂，League Gothic、Raleway 都出自这里；想要经典可靠的免费字体时用它，SIL OFL。 — The original open-source type foundry (League Gothic, Raleway origins) [A · static]
- Collletttivo — https://www.collletttivo.it — 意大利的开源字体厂牌社区，展示字与正文字体都很有个性；SIL OFL。 — Italian open-source type collective publishing distinctive display and text faces under the OFL [A · static]
- Free Faces — https://www.freefaces.gallery — 免费字体策展画廊，从全网挑出品相好的；逐款确认个人使用还是可商用，许可各不同。 — Curated gallery of free typefaces from around the web [A · static]
- Inter — https://rsms.me/inter/ — UI 字体的劳模，极好也极滥；要有意识地用，发挥 tnum、cv11 等 OpenType 特性，别凭条件反射；SIL OFL。 — The workhorse UI typeface; excellent, and the most over-used default [A · static]
- IBM Plex — https://github.com/IBM/plex — IBM 的超级字族，无衬线、衬线、等宽、窄体齐全且覆盖中日韩；一套字体撑起整个产品，OFL。 — Sans, serif, mono and condensed superfamily with wide language coverage including CJK [A · static]
- Geist — https://vercel.com/font — Vercel 出的无衬线与等宽字体，为开发者产品设计；工具类产品里快成默认选了，SIL OFL。 — Vercel's sans and mono for developer products [A · static]
- Monaspace — https://monaspace.githubnext.com — GitHub 出的五声部等宽字体超族，带 texture healing 排印微调；代码密集型界面优先用它；SIL OFL。 — Five-voice monospace superfamily with texture healing [A · static]
- Atkinson Hyperlegible — https://www.brailleinstitute.org/freefont/ — 盲人学院为低视力读者设计的字体，字形互不混淆；现有三版：原版、Next（2025，七个字重加可变版，支持 150+ 语言）和 Mono。无障碍优先的界面用 Next。 — Braille Institute's family for low-vision legibility with unambiguous letterforms, now in three versions: the original, Next (2025: seven weights plus variable, 150+ languages) and Mono [A · static]
- Mona Sans and Hubot Sans — https://github.com/mona-sans — GitHub 开源的可变无衬线（Mona Sans 与 Hubot Sans），宽度轴跨度大；用宽度轴在同一家族里拉开标题对比，Hubot Sans 更偏技术感。 — GitHub's open variable grotesques with a wide width axis, strong for display type and product UI [A · static]
- Apple fonts (SF Pro, SF Compact, SF Mono, New York) — https://developer.apple.com/fonts/ — 苹果系统字体（SF Pro、SF Compact、SF Mono、New York）官方下载，做苹果平台界面稿时安装；网页请用 system-ui 字体栈，不要上传字体文件。 — Official downloads of Apple's system typefaces (SF Pro with optical sizes and widths, SF Compact, SF Mono, New York) for designing Apple-platform interfaces [A · static]
- Bunny Fonts — https://fonts.bunny.net — 注重隐私的 Google Fonts 镜像，CSS 接口与 Google 兼容、不记录访客；做欧盟项目又不便自托管时，把 fonts.googleapis.com 换成 fonts.bunny.net。 — Privacy-first mirror of the Google Fonts catalogue with a drop-in compatible CSS API and no visitor logging [A · static]
- Fontshare — https://www.fontshare.com — Indian Type Foundry 的专业级免费字体（Satoshi、Clash 等）；跳出 Inter/Roboto 默认的最快路径，可商用、不可转售。 — Professional-grade free fonts from Indian Type Foundry (Satoshi, General Sans, Clash, Cabinet Grotesk) [A · js]
- Noto — https://fonts.google.com/noto — Google 的 Noto 家族覆盖几乎所有文字系统且风格统一；多语言产品的兜底字体。SIL OFL。 — Harmonised families for nearly every script [A · js]
- google-webfonts-helper — https://gwfh.mranftl.com/fonts — 下载 Google Fonts 字体文件并生成自托管 @font-face CSS 的工具；只挑需要的字重与子集。 — Download Google Fonts files with ready @font-face CSS for self-hosting [A · js]
- Google Sans Flex — https://fonts.google.com/specimen/Google+Sans+Flex — Google 品牌无衬线字体，2025 年底以 OFL 开源，六个可变轴：字重、宽度、视觉尺寸、倾斜、字级（grade）与圆角；一套字体撑起多种语气，但 Google 辨识度高。 — Google's brand sans, open-sourced in late 2025 with six axes: weight, width, optical size, slant, grade and roundness [A · js]
- Maple Mono — https://font.subf.dev — 圆润的开源等宽字体，带连字与 Nerd Font 图标；CN 版中英文严格 2:1 对齐，覆盖简繁中文与日文；代码、终端、Markdown 表格中英混排时用。 — Open monospace with rounded forms, ligatures and Nerd Font icons; its CN build pairs Latin with Simplified, Traditional Chinese and Japanese at an exact 2:1 width [A · js]
- Uncut — https://uncut.wtf — 当代免费字体目录，专收有个性的展示字体；按风格筛选，逐款核对许可，多为 OFL。 — Catalogue of contemporary free typefaces with character [A · blocked]
- Font Squirrel — https://www.fontsquirrel.com — 精选可免费商用的字体，附老牌 Webfont Generator（子集化与格式转换）和字体识别；只转换你有嵌入授权的字体。 — Hand-picked fonts that are free for commercial use, plus the long-standing Webfont Generator and a font identifier [B · static]

### Commercial foundries and marketplaces · 商业字体厂商与市场
- Klim Type Foundry — https://klim.co.nz — 新西兰字厂，Soehne、Tiempos 等当代正文与无衬线标杆；付费商用，试用字体只能出稿不能上线。 — Soehne, Tiempos, National: benchmark contemporary text and grotesque families [A · static]
- Grilli Type — https://www.grillitype.com — 瑞士字厂，GT America、GT Walsheim 出自其手，每款字体配独立标本小站；商用付费，有试用字体。 — GT America, GT Walsheim and richly documented mini-sites per family [A · static]
- ABC Dinamo — https://abcdinamo.com — 当代可变字体厂牌，Diatype、Favorit 等定义潮流的那批；商用付费，可申请试用。 — Contemporary variable families (Diatype, Favorit, Whyte) and tools [A · static]
- Pangram Pangram — https://pangrampangram.com — 风格前卫的字体厂牌，可免费试用；个人版文件不能商用，正式项目需购买商业许可。 — Fashion-forward families that are free to try [A · static]
- OH no Type Co. — https://ohnotype.co — 出表现力展示字体的铸造厂，附一流的字体设计博客；博客里的笔画与字距课值得读；字体付费。 — Expressive display faces and an excellent type-design blog [A · static]
- Adobe Fonts — https://fonts.adobe.com — Creative Cloud 捆绑的大型商业字体库；网页只能走 Adobe 嵌入、不能自托管，客户项目需客户自己的订阅。 — Large commercial library bundled with Creative Cloud [A · static]
- Fontstand — https://fontstand.com — 商用字体免费试一小时、按月租用；买之前先在真实版面里验货。 — Try commercial fonts free for an hour and rent them monthly [A · static]
- Commercial Type — https://commercialtype.com — 编辑设计圈的重炮字厂（Graphik、Canela、Publico）；做 editorial 排版时当字体搭配参照；商业授权。 — Editorial heavyweights (Graphik, Canela, Publico) [A · js]
- Future Fonts — https://www.futurefonts.com — 未完成字体的早鸟市场，低价买入、随更新升值；想用小众新面孔时逛这里，付费。 — Marketplace for in-progress typefaces bought early at lower prices [A · js]
- Typotheque — https://www.typotheque.com — 多文种字体专家，研究文章质量高；做多语言排版先读它的 articles，商用授权。 — Multi-script specialist with serious research articles [A · blocked]
- YouWorkForThem — https://www.youworkforthem.com — 独立字体与图形素材商店，展示字体和 Y2K 风矢量包有特色；买断制许可，无需订阅。 — Independent shop for fonts and graphic assets (display faces, vector shape packs, textures) [B · blocked]

### Type in use and pairing · 实际用例与搭配
- Fonts In Use — https://fontsinuse.com — 真实使用中的字体档案，按字体、形制、行业索引；查一款字体的实际排印效果或某行业的用字惯例。 — Archive of typography in real use, indexed by typeface, format and industry [S · static]
- Typewolf — https://www.typewolf.com — 真实网站用字观察站，另有分类最佳字体与商用字体免费平替榜；预算不够时查平替清单。 — Type on real websites, plus trusted lists: best fonts by category and free alternatives to commercial faces [A · static]
- Beautiful Web Type — https://beautifulwebtype.com — 把最好的开源字体排出漂亮版式的展示站，等于一份值得用的开源字体短名单。 — Showcase of the best open-source typefaces set beautifully [A · static]
- Variable Fonts — https://v-fonts.com — 可变字体目录，带实时轴滑杆；选定字体前先把各轴拉一遍试试。 — Catalogue of variable fonts with live axis sliders [A · static]
- Fonts Ninja — https://fonts.ninja — 浏览器扩展，可识别任意网页上用的字体，附一份网站实际用字的字体目录；看到好的参考站先用它查出字体与字重，再找授权或开源替代。 — Browser extension that names the fonts on any live page, plus a catalogue of fonts spotted on websites [A · static]
- Fontjoy — https://fontjoy.com — 机器学习生成字体搭配的工具；只当点子发生器，好不好看靠自己眼睛判。 — Machine-learned font pairing generator [B · static]
- Fontpair — https://fontpair.co — Google Fonts 字体搭配画廊，以标题加正文样张展示；拿来找起点，再用真实文案和字号验证，搭配偏稳妥、不出彩。 — Gallery of Google Fonts pairings shown as headline and body specimens [B · js]

### Type tools · 字体工具
- Utopia — https://utopia.fyi — 流式字号与间距刻度生成器，在大小两个视口间插值并输出 CSS clamp()；定好最小最大刻度后抄走。 — Fluid type and space scales that interpolate between a small and a large viewport, output as CSS clamp() [S · static]
- Modern Font Stacks — https://modernfontstacks.com — 按字体风格分类的系统字体栈，无需加载网络字体；要零成本原生感排版就抄一组，CC0。 — System font stacks by typographic classification, no web fonts needed [S · static]
- Typescale — https://typescale.com — 可视化字号比例计算器，实时预览可导出；用真实字体比较不同比率。 — Visual type-scale calculator with live preview and export [A · static]
- Capsize — https://seek-oss.github.io/capsize/ — 按字体度量把文本框精确裁到 cap height 与基线的工具；在 text-box-trim 普及之前都靠它；MIT。 — Trims text boxes to cap height and baseline using font metrics [A · static]
- Fallback font generator — https://screenspan.net/fallback — 生成字体度量覆盖，让回退字体对齐网络字体、避免布局偏移；结果贴进回退的 @font-face。 — Generates metric overrides so a fallback font matches the web font and avoids layout shift [A · static]
- glyphhanger — https://github.com/zachleat/glyphhanger — 找出页面实际用到的字形并按需裁剪字体的工具；构建管线里做拉丁子集化用。MIT。 — Finds the glyphs a site uses and subsets fonts accordingly [A · static]
- WhatTheFont — https://www.myfonts.com/pages/whatthefont — 上传图片识别字体的工具；从一张截图里提取风格 DNA 时，这是第一步。 — Identify a typeface from an image [A · static]
- Transfonter — https://transfonter.org — 在线把字体转成 WOFF2，可子集化、修正垂直度量并生成 @font-face CSS；拉丁字体快速子集化用它，中文请用 cn-font-split。 — Online converter to WOFF2 with subsetting, vertical-metrics fixes and generated @font-face CSS [A · static]
- Wakamai Fondue — https://wakamaifondue.com — 把字体文件拖进去就能看特性、可变轴、支持语言并生成 CSS；用一款字体前先摸清它的底细。 — Drop a font to see its features, axes, languages and ready CSS [A · js]
- FontDrop! — https://fontdrop.info — 拖入字体文件即可查看字形、度量、OpenType 特性、语言覆盖与 name 表元数据；采用字体前先看授权字段和语言覆盖。 — Drop a font file to see its glyphs, metrics, OpenType features, language support and name-table metadata [A · js]

### Typography guides · 排版指引
- Practical Typography — https://practicaltypography.com — Butterick 的在线排版书，单位时间收获最大的排版规则集；先读「十分钟排版」与规则摘要两章。 — Butterick's web book: the most useful typography rules per minute of reading [S · static]
- Thinking with Type (3rd edition) — https://papress.com/products/thinking-with-type-3-edition — Ellen Lupton 的字体入门经典（第三版），讲字母、文本与网格，新增非拉丁文字系统与字体设计内容；做重排版设计前先读网格一章。付费书。 — Ellen Lupton's primer on letter, text and grid, revised with material on non-Latin writing systems and typeface design [A · static]
- Better Web Type — https://betterwebtype.com — 面向开发者的网页排版课程与短文，篇幅短、重实操；补字体排印基本功时按课学。 — Web typography course and articles for developers [A · static]
- Pimp my Type — https://pimpmytype.com — 字体评测、搭配与 UI 排印建议的博客；每周字体评测里常有判断可靠的开源字。 — Font reviews, pairing and UI-typography advice [A · static]
- web.dev: font best practices — https://web.dev/articles/font-best-practices — web.dev 的字体最佳实践：加载、预载、子集化与 font-display 策略；给网页加任何字体前照做。 — Font loading, preloading, subsetting and font-display strategy [A · static]
- Google Fonts Knowledge — https://fonts.google.com/knowledge — Google 的字体知识库，结构化讲解选字、搭配与可变字体；查排版、可读性、OpenType 特性用它。 — Structured lessons on choosing, pairing and using type, including variable fonts [A · js]
- Web Design is 95% Typography — https://ia.net/topics/the-web-is-all-about-typography-period — 经典檄文，主张网页设计九成是字体排印、要把文字当界面看；读一遍校准观念。 — The classic argument that treating text as UI is most of web design [B · static]
- The Elements of Typographic Style Applied to the Web — https://webtypography.net — 把 Bringhurst 的经典排印原则逐条译成 CSS；查网页文字的节奏与比例规则时用。 — Bringhurst's principles translated into CSS [B · blocked]

### CJK type and typesetting (Chinese, Japanese, Korean) · 中日韩字体与排版
- Source Han Sans / Serif (思源黑体 / 宋体) — https://github.com/adobe-fonts/source-han-sans — 开源泛 CJK 标准字体，七个字重，等同 Noto Sans/Serif CJK；中文默认开源选择，上线记得子集化；SIL OFL。 — The open pan-CJK standard in seven weights; identical to Noto Sans / Serif CJK [S · static]
- 猫啃网 — https://www.maoken.com — 免费商用中文字体目录，每款附授权证据；别处找到的中文字体先来这核对再用。 — Directory of free-for-commercial Chinese fonts with licence evidence for each [S · static]
- 中文网字计划 — https://chinese-font.netlify.app — 中文网字计划：免费的中文字体分片 CDN，配套 cn-font-split 可把任意中日韩字体切成 unicode-range 分片，浏览器只加载页面用到的字；Apache-2.0 工具，字体各自授权。 — Free CDN of sliced Chinese web fonts plus cn-font-split, the tool that slices any CJK font into unicode-range chunks [S · static]
- Requirements for Chinese Text Layout (中文排版需求) — https://www.w3.org/TR/clreq/ — W3C 的中文排版需求文档：标点、断行、中西混排间距、强调、竖排；争论标点与行首禁则前查它。 — The W3C reference for Chinese typesetting: punctuation, line breaking, mixed-script spacing, emphasis, vertical text [S · static]
- 中文文案排版指北 — https://github.com/sparanoid/chinese-copywriting-guidelines — 中文文案排版通行约定：空格、标点与专名的写法；产品里选定一套规则并配工具检查，MIT。 — Widely adopted conventions for spacing, punctuation and proper nouns in Chinese copy [S · static]
- Smiley Sans (得意黑) — https://github.com/atelier-anchor/smiley-sans — 得意黑：开源的窄体斜势中文标题字，性格鲜明；只适合标题场景，OFL 协议。 — Open-source condensed oblique Chinese display face with real character [A · static]
- LXGW WenKai (霞鹜文楷) — https://github.com/lxgw/LxgwWenKai — 开源楷体风格中文字体，气质温润，适合人文阅读类正文与编辑设计；SIL OFL 协议。 — Open-source Kai-style face for warm, literary reading text [A · static]
- 赫蹏 (heti) — https://github.com/sivan/heti — 中文排版增强 CSS 库：标点挤压、中西文混排间距、阅读节奏；用在正文页上；MIT。 — CSS typesetting enhancement for Chinese content: punctuation squeezing, mixed-script spacing, rhythm [A · static]
- pangu.js — https://github.com/vinta/pangu.js — 自动在中日韩与半角字符间加空格的库；能改源头文案就先改，用户生成内容靠它兜底；MIT。 — Automatically inserts spacing between CJK and half-width characters [A · static]
- AutoCorrect — https://github.com/huacnlee/autocorrect — 中文文案的 lint 工具，自动处理中英文间距、标点和全半角规则；接入 CI 保持文案一致。MIT。 — Linter and formatter for CJK copy: spacing, punctuation, full-width rules [A · static]
- Pretendard — https://github.com/orioncactus/pretendard — 事实上的韩文界面字体：韩文基于思源黑体、拉丁字母源自 Inter，九个字重另有可变版，并有融合 M PLUS 1p 的日文版；韩文界面默认选它。 — The de-facto Korean UI typeface: Hangul from Source Han Sans with Inter-derived Latin, nine weights plus variable, and a JP build with M PLUS 1p [A · static]
- Noonnu (눈누) — https://noonnu.cc — 可免费商用的韩文字体目录，逐款标注授权范围；用别处找到的韩文字体前先来核对，注意印刷、网页、视频、嵌入各自的范围。 — Directory of free-for-commercial Korean fonts with the licence scope of each font [A · static]
- justfont — https://justfont.com — 台湾字体公司与字体教育团队，出品金萱等繁体中文字体并提供网页字体服务；繁体中文产品选字、学中文排版都值得看。 — Taiwanese foundry and type-education team behind 金萱 (Jinxuan) and other Traditional Chinese families, with a web-font service [A · static]
- 100font.com — https://www.100font.com — 免费商用字体大全，以中文为主，可按简繁、日韩与风格筛选，附授权说明与下载；猫啃网之后的第二道授权核对，上线前再到厂商官网确认。 — Directory of free-for-commercial fonts, mostly Chinese, filterable by script and style, with licence notes and downloads [A · static]
- HelloFont (字由) — https://www.hellofont.cn — 字由：中文字体管理工具，标注授权、在设计软件里一键换字，并有 AI 字体识别；识别出结果后先核对授权再用。 — Chinese font manager with licence labels, one-click font switching in design apps and an AI font recogniser [A · static]
- Sarasa Gothic (更纱黑体) — https://github.com/be5invis/Sarasa-Gothic — 更纱黑体：由 Inter、Iosevka 与思源黑体合成的中日韩字体，含 UI 与等宽样式，中英文严格 2:1 对齐；代码、表格、终端中英混排时用。 — CJK composite font built from Inter, Iosevka and Source Han Sans: UI and monospace styles with exact 2:1 CJK-Latin width [A · static]
- Requirements for Japanese Text Layout (日本語組版処理の要件) — https://www.w3.org/TR/jlreq/ — W3C 日文排版需求：断行、标点、注音（ruby）、混排与竖排；产品同时有日文和中文时与 clreq 一起查。 — The W3C reference for Japanese typesetting: line breaking, punctuation, ruby, mixed scripts and vertical text [A · static]
- Alibaba PuHuiTi (阿里巴巴普惠体) — https://www.alibabafonts.com — 多字重的现代中文黑体，配西文；从官网下载以留授权记录；免费商用，不可转售字体文件。 — Modern Chinese sans in many weights with Latin companions [A · js]
- HarmonyOS Sans — https://developer.huawei.com/consumer/cn/design/resource/ — 华为系统字体，覆盖简繁中文与拉丁等多文种；鸿蒙应用标配，也可当中性 UI 字体。免费商用。 — Huawei's system typeface covering Simplified and Traditional Chinese, Latin and more [A · js]
- MiSans — https://hyperos.mi.com/font/ — 小米的可变中文无衬线，字重范围宽；可变字重适合流动的 UI 层级；依小米协议免费商用。 — Xiaomi's variable Chinese sans with wide weight range [A · js]
- The Type — https://www.thetype.com — 中文圈最认真的字体与排印写作媒体，'孔雀计划'讲清标点宽度与间距；做中文排版必读。 — The most serious Chinese-language writing on type and typesetting, including the Kongque punctuation research [A · js]
- 方正字库 — https://www.foundertype.com — 国内最大的商业字库；商用须按用途购买授权，侵权追责活跃，别存侥幸心理。 — China's largest commercial type library [B · static]
- LINE Seed — https://seed.line.me/index_en.html — LINE 开源品牌字体家族，含日文、韩文、泰文、繁体中文与拉丁版本；适合亲和的东亚多语产品，但在日本 LINE 联想很强。 — LINE's open brand typeface family with Japanese, Korean, Thai, Traditional Chinese and Latin versions [B · static]
- Hanyi Fonts (汉仪字库) — https://www.hanyi.com.cn — 国内主要商业字库之一，字库庞大、维权积极；没有购买授权绝不能商用，授权范围（网页、App、视频、印刷）要和用途一致。 — Major commercial Chinese foundry with a very large library and active licence enforcement [B · static]
- Qiuziti (求字体) — https://www.qiuziti.com — 上传图片识别字体，支持中、英、日、韩；中文圈的 WhatTheFont。识别后去猫啃网或字厂核对授权。 — Image-based font identification for Chinese, Latin, Japanese and Korean text: the Chinese WhatTheFont [B · static]
- Douyin Sans (抖音美好体) — https://github.com/bytedance/fonts — 抖音品牌创意中心以 OFL 开源的粗体展示字体，收 6763 个汉字和 682 个数字西文符号；只用于标题与活动物料，抖音联想强。 — ByteDance's open bold display face with 6,763 Chinese characters and 682 Latin, figure and punctuation glyphs [B · static]
- Requirements for Hangul Text Layout and Typography (klreq) — https://www.w3.org/TR/klreq/ — W3C 韩文排版需求：断行与单词分割规则、行首行尾禁则、标点、字距，以及韩文与拉丁字母混排；产品上韩文时查对应规则。 — The W3C reference for Korean text layout: line-breaking and word-break rules, line-head and line-end restrictions, punctuation, spacing and mixed Hangul-Latin text [B · static]

## Colour · 色彩 (color)

### Palette inspiration · 色板灵感
- Realtime Colors — https://www.realtimecolors.com — 在真实页面版式上预览配色与字体搭配，可导出 token；给配色方案做体检的最快办法。 — Preview a palette and font pair on a real page layout, then export tokens [A · static]
- Happy Hues — https://www.happyhues.co — 把精选色板直接套在页面上展示并标注角色，学的是颜色分工，不只是抄色值。 — Curated palettes shown applied to a page, with role labels [A · static]
- Adobe Color — https://color.adobe.com — 配色和谐规则、从图片取色、对比度与色盲检查一体；拿参考照片提取色板。 — Harmony rules, extraction from images, contrast and colour-blind checks [A · static]
- Color Hunt — https://colorhunt.co — 社区配色方案库，按人气和标签排序；当成流行趋势风向标参考，别当最终方案。 — Community palettes sorted by popularity and tag [A · static]
- Nippon Colors — https://nipponcolors.com — 日本传统色数据库，色名与色值俱全；做东方语境配色时，从这里取有出处的颜色。 — Traditional colours of Japan with names and values [A · static]
- 中国色 — https://zhongguose.com — 中国传统色网站：500 多种传统色的名称、拼音、CMYK、RGB 与十六进制值，注明依据中科院《色谱》标准；另提供 colors.json、llms.txt 与 MCP 接口。 — 500+ traditional Chinese colours with name, pinyin, CMYK, RGB and hex, citing the Chinese Academy of Sciences 色谱 colour standard; also served as JSON, llms.txt and an MCP endpoint [A · static]
- Huemint — https://huemint.com — 机器学习生成配色，直接在品牌和网页样机上预览；在最接近交付物的样机上生成。 — Machine-learned palettes previewed on brand and website mock-ups [A · js]
- A Dictionary of Color Combinations (Sanzo Wada) — https://sanzo-wada.dmbk.io — 和田三造 1930 年代 348 组配色组合的交互版；找不落俗套的成熟配色。 — Interactive version of Wada's 348 colour combinations from 1930s Japan [A · js]
- Coolors — https://coolors.co — 快速配色生成器，可锁定单色、查对比度、逛灵感区；锁住品牌色往外生成，对比度另行验证。 — Fast palette generator with locking, contrast check and a large explore section [A · blocked]
- Poline — https://meodai.github.io/poline/ — 在极坐标色彩空间里锚点连线生成配色的工具；做生成式、插画感配色用；MIT。 — Palette generator drawing lines between anchors in polar colour space [B · static]
- BrandColors — https://brandcolors.net — 收录各品牌官方色值的档案站；用来查某个行业的用色惯例。 — Official brand colour codes [B · static]

### Scale and system builders · 色阶与系统生成
- OKLCH Color Picker — https://oklch.com — OKLCH 取色与转换工具，可视化 sRGB、P3、Rec2020 色域边界；建色阶前先看颜色是否超色域。MIT。 — Picker and converter for OKLCH with gamut visualisation (sRGB, P3, Rec2020) [S · static]
- Radix Colors — https://www.radix-ui.com/colors — 十二级色阶，每级有明确 UI 用途，配暗色与透明阶；级别到角色的映射可迁移到任何配色；MIT。 — Twelve-step scales where each step has a defined UI purpose, with matched dark and alpha scales [S · static]
- Leonardo — https://leonardocolor.io — 按目标对比度反推色阶的工具，支持自适应主题；先定对比度再得颜色，与先选再验相反，Apache-2.0。 — Generates colour scales by target contrast ratios, with adaptive themes [S · static]
- Tailwind CSS colors — https://tailwindcss.com/docs/colors — 广泛使用的 11 级色阶，用 OKLCH 定义；参考其明度与彩度曲线，安全但因此常见；MIT。 — Widely used 11-step palette defined in OKLCH [A · static]
- tints.dev — https://www.tints.dev — 输入一个 hex 生成 Tailwind 式 11 级色阶，曲线可调；快速起品牌色阶，再用对比度校验。 — Generates an 11-step Tailwind-style scale from one hex with tweakable curves [A · static]
- UI Colors — https://uicolors.app — Tailwind 色阶生成器，边调色边在真实 UI 预览和对比度网格里检查；tints.dev 之外的替代。 — Tailwind scale generator with UI previews and contrast grid [A · static]
- Accessible Palette — https://accessiblepalette.com — 生成各色相亮度与对比度一致的色板，保证每个色相的同一阶（如 600）都过同样的对比度。 — Creates palettes with consistent lightness and contrast across hues [A · static]
- Atmos — https://atmos.style — LCH 调色板构建器，带色阶曲线和对比度检查；想要更可视化的曲线编辑用它。 — LCH palette builder with shade curves and contrast checking [A · static]
- ColorBox — https://colorbox.io — Lyft 出品的色阶生成器：用缓动曲线逐级调整色相、饱和度与明度，再导出；色阶需要手工调曲线而非套公式时用。 — Lyft's scale generator: shape hue, saturation and brightness per step with easing curves, then export the scale [A · static]
- Reasonable Colors — https://www.reasonable.work/colors/ — 开源调色板，每色 6 阶，色阶号差值即保证对比度：差 2 至少 3:1，差 3 至少 4.5:1；写颜色 token 时借用「级差即对比度」的规则。 — Open palette of 6-shade scales where the shade-number gap guarantees contrast: a gap of 2 gives at least 3:1, a gap of 3 at least 4.5:1 [A · static]
- Ant Design colour system — https://ant.design/docs/spec/colors-cn — Ant Design 色彩体系：由主色按公开算法生成 10 阶基础色板、13 阶中性色与数据可视化色板；国内中后台产品最常见的色阶来源。 — Ant Design's colour system in Chinese: 10-step base palettes generated from one primary by its published algorithm, a 13-step neutral ramp and a data-viz palette [A · static]
- InclusiveColors — https://www.inclusivecolors.com — 一次搭好整套品牌色板，手调色相、饱和度、明度曲线，同时看哪些前景背景组合通过 WCAG 或 APCA；可导出 Tailwind、CSS、Figma、Adobe。 — Build a whole branded palette at once with hand-tuned hue, saturation and lightness curves while watching which pairs pass WCAG or APCA; export to Tailwind, CSS, Figma or Adobe [A · static]
- Harmonizer — https://harmonizer.evilmartians.com — 基于 OKLCH 与 APCA 对比度的配色生成器，跨色相保持感知一致；搭整套色阶时用。 — Generates consistent, accessible palettes with OKLCH and APCA contrast [A · js]
- Material Theme Builder — https://material-foundation.github.io/material-theme-builder/ — 用 HCT 色调板从种子色生成一整套 Material 色彩角色，可导出 Compose、Flutter 与网页代码；Apache-2.0。 — Generates Material colour roles from a seed using HCT tonal palettes [A · js]
- Huetone — https://huetone.ardov.me — 在 LCH 空间搭建色板，每级同步显示 WCAG 与 APCA 对比度数值；边调整套色彩系统边盯可读性，MIT。 — Build accessible palettes in LCH with WCAG and APCA read-outs per step [A · js]
- Arco Design Palette — https://arco.design/palette/list — 字节跳动 Arco Design 的色板工具：由一个颜色生成浅色与深色两套 10 阶色板，内置 14 组预设色；同一算法以 @arco-design/color 开源（MIT）。 — ByteDance Arco Design's palette tool: generates a 10-step swatch from one colour for both light and dark modes, with 14 preset hues; the same algorithm ships as @arco-design/color [B · js]

### Contrast and colour vision · 对比度与色觉
- WebAIM Contrast Checker — https://webaim.org/resources/contrastchecker/ — WCAG 对比度速查的事实标准工具，带 API；定文字与背景色时随手核对。 — The standard quick WCAG contrast check, with an API [S · static]
- Who Can Use — https://www.whocanuse.com — 展示一对颜色在不同视觉类型下的表现；向需求方解释对比度问题时，用它把后果摆出来。 — Shows how a colour pair performs across vision types [A · static]
- APCA Contrast Calculator — https://apcacontrast.com — APCA 明度对比度的参考计算器，带字号查表；APCA 只是草案，交付时仍要并列 WCAG 2 比值。 — Reference calculator for APCA lightness contrast with font-size lookup [A · static]
- Contrast Grid — https://contrast-grid.directededges.com — EightShapes 出品、现由 Directed Edges 维护的对比度矩阵：把色板里所有前景背景两两测对比度，截图贴进设计系统文档当搭配规则。 — Tests every foreground against every background in a palette [A · static]
- Color Oracle — https://colororacle.org — 免费的色盲模拟器（Windows、Mac、Linux），实时滤镜覆盖整个屏幕，任何软件与设计稿都能查；检查状态色、图表在各类色觉下是否仍可区分。 — Free colour-blindness simulator for Windows, Mac and Linux that filters the whole screen in real time, so any app or design file can be checked [A · static]
- Chrome DevTools: emulate vision deficiencies — https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies — Chrome 自带的视觉缺陷模拟：模糊、低对比、红色盲、绿色盲、蓝色盲、全色盲，可在任何线上页面切换；智能体可经 CDP 切换并逐一截图。 — Built-in emulation of blurred vision, reduced contrast, protanopia, deuteranopia, tritanopia and achromatopsia on any live page [A · static]

### Colour guides · 色彩指引
- OKLCH in CSS: why we moved from RGB and HSL — https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl — 讲清为什么该从 RGB、HSL 迁到 OKLCH：明度可预测、色板好生成、色域广；定色彩 token 前读。 — The case for OKLCH: predictable lightness, easy palette generation, wide gamut [S · static]
- Designing accessible color systems — https://stripe.com/blog/accessible-color-systems — Stripe 讲如何用感知色彩空间做出对比度可预测的色板；理解色阶编号保证对比度的原理。 — How Stripe built a palette with predictable contrast using a perceptual colour space [A · static]
- Why Color Theory Sucks (and what framework to use instead) — https://www.learnui.design/blog/color-in-ui-design-a-practical-framework.html — 讲界面配色变体推导的实操文章，基于 HSB 给出深浅变化的心智模型；调状态色时参考。 — Practical method for deriving UI colour variations [A · static]
- Building your color palette — https://www.refactoringui.com/previews/building-your-color-palette — Refactoring UI 的配色方法论：为什么 UI 需要灰、主色与强调色各八到十阶；产品色板的基线。 — Why a UI needs greys, a primary and accents in eight to ten shades each [A · static]
- High definition CSS color guide — https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide — Chrome 团队的 CSS Color 4/5 实用指南：oklch、oklab、display-p3 等新色彩空间、色域、渐变插值与 color-mix()；用 oklch 写颜色 token 前读。 — The practical guide to CSS Color 4 and 5: new colour spaces (oklch, oklab, display-p3), gamut, interpolation in gradients and color-mix() [A · static]
- Color & Contrast — https://colorandcontrast.com — 面向 UI 设计师的交互式色彩科学指南；遇到同时对比等色彩外观效应时来查。 — Interactive guide to colour science for UI designers [A · js]
- Material 2: Dark theme — https://m2.material.io/design/color/dark-theme.html — 对暗色表面、海拔叠层、低饱和强调色讲得最清楚的指南；推导深色模式前先读。 — The clearest reasoning on dark surfaces, elevation overlays and desaturated accents [A · js]
- Apple HIG: Color — https://developer.apple.com/design/human-interface-guidelines/color — 苹果的色彩规范：系统色在浅色、深色、增强对比下的取值，Liquid Glass 色彩（2025 年 12 月更新）、色彩管理与各平台差异；有官方中文版。 — Apple's colour guidance: system colours with light, dark and increased-contrast values, Liquid Glass colour (updated December 2025), colour management and per-platform rules [A · js]

## Design engineering · 设计工程 (code)

### Component libraries and headless primitives · 组件库与无头原语
- shadcn/ui — https://ui.shadcn.com — 复制进仓库的 React 组件库，底层是可访问性原语；别直接用默认主题上线，用 CSS 变量换肤，MIT。 — Copy-in React components on accessible primitives; the code lives in your repo [S · static]
- Base UI — https://base-ui.com — Radix、Floating UI 与 Material UI 作者们做的无样式无障碍 React 组件；2026 年 7 月起是 shadcn/ui 的默认底层，新建 React 设计系统的首选行为层，MIT。 — Unstyled, accessible React components from the Radix, Floating UI and Material UI authors; shadcn/ui's default primitives since July 2026 [S · static]
- Ant Design (React) — https://ant.design/components/overview — 国内后台系统事实标准的 React 组件库；换主题走 ConfigProvider 的 token 与算法，别写 CSS 覆盖。MIT。 — The enterprise React library behind most Chinese admin systems; themable through design tokens [S · static]
- Radix Primitives — https://www.radix-ui.com/primitives — React 无样式无障碍组件原语，只管行为不管外观；做自定义设计时垫在下面的行为层，MIT。 — Unstyled accessible primitives for React [A · static]
- React Aria — https://react-aria.adobe.com — Adobe 的 headless React 组件库，无障碍与国际化做得最深；这两项是硬要求时选它；Apache-2.0。 — Adobe's headless components with the deepest accessibility and internationalisation work [A · static]
- Ark UI — https://ark-ui.com — 基于状态机的无样式组件库，一套行为层覆盖 React、Vue、Solid 等多框架；换框架不换交互。MIT。 — Headless components for several frameworks built on state machines [A · static]
- Reka UI — https://reka-ui.com — 相当于 Vue 版的 Radix：headless 无样式组件库，正适合给自己的 Vue 设计系统打地基；MIT。 — Unstyled, accessible primitives for Vue (formerly Radix Vue); the base under shadcn-vue [A · static]
- shadcn-vue — https://www.shadcn-vue.com — shadcn/ui 的 Vue 移植版，同样把组件代码复制进项目由自己持有；技术栈是 Vue 或 Nuxt 时的选择，MIT 协议。 — Community Vue port of shadcn/ui on Reka UI: copy-in components for Vue and Nuxt [A · static]
- Nuxt UI — https://ui.nuxt.com — 为 Vue 与 Nuxt 准备的全套组件库，主题用 token 体系定制；做 Nuxt 项目快速起步的选择，MIT。 — Full component library for Vue and Nuxt with a token-based theme [A · static]
- Mantine — https://mantine.dev — 大而全、文档写得好的 React 组件与 hooks 库；给团队做内部工具时的务实选择；MIT。 — Large, well-documented React component and hooks library [A · static]
- Element Plus — https://element-plus.org — 国内最常见的 Vue 3 中后台组件库，做管理系统时的默认选项；通过 CSS 变量与 SCSS 变量定制主题，MIT。 — The most common Vue 3 admin component library in China [A · static]
- Forui — https://forui.dev — 极简、平台无关的 Flutter 组件库，样式克制；想让 Flutter 应用摆脱默认 Material 长相时的出路。 — Minimalist, platform-agnostic Flutter widget library [A · static]
- Untitled UI React — https://www.untitledui.com/react — 与 Untitled UI Figma 套件一一对应的开源 React 组件（React Aria + Tailwind CSS v4），PRO 版另有大量区块；设计稿与代码想共用一套时的好默认，开源部分 MIT。 — Open-source React components on React Aria and Tailwind CSS v4 that match the Untitled UI Figma kit; PRO adds thousands of sections [A · static]
- MUI (Material UI and MUI X) — https://mui.com — 使用最广的 React 组件套件：Material UI 加 MUI X 数据表格、日期选择与图表，团队也维护 Base UI；需要成熟表格与日期控件的数据型应用选它，记得去掉 Material 原味。 — The most-used React component suite: Material UI plus MUI X data grid, date pickers and charts; the team also maintains Base UI [A · static]
- shadcn-svelte — https://www.shadcn-svelte.com — 社区维护的 shadcn/ui Svelte 移植版（基于 Bits UI）；Svelte 与 SvelteKit 项目的默认复制粘贴组件库，同样用 CSS 变量换肤，MIT。 — Community Svelte port of shadcn/ui built on Bits UI [A · static]
- WeUI — https://weui.io — 微信官方基础样式库，视觉与微信原生一致；在微信里打开的 H5 页面用它显得原生，配合微信小程序设计指南阅读，MIT。 — WeChat's official base style library that matches native WeChat visuals [A · static]
- Floating UI — https://floating-ui.com — 提示框、弹出层、菜单、下拉的定位引擎：避让碰撞的定位加交互 hooks；自己造浮层组件时直接用，多数无头组件库已内置它，MIT。 — The positioning engine for tooltips, popovers, menus and selects: collision-aware placement plus interaction hooks [A · static]
- TanStack Table — https://tanstack.com/table/latest — 无头表格与数据网格逻辑库：排序、筛选、分组、分页，可配虚拟滚动，支持 React、Vue、Solid、Svelte；密集表格要贴合自家设计系统时用，标记与样式全由你定，MIT。 — Headless table and data-grid logic (sorting, filtering, grouping, pagination, virtualisation hooks) for React, Vue, Solid and Svelte [A · static]
- dnd kit — https://dndkit.com — 可访问的拖拽与排序工具包，支持键盘与指针传感器，覆盖 React、Vue、Svelte、Solid 与原生 TypeScript；做看板、可排序列表、搭建器时用，拖拽预览、落点提示与键盘说明都要专门设计，MIT。 — Toolkit for accessible drag-and-drop and sortable lists with keyboard and pointer sensors, for React, Vue, Svelte, Solid and plain TypeScript [A · static]
- Sonner — https://sonner.emilkowal.ski — Emil Kowalski 的 React 通知（toast）组件，堆叠、滑动关闭与 promise 状态都很讲究，多数 shadcn 应用用的就是它；其他技术栈设计通知时也值得研究它的堆叠与节奏，MIT。 — Emil Kowalski's opinionated toast component for React: stacking, swipe to dismiss and promise states, the toast most shadcn apps ship [A · static]
- Web Awesome (formerly Shoelace) — https://webawesome.com — Font Awesome 团队的框架无关 Web Components 组件库（Shoelace 的后继），带主题、设计 token 与 SSR；设计要跨框架或用在纯 HTML 里时选它，免费部分 MIT，Pro 付费。 — Framework-agnostic web components from the Font Awesome team, successor to Shoelace, with themes, design tokens and SSR [A · static]
- Ant Design Vue — https://antdv.com — Ant Design 的 Vue 实现，企业级组件一应俱全；搭 Vue 后台管理系统时的常用底座；MIT。 — Vue 3 implementation of Ant Design's components and token theming, maintained by the vueComponent team [A · js]
- Naive UI — https://www.naiveui.com — Vue 3 组件库，TypeScript 写就，主题覆盖系统做得好；默认观感比多数后台模板干净，MIT。 — Vue 3 library with a strong TypeScript theme-override system [A · js]
- Vant — https://vant.pro/vant/ — 轻量移动端 Vue 组件库，有微信小程序版；中文生态做移动 H5 的默认选择；MIT。 — Lightweight mobile Vue components with a WeChat mini-program edition [A · js]
- NutUI — https://nutui.jd.com — 京东风格的轻量移动端组件库，有 Vue 与 React 两个版本，均可通过 Taro 支持多端小程序；做电商类移动 H5 或 Taro 小程序时选，记得换掉京东红。 — JD's lightweight mobile component library in Vue and React editions, both supporting multi-host mini-programs through Taro [A · js]
- Ant Design Mobile — https://mobile.ant.design — 蚂蚁集团的移动端 React 组件库，Ant Design 的移动版；支付宝或蚂蚁生态的 React H5 应用首选，用 CSS 变量换主题，MIT。 — Ant Group's React component library for mobile web, the mobile sibling of Ant Design [A · js]
- Tailwind Plus — https://tailwindcss.com/plus — Tailwind 官方付费库（原 Tailwind UI）：UI 区块、站点模板与 Catalyst 应用套件，一次买断终身使用；比例与间距得当的默认布局参考，禁止把代码当套件再分发。 — The Tailwind team's paid library (formerly Tailwind UI) of UI blocks, site templates and the Catalyst application kit [A · blocked]
- HeroUI — https://www.heroui.com — HeroUI v3（原 NextUI）：基于 Tailwind CSS v4 与 React Aria 的 React 及 React Native 组件库，默认就好看；务必改主题，别和官方演示撞脸，Apache-2.0。 — HeroUI v3 (formerly NextUI): polished React and React Native components on Tailwind CSS v4 and React Aria [B · static]
- coss ui — https://coss.com/ui — Cal.com 团队基于 Base UI 与 Tailwind 的大型复制粘贴 React 组件库（Origin UI 的后继），附 500 多个示例；shadcn 项目迁到 Base UI 时拿来参考。 — Large copy-paste React component library on Base UI and Tailwind from the Cal.com team (successor of Origin UI), with 500+ example 'particles' [B · static]
- Wot UI — https://wot-ui.cn — 流行的 uni-app 组件库（80+ 组件，暗色模式、国际化、自定义主题）；技术栈是 uni-app 时选，注意在各小程序宿主上分别验证。 — Popular uni-app component library (80+ components, dark mode, i18n, custom themes) for multi-host mini-programs [B · static]
- shadcn_flutter — https://sunarya-thito.github.io/shadcn_flutter/ — shadcn 风格的 Flutter 组件集，不是 Material 那副默认面孔；想给自己的 Flutter 应用换种气质时用；BSD-3-Clause。 — shadcn-style component set for Flutter [B · js]
- React Native Reusables — https://reactnativereusables.com — 把 shadcn/ui 的复制进仓库做法搬到 React Native 的组件集；想让 Web 端与原生应用保持同一风格时用，MIT 协议。 — shadcn/ui approach for React Native [B · js]

### Animated and marketing component kits · 动效组件与营销套件
- Magic UI — https://magicui.design — 面向 shadcn 项目的营销动效组件：跑马灯、光束、bento、文字特效；挑一两个点睛，整页都用就撞脸。MIT。 — Animated marketing components (marquees, beams, bento, text effects) for shadcn projects [A · static]
- Motion Primitives — https://motion-primitives.com — 基于 Motion 的克制风动效组件集，比炫技类库更贴近产品界面的实际需要，MIT。 — Tasteful, restrained animated primitives built on Motion [A · static]
- React Bits — https://reactbits.dev — 大量动效文字、背景与交互组件的集合；适合取一件做页面的点睛时刻；授权见仓库。 — Large set of animated text, backgrounds and interactive components [A · js]
- Inspira UI — https://inspira-ui.com — Vue 与 Nuxt 的动画组件库，灵感来自 React 系套件；Vue 技术栈要那些效果时用它；MIT。 — Animated components for Vue and Nuxt, inspired by the React kits [A · js]
- Fancy Components — https://www.fancycomponents.dev — 开源的 React 组件与微交互库，偏实验性：动态文字、物理效果、光标效果；在整体克制的页面上只取一个效果做点睛，并检查移动端性能，MIT。 — Open-source React components and microinteractions with an experimental bent: kinetic typography, physics and cursor effects [A · js]
- Aceternity UI — https://ui.aceternity.com — 效果炫目的 React 组件库，一眼能看出是模板；当技法参考用，务必大幅改样式。 — Eye-catching effect components (spotlights, beams, 3D cards) for React and Tailwind [B · static]
- Animate UI — https://animate-ui.com — 常见组件的动画版本合集；做状态过渡打磨时的参考；许可见仓库。 — Animated versions of common components [B · js]

### Animation and graphics libraries · 动画与图形库
- Motion — https://motion.dev — Web 动画事实标准库（原 Framer Motion）：弹簧、手势、布局与滚动动画；React 从 motion/react 引入，留意大版本。MIT。 — The standard animation library for the web (formerly Framer Motion): springs, gestures, layout and scroll animation [S · static]
- three.js — https://threejs.org — Web 端 3D 图形的事实标准库，封装了 WebGL 的复杂度；做 3D 场景、产品可视化或创意网页时用，React 项目配 react-three-fiber，MIT 协议。 — The standard WebGL and WebGPU 3D library for the web: scenes, materials, glTF loading and post-processing [S · static]
- Anime.js — https://animejs.com — 轻量 JS 动画引擎，支持时间线、交错动画与 SVG，v4 已重写；想要少依赖的 GSAP 替代时用，MIT。 — Lightweight animation engine with timelines, staggering and SVG support (v4 rewrite) [A · static]
- dotLottie web player (and lottie-web) — https://github.com/LottieFiles/dotlottie-web — 网页端 Lottie 动画播放器：dotLottie 播放器（支持 .lottie 与 JSON，文件更小、可换主题、有状态机）和老牌 lottie-web；优先用 .lottie 与 dotLottie，MIT。 — Players for Lottie animations on the web: the dotLottie player for .lottie and JSON files (smaller files, theming, state machines) and the original lottie-web [A · static]
- Rive runtimes — https://rive.app/docs/runtimes/getting-started — 让交互式 Rive 动画跑在各平台的运行时；一份动画资产跨 Web、Flutter 和原生；MIT。 — Runtimes to play interactive Rive files on every platform [A · static]
- AutoAnimate — https://auto-animate.formkit.com — 一行接入的列表与布局自动过渡库；给后台界面低成本加精致感；MIT。 — One-line automatic transitions for list and layout changes [A · static]
- Remotion — https://www.remotion.dev — 用 React 以代码生成视频，动态图形和产品视频都能写；个人小团队免费，公司超阈值需付费授权。 — Programmatic video in React: motion graphics and product videos from code [A · static]
- p5.js — https://p5js.org — 创意编程库，做生成式视觉的入门标配；生成艺术海报与动态背景时上手最快，LGPL-2.1。 — Creative-coding library for generative visuals [A · static]
- PixiJS — https://pixijs.com — 高速 2D 渲染引擎（WebGL 与 WebGPU），用于游戏、互动叙事和复杂动画界面；DOM 与 SVG 动画撞到性能上限（大量精灵、粒子、滤镜）时换用，MIT。 — Fast 2D rendering engine (WebGL and WebGPU) for games, interactive stories and rich animated interfaces [A · static]
- react-three-fiber — https://r3f.docs.pmnd.rs — three.js 的 React 渲染器，配 drei 助手库；要用声明式写法搭 3D 场景、做数字孪生可视化时选它，MIT。 — React renderer for three.js with the drei helper library [A · js]
- GSAP — https://gsap.com — 时间轴动画平台，带 ScrollTrigger、SplitText、MorphSVG；做编排式滚动叙事的首选；免费但非 OSI 开源。 — Timeline-based animation platform with ScrollTrigger, SplitText, MorphSVG [A · blocked]
- Lenis — https://lenis.dev — 许多获奖站用的平滑滚动库；劫持滚动有无障碍代价，非必要不上。MIT。 — Smooth-scroll library used on many award sites [B · static]
- Theatre.js — https://www.theatrejs.com — 可视化动画编排序器，用来编排代码驱动的动效；做电影感首屏序列；Apache-2.0。 — Visual sequencer for choreographing code-driven animation [B · static]
- Motion Canvas — https://motioncanvas.io — 用 TypeScript 代码驱动的讲解视频动画库；做图表式演示动画的开源选择；MIT。 — Code-driven animation for explainer videos [B · static]

### Design tokens and colour tooling · design token 与色彩工具
- Design Tokens Format Module (DTCG 2025.10) — https://www.designtokens.org — W3C 社区组的 design token 文件格式，2025.10 为稳定版（2025 年 10 月 28 日终版报告），另有 Color 模块与处理主题和模式的 Resolver 模块；写 tokens.json 按它来。 — The W3C Community Group's stable token file format (2025.10, final report of 28 October 2025) with Color and Resolver modules for themes and modes [S · static]
- Style Dictionary — https://styledictionary.com — 把 design token 源文件编译成 CSS、iOS、Android、Flutter 等各平台代码的标配构建工具，做跨端主题时默认选它，支持 W3C DTCG 格式；Apache-2.0。 — Transforms token files into CSS, iOS, Android, Flutter and more [S · static]
- Tailwind CSS — https://tailwindcss.com — 原子化 CSS 框架，v4 的 @theme 变量就是大多数 AI 生成界面与 shadcn 项目的 token 层；把设计系统的 token 映射到 @theme 命名空间（--color-*、--font-*、--spacing、--radius-*），别在类名里写死数值，MIT。 — Utility-first CSS framework whose v4 @theme variables are the token layer of most AI-generated and shadcn-based UIs [S · static]
- Terrazzo — https://terrazzo.app — 原生支持 DTCG 的 token 构建工具链，带 lint 与插件机制；想要比 Style Dictionary 更轻的选择时用它；MIT。 — DTCG-native token toolchain with linting and plugins [A · static]
- Tokens Studio — https://tokens.studio — 在 Figma 里编写 design token 并同步到 Git 的插件；设计师留在 Figma、代码库要单一来源时用它衔接。MIT。 — Figma plugin to author tokens and sync them to Git [A · static]
- Open Props — https://open-props.style — 调好的 CSS 自定义属性集：尺寸、缓动、阴影、渐变、颜色；缓动与阴影阶可直接借走；MIT。 — Expertly tuned CSS custom properties: sizes, easings, shadows, gradients, colours [A · static]
- Material Color Utilities — https://github.com/material-foundation/material-color-utilities — Google 的取色算法库：HCT 色彩空间、色调色板与动态配色，多语言实现；构建脚本里生成主题，Apache-2.0。 — HCT colour space, tonal palettes and dynamic schemes in TS, Dart, Java, Swift [A · static]
- Culori — https://culorijs.org — 功能齐全的颜色处理库，支持 OKLCH、插值与色域映射；写 design token 构建脚本时的好帮手，MIT。 — Comprehensive colour library with OKLCH, interpolation and gamut mapping [A · static]
- Color.js — https://colorjs.io — CSS Color 规范作者写的色彩科学库；要参考 CSS 色彩空间的实现行为时用它；MIT。 — Colour science library by CSS Color spec editors [A · static]
- tweakcn — https://tweakcn.com — shadcn/ui 的可视化主题编辑器，导出 CSS 变量；让项目摆脱默认脸的最快路径；Apache-2.0。 — Visual theme editor for shadcn/ui with exportable CSS variables [A · js]
- Panda CSS — https://panda-css.com — 类型安全、构建时生成的 CSS-in-JS 框架，原生支持 token、语义 token、文字样式与组件 recipe；设计系统想用 TypeScript 定义 token 与变体并编译成静态 CSS 时用，MIT。 — Type-safe, build-time CSS-in-JS for design systems with first-class tokens, semantic tokens, text styles and component recipes [B · static]

### Rendering, export, typesetting and fonts · 渲染、导出与排版
- Satori — https://github.com/vercel/satori — 把 HTML 与 CSS 的 flexbox 子集渲染成 SVG，是生成 OG 图的核心引擎；配 resvg 出位图，字体需自备；MPL-2.0。 — Converts HTML and CSS (a flexbox subset) to SVG; the engine behind generated OG images [S · static]
- Playwright — https://playwright.dev — 浏览器自动化库，整页截图、导出 PDF、截图断言俱全；用 toHaveScreenshot() 做视觉回归的机械关卡，Apache-2.0。 — Browser automation with full-page screenshots, PDF output and screenshot assertions [S · static]
- resvg — https://github.com/linebender/resvg — 精度可靠的 SVG 光栅化器，有 JS 绑定（resvg-js）；在构建脚本里确定性地把 SVG 转成 PNG；Apache-2.0 或 MIT。 — Accurate SVG rasteriser with JS bindings (resvg-js) [A · static]
- sharp — https://sharp.pixelplumbing.com — Node 里高性能的图像缩放、格式转换与合成库；生成响应式图片集和 AVIF/WebP 用它；Apache-2.0。 — High-performance image resizing, format conversion and compositing in Node [A · static]
- Typst — https://typst.app — 现代标记式排版系统，编译 PDF 很快；用代码做报告、单页与印刷品的好选择；Apache-2.0。 — Modern markup-based typesetting system that compiles to PDF quickly [A · static]
- Paged.js — https://pagedjs.org — CSS Paged Media 的浏览器 polyfill：页面尺寸、页边距、页眉、出血和裁切标记；HTML 直接出印刷级 PDF。MIT。 — Polyfill for CSS Paged Media: page size, margins, running headers, bleed and crop marks in the browser [A · static]
- Vivliostyle — https://vivliostyle.org — CSS 排版引擎，中日文与竖排支持扎实；适合用 HTML 排中文、日文的书籍与文档；AGPL-3.0。 — CSS typesetting engine with strong CJK and vertical-text support [A · static]
- Slidev — https://sli.dev — 用 Markdown 和 Vue 写幻灯片，支持主题、实时组件与 PDF 导出；开发者的演示文稿工具，MIT。 — Markdown and Vue slides for developers with themes and PDF export [A · static]
- reveal.js — https://revealjs.com — HTML 演示文稿框架的标杆；要做完全掌控版式的设计感幻灯片用它；MIT。 — Mature HTML presentation framework: nested slides, speaker notes, PDF export and full CSS control [A · static]
- PptxGenJS — https://gitbrent.github.io/PptxGenJS/ — 从 JavaScript 生成真正可编辑的 PowerPoint 文件的库；交付物必须让对方在 PowerPoint 或 Keynote 里继续改时用它。MIT。 — Generates editable PowerPoint files from JavaScript [A · static]
- fontTools — https://github.com/fonttools/fonttools — 字体处理的 Python 库，pyftsubset 可按实际用到的字符裁剪字体；上线前做子集化减体积，MIT。 — Python library and pyftsubset for inspecting and subsetting fonts [A · static]
- Takumi — https://takumi.kane.tw — Rust 写的 JSX 布局图片渲染引擎，定位是更快的 Satori 替代；大批量生成 OG 图时选它。MIT/Apache-2.0。 — Rust image-rendering engine for JSX layouts, a faster Satori alternative [B · static]
- snapDOM — https://snapdom.dev — 浏览器内高速把 DOM 节点截成图片的库，给产品做客户端导出图片功能时用，MIT。 — Fast in-browser DOM-to-image capture [B · static]
- WeasyPrint — https://weasyprint.org — Python 写的渲染库，把 HTML 与 CSS 直接排成分页 PDF；适合在服务端批量生成报告类文档，BSD-3-Clause 协议。 — HTML and CSS to PDF in Python with paged-media support [B · static]
- Marp — https://marp.app — 把 Markdown 文稿直接转成幻灯片，可导出 PDF 与 PPTX；需要快速出朴素演示稿时用；MIT。 — Markdown to slides with PDF and PPTX export [B · static]
- opentype.js — https://opentype.js.org — 在 JavaScript 里解析字体文件、把文字转成 SVG 路径的库；要用代码给字标转曲描边时用，MIT。 — Parse fonts and convert text to SVG paths in JavaScript [B · static]

### Open design tools · 开放设计工具
- Penpot — https://penpot.app — 开源设计工具，建立在 SVG 和 CSS 概念之上，自带 token 与 MCP server；可自托管的设计源头文件；MPL-2.0。 — Open-source design tool built on SVG and CSS concepts, with tokens and an MCP server [A · static]
- Inkscape — https://inkscape.org — 成熟的开源矢量编辑器，带命令行接口，可批量把 SVG 导出成 PNG 或 PDF；GPL 协议。 — Mature open-source SVG editor with a command line for batch export [A · static]
- Blender — https://www.blender.org — 开源 3D 创作套件，建模、渲染、动画齐备且可用 Python 脚本化；批量渲染产品或图标场景用，GPL。 — Open-source 3D suite, scriptable in Python [A · static]
- Figma — https://www.figma.com — 多数产品团队的主力设计工具：组件、变量（token 与模式）、Dev Mode 和 REST API；动手前先读团队已有的变量与组件，智能体通过 REST API 或 Figma MCP 取文件数据。 — The design tool of record for most product teams: components, variables (tokens and modes), Dev Mode and a REST API [A · static]
- pen.dev (formerly Pencil) — https://www.pen.dev — 原 Pencil，面向智能体的设计画布（桌面与 IDE），.pen 为开放格式、放在代码仓库里，可通过 MCP、WebMCP 与 CLI 接入；.pen 与代码放一起，像评审代码一样评审智能体的改动。 — Agent-native design canvas (desktop and IDE) whose .pen files are an open format kept in the repo, with MCP, WebMCP and CLI access [A · static]
- Paper — https://paper.design — 画布基于 HTML 与 CSS 的设计工具，智能体可通过 MCP 读写画板；希望交付物直接是 CSS 时用，接上 MCP 让智能体排版或把选中画板转成代码。 — Design tool whose canvas is built on HTML and CSS, with an MCP server through which agents read and write frames [A · static]
- MasterGo (莫高设计) — https://mastergo.com — 国内领先的 Figma 级设计工具（蓝湖团队出品），含原型、研发模式、AI 功能与官方 MCP；国内团队常用它交付设计稿，研发模式里看组件与样式，智能体接 MasterGo Magic MCP。 — Leading domestic Figma-class design tool (from the Lanhu team) with prototyping, a developer mode, AI features and an official MCP server [A · static]
- Pixso — https://pixso.cn — 国产协同 UI 设计与原型工具，画布内 AI 生成与优化设计稿，另有连接设计与代码的 Pixso MCP；交付前先确认对方用哪家国产工具。 — Domestic collaborative UI design and prototyping tool with in-canvas AI generation and a Pixso MCP that connects designs to code [A · static]
- Storybook — https://storybook.js.org — 在隔离环境里开发、记录与测试 UI 组件的行业标准工作台，支持视觉、交互与无障碍测试；项目里有 Storybook 就先把新组件的各个状态写成 story，再拼页面，MIT。 — The standard workshop for building, documenting and testing UI components in isolation, with visual, interaction and accessibility tests [A · static]
- Excalidraw — https://excalidraw.com — 手绘风格白板，画流程与线框；上像素之前的低保真思考工具；MIT。 — Hand-drawn style whiteboard for flows and wireframes [A · js]
- tldraw — https://www.tldraw.com — 无限画布与配套 SDK；自己造画布类工具时基于它搭，SDK 商用需购买授权。 — Infinite-canvas whiteboard plus a React SDK for building your own canvas tools [A · js]
- JS Design (即时设计) — https://js.design — 国产在线 UI 设计工具，多人实时协作、原型交互、开发标注，兼容 Figma、Sketch、XD 文件；国内团队常见的源文件所在地，资源广场另有 UI 套件。 — Domestic browser-based UI design tool with real-time collaboration, prototyping, developer annotations and Figma, Sketch and XD import [A · js]
- Lanhu (蓝湖) — https://lanhuapp.com — 国内最主流的设计交付平台：自动生成标注、切图、可点击原型，并可在线展示 Axure；国内工程师多在这里看规范，从设计工具上传时命名要规范，标注与切图才好用。 — The dominant Chinese design-handoff platform: auto-generated spec annotations, slices, clickable prototypes and Axure hosting for engineers [A · js]
- Graphite — https://graphite.art — 浏览器里的开源程序化矢量与位图编辑器；矢量工具的新候选；Apache-2.0。 — Open-source procedural vector and raster editor in the browser [B · static]
- Modao (墨刀) — https://modao.cc — 国产原型与产研协作平台：交互原型、白板、带设计转代码的 UI 设计，以及 AI 生成；常见于产品经理的线框稿，把它当结构与流程参考，不当视觉设计。 — Chinese prototyping and product-collaboration platform: interactive prototypes, whiteboard, UI design with design-to-code, and AI generation [B · static]

### Lists worth mining · 值得挖的清单
- awesome-design-systems — https://github.com/alexpate/awesome-design-systems — 公开设计系统清单，附组件、文案语调与源码链接；找同类域的系统来对照。 — Table of public design systems with links to components, voice and source [A · static]
- design-resources-for-developers — https://github.com/bradtraversy/design-resources-for-developers — 面向开发者的超大型分类设计资源清单；胜在广，质量自己把关；MIT。 — Very large categorised list of design resources for developers [A · static]
- awesome-creative-coding — https://github.com/terkelg/awesome-creative-coding — 生成艺术与创意编程的资源大清单，教程、工具、社区俱全；入门生成图形时当起点索引。 — Resources for generative art and creative coding [A · static]
- awesome-shadcn/ui — https://github.com/birobirobiro/awesome-shadcn-ui — shadcn 兼容组件注册表与主题的索引站，动手写组件前先查有没有人做过，MIT。 — Index of shadcn-compatible component registries and themes [A · static]
- Awesome Design Tokens — https://github.com/sturobson/Awesome-Design-Tokens — design token 相关工具、平台、文章与演讲的精选清单；选 token 流水线（Figma 同步、转换、文档）前先扫一遍，看看 Style Dictionary 与 Terrazzo 之外的选项。 — Curated list of design-token tools, platforms, articles and talks [A · static]
- awesome-web-animation — https://awesome-web-animation.netlify.app — 网页动画相关的库、工具与文章的精选清单；找某个专项动画库时从这里翻起；CC0。 — Libraries, tools and articles on web animation [B · js]

## Reading · 阅读 (reading)

### Interface craft and design engineering · 界面工艺与设计工程
- Rauno Freiberg: Web Interface Guidelines — https://interfaces.rauno.me — Rauno 总结的网页界面细节清单：交互、字体、动效、触控、无障碍；结构理顺后当打磨核对表用。 — Non-obvious details that make web interfaces feel right: interactivity, typography, motion, touch, accessibility [S · static]
- Invisible Details of Interaction Design — https://rauno.me/craft/interaction-design — Rauno 的交互设计随笔，讲隐喻、运动物理、响应速度与新鲜感背后的推理；设计任何手势前读。 — Essay on the reasoning behind great interactions: metaphors, kinetic physics, responsiveness, frequency and novelty [A · static]
- Design Engineering at Vercel — https://vercel.com/blog/design-engineering-at-vercel — Vercel 讲设计工程师做什么、持什么标准；给有设计感的工程师的共同语言。 — What design engineers do and the standards they hold [A · static]
- How we redesigned the Linear UI — https://linear.app/now/how-we-redesigned-the-linear-ui — Linear 复盘自家界面改版：删繁、对齐、用 LCH 重建主题系统；想改版又保住品牌资产时参照。 — A disciplined product redesign: reduce, align, rebuild the theme system in LCH [A · static]
- Atomic Design — https://atomicdesign.bradfrost.com — Brad Frost 的免费网络书，讲如何搭建界面体系；第二章的心智模型最值得一读。 — Brad Frost's free web book on building interface systems [A · static]
- Every Layout — https://every-layout.dev — 讲算法化 CSS 布局原语的书，不靠断点自适应；基础篇免费，会改变你写响应式的方式。 — Algorithmic CSS layout primitives that adapt without breakpoints [A · static]
- Ahmad Shadeed — https://ishadeed.com — Ahmad Shadeed 的深度图解 CSS 博客，讲布局、防御性 CSS 与 RTL；做组件前先查有没有对应文章。 — Deep, visual CSS articles on layout, defensive CSS and RTL [A · static]
- Defensive CSS — https://defensivecss.dev — 防御性 CSS 模式集：长文本、缺图、溢出等真实内容下的不翻车写法；上线前当清单查。 — Patterns that keep layouts from breaking with real content [A · static]
- Maggie Appleton — https://maggieappleton.com — 关于语言模型界面与思维工具的插画式长文；给 AI 产品概念找视角。 — Illustrated essays on language-model interfaces and tools for thought [A · static]
- Jhey Tompkins — https://www.jhey.dev — Jhey Tompkins 的创意 CSS 与交互演示及讲解，常率先用上新平台特性；做滚动、悬停、锚点定位效果前先搜他的演示。 — Inventive CSS and interaction demos with explanations, often the first to use new platform features [A · static]
- Adam Argyle (nerdy.dev) — https://nerdy.dev — Open Props 作者 Adam Argyle 的 CSS 与 UI 工艺博客，GUI Challenges 系列尤佳；常见组件的现代、无障碍实现参考。 — CSS and UI craft from the author of Open Props and the GUI Challenges series [A · static]
- Smashing Magazine — https://www.smashingmagazine.com — 老牌从业者杂志，涵盖 UX、CSS、无障碍与设计系统；按分类或模式名搜深度实践文章，注意发表日期。 — Long-running practitioner magazine on UX, CSS, accessibility and design systems [A · static]
- Baseline and Web Platform Status — https://web.dev/baseline — web.dev 的 Baseline 可用性标签（新近可用 / 广泛可用）；webstatus.dev 及其 JSON API 给出每个特性的状态与日期，设计依赖新特性前先查。 — Baseline labels (newly or widely available) for web platform features; webstatus.dev and its JSON API give each feature's status and dates [A · static]
- userinterface.wiki — https://www.userinterface.wiki — Raphael Salaja 维护的界面工艺活手册：从动画原则到现代 Web API，附演示与智能体技能；实现交互细节前先读对应条目。 — Raphael Salaja's living manual of interface craft, from animation principles to modern web APIs, with demos and an agent skill [A · js]

### Designing with and for AI · 与 AI 一起做设计
- Improving frontend design through Skills — https://claude.com/blog/improving-frontend-design-through-skills — Anthropic 分析模型为何产出千篇一律的设计、哪些提示词轴向有效；注意部分旧解法如今已成破绽。 — Anthropic on why models converge on generic design (distributional convergence), which prompt axes move output (typography, themes, motion, backgrounds) and a ~400-token aesthetics prompt; published 2025-11-12 [A · static]
- Prompting for frontend aesthetics — https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb — Anthropic 的食谱笔记，实测哪些提示词杠杆能改变前端美学（字体、主题、动效、背景）。 — Cookbook showing which prompt levers change front-end aesthetics (typography, themes, motion, backgrounds) [A · static]
- Design for the AI age — https://linear.app/now/design-for-the-ai-age — Linear 谈"AI 是用户也是协作者"时代的软件设计；接 AI 产品 brief 前用它校准框架。 — Linear's view on designing software where AI agents are users and collaborators [A · static]
- AI and design systems — https://bradfrost.com/blog/post/ai-and-design-systems/ — 论述设计系统如何成为 AI 生成界面的约束层；是先投 token 再谈生成的论据。 — How design systems become the constraint layer for AI-generated UI [A · static]
- Why Chatbots Are Not the Future of Interfaces — https://wattenberger.com/thoughts/boo-chatbots — Amelia Wattenberger 的图解长文：为什么输入框不是大模型的好默认界面、该设计什么替代；AI 功能默认做聊天框之前读。 — Amelia Wattenberger's illustrated essay on why a text box is a poor default interface for language models, and what to design instead [A · static]
- Malleable software (Ink & Switch) — https://www.inkandswitch.com/essay/malleable-software/ — Ink & Switch 的长文：在封闭应用时代把改造软件的能力还给用户，以及 AI 如何改变谁能塑造软件；做生成式或可定制界面前读。 — Ink & Switch's essay on restoring user agency in locked-down apps, and how AI changes who can reshape software [A · static]

### Visual design fundamentals · 视觉基础
- Visual design rules you can safely follow every time — https://anthonyhobday.com/sideprojects/saferules/ — 一份朴素但每次都可安全遵守的视觉设计规则清单，附简短解释；完稿后当检查表逐条过。 — A plain list of visual design rules with brief explanations [S · static]
- Laws of UX — https://lawsofux.com — 设计师常引用的感知与认知定律合集（Fitts、Hick、Jakob、Miller 等），附出处；给决策找依据时报定律名。 — The perception and cognition principles designers cite (Fitts, Hick, Jakob, Miller, proximity, peak-end...) with sources [S · static]
- Refactoring UI — https://www.refactoringui.com — Tailwind 作者写给开发者的 UI 设计战术书，付费；先读免费的“7 个作弊技巧”文章，再读层级、间距、配色章节。 — Tactical UI design book for developers by the Tailwind authors [A · static]
- 7 Rules for Creating Gorgeous UI — https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html — Erik Kennedy 的七条 UI 法则：光从天上来、先用黑白、留白翻倍；适合当自查清单。 — Erik Kennedy's rules: light comes from the sky, black and white first, double your whitespace [A · static]
- Dieter Rams: ten principles for good design — https://www.vitsoe.com/us/about/good-design — Dieter Rams 好设计十原则的原始出处；需要一把克制与功能的标尺时回来对照。 — The ten principles, from the source [A · static]
- The Web's Grain — https://frankchimero.com/blog/2015/the-webs-grain/ — Frank Chimero 谈顺着网页媒介的本性去设计，而不是对抗它；版式跟媒介较劲时读。 — Frank Chimero on designing with the nature of the web instead of against it [A · static]
- Magic Ink — https://worrydream.com/MagicInk/ — Bret Victor 的长文，主张多数软件本质是信息设计而非交互设计；做仪表盘时换成「被阅读的图形」视角。 — Bret Victor's argument that most software is information design, not interaction design [A · static]
- Practical UI — https://www.practical-ui.com — Adham Dannaway 基于规则的界面设计书与 Figma 套件，逻辑清晰、兼顾无障碍；把它的明确规则当评审清单，付费。 — Adham Dannaway's rule-based book and Figma kit for logical, accessible interface design [A · static]
- Gestalt principles — https://ixdf.org/literature/topics/gestalt-principles — 格式塔分组原则的入门综述；向人解释布局分组决策时引用它。 — Overview of the grouping principles behind layout decisions [A · blocked]

### Research-backed UX guidance · 有研究背书的 UX 指引
- NN/g: 10 usability heuristics — https://www.nngroup.com/articles/ten-usability-heuristics/ — NN/g 的十大可用性启发式，启发式评估的标准框架；给评审发现打标签就按违犯的是哪条来。 — The standard heuristic-evaluation framework [S · static]
- Nielsen Norman Group articles — https://www.nngroup.com/articles/ — Nielsen Norman Group 几十年来基于研究的 UX 文章库；要下任何可用性断言之前先来这里搜一遍。 — Decades of research-based UX guidance [S · static]
- Baymard Institute — https://baymard.com/blog — 电商与表单可用性的大样本研究机构；做结账、搜索、筛选或表单前查结论，文章免费、库付费。 — Large-scale e-commerce and form usability research; articles free, full database paid [S · static]
- NN/g: response time limits — https://www.nngroup.com/articles/response-times-3-important-limits/ — 0.1 秒、1 秒、10 秒三条响应时限，决定反馈设计；做加载态与骨架屏决策时引用。 — The 0.1 s, 1 s and 10 s limits that govern feedback design [A · static]
- Growth.Design case studies — https://growth.design/case-studies — 用漫画形式拆解产品 UX，逐条挂心理学原理；做某类流程前找对应案例读。 — Product UX teardowns told as comics, tied to psychology principles [A · static]
- LukeW — https://www.lukew.com/ff/ — Luke Wroblewski 的随笔站，表单、移动端与输入设计居多且带数据；给表单方案找证据时搜这里。 — Luke Wroblewski's notes on forms, mobile and input design with data [A · static]
- GOV.UK design principles — https://www.gov.uk/guidance/government-design-principles — 英国政府的十条服务设计原则，'从用户需求出发''下功夫让它简单'都出自这里。 — Ten principles for user-centred services [A · static]
- Built for Mars — https://builtformars.com — 逐步拆解真实产品的 UX 案例（注册引导、银行、结账），另有 1400+ 条 UX 小例；设计某个流程前读对应案例。 — Peter Ramsey's step-by-step UX case studies of real products (onboarding, banking, checkout) plus 1,400+ UX examples [A · static]
- MeasuringU — https://measuringu.com — 定量 UX 研究：基准、SUS 与样本量，用数据讲清楚；需要数字而不是观点时查。 — Quantitative UX research: benchmarks, SUS and sample sizes explained with data [A · static]
- UX Myths — https://uxmyths.com — 常见 UX 误解合集，每条附反驳的研究证据；争论三次点击规则之类时拿来定胜负。 — Common UX misconceptions with research that refutes them [B · static]

### Process, critique and presenting work · 流程、评审与呈现
- NN/g: Design critiques — https://www.nngroup.com/articles/design-critiques/ — NN/g 讲如何组织和参与真正有用的设计评审；要给团队评审会立规矩时读。 — How to run and participate in useful critiques [A · static]
- Design critiques at Figma — https://www.figma.com/blog/design-critiques-at-figma/ — Figma 介绍内部几种设计评审形式及各自适用场景；按想要的反馈类型挑一种来组织评审。 — Several critique formats and when each works [A · static]
- Articulating Design Decisions — https://tomgreever.com/articulating-design-decisions-book/ — Tom Greever 讲如何向干系人解释与捍卫设计决策的书；写设计理由的方法论来源。 — Tom Greever's book on explaining and defending design decisions [A · static]
- Shape Up — https://basecamp.com/shapeup — Basecamp 的免费书，讲 shaping、面包板图和粗马克笔草图；先定流程再画视觉时按它做。 — Basecamp's free book: shaping work, breadboarding and fat-marker sketches [A · static]
- The Dribbblisation of Design — https://www.intercom.com/blog/the-dribbblisation-of-design/ — 批评“表面先行”设计的经典文章，提出产品设计四层次；没搞懂就 styling 的解药。 — The classic critique of surface-first design and the four layers of product design [A · static]
- 13 ways designers screw up client presentations — https://medium.com/@monteiro/13-ways-designers-screw-up-client-presentations-51aaee11e28c — Mike Monteiro 讲设计师向客户提案的 13 个翻车点；给客户讲方案之前读一遍。 — Mike Monteiro on presenting design work with authority [A · blocked]
- Nine rules for running productive design critiques — https://library.gv.com/nine-rules-for-running-productive-design-critiques-f8320655fc8c — GV 的 Jake Knapp 总结的设计评审九条规则：设计师是负责人，其他人是来帮忙的；开评审会前发给与会者对齐预期。 — Jake Knapp's concise critique ground rules from GV: the designer owns the work, everyone else helps [B · unknown]

### Books · 书
- Don't Make Me Think — https://sensible.com/dont-make-me-think/ — Steve Krug 的可用性小书，第一本该读的可用性经典；付费。 — Steve Krug's short classic on web usability [A · static]
- The Design of Everyday Things — https://www.hachettebookgroup.com/titles/don-norman/the-design-of-everyday-things/9780465050659/ — Don Norman 的设计经典，affordance、signifier、映射与反馈这套词汇的出处；做交互设计绕不开的一本，付费。 — Don Norman on affordances, signifiers, mapping and feedback [A · static]
- Grid Systems in Graphic Design — https://niggli.ch/en/products/rastersysteme-fur-die-visuelle-gestaltung — Mueller-Brockmann 的网格系统圣经；做海报、编辑版式和幻灯片排版时的案头参照。 — Mueller-Brockmann's definitive manual on grids [A · static]
- The Elements of Typographic Style — https://typographica.org/typography-books/the-elements-of-typographic-style-4th-edition/ — Bringhurst 的排印经典（第 4 版），比例、节奏、间距与西文排版细节的出处；定规则前先查它，付费书。 — Robert Bringhurst's reference on proportion, rhythm, spacing and the details of Latin typesetting (v4.0) [A · static]
- Interaction of Color — https://yalebooks.yale.edu/book/9780300179354/interaction-of-color/ — Albers 讲颜色如何互相改变的经典；某个颜色放进版面就变味时，答案在这里。付费书。 — Albers on how colours change each other [A · static]
- Microcopy: The Complete Guide — https://www.microcopybook.com — Kinneret Yifrah 写的界面文案指南；写报错提示、空状态和按钮文案时翻它准没错。 — Kinneret Yifrah's guide to interface words [A · static]
- Form Design Patterns — https://www.smashingmagazine.com/printed-books/form-design-patterns/ — Adam Silver 的包容性表单设计模式书；动手设计任何复杂表单之前先读；付费。 — Adam Silver's inclusive form patterns [A · static]
- Designing Interface Animation — https://rosenfeldmedia.com/books/designing-interface-animation/ — Val Head 讲有目的的界面动效的书，关于设计系统中动效的深度读物；付费。 — Val Head's book on purposeful UI animation [A · blocked]

### Courses · 课程
- Smart Interface Design Patterns — https://smart-interface-design-patterns.com — Vitaly Friedman 的复杂界面模式视频课与清单；表格、筛选、导航、表单往深挖时看。付费。 — Vitaly Friedman's video course and checklists on complex UI patterns [A · static]
- Learn UI Design — https://www.learnui.design — Erik Kennedy 的系统化视觉 UI 课，覆盖面完整；工程师想练真视觉功夫的付费课程。 — Erik Kennedy's comprehensive visual UI course [A · static]
- Shift Nudge — https://shiftnudge.com — Matt D. Smith 的界面设计课程，字体与版面模块尤其扎实；系统补视觉功底的付费课。 — Matt D. Smith's interface design course [A · static]
- CSS for JavaScript Developers — https://css-for-js.dev — Josh Comeau 的 CSS 课，专为 JS 开发者建立真正的 CSS 心智模型；布局 bug 挡住设计还原度时报它，付费。 — Josh Comeau's course that builds a real mental model of CSS [A · static]
- web.dev: Learn Responsive Design — https://web.dev/learn/design — web.dev 的免费响应式设计课程：容器查询、流式字体、主题化；把设计落地前端前补一遍。 — Free course on modern responsive design techniques [A · static]
- Build UI — https://buildui.com — 用 React 与 Motion 构建精致交互界面的课程与配方；/recipes 可当交互细节的参考实现。 — Courses and recipes on building polished interactive UI in React and Motion [A · static]
- Google UX Design Certificate — https://www.coursera.org/professional-certificates/google-ux-design — Coursera 上的结构化 UX 流程入门课；很适合给新人系统打流程基础；付费。 — Structured introduction to the UX process [B · static]

### Chinese-language reading · 中文阅读
- 腾讯 ISUX — https://isux.tencent.com — 腾讯社交 UX 团队的博客，复盘真实产品与品牌设计案例；看国内大众产品的设计打法。 — Tencent's social UX team writes up real product and brand design cases [A · static]
- Woshipm (人人都是产品经理) — https://www.woshipm.com — 人人都是产品经理：国内最大的产品经理社区，有大量交互、体验与行业拆解文章；看“产品设计”频道，质量参差。 — The largest Chinese product-management community, with many UX, interaction and industry teardown articles [A · static]
- 腾讯 CDC — https://cdc.tencent.com — 腾讯用户研究与体验设计中心的博客；看国内大厂如何做用研与企业级产品设计。 — Tencent's customer research and design centre [A · js]
- 阿里巴巴设计 — https://www.alibabadesign.com — 阿里巴巴设计 D20 峰会站，收录各设计团队的分享与案例；看超大业务量下的电商与企业级设计方法。 — Alibaba Design's D20 summit site: talks and case write-ups from Alibaba's design teams [A · js]
- Ant Design 语雀专栏 — https://www.yuque.com/ant-design — Ant Design 团队关于企业级产品设计的长文专栏；想理解 Ant 模式背后的深度读这里。 — Long-form writing from the Ant Design team on enterprise product design [A · js]
- 优设网 — https://www.uisdc.com — 国内最大的设计学习站，教程、趋势报告、工具资讯都有；中文搜主题方便，质量随作者参差。 — The largest Chinese design learning site: tutorials, trend reports, tool news [A · blocked]
- 少数派 — https://sspai.com — 中文应用、工具与数字生活媒体；从应用评测看国内重度用户在意什么。 — Chinese publication on apps, tools and digital craft [B · static]
- Juejin (稀土掘金) — https://juejin.cn — 稀土掘金：国内最大的开发者社区，前端频道覆盖 CSS、动效、组件库与设计还原实践；中文搜国内团队的实现方式，质量随作者参差。 — The largest Chinese developer community; its front-end channel covers CSS, animation, component libraries and design-to-code practice [B · static]
- UXRen — https://www.uxren.cn — 中文 UX 社区，译介国外经典文章较多；找某篇国外 UX 名篇的中译版时先来搜。 — Chinese UX community with translations of international articles [B · blocked]

## Communities, moodboards and feeds · 灵感社区 (general)

### Communities · 设计社区
- Dribbble — https://dribbble.com — 设计师晒 shots 的社区，视觉样式强、真实感弱；只取视觉处理灵感，拿真产品验证。 — Designer community of shots; strong for visual styling ideas [A · blocked]
- Behance — https://www.behance.net — 全领域设计案例社区，品牌、插画、UI、动效都有完整项目；按领域与工具搜，看过程别只看封面。 — Full project case studies across branding, illustration, UI and motion [A · blocked]
- Figma Community — https://www.figma.com/community — Figma 社区的文件、UI kit 与插件库，含大量中文设计系统套件；看系统怎么搭而非只看外表；许可逐文件定。 — Shared design files, UI kits and plugins, including many Chinese design-system kits [A · blocked]
- ArtStation — https://www.artstation.com — 插画、概念设计、3D 与游戏美术的主力作品集社区；找 UI 之外的美术风格参考，引用要署名，绝不挪用。 — The main portfolio community for illustration, concept art, 3D and game art; strong for art direction outside UI [A · blocked]
- Layers — https://layers.to — 规模较小、信噪比高的产品设计师社区，能看到在职设计师的真实项目而非作品集包装。 — Smaller, higher-signal community for product designers [B · static]

### Moodboards and reference tools · 灵感板与参考工具
- Are.na — https://www.are.na — 设计师经营的研究图板社区，策展异常用心；按频道搜概念，来源常在设计圈之外。 — Designer-run research boards with unusually thoughtful curation [S · static]
- Cosmos — https://www.cosmos.so — 无广告的视觉收藏夹社区，策展审美在线；建情绪板、找艺术指导参考时关注合辑。 — Ad-free visual bookmarking for creatives with strong aesthetic curation [A · static]
- Savee — https://savee.com — 平面设计师与美术指导爱用的图片收藏流；做情绪板时找宽泛的 art direction 灵感。 — Bookmarking feed used by graphic and art directors [A · static]
- Eagle — https://eagle.cool — 本地素材管理器，收集参考图并打标签管理；建个人灵感库用；付费。 — Local asset manager for collecting and tagging references [A · static]
- Pinterest — https://www.pinterest.com — 跨全学科的视觉搜索引擎，情绪板主力；拿参考图做以图搜图找同类。 — Visual search engine for moodboarding across every discipline [A · js]
- Same Energy — https://same.energy — 以图搜图的视觉搜索引擎，专找「感觉一样」的图；拼情绪版时从一张图出发逛它的邻居。 — Visual search engine that finds images with the same feel [A · js]
- Designspiration — https://www.designspiration.com — 按关键词和颜色搜灵感图的网站，给情绪板找与色板匹配的参考图时用。 — Inspiration search by keyword and colour [B · static]
- PureRef — https://www.pureref.com — 轻量的参考图板应用；干活时把参考图一直钉在屏幕旁边看。 — Lightweight reference-board app [B · blocked]

### Daily feeds and newsletters · 每日聚合与通讯
- Sidebar — https://sidebar.io — 每天只推五条精选设计链接的订阅源；低噪音的日常设计阅读。 — Five hand-picked design links a day: a low-noise daily reading feed [A · static]
- Dense Discovery — https://www.densediscovery.com — 每周一期的精选 newsletter，横跨设计、科技与文化；用来跳出 UI 圈子换换脑子。 — Thoughtful weekly newsletter across design, tech and culture [A · blocked]
- TLDR Design — https://tldr.tech/design — 每日设计与工具新闻摘要邮件，跟新工具发布和行业动态用的轻量信息源。 — Daily design and tooling news digest [B · static]
- Muzli — https://muz.li — 聚合式的设计灵感订阅流；量大质杂，只适合当日常背景输入。 — Aggregated inspiration feed [B · static]
- Design Compass (디자인 나침반) — https://designcompass.org — 韩国设计资讯（디자인 나침반），关注本地设计系统、品牌升级与工具；了解韩国设计动态（KRDS、Toss、Kakao），有英文版。 — Korean design news covering local design systems, rebrands and tools [B · static]

### Chinese communities and file libraries · 中文社区与素材库
- 站酷 ZCOOL — https://www.zcool.com.cn — 国内最大的设计师社区，覆盖各设计门类；按分类中文检索，地位相当于本土版 Behance。 — The largest Chinese designer community across every discipline [S · static]
- 即时设计资源广场 — https://js.design/community — 即时设计国内的资源共享社区；找 Ant Design、TDesign、HarmonyOS 的国产 UI kit；授权以各文件为准。 — Chinese design tool with a large shared-resource community [A · js]
- UI中国 — https://www.ui.cn — 国内 UI 设计师社区，作品与招聘信息集中；了解本土 UI 风向和同行作品集的地方。 — Chinese UI designer community: app and web UI portfolios, UI kits and job posts [A · unknown]
- 花瓣 — https://huaban.com — 国内的 Pinterest 式图片收藏社区，画板即情绪板；找中国市场的视觉参考时用。 — Chinese Pinterest-style image collecting [A · blocked]
- Xiaohongshu (小红书) — https://www.xiaohongshu.com — 国内设计师与品牌晒灵感板、案例笔记和视觉趋势的主阵地；用中文关键词搜，看国内受众当下买账的风格。 — The lifestyle platform where Chinese designers and brands post moodboards, case notes and visual trends [A · blocked]
- 优设导航 — https://hao.uisdc.com — 国内最全的设计网站导航，找中文工具与素材站从这入手；注意其中含推广链接。 — The most complete Chinese design-site directory; contains promoted links [B · static]
- Figma.Cool (Figma 中文社区) — https://www.figma.cool — Figma 中文社区，提供汉化、插件与组件库教程；给国内团队找中文 Figma 资源与汉化帮助。 — Chinese Figma community with localisation, plugin and component-kit guides [B · static]
- AI Tools Directory (AI工具集) — https://ai-bot.cn — AI 工具集：收录 1000+ 工具的中文 AI 导航，含国产设计、图像与视频生成工具；用来发现新工具，推荐前逐个核实。 — Large Chinese directory of 1,000+ AI tools, including domestic design, image and video generators [B · static]