{"generated":"2026-09-27","counts":{"resources":812,"domains":15,"sections":83,"tiers":{"S":92,"A":587,"B":133},"reach":{"static":628,"js":121,"unknown":3,"blocked":60},"kinds":{"tool":125,"article":103,"library":97,"gallery":91,"guideline":79,"archive":37,"icon-set":33,"asset-library":32,"font-foundry":28,"system":26,"community":23,"book":21,"pattern-library":20,"font":20,"spec":17,"course":10,"generator":9,"skill":9,"repo":9,"mcp":9,"studio":7,"newsletter":4,"api":3},"access":{"free":663,"freemium":101,"paid":48},"status":{"active":729,"slow":51,"archived":32},"regions":{"global":685,"cn":104,"jp":16,"kr":7},"langs":{"en":670,"zh":101,"multi":21,"ja":13,"ko":7},"thumbs":807},"domains":[{"id":"web","zh":"网站设计","en":"Websites","blurb_zh":"营销站、落地页、作品集的画廊与模式库","blurb_en":"Galleries and pattern collections for marketing sites, landing pages, portfolios, stores and their sections. Galleries show what designers admire, not what converts or what users can use: pair one gallery with a real-product or evidence source.","hue":18,"count":59,"sections":[{"id":"site-galleries","zh":"精选网站画廊","en":"Curated site galleries","note_zh":"看整体美术指导。打开真实网站看——缩略图藏起了字体渲染、动效和响应式。","note_en":"For overall art direction. Open the live site - thumbnails hide type rendering, motion and responsiveness.","count":14},{"id":"landing-saas","zh":"落地页与 SaaS 官网","en":"Landing pages and SaaS marketing","note_zh":"看页面叙事与版块顺序：整页截图展示论证是如何排布的。","note_en":"For page narrative and section order. Full-page captures show how the argument is sequenced.","count":8},{"id":"section-galleries","zh":"版块与元素画廊","en":"Section and element galleries","note_zh":"问题具体到某个版块（Hero、导航、定价、页脚）时来这，一次比较十个解法。","note_en":"When the question is one section (hero, nav, pricing, footer, CTA, email). Compare ten solutions to the same problem.","count":10},{"id":"niche-galleries","zh":"细分与地区画廊","en":"Niche and regional galleries","note_zh":"暗色、粗野主义、电商、作品集与日韩画廊——后者是中日韩排版最好的公开参考。","note_en":"Dark mode, brutalist, e-commerce, portfolios, and Japanese and Korean galleries - the best public references for CJK typographic layout.","count":16},{"id":"awards","zh":"获奖站点","en":"Award sites","note_zh":"野心、动效与 WebGL。评审奖励奇观，不评审可用性和转化。","note_en":"Ambition, motion and WebGL. Juries reward spectacle; usability and conversion are not judged.","count":5},{"id":"conversion","zh":"转化与文案","en":"Conversion and copy","note_zh":"要说服人的页面，结构与文案的证据在这里。","note_en":"Structure and messaging evidence for pages that must persuade.","count":6}]},{"id":"app-ui","zh":"产品界面","en":"Product UI","blurb_zh":"真实产品的界面、官方平台规范、公开的设计系统","blurb_en":"What actually ships: screens and flows from real products, component references, official platform guidelines and published design systems. Prefer these over concept shots for anything users will operate daily.","hue":42,"count":61,"sections":[{"id":"screens-flows","zh":"真实产品界面与流程","en":"Real-product screens and flows","note_zh":"设计某种页面或流程前，先看几个已上线产品怎么做。惯例本身就是功能。","note_en":"Look up the screen type or flow in several shipped products before designing it. Convention is a feature.","count":12},{"id":"components","zh":"组件参考","en":"Component references","note_zh":"组件的结构、命名、状态与键盘行为，跨系统对照。","note_en":"Anatomy, naming, states and keyboard behaviour of a component across systems.","count":6},{"id":"platform-guidelines","zh":"平台规范","en":"Platform guidelines","note_zh":"权威且带版本。引用记忆中的数字前，先看当前页面。","note_en":"Authoritative and versioned. Check the current page before relying on a remembered number.","count":15},{"id":"design-systems","zh":"公开的设计系统","en":"Published design systems","note_zh":"读它的模式与内容指引，不只读组件；挑一个领域相近的系统。","note_en":"Read the pattern and content guidance, not just the components. Pick a system from a comparable domain.","count":22},{"id":"details-offbeat","zh":"细节与跨界来源","en":"Details and out-of-category sources","note_zh":"游戏 HUD、虚构界面与小惊喜——为沉浸式和\"一个记忆点\"的问题准备。","note_en":"Game HUDs, fictional interfaces and small delights - for immersive, full-screen and one-memorable-moment problems.","count":6}]},{"id":"dataviz","zh":"数据可视化","en":"Data visualisation","blurb_zh":"从问题选图表、让图表诚实易读的指引、画图的库、仪表盘与大屏参考，以及为数据设计的色板","blurb_en":"One home for everything chart-shaped: choosing the chart from the question, the guides that keep charts honest and readable, the libraries that draw them, dashboard and big-screen references, and palettes built for data.","hue":66,"count":46,"sections":[{"id":"guides-principles","zh":"图表选择与设计指引","en":"Chart choice and design guides","note_zh":"先定图表要回答的问题（比较、排名、占比、随时间变化），再按一份风格指南处理坐标轴、标注和颜色。","note_en":"Start from the question the chart answers (compare, rank, part-to-whole, change over time), then follow one style guide for axes, labels and colour.","count":13},{"id":"chart-libraries","zh":"图表库","en":"Chart libraries","note_zh":"按技术栈和图表复杂度选库；商用前查授权，API 以已安装的版本为准。","note_en":"Match the library to the stack and the chart's complexity; check commercial licences and verify APIs against the installed version.","count":11},{"id":"dashboards-bigscreen","zh":"仪表盘与大屏","en":"Dashboards and big-screen","note_zh":"排版前先研究门类：运维看板、分析报表和数据大屏在信息密度、刷新方式和观看距离上的规则各不相同。","note_en":"Study the genre before laying one out: operational dashboards, analytical reports and big-screen data walls differ in density, refresh and viewing distance.","count":9},{"id":"exemplars-journalism","zh":"优秀作品与数据新闻","en":"Exemplary work and data journalism","note_zh":"已发表的优秀可视化：学叙事、标注和克制。","note_en":"Published visualisations to learn narrative, annotation and restraint from.","count":5},{"id":"palettes-tools","zh":"数据配色与工具","en":"Palettes and colour for data","note_zh":"顺序、发散与分类色板，在色觉障碍下也要可区分；放进真实图表里测试。","note_en":"Sequential, diverging and categorical schemes that stay distinct under colour-vision deficiency. Test them in real chart types.","count":8}]},{"id":"ai","zh":"AI 设计","en":"AI design","blurb_zh":"AI 产品的交互模式与指引、生成界面与素材的工具，以及面向 agent 的 skill、格式与 MCP；领域变化快，取用要标注日期","blurb_en":"Designing AI products (interaction patterns, platform guidance), AI tools that generate interfaces and assets, and the agent-facing layer: skills, rule sets, formats such as DESIGN.md, and MCP servers that give agents design files and a browser. This field moves quickly: date what you take.","hue":90,"count":56,"sections":[{"id":"ai-ux-patterns","zh":"AI 交互模式与组件","en":"AI UX patterns and components","note_zh":"来自已上线产品的对话、副驾驶与 agent 界面模式，以及实现这些模式的组件套件。","note_en":"Chat, copilot and agent interface patterns from shipped products, plus the component kits that implement them.","count":9},{"id":"ai-product-guidelines","zh":"AI 产品指引","en":"AI product guidelines","note_zh":"关于信任、可解释性、AI 内容标识以及对话宿主内界面的官方与研究型指引；每一页都要看日期。","note_en":"Official and research-based guidance on trust, explainability, labelling AI output and UI inside chat hosts. Check the date on every page.","count":10},{"id":"ai-design-tools","zh":"AI 设计工具与生成器","en":"AI design tools and generators","note_zh":"从提示词生成界面或素材的工具：适合快速出变体，也用来看清当下 AI 的“默认长相”——那正是要避开的样子。","note_en":"Prompt-to-UI and prompt-to-asset tools. Useful for fast variants and for seeing the current default look, which is also the look to diverge from.","count":8},{"id":"agent-skills-rules","zh":"agent skill 与规则集","en":"Agent skills and rule sets","note_zh":"本套件的先行者：引导 coding agent 做出更好界面的 skill 与规则清单。取其思路；它们互相竞争、互有重叠。","note_en":"Prior art for this suite: skills and rule lists that steer coding agents toward better interfaces. Read them for ideas; they compete and overlap.","count":13},{"id":"agent-formats","zh":"面向 agent 的格式","en":"Agent-readable formats","note_zh":"向 agent 描述设计系统的文件格式（如 DESIGN.md）及其合集。","note_en":"Files that describe a design system to an agent, such as DESIGN.md, and collections of them.","count":6},{"id":"design-mcp-servers","zh":"设计相关 MCP 服务","en":"Design MCP servers","note_zh":"给 agent 设计文件、组件注册表，以及用来截图和检查的真实浏览器。","note_en":"MCP servers that give an agent design files, component registries and a real browser for screenshots and checks.","count":10}]},{"id":"a11y","zh":"无障碍","en":"Accessibility","blurb_zh":"适用的标准与法规、检测工具、天生无障碍的组件模式，以及合规之外的包容性设计（含适老化）","blurb_en":"The standards and laws that apply, tools that test a build, patterns that are accessible by construction, and inclusive design beyond compliance, including age-friendly design. Automated checks catch only part of the issues: keep a manual keyboard and screen-reader pass.","hue":114,"count":26,"sections":[{"id":"standards-law","zh":"标准与法规","en":"Standards and law","note_zh":"WCAG 2.2 是工作基线；各地法规（欧盟 EAA 与 EN 301 549、美国 ADA 与 508、中国 GB/T 37668 与适老化规范）决定哪里必须做到什么。引用具体的成功准则，不要转述。","note_en":"WCAG 2.2 is the working baseline; laws (EU EAA and EN 301 549, US ADA and Section 508, China GB/T 37668 and the age-friendly rules) decide what is required where. Cite the success criterion, not a paraphrase.","count":6},{"id":"testing-tools","zh":"检测工具","en":"Testing tools","note_zh":"自动检测、浏览器扩展与对比度工具。自动与手动各做一遍；自动报告全绿不等于可访问。","note_en":"Automated checkers, browser extensions and contrast tools. Run one automated and one manual pass; a clean automated report is not proof of access.","count":7},{"id":"guidance-patterns","zh":"无障碍模式与指引","en":"Accessible patterns and guidance","note_zh":"键盘行为、ARIA 角色与可访问的组件模式，以及通俗的检查清单。","note_en":"Keyboard behaviour, ARIA roles and accessible component patterns, plus plain-language checklists.","count":8},{"id":"inclusive-design","zh":"包容性设计","en":"Inclusive design","note_zh":"为永久、暂时与情境性障碍、老年用户和低识读能力的人设计，而不只是通过一张清单。","note_en":"Designing for permanent, temporary and situational disability, older users and low literacy, beyond passing a checklist.","count":5}]},{"id":"motion","zh":"动效","en":"Motion","blurb_zh":"上线产品的动效实录、曲线与弹簧工具、官方指引","blurb_en":"Recordings of motion in shipped products are the best teacher: watch them slowed down and note duration, easing, origin and what does not move. Then tools to author curves and springs, official guidelines, and the few writers worth reading.","hue":138,"count":57,"sections":[{"id":"recordings","zh":"上线产品动效实录","en":"Motion in shipped products","note_zh":"任何产品内动效从这里开始：慢放，记下时长、曲线、起点和什么没动。","note_en":"Start here for any in-product animation.","count":5},{"id":"showcases","zh":"网页动效秀场与素材库","en":"Web motion showcases and asset libraries","note_zh":"表现性与实验性作品，通常带源码；素材注意授权。","note_en":"Expressive and experimental work, usually with source. Check licences on assets.","count":6},{"id":"tools","zh":"曲线与弹簧工具","en":"Easing, spring and animation tools","note_zh":"凭手感调曲线和弹簧，然后把数值记成 token。","note_en":"Author curves and springs by eye, then record the numbers as tokens.","count":14},{"id":"guidelines","zh":"官方动效指引与无障碍","en":"Official motion guidance and accessibility","note_zh":"token 表、原则，以及动效敏感的规则。","note_en":"Token tables, principles, and the rules for motion sensitivity.","count":14},{"id":"learning","zh":"动效写作与课程","en":"Writing and courses on motion craft","note_zh":"少量但值得通读的读物。","note_en":"A small set that repays reading in full.","count":9},{"id":"native","zh":"原生平台动效","en":"Native platform motion","note_zh":"SwiftUI、Compose、Flutter 的 API 与示例集。","note_en":"API references and example collections for SwiftUI, Compose and Flutter.","count":9}]},{"id":"icons","zh":"图标","en":"Icons","blurb_zh":"图标家族、搜索与 API、品牌 logo、绘制指引","blurb_en":"Pick one family per product and record its licence. Raw-SVG endpoints are listed so an agent can pull an icon without installing a package.","hue":162,"count":61,"sections":[{"id":"families","zh":"图标家族","en":"Icon families","note_zh":"按风格匹配、覆盖量、字重、平台封装、授权与维护度来选。","note_en":"Choose by style fit, coverage, weights, platform packages, licence and maintenance.","count":29},{"id":"search-apis","zh":"搜索、聚合与 API","en":"Search, aggregators and APIs","note_zh":"跨图标集查概念的地方；结果不要混用在同一界面里。","note_en":"For finding a concept across sets. Do not mix the results in one interface.","count":7},{"id":"brand-logos","zh":"品牌与厂商 logo","en":"Brand and vendor logos","note_zh":"商标归各自所有者，遵守品牌的使用规则。","note_en":"Trademarks remain with their owners; follow each brand's usage rules.","count":5},{"id":"guides","zh":"图标设计指引","en":"Icon design guidance","note_zh":"自绘图标或制定图标集规范前，先读一篇。","note_en":"Read one before drawing a custom icon or writing the rules for a set.","count":5},{"id":"app-icons","zh":"应用图标与 favicon","en":"App icons and favicons","note_zh":"画廊看惯例，工具做打包；平台规格会过期。","note_en":"Galleries for the idiom, tools for the packaging. Platform specs are perishable.","count":9},{"id":"svg-tools","zh":"SVG 工具","en":"SVG tooling","note_zh":"优化、按数值编辑路径、转换、描摹。","note_en":"Optimise, edit paths numerically, convert, trace.","count":6}]},{"id":"assets","zh":"视觉素材","en":"Visual assets","blurb_zh":"插画、3D、摄影、样机与代码生成的背景","blurb_en":"Illustrations, 3D, photography, mock-ups, and code-native backgrounds. Licence mistakes are the main risk in this domain: the Access column states the licence reality for each source.","hue":186,"count":46,"sections":[{"id":"illustrations","zh":"插画","en":"Illustrations","note_zh":"一个产品只用一套风格；流传广的免费套装一眼被认出，重绘或少用。","note_en":"One style per product. Widely used free sets are instantly recognisable; restyle or use sparingly.","count":7},{"id":"3d","zh":"3D 素材","en":"3D","note_zh":"模型、材质与场景。嵌入前先算运行时代价。","note_en":"Models, materials and scenes. Check the runtime cost before embedding.","count":7},{"id":"photo-video","zh":"摄影与视频","en":"Photography and video","note_zh":"统一处理图片气质；绝不用网上搜来的无授权图。","note_en":"Treat images consistently. Never use unlicensed images found online.","count":12},{"id":"mockups","zh":"样机与截图工具","en":"Mock-ups and screenshot tools","note_zh":"干净的边框通常比摆拍场景更能呈现界面。","note_en":"Clean frames usually present UI better than staged scenes.","count":7},{"id":"backgrounds","zh":"背景、渐变与纹理","en":"Backgrounds, gradients, patterns and shaders","note_zh":"多数用代码重做更可控；渐变按感知空间插值，加噪点防色带。","note_en":"Often better recreated in code for control. Interpolate gradients perceptually and add grain against banding.","count":13}]},{"id":"brand","zh":"品牌","en":"Brand identity","blurb_zh":"logo 档案、品牌评审、规范手册与命名工具","blurb_en":"Archives to see how a form has already been solved, publications that critique identity work, real guideline documents, studio case studies, and the tools for naming and trademark checks.","hue":210,"count":36,"sections":[{"id":"logo-archives","zh":"logo 档案","en":"Logo archives","note_zh":"动手画之前先按首字母、形状和行业查重；与现有标志相似是法律风险。","note_en":"Search the client's initial, shape family and industry before sketching. Similarity to an existing mark is a legal risk, not only a taste issue.","count":7},{"id":"identity-publications","zh":"品牌评审与重塑报道","en":"Identity reviews and rebrand coverage","note_zh":"学品牌评论的词汇，看识别系统如何延伸到 logo 之外。","note_en":"Learn the vocabulary of identity critique and how systems extend beyond the logo.","count":9},{"id":"guidelines-collections","zh":"品牌规范合集","en":"Brand guideline collections","note_zh":"写规范前，打开三份同行业的规范对照目录。","note_en":"Open three guidelines from a similar industry and compare their contents before writing one.","count":5},{"id":"studios","zh":"工作室案例","en":"Studio case studies","note_zh":"看问题如何被框定、作品如何被放在应用场景里呈现。","note_en":"Read how the problem is framed and how the work is presented in application.","count":7},{"id":"naming-trademark","zh":"命名与商标检索","en":"Naming and trademark search","note_zh":"这些工具排查明显冲突；正式注册仍需专业检索。","note_en":"An agent cannot clear a mark. These tools find obvious conflicts; a professional search is still required.","count":8}]},{"id":"graphic","zh":"平面","en":"Graphic design","blurb_zh":"海报、设计史档案、演示文稿与平面出版物","blurb_en":"Posters, archives, decks, covers, packaging and the publications that track contemporary graphic design. The strongest moves available to a code-based designer are typographic, so typographic posters and historical archives are the richest sources.","hue":234,"count":40,"sections":[{"id":"posters-type","zh":"海报与字体排印","en":"Posters and typographic work","note_zh":"研究网格、尺度对比，以及页面上东西可以少到什么程度。","note_en":"Study grid, scale contrast and how little is on the page.","count":8},{"id":"archives","zh":"设计史档案","en":"Design history archives","note_zh":"要真实的时代参照，不要仿古拼贴。","note_en":"Authentic period references instead of pastiche.","count":6},{"id":"decks","zh":"演示与路演文稿","en":"Presentations and pitch decks","note_zh":"先叙事顺序，后版式系统。","note_en":"Narrative order first, slide system second.","count":5},{"id":"covers-packaging","zh":"封面与包装","en":"Covers and packaging","note_zh":"固定画框下的单一概念构图。","note_en":"Single-idea composition under a fixed frame.","count":7},{"id":"publications","zh":"平面出版物","en":"Publications","note_zh":"界面设计之外的美术指导意识。","note_en":"Art-direction awareness beyond interface design.","count":8},{"id":"social-og","zh":"社媒图与平台尺寸","en":"Social cards and platform sizes","note_zh":"尺寸会过期：导出前以平台当前页面为准。","note_en":"Sizes are perishable: verify with the platform before export.","count":6}]},{"id":"type","zh":"字体排版","en":"Typography","blurb_zh":"开源字体、厂商、用例、工具与中日韩字体排版","blurb_en":"Open font sources with clear licences, commercial foundries worth knowing, type seen in real use, tools, the guides that matter, and a full section for CJK (Chinese, Japanese, Korean) type and typesetting.","hue":258,"count":86,"sections":[{"id":"free-fonts","zh":"开源与免费字体","en":"Open and free font sources","note_zh":"避开默认字体又没有授权风险的路；自托管，别热链。","note_en":"The route away from default typefaces without licence risk. Self-host; do not hot-link.","count":23},{"id":"foundries","zh":"商业字体厂商与市场","en":"Commercial foundries and marketplaces","note_zh":"试用文件只能用于样稿，不能随产品发布。","note_en":"Trial and free-to-try files are for mock-ups only and must not ship.","count":11},{"id":"in-use","zh":"实际用例与搭配","en":"Type in use and pairing","note_zh":"选定字体前，先看它在真实语境里的样子。","note_en":"See a typeface set in real context before choosing it.","count":7},{"id":"tools","zh":"字体工具","en":"Type tools","note_zh":"字阶、流式字号、系统字体栈、检测、度量与子集化。","note_en":"Scales, fluid type, system stacks, inspection, metrics and subsetting.","count":10},{"id":"guides","zh":"排版指引","en":"Typography guides","note_zh":"前两篇值得完整读一遍。","note_en":"Read the first two in full once.","count":8},{"id":"cjk","zh":"中日韩字体与排版","en":"CJK type and typesetting (Chinese, Japanese, Korean)","note_zh":"开源的中日韩字体、授权目录、网页字体切片，以及标点、断行与中西文混排规则；中文商业字体授权执行严格。","note_en":"Open-licence Chinese, Japanese and Korean fonts, licence directories, web-font slicing, and the typesetting rules for punctuation, line breaking and mixed scripts. Commercial CJK font licensing is actively enforced.","count":27}]},{"id":"color","zh":"色彩","en":"Colour","blurb_zh":"色板灵感、感知均匀色阶工具与对比度校验","blurb_en":"Palette inspiration, tools that build perceptually even and accessible scales, contrast and colour-vision checks, and the articles that explain why. Compute contrast; never estimate it.","hue":282,"count":41,"sections":[{"id":"palettes","zh":"色板灵感","en":"Palette inspiration","note_zh":"找气质和起点；没定义角色与对比度之前，色板不是系统。","note_en":"For mood and starting points. A palette is not a system until roles and contrast are defined.","count":11},{"id":"system-tools","zh":"色阶与系统生成","en":"Scale and system builders","note_zh":"在感知空间里生成色阶，把梯级映射到角色。","note_en":"Generate scales in a perceptual space; map steps to roles.","count":16},{"id":"contrast","zh":"对比度与色觉","en":"Contrast and colour vision","note_zh":"WCAG 2 比值是法定底线。APCA 是独立提案，并不在 WCAG 3 草案里（WCAG 3 的对比度算法尚未确定）。对比度用算的，不用估的。","note_en":"WCAG 2 ratios are the legal baseline. APCA is an independent proposal, not part of the WCAG 3 drafts, whose contrast method is still undecided. Compute contrast; never estimate it.","count":6},{"id":"guides","zh":"色彩指引","en":"Colour guides","note_zh":"现代界面色彩系统与暗色模式背后的推理。","note_en":"The reasoning behind modern UI colour systems and dark mode.","count":8}]},{"id":"code","zh":"设计工程","en":"Design engineering","blurb_zh":"agent 的画笔：组件库、动效与图形库、token 工具与渲染管线","blurb_en":"The agent's design medium is code. Component libraries and primitives by stack, animation and graphics libraries, token tooling, and the pipeline that turns HTML, SVG and markup into images, PDFs and slides. Verify APIs against the installed version.","hue":306,"count":101,"sections":[{"id":"components","zh":"组件库与无头原语","en":"Component libraries and headless primitives","note_zh":"优先用宿主项目已有的库；选型时偏好可访问的原语与真正的主题 API。","note_en":"Use the host project's library. When choosing, prefer accessible primitives and a real theme API.","count":32},{"id":"animated-components","zh":"动效组件与营销套件","en":"Animated and marketing component kits","note_zh":"技术参考。整套拼装的页面长得都一样：只取一个标志性时刻并重写它。","note_en":"Technique references. A page assembled from these looks like every other; use one signature moment and restyle it.","count":7},{"id":"motion-libs","zh":"动画与图形库","en":"Animation and graphics libraries","note_zh":"按任务选工具；商用查授权。","note_en":"Match the tool to the job; check licences for commercial use.","count":14},{"id":"tokens-theming","zh":"design token 与色彩工具","en":"Design tokens and colour tooling","note_zh":"一份 token 源，构建到所有平台。","note_en":"One token source, built to every platform.","count":11},{"id":"render-export","zh":"渲染、导出与排版","en":"Rendering, export, typesetting and fonts","note_zh":"代码做的图如何变成 PNG、SVG、PDF、PPTX，字体如何子集化。","note_en":"How code-made graphics become PNG, SVG, PDF and PPTX, and how fonts are subset.","count":16},{"id":"design-tools","zh":"开放设计工具","en":"Open design tools","note_zh":"可脚本化或开源的工具，补代码优先的工作流。","note_en":"Scriptable or open tools that complement a code-first workflow.","count":15},{"id":"awesome-lists","zh":"值得挖的清单","en":"Lists worth mining","note_zh":"用来发现的面；质量自己判断。","note_en":"Breadth for discovery. Judge quality yourself.","count":6}]},{"id":"reading","zh":"阅读","en":"Reading","blurb_zh":"塑造这套方法的文章、书、课程与规范","blurb_en":"The articles, books, courses and guidelines whose ideas shape this suite. Prefer primary, durable sources; name the principle when justifying a decision.","hue":330,"count":70,"sections":[{"id":"interface-craft","zh":"界面工艺与设计工程","en":"Interface craft and design engineering","note_zh":"让界面\"感觉对\"的细节，以及结实的 CSS 思维。","note_en":"The details that make interfaces feel right, and robust CSS thinking.","count":14},{"id":"ai-design","zh":"与 AI 一起做设计","en":"Designing with and for AI","note_zh":"为什么模型产出平庸设计，什么能改变这一点。","note_en":"Why models produce generic design and what changes that; design in AI-era products.","count":6},{"id":"visual-fundamentals","zh":"视觉基础","en":"Visual design fundamentals","note_zh":"层级、间距、感知；从前三篇开始。","note_en":"Hierarchy, spacing, perception. Start with the first three.","count":9},{"id":"ux-evidence","zh":"有研究背书的 UX 指引","en":"Research-backed UX guidance","note_zh":"引证据，别引观点。","note_en":"Evidence to cite instead of opinion.","count":10},{"id":"process-critique","zh":"流程、评审与呈现","en":"Process, critique and presenting work","note_zh":"brief、评审格式，以及向相关方解释决策。","note_en":"Briefs, critique formats, and explaining decisions to stakeholders.","count":7},{"id":"books","zh":"书","en":"Books","note_zh":"正典；除注明外都是付费。","note_en":"The canon. Paid unless noted.","count":8},{"id":"courses","zh":"课程","en":"Courses","note_zh":"为建立真本事，值这个价。","note_en":"Worth their price for building real skill.","count":7},{"id":"zh-reading","zh":"中文阅读","en":"Chinese-language reading","note_zh":"本土案例与团队博客，面向中文市场语境。","note_en":"Domestic case studies and team blogs for Chinese-market context.","count":9}]},{"id":"general","zh":"灵感社区","en":"Communities, moodboards and feeds","blurb_zh":"跨学科浏览与收集：量大信号杂，取用后用真实产品验证","blurb_en":"Cross-discipline sources for scanning and collecting. High volume, mixed signal: concept shots ignore real content, states and accessibility. Use for visual treatment and trend awareness, then verify against real products.","hue":354,"count":26,"sections":[{"id":"communities","zh":"设计社区","en":"Communities","note_zh":"读案例的过程，不只看封面。","note_en":"Read case-study process, not just covers.","count":5},{"id":"moodboards","zh":"灵感板与参考工具","en":"Moodboards and reference tools","note_zh":"从界面设计圈之外收集。","note_en":"Collect from outside the interface-design bubble.","count":8},{"id":"feeds","zh":"每日聚合与通讯","en":"Daily feeds and newsletters","note_zh":"趋势雷达；取用要标注日期，潮流会过期。","note_en":"Trend radar. Date what you take; fashion expires.","count":5},{"id":"zh-communities","zh":"中文社区与素材库","en":"Chinese communities and file libraries","note_zh":"本土作品集、灵感板与共享设计文件。","note_en":"Domestic portfolios, moodboards and shared design files.","count":8}]}],"kinds":[{"id":"gallery","zh":"精选画廊","en":"Gallery","note_zh":"精选的成品案例，用来浏览找参考。","note_en":"Curated examples of finished work, browsed for reference."},{"id":"pattern-library","zh":"模式库","en":"Pattern library","note_zh":"按模式整理的真实产品界面与流程，用来查惯例。","note_en":"Real-product screens or flows organised by pattern, for checking conventions."},{"id":"system","zh":"设计系统","en":"Design system","note_zh":"某个组织公开的设计系统：token、组件与使用指引。","note_en":"One organisation's published design system: tokens, components and guidance."},{"id":"guideline","zh":"规范指引","en":"Guideline","note_zh":"平台或从业者给出的规则与建议；权威，但不是正式标准。","note_en":"Rules and advice from a platform or practitioner; authoritative but not a formal standard."},{"id":"spec","zh":"标准规范","en":"Specification","note_zh":"规范性标准或文件格式规格，如 WCAG、DTCG、DESIGN.md。","note_en":"A normative standard or file-format specification, such as WCAG, DTCG or DESIGN.md."},{"id":"tool","zh":"工具","en":"Tool","note_zh":"需要人来操作的交互工具：取色、编辑、检测、转换。","note_en":"An interactive utility you operate: picker, editor, checker, converter."},{"id":"generator","zh":"生成器","en":"Generator","note_zh":"从提示词直接生成界面、设计或图像：你描述，它产出。","note_en":"Produces a UI, design or image from a prompt: you describe, it makes."},{"id":"library","zh":"代码库","en":"Code library","note_zh":"安装后在代码里调用的库（npm、pip、Swift、Kotlin 等）。","note_en":"Code you install and call (npm, pip, Swift, Kotlin and so on)."},{"id":"font","zh":"字体","en":"Typeface","note_zh":"单个字体或超级字族。","note_en":"One typeface or superfamily."},{"id":"font-foundry","zh":"字体厂商与字库","en":"Font source","note_zh":"众多字体的来源：字体厂商、市场、开源字体服务或授权目录。","note_en":"A source of many fonts: foundry, marketplace, open-font service or licence directory."},{"id":"icon-set","zh":"图标集","en":"Icon set","note_zh":"风格统一的一套图标。","note_en":"One icon family with a consistent style."},{"id":"asset-library","zh":"素材库","en":"Asset library","note_zh":"汇集多位作者作品的素材库：插画、照片、3D、动画、图标。","note_en":"Assets from many authors: illustration, photo, 3D, animation, icons."},{"id":"article","zh":"文章与博客","en":"Article or blog","note_zh":"单篇文章或随笔，或持续更新的博客与刊物。","note_en":"An article or essay, or a blog or publication that keeps publishing them."},{"id":"book","zh":"书","en":"Book","note_zh":"书；除注明外为付费。","note_en":"A book; paid unless noted."},{"id":"course","zh":"课程","en":"Course","note_zh":"成体系的课程。","note_en":"A structured course."},{"id":"community","zh":"社区","en":"Community","note_zh":"成员发布与讨论作品的社区。","note_en":"Members publish and discuss work."},{"id":"archive","zh":"档案","en":"Archive","note_zh":"历史或查考型收藏：博物馆、logo 档案、字体用例、传统色。","note_en":"A historical or reference collection: museums, logo archives, type in use, traditional colours."},{"id":"studio","zh":"工作室","en":"Studio","note_zh":"设计工作室自己的案例站。","note_en":"A design studio's own case-study site."},{"id":"repo","zh":"代码仓库与清单","en":"Repository or list","note_zh":"GitHub 上的代码仓库或精选清单。","note_en":"A code repository or curated list on GitHub."},{"id":"mcp","zh":"MCP 服务","en":"MCP server","note_zh":"agent 可以调用的 Model Context Protocol 服务。","note_en":"A Model Context Protocol server an agent can call."},{"id":"skill","zh":"agent skill","en":"Agent skill","note_zh":"引导 coding agent 的 skill 或规则包。","note_en":"A skill or rule pack that steers a coding agent."},{"id":"api","zh":"API","en":"API","note_zh":"主要价值在机器接口的服务：HTTP API 或原始文件 CDN。","note_en":"A service whose main value is a machine endpoint: an HTTP API or a raw-file CDN."},{"id":"newsletter","zh":"通讯与聚合","en":"Newsletter or feed","note_zh":"邮件通讯或每日聚合。","note_en":"A newsletter or daily feed."}],"resources":[{"id":"siteinspire","name":"Siteinspire","name_zh":null,"url":"https://www.siteinspire.com","host":"siteinspire.com","domain":"web","section":"site-galleries","also":["ai:design-mcp-servers"],"kind":"gallery","tags":["editorial","portfolio","typography"],"best_for":"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","how_to_use":"In a browser, browse /websites and combine Styles, Types and Subjects filters; agents use the read-only MCP (search_sites for free text, all_categories then list_websites for one category, explore_websites for 2-3 category intersections)","zh":"克制耐看的网站画廊（2008 年起 1 万+ 站），偏字体与编辑排版；另有免登录的只读 MCP，智能体可直接检索。","zh_how":"人工浏览用 /websites 叠加风格、类型、题材筛选；智能体接入 MCP：自由文本用 search_sites，单一分类先 all_categories 再 list_websites，2-3 个分类交集用 explore_websites。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Public MCP server (read-only, no auth)","url":"https://www.siteinspire.com/api/mcp"},{"label":"MCP server card","url":"https://www.siteinspire.com/.well-known/mcp.json"},{"label":"llms.txt (MCP and API reference)","url":"https://www.siteinspire.com/llms.txt"}],"api":null,"caveats":["Pages and the REST API answer plain fetches with a Vercel Security Checkpoint (429, checked 2026-09-27); the MCP endpoint and llms.txt respond","Screenshots and descriptions are Siteinspire's copyright; the index may be used for non-commercial research with attribution"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/siteinspire.webp","source":"screenshot","captured_at":"2026-09-27T09:28:58Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"a1-gallery","name":"A1 Gallery","name_zh":null,"url":"https://a1.gallery","host":"a1.gallery","domain":"web","section":"site-galleries","also":["web:section-galleries","ai:design-mcp-servers"],"kind":"gallery","tags":["landing","portfolio","ai","saas"],"best_for":"Broad, well-tagged curation of current sites, each broken into interior pages and sections with a measured colour palette, type stack and spacing","how_to_use":"Browse /type/<landing|portfolio|shop>, /category/<ai|finance|technology>, /style/<dark|minimal|big-type> or /technology/<framer|webflow|next-js>; use /sections and /pages for one section or page type; agents connect the MCP for JSON with measured design tokens","zh":"标签齐全的当代网站画廊，每站拆成内页与区块并附实测配色、字体与间距；另有 MCP 供智能体取结构化数据。","zh_how":"按 /type、/category、/style、/technology 路径筛；只看某类区块或页面走 /sections、/pages；智能体用免费账号 OAuth 接入 MCP（每天 50 次）。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"MCP setup (markdown)","url":"https://www.a1.gallery/mcp.md"},{"label":"Sections by job","url":"https://www.a1.gallery/sections"},{"label":"llms.txt","url":"https://www.a1.gallery/llms.txt"}],"api":null,"caveats":["The MCP needs OAuth against a free A1 account: 50 requests a day, Pro raises it to 2,000"],"agent_access":"static","thumb":{"src":"assets/thumbs/a1-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:29:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"recent-design","name":"Recent Design","name_zh":null,"url":"https://recent.design","host":"recent.design","domain":"web","section":"site-galleries","also":["graphic:social-og"],"kind":"gallery","tags":["websites","og-images","app-icons","app-store-screenshots","daily"],"best_for":"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","how_to_use":"Start at /websites and filter by category (AI, SaaS, Portfolio, Ecommerce, Agency); /og-images and /app-icons for those formats; /skills ranks design skills by installs","zh":"每日人工策展的灵感站，Godly 的继承者；除分类网站外还收 OG 图、应用商店截图、应用图标，并有按安装量排的设计 skills 榜。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Websites","url":"https://recent.design/websites"},{"label":"OG images","url":"https://recent.design/og-images"},{"label":"App icons","url":"https://recent.design/app-icons"},{"label":"Design agent skills","url":"https://recent.design/skills"}],"api":null,"caveats":["Curation follows current fashion: date what you take"],"agent_access":"static","thumb":{"src":"assets/thumbs/recent-design.webp","source":"screenshot","captured_at":"2026-09-27T09:29:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"minimal-gallery","name":"Minimal Gallery","name_zh":null,"url":"https://minimal.gallery","host":"minimal.gallery","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["minimal","portfolio","studio"],"best_for":"Minimal websites: whitespace, type-led layouts, quiet palettes","how_to_use":"Category filters in the header (portfolio, agency, e-commerce, etc.)","zh":"极简网站灵感库，专收留白、字体主导的安静页面；找低饱和、排版驱动的参考时按分类筛选。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["SiteGround bot check (\"One moment, please...\") blocks scripts and headless browsers"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/minimal-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:29:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"httpster","name":"Httpster","name_zh":null,"url":"https://httpster.net","host":"httpster.net","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["eclectic"],"best_for":"Eclectic, personality-rich sites; a counterweight to SaaS sameness","how_to_use":"Filter by /type/<industry>/ (29 types) or /style/<colourful|brutalist|dark|fullscreen>/; open the live site before borrowing a layout, captures flatten motion and type rendering","zh":"收录风格各异、有性格的网站画廊，专门对冲 SaaS 同质化；想跳出模板感时按类型翻找。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/httpster.webp","source":"screenshot","captured_at":"2026-09-27T09:28:59Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"hoverstates","name":"Hover States","name_zh":null,"url":"https://www.hoverstat.es","host":"hoverstat.es","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["experimental","interaction"],"best_for":"Alternative and experimental web design where interaction is the idea","how_to_use":"Watch the capture videos; open the site for the real behaviour","zh":"收录以交互为创意的实验性网站画廊，先看录屏短片筛选，再打开原站体验真实行为。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/hoverstates.webp","source":"screenshot","captured_at":"2026-09-27T09:29:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"klikkentheke","name":"Klikkentheke","name_zh":null,"url":"https://klikkentheke.com","host":"klikkentheke.com","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["graphic","typography","culture"],"best_for":"Websites by and for graphic designers: type-driven, cultural, anti-template","how_to_use":"Use when a brief asks for editorial or art-school energy","zh":"收录平面设计师自己做、给同行看的网站，字体驱动、反模板；brief 要编辑感或艺术学院气质时翻它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["SiteGround bot check (\"One moment, please...\") blocks scripts"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/klikkentheke.webp","source":"screenshot","captured_at":"2026-09-27T09:29:11Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"curated-design","name":"Curated Design","name_zh":null,"url":"https://www.curated.design","host":"curated.design","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["saas","portfolio","ecommerce"],"best_for":"Clean multi-category gallery with consistent full-page captures","how_to_use":"Filter /inspiration/ by style or industry, or use /sections/ for one section type; every card clicks straight through to the live site","zh":"分类齐整的网站画廊，全页截图规格统一；适合按类目快速横向扫一遍找方向。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/curated-design.webp","source":"screenshot","captured_at":"2026-09-27T09:29:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"seesaw","name":"Seesaw","name_zh":null,"url":"https://www.seesaw.website","host":"seesaw.website","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["saas","portfolio","agency"],"best_for":"Fast-moving curation of new sites, tagged by type, style and even typeface","how_to_use":"Use /category/<ai|agency|crypto|design…> and the tag filters (typeface, framework) to find live sites that use a given font or stack","zh":"更新快的新站收录，标签细到风格、字体和框架；想找用某种字体的真实网站时来这里筛。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/seesaw.webp","source":"screenshot","captured_at":"2026-09-27T09:29:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"bestwebsite-gallery","name":"Best Website Gallery","name_zh":null,"url":"https://bestwebsite.gallery","host":"bestwebsite.gallery","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["portfolio","agency"],"best_for":"One curator's long-running pick of quality sites with colour and tag filters","how_to_use":"Use /sites with the colour, tag and country filters (e.g. /sites/country/switzerland); the daily pick archive lives under /sites/sotd/","zh":"一位策展人长期维护的优质网站选集，可按颜色和标签筛选；找特定色调或门类的参考时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/bestwebsite-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:29:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"maxibestof","name":"Maxibestof","name_zh":null,"url":"https://maxibestof.one","host":"maxibestof.one","domain":"web","section":"site-galleries","also":["web:section-galleries"],"kind":"gallery","tags":["studio","portfolio"],"best_for":"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","how_to_use":"Use /sections/<hero|feature|pricing|footer…> for one section type and /typefaces for fonts in use with pairings; llms.txt lists every catalogue URL","zh":"偏工作室与作品集的网站库，另拆出区块库（数百个 hero、页脚、功能区）与在用字体库；查单一区块或字体搭配时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Sections catalogue","url":"https://maxibestof.one/sections"},{"label":"llms.txt","url":"https://maxibestof.one/llms.txt"}],"api":null,"caveats":["The homepage answers scripts with a Cloudflare challenge (403, 2026-09-27); /sections and llms.txt were readable"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/maxibestof.webp","source":"screenshot","captured_at":"2026-09-27T09:29:27Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"siiimple","name":"Siiimple","name_zh":null,"url":"https://siiimple.com","host":"siiimple.com","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["minimal"],"best_for":"Minimalist sites archive; useful second source after Minimal Gallery","how_to_use":"Browse /category/<type>/ (60+ categories such as application, architecture, art-gallery) when Minimal Gallery has too few examples in a vertical","zh":"极简主义网站档案馆，按分类浏览；找简约风格时当 Minimal Gallery 之外的第二来源用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/siiimple.webp","source":"screenshot","captured_at":"2026-09-27T09:29:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webdesignmuseum","name":"Web Design Museum","name_zh":null,"url":"https://www.webdesignmuseum.org","host":"webdesignmuseum.org","domain":"web","section":"site-galleries","also":[],"kind":"archive","tags":["history","retro","y2k"],"best_for":"History of web design 1991-2006; reference for retro, Y2K and early-web aesthetics","how_to_use":"Browse by year or by site timeline","zh":"1991–2006 年网页设计史档案馆，可按年份或站点时间线浏览；做复古、Y2K 或早期互联网美学时来取证。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare challenge for scripts (403, 2026-09-27): open in a browser"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/webdesignmuseum.webp","source":"og","captured_at":"2026-09-27T10:26:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"whimsical-club","name":"The Whimsical Web","name_zh":null,"url":"https://whimsical.club","host":"whimsical.club","domain":"web","section":"site-galleries","also":[],"kind":"gallery","tags":["personal","playful","indie-web"],"best_for":"Curated list of personal and small sites with an extra bit of fun; a direct antidote to templated SaaS pages","how_to_use":"Use when a brief asks for personality or delight; take one quirky interaction per site, not the whole look","zh":"收录有趣、有个性的个人小站；想给产品加点“人味”和惊喜时挑一个有趣的交互来学，别照搬整站。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/whimsical-club.webp","source":"screenshot","captured_at":"2026-09-27T09:29:11Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"onepagelove","name":"One Page Love","name_zh":null,"url":"https://onepagelove.com","host":"onepagelove.com","domain":"web","section":"landing-saas","also":["web:section-galleries","ai:design-mcp-servers"],"kind":"gallery","tags":["one-page","landing","templates"],"best_for":"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","how_to_use":"Use /genre/<landing-page|saas|portfolio>, /sections for one section type and typeface pages to see a font in use; agents add the free no-key MCP and ask for e.g. \"3 pricing-table examples\"","zh":"2008 年起人工精选的单页站与落地页（9000+），每站有整页截图、点评和体裁、风格、平台、字体、区块标签；另有免费免密钥 MCP。","zh_how":"按 /genre/<体裁>、/sections 区块、字体页筛；智能体接入 https://api.onepagelove.com/mcp，直接问“给我 3 个定价表示例”。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"MCP server (free, no key)","url":"https://api.onepagelove.com/mcp"},{"label":"MCP setup guide","url":"https://onepagelove.com/mcp"},{"label":"Page sections","url":"https://onepagelove.com/sections"},{"label":"llms.txt","url":"https://onepagelove.com/llms.txt"}],"api":null,"caveats":["Curated by founder Rob Hope from 2008 to 2026, then by new owner Piet Terheyden","The JSON API is in private beta; the MCP is free and rate-limited by IP"],"agent_access":"static","thumb":{"src":"assets/thumbs/onepagelove.webp","source":"screenshot","captured_at":"2026-09-27T09:29:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"land-book","name":"Land-book","name_zh":null,"url":"https://land-book.com","host":"land-book.com","domain":"web","section":"landing-saas","also":["web:section-galleries"],"kind":"gallery","tags":["landing","saas","ecommerce"],"best_for":"Largest well-filtered landing-page gallery, updated daily, with a section library (hero, features, pricing, FAQ, CTA, footer…) cropped from featured sites","how_to_use":"Browse /design/landing-page, /design/portfolio or /design/ecommerce, and /sections/<hero|pricing|faq|footer> for one section type; /motion collects animated sites","zh":"筛选最细、每日更新的落地页画廊，另有从入选站点裁出的区块库（hero、定价、FAQ、CTA、页脚）；做营销页时的主力参考。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (every category and section URL)","url":"https://land-book.com/llms.txt"}],"api":null,"caveats":["Cloudflare challenge for scripts and agents (403, 2026-09-27); open in a browser","Also sells Webflow and Framer templates: judge the gallery, not the store"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/land-book.webp","source":"screenshot","captured_at":"2026-09-27T09:29:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lapa-ninja","name":"Lapa Ninja","name_zh":null,"url":"https://www.lapa.ninja","host":"lapa.ninja","domain":"web","section":"landing-saas","also":[],"kind":"gallery","tags":["landing","saas","full-page"],"best_for":"Landing pages with full-page screenshots, grouped by industry and by colour","how_to_use":"Use /category/<industry>/ pages; full-length captures show section order","zh":"落地页截图库，整页长图能看出区块顺序；按行业和配色分组，写 landing page 结构前先翻。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare challenge for scripts (403, 2026-09-27): open in a browser"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/lapa-ninja.webp","source":"screenshot","captured_at":"2026-09-27T09:29:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"saaslandingpage","name":"SaaS Landing Page","name_zh":null,"url":"https://saaslandingpage.com","host":"saaslandingpage.com","domain":"web","section":"landing-saas","also":[],"kind":"gallery","tags":["saas","landing"],"best_for":"SaaS-only landing pages, also sliced by page type (pricing, features, about)","how_to_use":"Filter by page type to compare one kind of page across products","zh":"只收 SaaS 落地页的图库，可按定价、功能、关于等页面类型筛选，横向对比同类页面的做法。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["SiteGround bot check (\"One moment, please...\") blocks scripts"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/saaslandingpage.webp","source":"screenshot","captured_at":"2026-09-27T09:29:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"saaspo","name":"Saaspo","name_zh":null,"url":"https://saaspo.com","host":"saaspo.com","domain":"web","section":"landing-saas","also":[],"kind":"gallery","tags":["saas","sections"],"best_for":"SaaS sites indexed by page type, section type, style and stack","how_to_use":"Go straight to a section type (hero, pricing, testimonials, footer)","zh":"SaaS 站点库，按页面、区块类型与风格索引；写 hero、定价、页脚时直接查对应区块。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare challenge for scripts (403, 2026-09-27): open in a browser"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/saaspo.webp","source":"screenshot","captured_at":"2026-09-27T09:29:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"landingfolio","name":"Landingfolio","name_zh":null,"url":"https://www.landingfolio.com","host":"landingfolio.com","domain":"web","section":"landing-saas","also":["web:section-galleries","ai:design-mcp-servers"],"kind":"gallery","tags":["landing","components"],"best_for":"Landing pages plus a component-level view (hero, pricing, FAQ, CTA); templates are paid","how_to_use":"Use /inspiration/<landing-page|pricing|about|login> and the components view to compare one section; agents connect the MCP (free account token) to pull real screenshots while building","zh":"落地页灵感库，可按 hero、定价、FAQ、CTA 等组件拆开对比；灵感页免费，模板付费。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"LandingFolio MCP (free token, 100 requests/day)","url":"https://www.landingfolio.com/mcp"}],"api":null,"caveats":["Templates and the component library are paid; the inspiration pages are free"],"agent_access":"static","thumb":{"src":"assets/thumbs/landingfolio.webp","source":"screenshot","captured_at":"2026-09-27T09:29:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"landing-love","name":"Landing Love","name_zh":null,"url":"https://www.landing.love","host":"landing.love","domain":"web","section":"landing-saas","also":[],"kind":"gallery","tags":["landing","animation"],"best_for":"Landing pages chosen for their motion, shown as video captures","how_to_use":"Filter /categories/, /style/ and /collection/<gsap|webgl|threejs>/ (or /platform/<webflow|framer>/) and watch the full-page video for scroll and load choreography","zh":"专收动效出色的落地页，以视频录屏展示；滚动与加载编排是关键时来这里看。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/landing-love.webp","source":"screenshot","captured_at":"2026-09-27T09:29:33Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lp-archive-jp","name":"LP Archive (LPアーカイブ)","name_zh":null,"url":"https://rdlp.jp/lp-archive","host":"rdlp.jp","domain":"web","section":"landing-saas","also":[],"kind":"gallery","tags":["japan","landing","long-form","conversion"],"best_for":"46,000+ Japanese landing pages (LP), updated daily and searchable by industry, colour and taste","how_to_use":"Filter by colour (/lp-archive/search?lp_color=1) or industry to study the dense, vertical Japanese LP genre; do not transplant it unchanged to Western audiences","zh":"4.6 万+ 日本长落地页（LP），每日更新，可按行业、颜色、调性筛；研究日式竖长营销页，但别原样搬给欧美用户。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/lp-archive-jp.webp","source":"screenshot","captured_at":"2026-09-27T09:29:42Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"reallygoodemails","name":"Really Good Emails","name_zh":null,"url":"https://reallygoodemails.com","host":"reallygoodemails.com","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["email"],"best_for":"The reference for email design, with code view per email","how_to_use":"Browse /categories (welcome, receipt, newsletter, promotional…) or search by brand; every email has a code view to inspect the HTML","zh":"邮件设计的标杆参考，按场景分类且每封附 HTML 源码；做 onboarding、收据、newsletter 邮件时查它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Categories","url":"https://reallygoodemails.com/categories"},{"label":"llms.txt","url":"https://reallygoodemails.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/reallygoodemails.webp","source":"screenshot","captured_at":"2026-09-27T09:29:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"navbar-gallery","name":"Navbar Gallery","name_zh":null,"url":"https://navbar.gallery","host":"navbar.gallery","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["nav","menu","sidebar"],"best_for":"Navigation only: navbars, mega menus, dropdowns, sidebars, mobile menus","how_to_use":"Filter /type/<static|dropdowns|mega-menu|side-bar>; compare how sites fit many links plus a CTA and how the menu collapses on mobile","zh":"只收导航：导航栏、超级菜单、下拉、侧边栏和移动端菜单；链接多又带 CTA 时来这里对照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/navbar-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:29:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"supahero","name":"Supahero","name_zh":null,"url":"https://supahero.io","host":"supahero.io","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["hero"],"best_for":"Hero sections only, a focused library of above-the-fold compositions","how_to_use":"Scan for hero strategy (product shot, typographic, video, interactive) before choosing one","zh":"只收 Hero 首屏的专门库；定首屏策略（产品图、大字排版、视频、交互）之前先扫一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/supahero.webp","source":"screenshot","captured_at":"2026-09-27T09:29:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"bentogrids","name":"Bento Grids","name_zh":null,"url":"https://bentogrids.com","host":"bentogrids.com","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["bento","trend"],"best_for":"Bento-grid layouts collected from real sites","how_to_use":"Reference for module sizing and rhythm when a bento section is justified","zh":"真实网站的 bento 网格布局合集，风潮已过；确定要用时再参考它的模块尺寸与节奏。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Bento sections became a 2023-24 template tell; use only when the content really is a set of unequal modules"],"agent_access":"js","thumb":{"src":"assets/thumbs/bentogrids.webp","source":"screenshot","captured_at":"2026-09-27T09:29:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"footer-design","name":"Footer","name_zh":null,"url":"https://www.footer.design","host":"footer.design","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["footer"],"best_for":"Footers only: sitemap structure, legal, newsletter, big-type sign-offs","how_to_use":"Filter /styles/<typographic|small-type|illustrative|grid> to compare sitemap depth, legal rows and big-type sign-offs","zh":"只收页脚的灵感站，看导航结构、法律信息、newsletter 与收尾大字排版的做法。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/footer-design.webp","source":"screenshot","captured_at":"2026-09-27T09:29:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cta-gallery","name":"CTA Gallery","name_zh":null,"url":"https://www.cta.gallery","host":"cta.gallery","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["cta"],"best_for":"Call-to-action sections and buttons from real sites","how_to_use":"Use /categories/<button|form|download|call-to-buy> to compare closing CTAs; judge copy and layout together","zh":"真实网站的 CTA 区块与按钮合集；打磨收尾段时对照别人的构图和文案写法。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/cta-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:29:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pricingpages","name":"Pricing Pages","name_zh":null,"url":"https://pricingpages.design","host":"pricingpages.design","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["pricing"],"best_for":"Pricing pages and plan tables","how_to_use":"Compare plan count, the recommended-plan emphasis and toggle patterns","zh":"定价页与方案表的专项画廊；对比方案数量、推荐方案的强调手法和切换开关的样式。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pricingpages.webp","source":"screenshot","captured_at":"2026-09-27T09:29:50Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"404s-design","name":"404s","name_zh":null,"url":"https://www.404s.design","host":"404s.design","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["404","empty-state"],"best_for":"404 pages: a good source for brand voice in error and empty states","how_to_use":"Open /sites/<name> pages to judge tone and whether the error page still offers search or a way back","zh":"404 页面合集，错误页和空状态是品牌语气露脸的地方；找文案调性和插画路子时刷一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/404s-design.webp","source":"screenshot","captured_at":"2026-09-27T09:29:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"emaillove","name":"Email Love","name_zh":null,"url":"https://emaillove.com","host":"emaillove.com","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["email"],"best_for":"Curated email designs and components, tagged by type and brand","how_to_use":"Filter by email type and brand when Really Good Emails lacks a category","zh":"按类型与品牌标签整理的邮件设计精选库；做邮件模板时翻，Really Good Emails 之外的第二来源。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare challenge for scripts (403, 2026-09-27): open in a browser"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/emaillove.webp","source":"og","captured_at":"2026-09-27T10:26:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"unsection","name":"Unsection","name_zh":null,"url":"https://www.unsection.com","host":"unsection.com","domain":"web","section":"section-galleries","also":[],"kind":"gallery","tags":["sections","hero","pricing","faq","testimonials"],"best_for":"Section-first gallery (5,000+ sites) filterable by hero, features, pricing, FAQ, testimonials, team, footer and more","how_to_use":"Open /category/<hero|feature|testimonial|cta|pricing>-section-design and compare ten solutions to the same section side by side","zh":"按区块分类的网站画廊（首屏、功能、定价、FAQ、页脚等，5000+ 站）；只纠结某一个区块时横向对比十个同类解法。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/unsection.webp","source":"screenshot","captured_at":"2026-09-27T09:29:57Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"sankoudesign","name":"SANKOU!","name_zh":null,"url":"https://sankoudesign.com","host":"sankoudesign.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["japan","cjk-layout"],"best_for":"Japanese web gallery with fine-grained filters; the closest high-quality reference for CJK typographic layout","how_to_use":"Filter /category/<…>/ (191 categories: industry, page type, colour, layout, tool such as Framer or STUDIO) or /popular-sites/; credits name the studio, so follow good work to its makers","zh":"日本网站画廊，行业、页面、颜色、版式筛选很细；做中文排版时最接近的高质量参照。","zh_how":"按 /category/<分类>/ 筛（191 个分类：行业、页面类型、颜色、版式、Framer/STUDIO 等工具），或看 /popular-sites/；每站附制作方，顺藤摸瓜找好团队。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sankoudesign.webp","source":"screenshot","captured_at":"2026-09-27T09:30:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"darkmodedesign","name":"Dark Mode Design","name_zh":null,"url":"https://www.darkmodedesign.com","host":"darkmodedesign.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["dark"],"best_for":"Dark-themed sites only; study surface layering and accent restraint in dark UI","how_to_use":"Open the live sites to read actual surface values","zh":"只收深色主题网站，研究暗色界面的表面层级与克制的强调色；要打开原站读真实色值。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/darkmodedesign.webp","source":"screenshot","captured_at":"2026-09-27T09:30:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"brutalistwebsites","name":"Brutalist Websites","name_zh":null,"url":"https://brutalistwebsites.com","host":"brutalistwebsites.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["brutalist"],"best_for":"Web brutalism archive with short designer interviews","how_to_use":"Reference for raw, anti-polish directions","zh":"粗野主义网站档案，附设计师短访谈；要做生糙、反精致的方向时来这里找参照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/brutalistwebsites.webp","source":"screenshot","captured_at":"2026-09-27T09:30:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"commercecream","name":"Commerce Cream","name_zh":null,"url":"https://commercecream.com","host":"commercecream.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["ecommerce","shopify"],"best_for":"Best-looking e-commerce storefronts, mostly Shopify","how_to_use":"Browse by page type (home, product, collection, cart) to see storefront patterns under real Shopify constraints","zh":"好看电商店面的画廊，多为 Shopify；用来研究真实约束下的商品页与购物车模式。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Unreachable from our probe network on 2026-09-27 (TLS reset); search engines still index it, confirm in a browser"],"agent_access":"unknown","thumb":{"src":"assets/thumbs/commercecream.webp","source":"og","captured_at":"2026-09-27T10:26:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ecomm-design","name":"Ecomm.design","name_zh":null,"url":"https://ecomm.design","host":"ecomm.design","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["ecommerce"],"best_for":"E-commerce sites filterable by platform, category and tech stack","how_to_use":"Filter by platform (/platform/shopify-stores/, squarespace, bigcommerce) and by vertical; skip the agency and tool upsell pages","zh":"电商网站灵感库，可按平台、品类和技术栈筛选；做时尚、食品、美妆等垂直电商时按类目翻。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ecomm-design.webp","source":"screenshot","captured_at":"2026-09-27T10:27:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"bestfolios","name":"Bestfolios","name_zh":null,"url":"https://www.bestfolios.com","host":"bestfolios.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["portfolio","case-study"],"best_for":"Designer portfolios, case studies and resumes","how_to_use":"Use for portfolio structure and case-study storytelling","zh":"设计师作品集、案例研究与简历的精选库；搭作品集结构、学案例叙事时参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/bestfolios.webp","source":"screenshot","captured_at":"2026-09-27T09:30:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"personalsites","name":"personalsit.es","name_zh":null,"url":"https://personalsit.es","host":"personalsit.es","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["personal"],"best_for":"Directory of personal sites; human, idiosyncratic web design","how_to_use":"Hit /random a few times, or /with-feed for sites that publish RSS; skim for non-commercial layout ideas","zh":"个人网站目录，全是不商业、有个性的排版与布局；想找非商业版式灵感时随手翻。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/personalsites.webp","source":"screenshot","captured_at":"2026-09-27T09:30:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"muuuuu","name":"MUUUUU.ORG","name_zh":null,"url":"https://muuuuu.org","host":"muuuuu.org","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["japan","long-scroll"],"best_for":"Japanese long-scroll sites curated for craft","how_to_use":"Filter by industry, colour, site type and expression (e.g. /category/interaction/page-transition); the daily SOTD carries production credits","zh":"日本长滚动网站精选，以工艺见长；研究纵向节奏和日英混排字体时的第一站。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/muuuuu.webp","source":"screenshot","captured_at":"2026-09-27T09:30:11Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"81-web","name":"81-web.com","name_zh":null,"url":"https://81-web.com","host":"81-web.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["japan"],"best_for":"Japanese web design gallery with category and colour filters","how_to_use":"Filter by category and colour; use when SANKOU! and MUUUUU.ORG lack the industry you need","zh":"日本网页设计画廊，可按类目与颜色筛选；CJK 排版参考的第二来源。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/81-web.webp","source":"screenshot","captured_at":"2026-09-27T09:30:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"responsive-jp","name":"Responsive Web Design JP","name_zh":null,"url":"https://responsive-jp.com","host":"responsive-jp.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["japan","responsive"],"best_for":"Shows each site at desktop, tablet and phone widths side by side","how_to_use":"Use /layout, /type and /technique to study how a composition re-arranges across desktop, tablet and phone","zh":"日本网站三端同屏展示，桌面、平板、手机排版并排对照；研究跨断点重排构图时用它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/responsive-jp.webp","source":"screenshot","captured_at":"2026-09-27T09:30:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"made-in-webflow","name":"Made in Webflow","name_zh":null,"url":"https://webflow.com/made-in-webflow","host":"webflow.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["webflow","cloneable"],"best_for":"Community showcase with cloneable projects; uneven quality, good for interaction mechanics","how_to_use":"Filter to cloneables to inspect how an effect is built","zh":"Webflow 社区作品库，含可克隆项目；质量参差，主要用来拆开看交互效果的实现方式。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/made-in-webflow.webp","source":"screenshot","captured_at":"2026-09-27T10:37:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"framer-gallery","name":"Framer Gallery","name_zh":null,"url":"https://www.framer.com/community/gallery/","host":"framer.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["framer"],"best_for":"Sites built in Framer; shows what is fashionable in the no-code design crowd","how_to_use":"Filter by category and style to see what the no-code design crowd ships now","zh":"Framer 官方作品画廊，反映无代码圈当下的流行风向；当趋势指标看，别当标准。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["A trend indicator, not a standard"],"agent_access":"static","thumb":{"src":"assets/thumbs/framer-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:30:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"io3000","name":"I/O 3000","name_zh":null,"url":"https://io3000.com","host":"io3000.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["japan","cjk-layout","corporate"],"best_for":"Long-running Japanese gallery of domestic and overseas sites with category, tag and colour filters","how_to_use":"Use /category/colors/ and the tags for Japanese corporate and recruiting sites; compare CJK headline sizes and line lengths","zh":"老牌日本网站画廊，可按类目、标签和颜色筛；看日企官网、招聘站的中日文标题字号与行长。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/io3000.webp","source":"screenshot","captured_at":"2026-09-27T09:30:24Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"webdesignclip","name":"Web Design Clip","name_zh":null,"url":"https://webdesignclip.com","host":"webdesignclip.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["japan","cjk-layout","recruiting"],"best_for":"6,000+ Japanese sites filterable by industry (company, recruit, estate…) and build tag (WordPress, Shopify, Next.js)","how_to_use":"Filter /category/<industry>/ and /tag/<stack>/ to compare how Japanese sites set dense CJK content","zh":"收录 6000+ 日本网站，可按行业（企业、招聘、地产…）与技术标签筛；对比日本站点如何排布密集的中日文内容。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webdesignclip.webp","source":"screenshot","captured_at":"2026-09-27T10:27:47Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"s5-style","name":"S5-Style","name_zh":null,"url":"https://www.s5-style.com","host":"s5-style.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["japan","corporate","recruiting"],"best_for":"Japanese gallery of high-quality corporate, recruiting and service sites","how_to_use":"Use as a third Japanese source after SANKOU! and MUUUUU.ORG when judging typographic refinement in CJK","zh":"高品质日本网站画廊，企业官网、招聘站、服务站居多；判断中日文排版精致度时的第三参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/s5-style.webp","source":"screenshot","captured_at":"2026-09-27T09:30:31Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"korea-web-design","name":"Korea Web Design","name_zh":null,"url":"https://koreawebdesign.com","host":"koreawebdesign.com","domain":"web","section":"niche-galleries","also":[],"kind":"gallery","tags":["korea","hangul-layout","mobile"],"best_for":"Curated Korean websites with separate desktop and mobile picks; the best public reference for Hangul typographic layout","how_to_use":"Compare /site/ and /mobile-site/ picks; check Hangul headline scale and line-height against Japanese and Chinese sites before setting CJK type","zh":"精选韩国网站，桌面与移动分开收录；研究韩文排版最好的公开参考，定 CJK 字号行高前与中日站点对照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ko","region":"kr","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/korea-web-design.webp","source":"screenshot","captured_at":"2026-09-27T09:30:40Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"awwwards","name":"Awwwards","name_zh":null,"url":"https://www.awwwards.com","host":"awwwards.com","domain":"web","section":"awards","also":[],"kind":"gallery","tags":["awards","experimental","motion"],"best_for":"Jury-scored showcase of ambitious web work; strongest for motion, WebGL and art direction","how_to_use":"Use Sites of the Day, /websites/<category>/ and the Collections (transitions, scrolling, microinteractions); read the jury scores critically","zh":"网页设计奖项站点，看动效与视觉的野心天花板；评审不管可用性与转化，只当野心参考。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Sites of the Day","url":"https://www.awwwards.com/websites/sites_of_the_day/"},{"label":"Collections","url":"https://www.awwwards.com/collections/"},{"label":"Motion collection: transitions","url":"https://www.awwwards.com/awwwards/collections/transitions/"},{"label":"Public API (OpenAPI, annual awards)","url":"https://www.awwwards.com/openapi.json"}],"api":null,"caveats":["Juries reward spectacle; usability, accessibility and conversion are not judged"],"agent_access":"static","thumb":{"src":"assets/thumbs/awwwards.webp","source":"screenshot","captured_at":"2026-09-27T09:30:36Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fwa","name":"The FWA","name_zh":null,"url":"https://thefwa.com","host":"thefwa.com","domain":"web","section":"awards","also":[],"kind":"gallery","tags":["awards","experimental"],"best_for":"Long-running award for cutting-edge digital experiences","how_to_use":"Use for immersive and campaign-style references","zh":"老牌数字体验奖项，偏实验与沉浸式；做活动站或 campaign 类项目时来找前沿参照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript-only site: plain fetches get an empty shell"],"agent_access":"js","thumb":{"src":"assets/thumbs/fwa.webp","source":"screenshot","captured_at":"2026-09-27T09:30:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cssda","name":"CSS Design Awards","name_zh":null,"url":"https://www.cssdesignawards.com","host":"cssdesignawards.com","domain":"web","section":"awards","also":[],"kind":"gallery","tags":["awards"],"best_for":"Award gallery scored on UI, UX and innovation","how_to_use":"Browse /wotd-award-winners and read the separate UI, UX and innovation scores on each site page; use as a second jury after Awwwards","zh":"按 UI、UX 与创新三个维度打分的设计奖项站；拿它做 Awwwards 之外的第二意见。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/cssda.webp","source":"screenshot","captured_at":"2026-09-27T09:30:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webby-awards","name":"The Webby Awards gallery","name_zh":null,"url":"https://winners.webbyawards.com","host":"winners.webbyawards.com","domain":"web","section":"awards","also":[],"kind":"gallery","tags":["awards","websites","apps","campaigns"],"best_for":"Searchable gallery of Webby winners and nominees across websites, apps, social, video and AI categories","how_to_use":"Start at /winners/websites-and-mobile-sites and narrow by year and category to see what the industry rewarded; open the live work, not the thumbnail","zh":"Webby 奖获奖与提名作品库，覆盖网站、应用、社媒、视频与 AI 类别；按年份和类别看业界奖励了什么。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Websites and mobile sites winners","url":"https://winners.webbyawards.com/winners/websites-and-mobile-sites"}],"api":null,"caveats":["Academy juries plus a public People's Voice vote: big-brand campaigns dominate and usability is not judged"],"agent_access":"static","thumb":{"src":"assets/thumbs/webby-awards.webp","source":"screenshot","captured_at":"2026-09-27T10:27:46Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"gdweb","name":"GDWEB Design Awards","name_zh":null,"url":"https://www.gdweb.co.kr/main/","host":"gdweb.co.kr","domain":"web","section":"awards","also":[],"kind":"gallery","tags":["korea","awards","corporate"],"best_for":"Korean web design award and gallery that local agencies use as a practical reference for corporate and brand sites","how_to_use":"Browse the WEB selections (/sub/list.asp) for Korean corporate sites; pair with Korea Web Design for Hangul layout","zh":"韩国网页设计奖与作品库（지디웹），本地代理商常用的企业与品牌站参考；看韩文企业站时与 Korea Web Design 对照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"ko","region":"kr","entry_points":[],"api":null,"caveats":["Old ASP site, Korean only"],"agent_access":"static","thumb":{"src":"assets/thumbs/gdweb.webp","source":"screenshot","captured_at":"2026-09-27T10:27:01Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"marketingexamples","name":"Marketing Examples","name_zh":null,"url":"https://marketingexamples.com","host":"marketingexamples.com","domain":"web","section":"conversion","also":[],"kind":"article","tags":["copywriting","landing"],"best_for":"Short, concrete teardowns of copy, landing pages and conversion tactics","how_to_use":"Read the copywriting and landing-page sections before writing a hero","zh":"营销拆解博客，用短篇幅分析文案、落地页和转化手法；动笔写 hero 区标题前先读几篇。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Landing page examples","url":"https://marketingexamples.com/landing-page"},{"label":"Copywriting examples","url":"https://marketingexamples.com/copywriting"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/marketingexamples.webp","source":"screenshot","captured_at":"2026-09-27T09:30:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"julian-landing-pages","name":"Julian Shapiro: Landing Pages","name_zh":null,"url":"https://www.julian.com/guide/startup/landing-pages","host":"julian.com","domain":"web","section":"conversion","also":[],"kind":"article","tags":["landing","structure","copy"],"best_for":"The clearest handbook on landing-page structure: hero, social proof, features, objections, CTA","how_to_use":"Read once; use as the checklist for page narrative","zh":"讲落地页结构最清楚的指南：Hero、社会证明、特性、异议、CTA；当页面叙事的检查清单用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/julian-landing-pages.webp","source":"screenshot","captured_at":"2026-09-27T09:30:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"demandcurve","name":"Demand Curve: The Frontier library","name_zh":null,"url":"https://www.demandcurve.com/frontier-library","host":"demandcurve.com","domain":"web","section":"conversion","also":[],"kind":"article","tags":["above-the-fold","growth"],"best_for":"Growth playbooks including above-the-fold and landing-page teardowns","how_to_use":"Use the above-the-fold playbook when drafting a hero","zh":"增长团队的实操 playbook 合集，含首屏与落地页拆解；起草 hero 区前先看首屏那一篇。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Above-the-fold playbook","url":"https://www.demandcurve.com/playbooks/above-the-fold"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/demandcurve.webp","source":"screenshot","captured_at":"2026-09-27T09:30:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"goodui","name":"GoodUI","name_zh":null,"url":"https://goodui.org","host":"goodui.org","domain":"web","section":"conversion","also":[],"kind":"pattern-library","tags":["ab-test","evidence"],"best_for":"UI patterns backed by A/B test results, including ones that lost","how_to_use":"Look up a pattern in /patterns/ and its test results before arguing for it; /leaks/ shows A/B tests spotted on big products","zh":"带 A/B 测试结果的 UI 模式库，连输掉的方案也公开；提案前先查它有没有证据。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Patterns","url":"https://goodui.org/patterns/"},{"label":"Leaks (observed A/B tests)","url":"https://goodui.org/leaks/"}],"api":null,"caveats":["Full test details sit behind the paid membership"],"agent_access":"static","thumb":{"src":"assets/thumbs/goodui.webp","source":"screenshot","captured_at":"2026-09-27T09:30:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"swipefile","name":"Swipe File","name_zh":null,"url":"https://swipefile.com","host":"swipefile.com","domain":"web","section":"conversion","also":[],"kind":"archive","tags":["copywriting","ads"],"best_for":"Large swipe file of ads, landing pages and copy with commentary","how_to_use":"Browse /categories (ads, pricing structures, sales pages, before-and-after) when stuck on messaging; the notes explain why a swipe works","zh":"广告、落地页与文案的大型 swipe file，附点评；卡在文案表达时按格式检索。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/swipefile.webp","source":"screenshot","captured_at":"2026-09-27T09:30:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mailchimp-content-style-guide","name":"Mailchimp Content Style Guide","name_zh":null,"url":"https://styleguide.mailchimp.com","host":"styleguide.mailchimp.com","domain":"web","section":"conversion","also":[],"kind":"guideline","tags":["ux-writing","voice-tone","content","style-guide"],"best_for":"Public content style guide: writing principles, voice and tone, grammar, web elements, email, social and accessible writing","how_to_use":"Adopt its voice-and-tone and web-elements pages as default copy rules for buttons, errors and headings; the Markdown source is on GitHub","zh":"Mailchimp 公开的内容风格指南：写作原则、语气语调、语法、网页元素、邮件与社媒写法；按钮、报错、标题文案的默认规则。","zh_how":null,"access":"free","login":false,"license":"CC BY-NC 4.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Voice and tone","url":"https://styleguide.mailchimp.com/voice-and-tone/"},{"label":"Markdown source (GitHub)","url":"https://github.com/mailchimp/content-style-guide"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mailchimp-content-style-guide.webp","source":"screenshot","captured_at":"2026-09-27T09:30:51Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mobbin","name":"Mobbin","name_zh":null,"url":"https://mobbin.com","host":"mobbin.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["ios","android","web","flows","paywall"],"best_for":"Largest library of real app screens and flows across iOS, Android and web, searchable by screen type, UI element and flow","how_to_use":"Pick the platform (iOS, Android, Web), then search Screens, UI Elements or Flows by pattern name (paywall, empty state, onboarding, checkout); open an app to see its full flow in order. Agents can query the same library through the Mobbin MCP (see mobbin-mcp).","zh":"真实 App 界面与流程的最大图库，按页面类型、组件和流程检索；免费额度少且需登录。","zh_how":"先选平台（iOS、Android、Web），再按模式名搜索界面、组件或流程（付费墙、空状态、引导、结账）；点进某个 App 可按顺序看完整流程。agent 可通过 Mobbin MCP 检索同一资料库。","access":"freemium","login":true,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The free tier shows a small sample and needs sign-in; most screens and all flows need a paid plan."],"agent_access":"static","thumb":{"src":"assets/thumbs/mobbin.webp","source":"screenshot","captured_at":"2026-09-27T09:30:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"refero","name":"Refero","name_zh":null,"url":"https://refero.design","host":"refero.design","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["web-app","ios","saas"],"best_for":"Real product screens for web apps and iOS, searchable by page type, pattern and element; strong for SaaS","how_to_use":"Search a page type or pattern (billing, empty state, data table, command palette, settings) and filter Web or iOS; compare three products before drawing. Its sister site Refero Styles holds extracted DESIGN.md files (see refero-styles).","zh":"真实产品的网页与 iOS 界面截图库，按页面类型、模式、元素可搜；做 SaaS 界面先搜它，部分内容需付费。","zh_how":"搜索页面类型或模式（账单、空状态、数据表、命令面板、设置），筛选 Web 或 iOS；动笔前先对比三个产品的做法。姊妹站 Refero Styles 提供提取好的 DESIGN.md。","access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Sign-in and a paid plan are needed beyond a partial preview; the page is JavaScript-rendered for agents."],"agent_access":"js","thumb":{"src":"assets/thumbs/refero.webp","source":"screenshot","captured_at":"2026-09-27T10:27:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pageflows","name":"Page Flows","name_zh":null,"url":"https://pageflows.com","host":"pageflows.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["flows","video"],"best_for":"Recorded user flows (video plus annotated screenshots) for onboarding, upgrading, cancelling and more","how_to_use":"Mostly paywalled; use when the sequence, not a screen, is the question","zh":"录屏加标注的真实用户流程库，覆盖引导、升级、退订；问题是流程顺序而非单屏时查，多为付费。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Mostly paywalled.","screenlane.com now redirects here (checked 2026-09-27), so Screenlane is not a separate source."],"agent_access":"static","thumb":{"src":"assets/thumbs/pageflows.webp","source":"screenshot","captured_at":"2026-09-27T09:31:01Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nicelydone","name":"Nicelydone","name_zh":null,"url":"https://nicelydone.club","host":"nicelydone.club","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["saas","web-app"],"best_for":"SaaS web-app screens and flows sorted by component and page","how_to_use":"Browse by page (dashboard, settings, onboarding, billing) or by component; each entry links the live product so you can check the current state.","zh":"按页面和组件整理的 SaaS 产品截图库，做仪表盘、设置页、引导流程时直接翻。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare challenge for agents (403 on 2026-09-27); open it in a real browser."],"agent_access":"blocked","thumb":{"src":"assets/thumbs/nicelydone.webp","source":"og","captured_at":"2026-09-27T10:26:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"saasframe","name":"SaaSFrame","name_zh":null,"url":"https://www.saasframe.io","host":"saasframe.io","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["saas","dashboard","landing"],"best_for":"SaaS UI by category: dashboards, settings, modals, tables, emails, plus landing pages","how_to_use":"Use the category index; part of the library is behind a paid plan","zh":"按类目整理 SaaS 界面：仪表盘、设置、弹窗、表格、邮件加落地页；部分库内容需付费。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/saasframe.webp","source":"screenshot","captured_at":"2026-09-27T09:31:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uinotes","name":"UI Notes","name_zh":null,"url":"https://uinotes.com","host":"uinotes.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["china","ios","android","mini-program"],"best_for":"Screens and flows of Chinese apps; the closest equivalent to Mobbin for the domestic market","how_to_use":"Browse by app or by pattern (登录, 首页, 搜索, 个人中心, 支付) to see what mainland users already expect, including mini-program versions; pair with Mobbin for the global equivalent.","zh":"收录国内应用的界面与流程截图，相当于本土版 Mobbin；用来看国内用户习惯的模式。","zh_how":"按 App 或按模式（登录、首页、搜索、个人中心、支付）浏览，看国内用户已经习惯的做法，含小程序版本；需要海外对照时配合 Mobbin。","access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/uinotes.webp","source":"screenshot","captured_at":"2026-09-27T09:31:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"screensdesign","name":"ScreensDesign","name_zh":null,"url":"https://screensdesign.com","host":"screensdesign.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["mobile","onboarding","paywall","video"],"best_for":"Mobile app flows as videos with onboarding and paywall focus","how_to_use":"Use for subscription-app onboarding and paywall sequences; /store-screenshots/ holds App Store screenshot designs (it absorbed Scrnshts)","zh":"移动端流程录屏库，主打订阅制 App 的引导页和付费墙；另收 App Store 截图设计。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["designvault.io now redirects here (checked 2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/screensdesign.webp","source":"screenshot","captured_at":"2026-09-27T09:31:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"paywallscreens","name":"Paywall Screens","name_zh":null,"url":"https://www.paywallscreens.com","host":"paywallscreens.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["paywall","subscription"],"best_for":"Paywall screens from subscription apps","how_to_use":"Compare plan layout, trial framing and legal text placement","zh":"订阅制 App 付费墙截图库；比较套餐布局、试用话术与法务文案摆放位置时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/paywallscreens.webp","source":"screenshot","captured_at":"2026-09-27T09:31:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"reallygoodux","name":"Really Good UX","name_zh":null,"url":"https://goodux.appcues.com","host":"goodux.appcues.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"pattern-library","tags":["onboarding","ux-examples"],"best_for":"Annotated examples of good product UX moments, strongest on onboarding and activation","how_to_use":"Filter by pattern; each example explains why it works","zh":"带批注的产品 UX 案例库，引导与激活类最强；按模式筛选，每条都解释为什么好。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/reallygoodux.webp","source":"screenshot","captured_at":"2026-09-27T09:31:13Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"useronboard","name":"UserOnboard","name_zh":null,"url":"https://www.useronboard.com","host":"useronboard.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"archive","tags":["onboarding","teardown"],"best_for":"Step-by-step onboarding teardowns with commentary","how_to_use":"Read one teardown before designing a first-run experience","zh":"各家产品新手引导的逐屏拆解加点评，做首次启动体验前先读一两篇找反面教材。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/useronboard.webp","source":"screenshot","captured_at":"2026-09-27T09:31:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"collectui","name":"Collect UI","name_zh":null,"url":"https://collectui.com","host":"collectui.com","domain":"app-ui","section":"screens-flows","also":[],"kind":"gallery","tags":["concept","daily-ui"],"best_for":"Concept shots grouped by component or screen type; pretty but unshipped - check against real-product libraries","how_to_use":"Use only for visual treatment ideas","zh":"按组件归类的概念稿合集，好看但大多没上线；只取视觉处理灵感，别当落地依据。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Concept shots from Dribbble-style challenges, mostly never shipped; do not treat them as evidence of a working pattern."],"agent_access":"static","thumb":{"src":"assets/thumbs/collectui.webp","source":"screenshot","captured_at":"2026-09-27T10:27:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"deceptive-design","name":"Deceptive Patterns","name_zh":null,"url":"https://deceptive.design","host":"deceptive.design","domain":"app-ui","section":"screens-flows","also":[],"kind":"guideline","tags":["dark-patterns","ethics"],"best_for":"Taxonomy and hall of shame of manipulative patterns, with legal cases","how_to_use":"Check a growth idea against the Types list (confirmshaming, sneaking, obstruction and the rest) and the Laws and cases pages before shipping it.","zh":"暗黑模式的分类学与耻辱柱，附法律案例；增长点子上线前先对照类型表查一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/deceptive-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"component-gallery","name":"The Component Gallery","name_zh":null,"url":"https://component.gallery","host":"component.gallery","domain":"app-ui","section":"components","also":[],"kind":"pattern-library","tags":["components","design-systems"],"best_for":"Every common UI component with its names and implementations across dozens of design systems, linked to their docs and code","how_to_use":"Open /components/<name> (for example /components/accordion) to compare names, anatomy and behaviour across systems, each linked to its docs and code; /design-systems lists the sources.","zh":"组件横向对照表，同一个组件在几十个设计系统里的命名、结构和实现并排可查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Accordion across systems (example)","url":"https://component.gallery/components/accordion/"},{"label":"Source data (GitHub)","url":"https://github.com/inbn/component-gallery"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/component-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:31:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"checklist-design","name":"Checklist Design","name_zh":null,"url":"https://www.checklist.design","host":"checklist.design","domain":"app-ui","section":"components","also":[],"kind":"pattern-library","tags":["checklist","pages","flows"],"best_for":"Checklists of what a component, page or flow must include","how_to_use":"Open the checklist for the component, page or flow you are about to hand off (for example login, pricing page, table) and tick each item against the design; missing states are the usual gap.","zh":"组件、页面、流程各自该包含什么的清单库；交付前拿对应清单逐项核对，防漏项。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/checklist-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:13Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uiguideline","name":"UI Guideline","name_zh":null,"url":"https://www.uiguideline.com","host":"uiguideline.com","domain":"app-ui","section":"components","also":[],"kind":"pattern-library","tags":["components","anatomy"],"best_for":"Component standards synthesised from many design systems: anatomy, properties, states","how_to_use":"Open a component to see its anatomy, properties and states synthesised from several systems; copy the state list into the spec so none is forgotten.","zh":"汇总各大设计系统的组件规范，讲清部件结构、属性与状态；命名和列状态时来查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/uiguideline.webp","source":"screenshot","captured_at":"2026-09-27T09:31:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"open-ui","name":"Open UI","name_zh":null,"url":"https://open-ui.org","host":"open-ui.org","domain":"app-ui","section":"components","also":[],"kind":"guideline","tags":["components","research"],"best_for":"W3C community research on component anatomy, naming and behaviour across systems","how_to_use":"Use the research pages per component (select, popover, tabs) for anatomy names and the cross-system comparison before naming parts or states in a spec; proposals here often become HTML features (popover, customizable select).","zh":"W3C 社区的组件解剖研究，横向对比各系统的命名与行为；给部件和状态起名时查它的矩阵。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/open-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:31:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uiplaybook","name":"UI Playbook","name_zh":null,"url":"https://uiplaybook.dev","host":"uiplaybook.dev","domain":"app-ui","section":"components","also":[],"kind":"pattern-library","tags":["components","best-practice"],"best_for":"Documented collection of component best practices","how_to_use":"Quick reminder of do and don't per component","zh":"组件最佳实践速查，按组件列出该做和不该做；画稿前花两分钟过一遍避免低级错误。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/uiplaybook.webp","source":"screenshot","captured_at":"2026-09-27T09:31:17Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uxpatterns-dev","name":"UX Patterns for Developers","name_zh":null,"url":"https://uxpatterns.dev","host":"uxpatterns.dev","domain":"app-ui","section":"components","also":["ai:design-mcp-servers"],"kind":"pattern-library","tags":["patterns","a11y","implementation","mcp","llms-txt"],"best_for":"90+ UI patterns, each documented with anatomy, best practices, accessibility and testing, framework-agnostic, with an MCP server and llms.txt for agents","how_to_use":"Before building a pattern you have not specified (combobox, infinite scroll, date input), read its page or point the agent at /llms.txt or the MCP server.","zh":"92 个以上 UI 模式，每个都写了结构、最佳实践、无障碍与测试，并提供 MCP 与 llms.txt；实现陌生模式前先查。","zh_how":"实现还没写规格的模式（组合框、无限滚动、日期输入）前先读对应页面，或让 agent 读 /llms.txt、接入 MCP。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt","url":"https://uxpatterns.dev/llms.txt"}],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/uxpatterns-dev.webp","source":"screenshot","captured_at":"2026-09-27T09:31:22Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"apple-hig","name":"Apple Human Interface Guidelines","name_zh":null,"url":"https://developer.apple.com/design/human-interface-guidelines","host":"developer.apple.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["ios","ipados","macos","watchos","visionos"],"best_for":"Authoritative conventions for every Apple platform, including the current Liquid Glass material, layout, typography, navigation and app icons","how_to_use":"Read the platform page, then the component pages (tab bars, toolbars, sheets) and Materials for Liquid Glass. The HTML is a JavaScript app; agents should fetch the same page as JSON: developer.apple.com/tutorials/data/design/human-interface-guidelines/<page>.json.","zh":"Apple 各平台界面的权威规范，含 Liquid Glass 材质、布局、字体与导航；站点是 JS 应用，需用浏览器工具读。","zh_how":"先读平台总览，再读组件页（标签栏、工具栏、表单）和 Materials（Liquid Glass 材质）。网页是 JS 应用，agent 应改取同名 JSON：developer.apple.com/tutorials/data/design/human-interface-guidelines/<页面>.json。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Materials (Liquid Glass)","url":"https://developer.apple.com/design/human-interface-guidelines/materials"},{"label":"Tab bars","url":"https://developer.apple.com/design/human-interface-guidelines/tab-bars"},{"label":"Accessibility","url":"https://developer.apple.com/design/human-interface-guidelines/accessibility"}],"api":{"url":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/{page}.json","sample":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/materials.json"},"caveats":["Guidance changes every June with the new OS releases; check the page, not a remembered number."],"agent_access":"js","thumb":{"src":"assets/thumbs/apple-hig.webp","source":"screenshot","captured_at":"2026-09-27T09:31:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"material-3","name":"Material Design 3","name_zh":null,"url":"https://m3.material.io","host":"m3.material.io","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["android","web","tokens","expressive"],"best_for":"Google's system including M3 Expressive: colour roles and dynamic colour, type scale, shape, motion, adaptive layout, components","how_to_use":"Read Foundations, then Styles (colour roles, type scale, shape, motion) and the component page; M3 Expressive adds the springs-based motion scheme and new components. The site needs a browser; agents can read the Material Web component docs as Markdown on GitHub.","zh":"Google 的设计系统，含 M3 Expressive、动态取色、色彩角色、字阶、形状与动效；按 Foundations、Styles、Components 顺序读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"M3 Expressive overview","url":"https://m3.material.io/blog/building-with-m3-expressive"},{"label":"Colour roles","url":"https://m3.material.io/styles/color/roles"},{"label":"Material Web docs (Markdown, GitHub)","url":"https://github.com/material-components/material-web/tree/main/docs"}],"api":null,"caveats":["Every page answers a plain fetch with 'This website requires JavaScript'; the GitHub docs cover only the web components."],"agent_access":"js","thumb":{"src":"assets/thumbs/material-3.webp","source":"screenshot","captured_at":"2026-09-27T09:31:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"harmonyos-design","name":"HarmonyOS Design","name_zh":null,"url":"https://developer.huawei.com/consumer/cn/design/","host":"developer.huawei.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["harmonyos","multi-device"],"best_for":"Official HarmonyOS guidelines: multi-device adaptive layout, HarmonyOS Sans, icons, motion, colour, plus resource downloads","how_to_use":"Read the one-design-many-devices and layout pages first, then typography (HarmonyOS Sans), icons (HarmonyOS Symbol) and motion; downloads live under 设计资源. The portal needs a browser; the OpenHarmony UX design docs are the Markdown path for agents.","zh":"华为 HarmonyOS 官方设计规范，含多设备自适应布局、HarmonyOS Sans、图标与动效，附资源下载。","zh_how":"先读“一次设计、多端部署”和布局章节，再读字体（HarmonyOS Sans）、图标（HarmonyOS Symbol）与动效；资源下载在“设计资源”。门户需要浏览器，agent 可读 OpenHarmony 的 UX 设计文档（Markdown）。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"设计资源 (downloads)","url":"https://developer.huawei.com/consumer/cn/design/resource/"},{"label":"OpenHarmony UX design docs (Markdown, GitHub mirror)","url":"https://github.com/openharmony/docs/tree/master/zh-cn/design/ux-design"}],"api":null,"caveats":["The portal serves only a title to a plain fetch.","The OpenHarmony docs describe the open base system; HarmonyOS 5/6 visual features such as 沉浸光感 are only on the Huawei portal."],"agent_access":"js","thumb":{"src":"assets/thumbs/harmonyos-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wechat-miniprogram-design","name":"WeChat Mini Program Design Guidelines","name_zh":null,"url":"https://developers.weixin.qq.com/miniprogram/design/","host":"developers.weixin.qq.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["wechat","mini-program"],"best_for":"Official mini-program rules: navigation and the capsule button, feedback, touch targets, typography and colour","how_to_use":"Read it before drawing any mini-program screen: the capsule button area is reserved, the navigation bar and tab bar rules are strict, and design drafts use a 375 px or 390 px base width; the large-screen adaptation guide covers PC and tablet.","zh":"微信小程序官方设计规范：导航与胶囊按钮、反馈、触控热区、字体与色彩；动手画界面前必读。","zh_how":"画任何小程序界面前先读：右上角胶囊区域必须留出，导航栏与标签栏规则严格，设计稿以 375px 或 390px 为基准宽度；大屏适配指南覆盖 PC 与平板。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"English edition","url":"https://developers.weixin.qq.com/miniprogram/en/design/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wechat-miniprogram-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"apple-design-resources","name":"Apple Design Resources","name_zh":null,"url":"https://developer.apple.com/design/resources/","host":"developer.apple.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"asset-library","tags":["ios","macos","templates","sf-symbols"],"best_for":"Official UI kits, device bezels, SF Symbols app, Icon Composer and fonts","how_to_use":"Download the UI kit matching the OS version you target (Figma or Sketch), Icon Composer for layered app icons and the SF Symbols app to look up symbol names; fonts are a separate download.","zh":"Apple 官方 UI 套件、设备边框、SF Symbols 与字体下载；按目标系统版本选包，授权限做 Apple 平台设计。","zh_how":null,"access":"free","login":false,"license":"Apple licence: for designing apps for Apple platforms","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/apple-design-resources.webp","source":"screenshot","captured_at":"2026-09-27T09:46:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"android-design","name":"Android design guidance","name_zh":null,"url":"https://developer.android.com/design","host":"developer.android.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["android","large-screen","wear","tv","xr","widgets"],"best_for":"Platform specifics Material does not cover: system bars, edge-to-edge, large screens and foldables, widgets, Wear, TV, XR","how_to_use":"Use for what Material leaves to the platform: system bars and edge-to-edge, predictive back, large screens and foldables, widgets, Wear OS, TV and XR; pick the form factor first.","zh":"Android 官方设计指南，补 Material 没覆盖的部分：系统栏、边到边、大屏折叠屏、Wear、TV 等。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["A plain fetch is redirected to Google sign-in (302 to accounts.google.com on 2026-09-27); use a real browser."],"agent_access":"static","thumb":{"src":"assets/thumbs/android-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fluent-2","name":"Fluent 2","name_zh":null,"url":"https://fluent2.microsoft.design","host":"fluent2.microsoft.design","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["windows","web","microsoft"],"best_for":"Microsoft's cross-platform design system: tokens, components, motion, accessibility","how_to_use":"Start at Get started > Design for tokens, type and colour, then open Components for your platform (web/react, windows, ios, android); use it for Microsoft 365 add-ins and Windows apps.","zh":"微软跨平台设计系统，含 token、组件、动效和无障碍规范；做微软生态产品时照它对齐。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Components: web (React)","url":"https://fluent2.microsoft.design/components/web/react"},{"label":"Get started: design","url":"https://fluent2.microsoft.design/get-started/design"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fluent-2.webp","source":"screenshot","captured_at":"2026-09-27T09:31:27Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"windows-app-design","name":"Windows app design","name_zh":null,"url":"https://learn.microsoft.com/en-us/windows/apps/design/","host":"learn.microsoft.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["windows","desktop"],"best_for":"Desktop conventions for Windows 11 apps: title bar, navigation view, materials, typography, input","how_to_use":"Read before designing an Electron or Tauri app that should feel native on Windows","zh":"Windows 11 桌面应用设计规范：标题栏、导航、材质、字体、输入；做 Electron 或 Tauri 应用要原生感时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/windows-app-design.webp","source":"screenshot","captured_at":"2026-09-27T10:27:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gnome-hig","name":"GNOME HIG","name_zh":null,"url":"https://developer.gnome.org/hig/","host":"developer.gnome.org","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["linux","desktop"],"best_for":"Clear, compact desktop-application guidelines; good general desktop advice even off Linux","how_to_use":"Read the Patterns (header bars, navigation, feedback, selection) and the writing-style guidance; the rules are short and transfer to any desktop app.","zh":"GNOME 的桌面应用规范，写得清楚紧凑；就算不在 Linux 做设计，patterns 章的通用桌面建议也值得读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/gnome-hig.webp","source":"screenshot","captured_at":"2026-09-27T09:31:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"alipay-miniprogram-design","name":"Alipay Mini Program design","name_zh":null,"url":"https://opendocs.alipay.com/mini/design","host":"opendocs.alipay.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["alipay","mini-program"],"best_for":"Alipay's mini-program design specification and component guidance","how_to_use":"Use with the WeChat guideline when one mini-program ships to both hosts; check the navigation bar, capsule and component differences before sharing one design.","zh":"支付宝小程序的设计规范与组件指引；同时上微信和支付宝时配合微信规范一起用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["The documentation portal is JavaScript-rendered for agents."],"agent_access":"js","thumb":{"src":"assets/thumbs/alipay-miniprogram-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:36Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"clig","name":"Command Line Interface Guidelines","name_zh":null,"url":"https://clig.dev","host":"clig.dev","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["cli","tui","developer-tools"],"best_for":"Human-first principles for CLI design: output, errors, help, flags, interactivity","how_to_use":"Read Output, Errors and Help before designing a CLI or TUI: human-readable output by default with --json for machines, messages to stderr, errors that say how to fix the problem, and help with examples.","zh":"命令行界面设计准则，讲输出、报错、帮助和参数的以人为本原则；产品界面是终端时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/clig.webp","source":"screenshot","captured_at":"2026-09-27T09:31:31Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"flutter-design","name":"Flutter UI design docs","name_zh":null,"url":"https://docs.flutter.dev/ui/design","host":"docs.flutter.dev","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["flutter","material","cupertino"],"best_for":"How Material and Cupertino are expressed in Flutter, adaptive and responsive guidance","how_to_use":"Pair with the platform guideline for the target OS","zh":"Flutter 中 Material 与 Cupertino 的落地方式及自适应、响应式指引；配合目标平台的规范一起看。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/flutter-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:33Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"dingtalk-design","name":"DingTalk design resources (钉钉设计开放资源)","name_zh":"钉钉设计开放资源","url":"https://open.dingtalk.com/document/design","host":"open.dingtalk.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["china","enterprise","dingtalk","mini-app","app-icon"],"best_for":"DingTalk's open-platform design guides: partner-app experience standards and review, cool-app (酷应用) design, app-icon specs and downloadable resources","how_to_use":"Read the partner-app experience guide and the icon spec before submitting an app or mini-app to DingTalk; the review follows these rules.","zh":"钉钉开放平台的设计资源：合作方应用上钉体验指南与审核、酷应用体验设计指南、应用图标规范与资源下载。","zh_how":"应用或小程序上架钉钉前，先读合作方应用体验指南和应用图标规范，审核按这些规则执行。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["JavaScript-rendered; open it in a browser."],"agent_access":"js","thumb":{"src":"assets/thumbs/dingtalk-design.webp","source":"screenshot","captured_at":"2026-09-27T10:27:01Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"feishu-design","name":"Feishu design specifications (飞书设计规范)","name_zh":"飞书开放平台设计规范","url":"https://open.feishu.cn/document/tools-and-resources/design-specification/message-card-design-specifications","host":"open.feishu.cn","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["china","enterprise","cards","bots","lark"],"best_for":"Feishu/Lark open-platform design specs, strongest on message cards for bots and notifications, plus web-app and icon guidance","how_to_use":"Start with the message-card spec for any bot or notification UI, then prototype in the card builder; cards render in chat at narrow widths, so design the mobile layout first.","zh":"飞书开放平台设计规范，消息卡片（机器人与通知）部分最有用，另有网页应用与图标指引。","zh_how":"做机器人或通知界面先读消息卡片规范，再用卡片搭建工具出原型；卡片在聊天里宽度很窄，先设计移动端布局。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"multi","region":"cn","entry_points":[],"api":null,"caveats":["JavaScript-rendered documentation portal."],"agent_access":"js","thumb":{"src":"assets/thumbs/feishu-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:37Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"douyin-miniapp-design","name":"Douyin Mini App design guidelines (抖音小程序设计规范)","name_zh":"抖音小程序设计规范","url":"https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/design/design-specification/Design-Principles/Design-Principles","host":"developer.open-douyin.com","domain":"app-ui","section":"platform-guidelines","also":[],"kind":"guideline","tags":["china","mini-program","douyin"],"best_for":"Design principles and industry-specific specifications for Douyin mini apps","how_to_use":"Read it with the WeChat and Alipay guidelines when one mini-program ships on several hosts; check the host navigation bar and capsule differences first.","zh":"抖音小程序的设计原则与分行业规范；同一小程序要上多个宿主时，与微信、支付宝规范一起读。","zh_how":"同一个小程序要上多个宿主时，与微信、支付宝规范对照阅读，先核对各宿主导航栏和胶囊按钮的差异。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/douyin-miniapp-design.webp","source":"screenshot","captured_at":"2026-09-27T10:27:39Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"carbon","name":"Carbon Design System","name_zh":null,"url":"https://carbondesignsystem.com","host":"carbondesignsystem.com","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["enterprise","data-dense","dataviz","ai"],"best_for":"IBM's system: the best public reference for dense enterprise UI, data tables, data visualisation and AI labelling","how_to_use":"Read Patterns (data tables, forms, empty states), Data visualization and Carbon for AI; agents should start from /llms.txt, which indexes every section.","zh":"IBM 的设计系统，高密度企业界面、数据表格与数据可视化的最佳公开参考；Apache-2.0 协议。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://carbondesignsystem.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/carbon.webp","source":"screenshot","captured_at":"2026-09-27T09:32:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"govuk-design-system","name":"GOV.UK Design System","name_zh":null,"url":"https://design-system.service.gov.uk","host":"design-system.service.gov.uk","domain":"app-ui","section":"design-systems","also":["a11y:guidance-patterns"],"kind":"system","tags":["forms","accessibility","plain"],"best_for":"Research-backed patterns for forms, errors and step-by-step services; the gold standard for clarity and accessibility","how_to_use":"Read Patterns (ask users for dates, addresses, names; check answers; question pages) and the error-message guidance; every pattern cites its research.","zh":"英国政府设计系统，表单、报错与分步流程的模式都有研究背书；清晰与无障碍的标杆，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Patterns","url":"https://design-system.service.gov.uk/patterns/"},{"label":"Source (GitHub)","url":"https://github.com/alphagov/govuk-design-system"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/govuk-design-system.webp","source":"screenshot","captured_at":"2026-09-27T09:31:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ant-design","name":"Ant Design","name_zh":null,"url":"https://ant.design","host":"ant.design","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["enterprise","admin","china"],"best_for":"The de facto standard for Chinese enterprise admin products: design values, layout, data entry, data display, feedback, plus the component library","how_to_use":"Read 设计规范 (/docs/spec/introduce-cn) for values, layout, data entry and display, then theme through ConfigProvider tokens. Agents: /llms.txt links the full docs (EN and CN) and a DESIGN.md of the design language. Ant Design Pro and ProComponents are the usual admin layout layer.","zh":"中文企业级后台的事实标准：设计价值观、布局、数据录入与展示、反馈加组件库；MIT 协议。","zh_how":"先读设计规范（/docs/spec/introduce-cn）里的价值观、布局、数据录入与展示，再用 ConfigProvider 的 token 定主题。agent 从 /llms.txt 进入，里面链接了中英文完整文档和一份设计语言的 DESIGN.md。后台布局通常叠加 Ant Design Pro 与 ProComponents。","access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"llms.txt (agent index)","url":"https://ant.design/llms.txt"},{"label":"DESIGN.md of the design language","url":"https://ant.design/design.md"},{"label":"设计规范","url":"https://ant.design/docs/spec/introduce-cn"},{"label":"ProComponents","url":"https://procomponents.ant.design"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ant-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"atlassian-design","name":"Atlassian Design System","name_zh":null,"url":"https://atlassian.design","host":"atlassian.design","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["product","tokens","content"],"best_for":"Well-documented tokens, components and content guidance for complex product suites","how_to_use":"Read Foundations (tokens, spacing, elevation) and Content (voice, writing for UI); agents can start from /llms.txt, which links per-package token and component docs.","zh":"复杂产品套件的设计系统，token、组件与内容文案指引都写得扎实；重点看基础与内容两章。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://atlassian.design/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/atlassian-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"polaris","name":"Shopify Polaris and app design guidelines","name_zh":null,"url":"https://shopify.dev/docs/apps/design","host":"shopify.dev","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["commerce","admin","content"],"best_for":"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","how_to_use":"Read the app design guidelines before designing merchant-admin UI, then the Polaris web component references for the surface you target.","zh":"Shopify 应用设计指南（Built for Shopify 要求、移动优先、与后台一致）与改为 Web Components 的 Polaris；做商家后台类界面时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"Polaris references (web components)","url":"https://shopify.dev/docs/api/polaris"}],"api":null,"caveats":["The legacy React site polaris-react.shopify.com now redirects to the API references (checked 2026-09-27); most of the old pattern and content guidance is gone."],"agent_access":"static","thumb":{"src":"assets/thumbs/polaris.webp","source":"screenshot","captured_at":"2026-09-27T09:31:46Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"primer","name":"GitHub Primer","name_zh":null,"url":"https://primer.style","host":"primer.style","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["developer-tools"],"best_for":"Developer-tool UI: navigation, lists, code-adjacent components, accessibility notes per component","how_to_use":"Read a component page's accessibility and content sections, and the product UI patterns (navigation, empty states, loading, saving); use it for developer tools.","zh":"GitHub 的设计系统，导航、列表、代码类组件齐全且逐个附无障碍说明；做开发者工具产品时参考；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/primer.webp","source":"screenshot","captured_at":"2026-09-27T09:31:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"spectrum","name":"Adobe Spectrum","name_zh":null,"url":"https://spectrum.adobe.com","host":"spectrum.adobe.com","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["creative-tools","desktop"],"best_for":"System for professional creative tools; strong on density, colour and international typography","how_to_use":"Use Spectrum 2 (s2.spectrum.adobe.com) for current tokens and components; the original site keeps the deeper writing on density, colour and international typography.","zh":"Adobe 面向专业创意工具的设计系统，密度、色彩与多语言排版讲得深；新版是 Spectrum 2。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Spectrum 2","url":"https://s2.spectrum.adobe.com"}],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/spectrum.webp","source":"screenshot","captured_at":"2026-09-27T09:31:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"geist","name":"Vercel Geist","name_zh":null,"url":"https://vercel.com/geist/introduction","host":"vercel.com","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["developer-tools","minimal"],"best_for":"Vercel's minimal system: colours, typography, grid, icons, components","how_to_use":"Read Colors (the 10-step scales and their roles), Typography and Grid before borrowing its restrained developer-tool look; it is also the default look many AI generators imitate.","zh":"Vercel 的极简设计系统，颜色、字体、栅格、图标、组件俱全；做开发者工具界面时的克制范本。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/geist.webp","source":"screenshot","captured_at":"2026-09-27T09:31:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cloudscape","name":"AWS Cloudscape","name_zh":null,"url":"https://cloudscape.design","host":"cloudscape.design","domain":"app-ui","section":"design-systems","also":["dataviz:dashboards-bigscreen"],"kind":"system","tags":["console","enterprise","genai"],"best_for":"Patterns for complex cloud consoles: resource tables, create flows, dashboards, generative-AI patterns","how_to_use":"Read Patterns for table views, create flows, dashboards and generative-AI features; agents can start from /llms.txt (package, install and component index).","zh":"AWS 的控制台设计系统，讲资源表格、创建流程、仪表盘与生成式 AI 模式；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://cloudscape.design/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/cloudscape.webp","source":"screenshot","captured_at":"2026-09-27T09:31:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pajamas","name":"GitLab Pajamas","name_zh":null,"url":"https://design.gitlab.com","host":"design.gitlab.com","domain":"app-ui","section":"design-systems","also":["ai:ai-product-guidelines"],"kind":"system","tags":["open","product","ai"],"best_for":"Fully open design system with unusually candid usage guidance, including AI-human interaction","how_to_use":"Read the Usability and Patterns sections and the AI-human interaction guidance; the usage notes are unusually frank about when not to use a component.","zh":"GitLab 完全开放的设计系统，用法指引异常坦诚，还含 AI 与人交互的模式；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pajamas.webp","source":"screenshot","captured_at":"2026-09-27T09:31:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uswds","name":"U.S. Web Design System","name_zh":null,"url":"https://designsystem.digital.gov","host":"designsystem.digital.gov","domain":"app-ui","section":"design-systems","also":["a11y:guidance-patterns"],"kind":"system","tags":["public-sector","accessibility"],"best_for":"Accessible public-sector components, tokens and patterns","how_to_use":"Use the patterns (create a user profile, complete a complex form, select a language) and the accessibility notes for trust-first, regulated services; compare with GOV.UK for form wording.","zh":"美国联邦政府网站设计系统，组件和模式以无障碍为底线；政务、受监管场景的信任感参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/uswds.webp","source":"screenshot","captured_at":"2026-09-27T09:31:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wise-design","name":"Wise Design","name_zh":null,"url":"https://wise.design","host":"wise.design","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["consumer","fintech","content"],"best_for":"A modern consumer-fintech system with strong brand expression and content guidelines","how_to_use":"Reference for expressive yet usable consumer product UI","zh":"Wise 的消费金融设计系统，品牌表达与内容规范都出彩；做有性格又好用的 C 端产品时参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wise-design.webp","source":"screenshot","captured_at":"2026-09-27T09:31:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"arco-design","name":"Arco Design","name_zh":null,"url":"https://arco.design","host":"arco.design","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["enterprise","china","bytedance"],"best_for":"ByteDance's enterprise system with design guidelines and a style-customisation platform","how_to_use":"Use as a lighter-toned alternative to Ant Design; the style-customisation platform exports a theme package, which is the part worth copying.","zh":"字节跳动的企业级设计系统，含设计规范与风格定制平台；比 Ant Design 视觉更轻，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/arco-design.webp","source":"screenshot","captured_at":"2026-09-27T09:32:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"semi-design","name":"Semi Design","name_zh":null,"url":"https://semi.design","host":"semi.design","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["enterprise","china","douyin"],"best_for":"Douyin's design system with design-to-code tooling and theme store","how_to_use":"Reference for content-platform back offices; its design-to-code tooling and theme store show how a Chinese system ships themes, and VisActor provides matching chart themes.","zh":"抖音团队的设计系统，带设计转代码工具与主题商店；做内容平台后台可参考，MIT 协议。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/semi-design.webp","source":"screenshot","captured_at":"2026-09-27T09:32:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tdesign","name":"TDesign","name_zh":null,"url":"https://tdesign.tencent.com","host":"tdesign.tencent.com","domain":"app-ui","section":"design-systems","also":["ai:design-mcp-servers"],"kind":"system","tags":["enterprise","china","tencent","mini-program","flutter"],"best_for":"Tencent's system spanning web, mobile, mini-program and Flutter with shared design values","how_to_use":"Pick when one product must ship across web, mobile, mini-program and Flutter; agents can read /llms.txt (design-guide index) and connect the official MCP server (npx -y tdesign-mcp-server@latest: component list, docs, DOM structure, changelog, icon search).","zh":"腾讯的设计体系，一套价值观横跨 Web、移动端、小程序和 Flutter；多端同发时选它；MIT。","zh_how":"一个产品要同时上 Web、移动端、小程序和 Flutter 时选它；agent 可读 /llms.txt（设计指南索引），并接入官方 MCP（npx -y tdesign-mcp-server@latest，提供组件列表、文档、DOM 结构、更新日志与图标搜索）。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"llms.txt (agent index)","url":"https://tdesign.tencent.com/llms.txt"},{"label":"TDesign MCP server (source)","url":"https://cnb.cool/tencent/tdesign/tdesign-mcp-server"},{"label":"Components per stack (Vue 3, React, mini-program, mobile, Flutter)","url":"https://tdesign.tencent.com/vue-next/overview"}],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/tdesign.webp","source":"screenshot","captured_at":"2026-09-27T09:32:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"astro-uxds","name":"Astro UX Design System","name_zh":null,"url":"https://www.astrouxds.com","host":"astrouxds.com","domain":"app-ui","section":"design-systems","also":["dataviz:dashboards-bigscreen"],"kind":"system","tags":["mission-critical","control-room","dashboard"],"best_for":"Design system for space-operations consoles: status semantics, dark control-room UI, monitoring patterns","how_to_use":"Reference for operations centres, monitoring walls and digital-twin consoles","zh":"面向航天运控台的设计系统：状态语义、暗色控制室界面、监控模式；做监控大屏可参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/astro-uxds.webp","source":"screenshot","captured_at":"2026-09-27T09:32:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"siemens-ix","name":"Siemens Industrial Experience","name_zh":null,"url":"https://ix.siemens.io","host":"ix.siemens.io","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["industrial","dashboard"],"best_for":"Open industrial design system for plant and device software","how_to_use":"Reference for industrial and IoT applications","zh":"西门子开源的工业设计系统，面向工厂和设备软件界面；做工业、IoT 产品时参考。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/siemens-ix.webp","source":"screenshot","captured_at":"2026-09-27T09:32:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"designsystemsrepo","name":"Design Systems Repo","name_zh":null,"url":"https://designsystemsrepo.com/design-systems/","host":"designsystemsrepo.com","domain":"app-ui","section":"design-systems","also":[],"kind":"archive","tags":["directory"],"best_for":"Directory of public design systems with links to their docs, code and tools","how_to_use":"Filter by company or industry to find two systems from a comparable domain, then read their pattern and content pages, not just components.","zh":"公开设计系统的目录，附文档、代码与工具链接；找同行业可比系统时从这里入手。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/designsystemsrepo.webp","source":"screenshot","captured_at":"2026-09-27T09:32:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"digital-agency-ds","name":"Digital Agency Design System (デジタル庁デザインシステム)","name_zh":"日本数字厅设计系统","url":"https://design.digital.go.jp/dads/","host":"design.digital.go.jp","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["japan","government","a11y","markdown-docs","cjk"],"best_for":"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","how_to_use":"The best CJK public-service reference: read the accessibility and form guidance for Japanese UI, and give an agent the Markdown version of the site.","zh":"日本数字厅的政府设计系统（v2.18 测试版）：设计语言、组件、指南与无障碍，附 Figma、HTML 与 React 示例，全站也提供 Markdown 版。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/digital-agency-ds.webp","source":"screenshot","captured_at":"2026-09-27T09:32:05Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"smarthr-design","name":"SmartHR Design System","name_zh":null,"url":"https://smarthr.design","host":"smarthr.design","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["japan","b2b","writing","a11y"],"best_for":"Japanese B2B SaaS system notable for its Japanese writing rules and accessibility guidance","how_to_use":"Read the writing (ライティング) and basic-design sections when designing dense Japanese business UI; its rules on notation and wording transfer to Chinese copy decisions.","zh":"日本 B2B SaaS 的设计系统，日文写作规范与无障碍指南尤其扎实；做高密度日文业务界面时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/smarthr-design.webp","source":"screenshot","captured_at":"2026-09-27T09:32:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"krds","name":"KRDS (Korea Design System)","name_zh":"韩国政府设计系统","url":"https://www.krds.go.kr","host":"krds.go.kr","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["korea","government","a11y","patterns"],"best_for":"Korea's government design system: principles, components, service patterns, code and Figma","how_to_use":"Use the service patterns for Korean public or form-heavy services and compare them with GOV.UK's; needs a browser.","zh":"韩国政府设计系统：原则、组件、服务模式、代码与 Figma；韩文公共服务或表单密集场景参考，可与 GOV.UK 对照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ko","region":"kr","entry_points":[],"api":null,"caveats":["The root answers with a meta refresh to /html/site/index.html; content is script-assembled."],"agent_access":"js","thumb":{"src":"assets/thumbs/krds.webp","source":"screenshot","captured_at":"2026-09-27T09:32:10Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"line-design-system","name":"LINE Design System","name_zh":null,"url":"https://designsystem.line.me","host":"designsystem.line.me","domain":"app-ui","section":"design-systems","also":[],"kind":"system","tags":["messaging","japan","taiwan","thailand"],"best_for":"LINE's system for a messaging super-app used across Japan, Taiwan and Thailand","how_to_use":"Reference for chat-centred mobile products in East Asia; compare its message and list patterns with WeChat's conventions.","zh":"LINE 超级 App 的设计系统，覆盖日本、台湾、泰国市场；以聊天为中心的东亚移动产品参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"multi","region":"jp","entry_points":[],"api":null,"caveats":["JavaScript-rendered; needs a real browser."],"agent_access":"js","thumb":{"src":"assets/thumbs/line-design-system.webp","source":"screenshot","captured_at":"2026-09-27T09:32:12Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"game-ui-database","name":"Game UI Database","name_zh":null,"url":"https://www.gameuidatabase.com","host":"gameuidatabase.com","domain":"app-ui","section":"details-offbeat","also":[],"kind":"pattern-library","tags":["game-ui","hud","menus"],"best_for":"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","how_to_use":"Filter by screen type (HUD, map, inventory, skill tree) for data-wall and immersive ideas","zh":"数万张游戏界面截图库，可按画面类型、控件、配色筛选；做 HUD、浮层或高密度满屏界面时翻。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare-walled for agents (403 to curl on 2026-09-27; a plain fetch gets 'Database Unavailable'); it works in a real browser."],"agent_access":"blocked","thumb":{"src":"assets/thumbs/game-ui-database.webp","source":"og","captured_at":"2026-09-27T10:26:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"interface-in-game","name":"Interface In Game","name_zh":null,"url":"https://interfaceingame.com","host":"interfaceingame.com","domain":"app-ui","section":"details-offbeat","also":[],"kind":"gallery","tags":["game-ui","video"],"best_for":"Game interface screenshots and videos by title and element","how_to_use":"Search by game or by element (health bar, minimap, inventory, dialogue) and use the videos for HUD motion and state changes.","zh":"按游戏和界面元素归档的游戏 UI 截图与视频库，做 HUD 或游戏化界面时看动效表现。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["A SiteGround 'One moment, please...' wall answers plain fetches (2026-09-27)."],"agent_access":"blocked","thumb":{"src":"assets/thumbs/interface-in-game.webp","source":"screenshot","captured_at":"2026-09-27T09:32:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"hudsandguis","name":"HUDS+GUIS","name_zh":null,"url":"https://www.hudsandguis.com","host":"hudsandguis.com","domain":"app-ui","section":"details-offbeat","also":[],"kind":"article","tags":["fui","film"],"best_for":"Fantasy UI from film, TV and games","how_to_use":"Reference for cinematic control-room aesthetics, with a usability pinch of salt","zh":"影视与游戏里的幻想 UI 合集；做控制室式科幻视觉时参考，可用性别当真。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/hudsandguis.webp","source":"screenshot","captured_at":"2026-09-27T09:32:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"scifi-interfaces","name":"Sci-fi Interfaces","name_zh":null,"url":"https://scifiinterfaces.com","host":"scifiinterfaces.com","domain":"app-ui","section":"details-offbeat","also":[],"kind":"article","tags":["fui","critique"],"best_for":"Critical analysis of fictional interfaces: what would and would not work","how_to_use":"Read before borrowing an idea from a film UI","zh":"对科幻电影界面做严肃批判分析的博客；想从电影 UI 借点子之前先读它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/scifi-interfaces.webp","source":"screenshot","captured_at":"2026-09-27T09:32:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"designspells","name":"Design Spells","name_zh":null,"url":"https://www.designspells.com","host":"designspells.com","domain":"app-ui","section":"details-offbeat","also":[],"kind":"gallery","tags":["details","delight","microinteraction"],"best_for":"Small delightful details and easter eggs from shipped products, as short videos","how_to_use":"Use when a product needs one memorable moment","zh":"收录已上线产品里讨巧的小细节和彩蛋，短视频呈现；产品缺一个记忆点时来翻。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Vercel Security Checkpoint answers plain fetches (429 on 2026-09-27)."],"agent_access":"blocked","thumb":{"src":"assets/thumbs/designspells.webp","source":"screenshot","captured_at":"2026-09-27T09:32:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"little-big-details","name":"Little Big Details","name_zh":null,"url":"https://littlebigdetails.com","host":"littlebigdetails.com","domain":"app-ui","section":"details-offbeat","also":[],"kind":"archive","tags":["details"],"best_for":"Archive of thoughtful small UI details","how_to_use":"Skim for ideas that cost little to build","zh":"收集产品中贴心小细节的档案馆；想给界面加点便宜又讨喜的东西时翻一翻。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Archived: no new posts; some linked products have changed since."],"agent_access":"static","thumb":{"src":"assets/thumbs/little-big-details.webp","source":"screenshot","captured_at":"2026-09-27T09:32:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ft-visual-vocabulary","name":"FT Visual Vocabulary","name_zh":null,"url":"https://ft-interactive.github.io/visual-vocabulary/","host":"ft-interactive.github.io","domain":"dataviz","section":"guides-principles","also":[],"kind":"guideline","tags":["chart-choice"],"best_for":"Chart chooser organised by the relationship in the data (deviation, correlation, ranking, distribution, change over time, part-to-whole, spatial, flow)","how_to_use":"Name the relationship first (deviation, correlation, ranking, distribution, change over time, magnitude, part-to-whole, spatial, flow), then pick from that column. The web version is a JavaScript app; agents should read the PDF poster, which also exists in simplified and traditional Chinese and Japanese.","zh":"FT 的图表选择器，按数据里的关系（偏差、相关、排名、分布、随时间变化等）分类；先定关系再选图。","zh_how":"先确定数据关系（偏差、相关、排名、分布、随时间变化、量级、占比、空间、流向），再在对应一栏里选图。网页版是 JS 应用，agent 请读 PDF 海报；海报有简体中文、繁体中文和日文版。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Poster PDF (English)","url":"https://raw.githubusercontent.com/Financial-Times/chart-doctor/main/visual-vocabulary/Visual-vocabulary-en.pdf"},{"label":"海报 PDF（简体中文）","url":"https://raw.githubusercontent.com/Financial-Times/chart-doctor/main/visual-vocabulary/Visual-vocabulary-cn-simplified.pdf"},{"label":"Source and all languages (GitHub, MIT)","url":"https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary"}],"api":null,"caveats":["The interactive site shows agents an empty shell (19 characters of text on 2026-09-27); the posters were last revised years ago, but chart choice by relationship has not changed."],"agent_access":"js","thumb":{"src":"assets/thumbs/ft-visual-vocabulary.webp","source":"og","captured_at":"2026-09-27T10:37:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"data-to-viz","name":"From Data to Viz","name_zh":null,"url":"https://www.data-to-viz.com","host":"data-to-viz.com","domain":"dataviz","section":"guides-principles","also":[],"kind":"guideline","tags":["chart-choice","caveats"],"best_for":"Decision tree from data type to chart, with a caveats section on common mistakes","how_to_use":"Start from the data shape (one or several numeric variables, categoric, numeric plus categoric, map, network, time series), follow the tree to two or three candidate charts, then read the Caveats page (ordering bars, spaghetti lines, dual axes, pie charts) before finalising.","zh":"从数据类型到图表的决策树，附常见错误清单；定稿任何图表前先读它的 Caveats 页。","zh_how":"从数据形态出发（单个或多个数值变量、分类、数值加分类、地图、网络、时间序列），顺着决策树找到两三个候选图表，定稿前再读 Caveats 页（柱子排序、意大利面线图、双轴、饼图等）。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Caveats (graphic pitfalls)","url":"https://www.data-to-viz.com/caveats.html"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/data-to-viz.webp","source":"screenshot","captured_at":"2026-09-27T09:32:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"urban-dataviz-guide","name":"Urban Institute Data Visualization Style Guide","name_zh":null,"url":"https://urbaninstitute.github.io/graphics-styleguide/","host":"urbaninstitute.github.io","domain":"dataviz","section":"guides-principles","also":[],"kind":"guideline","tags":["style-guide","charts","palette","annotation"],"best_for":"The most complete public chart style guide: palette with hex values, type hierarchy, annotation, and rules per chart type, all on one static page","how_to_use":"Copy its structure when writing the chart chapter of a design system: palette and its order, type sizes, titles and source lines, then one section per chart type; replace Urban's own brand values (Lato, #1696d2) with the product's.","zh":"最完整的公开图表风格指南：带色值的配色、字体层级、标注与逐类图表规则，全部在一个静态页面上。","zh_how":"给设计系统写图表章节时照它的结构来：配色与顺序、字号、标题与来源行，再按图表类型分节；把 Urban 自己的品牌值（Lato、#1696d2）换成产品的。","access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"slow","lang":"en","region":"global","entry_points":[{"label":"Source (GitHub)","url":"https://github.com/UrbanInstitute/graphics-styleguide"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/urban-dataviz-guide.webp","source":"screenshot","captured_at":"2026-09-27T09:32:21Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"datavizproject","name":"Data Viz Project","name_zh":null,"url":"https://datavizproject.com","host":"datavizproject.com","domain":"dataviz","section":"guides-principles","also":[],"kind":"pattern-library","tags":["chart-types"],"best_for":"Large catalogue of chart types filterable by function, input and shape","how_to_use":"Filter by Family, Input, Function or Shape to find a less obvious form, then check the chosen chart against FT Visual Vocabulary before committing.","zh":"图表类型大目录，可按功能、输入和形状筛选；想找不那么俗套的图表形式时用它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/datavizproject.webp","source":"screenshot","captured_at":"2026-09-27T09:32:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"carbon-dataviz","name":"Carbon data visualization","name_zh":null,"url":"https://carbondesignsystem.com/data-visualization/getting-started/","host":"carbondesignsystem.com","domain":"dataviz","section":"guides-principles","also":[],"kind":"guideline","tags":["dataviz","enterprise","a11y"],"best_for":"Practical rules for enterprise charts: colour palettes, axes, legends, dashboards, accessibility","how_to_use":"Read Color palettes (categorical order, sequential, alert), then Axes and labels, Legends and the Dashboards page; the categorical palettes come in a fixed order meant to be used as-is.","zh":"IBM Carbon 的企业图表规范：配色板、坐标轴、图例、仪表盘与无障碍规则，做后台图表照它执行。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Color palettes","url":"https://carbondesignsystem.com/data-visualization/color-palettes/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/carbon-dataviz.webp","source":"screenshot","captured_at":"2026-09-27T10:27:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"material-2-dataviz","name":"Material 2 data visualization","name_zh":null,"url":"https://m2.material.io/design/communication/data-visualization.html","host":"m2.material.io","domain":"dataviz","section":"guides-principles","also":[],"kind":"guideline","tags":["dataviz"],"best_for":"Still one of the clearest overviews of chart selection, style, behaviour and dashboard layout","how_to_use":"Read once as a primer on chart selection, style (colour, type, gridlines, labels), behaviour and dashboard layout, then apply one current style guide such as Urban's or Carbon's.","zh":"Material 2 的数据可视化指南，图表选型、样式、行为与仪表盘布局讲得最清楚的入门之一。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Frozen Material 2 documentation; the page is a JavaScript app, so agents see an empty shell."],"agent_access":"js","thumb":{"src":"assets/thumbs/material-2-dataviz.webp","source":"screenshot","captured_at":"2026-09-27T10:45:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"chartability","name":"Chartability","name_zh":null,"url":"https://chartability.fizz.studio","host":"chartability.fizz.studio","domain":"dataviz","section":"guides-principles","also":["a11y:guidance-patterns"],"kind":"guideline","tags":["dataviz","a11y"],"best_for":"Audit heuristics for accessible data visualisation","how_to_use":"Test a chart against the POUR-CAF principles (perceivable, operable, understandable, robust, compromising, assistive, flexible), starting with the critical tests: contrast, colour-only encoding, keyboard access, text alternatives and a data table.","zh":"数据可视化的无障碍审计启发式清单；任何承载关键信息的图表都该过一遍。","zh_how":"按 POUR-CAF 原则（可感知、可操作、可理解、健壮、可妥协、辅助、灵活）检查图表，先做关键项：对比度、只靠颜色编码、键盘可达、文本替代和数据表。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/chartability.webp","source":"screenshot","captured_at":"2026-09-27T09:32:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"datawrapper-blog","name":"Datawrapper blog and Academy","name_zh":null,"url":"https://www.datawrapper.de/blog","host":"datawrapper.de","domain":"dataviz","section":"guides-principles","also":[],"kind":"article","tags":["dataviz","colour"],"best_for":"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","how_to_use":"Start with 'Which color scale to use when visualizing data' and the rest of the colour series; use the Academy for chart-type conventions (bars, lines, maps, tables) and the tool itself to test a chart fast.","zh":"Datawrapper 团队的博客与 Academy：图表设计实操，数据配色系列最值得读，Academy 按图表类型讲惯例，也可直接用它的免费工具快速试图。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Which color scale to use","url":"https://www.datawrapper.de/blog/which-color-scale-to-use-in-data-vis"},{"label":"Datawrapper Academy","url":"https://www.datawrapper.de/academy"},{"label":"Datawrapper (chart tool)","url":"https://www.datawrapper.de"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/datawrapper-blog.webp","source":"screenshot","captured_at":"2026-09-27T09:32:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"visual-display-quantitative","name":"The Visual Display of Quantitative Information","name_zh":null,"url":"https://www.edwardtufte.com/book/the-visual-display-of-quantitative-information/","host":"edwardtufte.com","domain":"dataviz","section":"guides-principles","also":["reading:books"],"kind":"book","tags":["dataviz"],"best_for":"Tufte on data-ink, chartjunk and graphical integrity","how_to_use":"Read the chapters on graphical integrity and data-ink before a dashboard critique; cite the lie factor and chartjunk by name.","zh":"Tufte 的量化信息视觉呈现，讲数据墨水比、chartjunk 与图形诚信；做任何图表仪表盘的原理书。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Paid printed book; there is no online text for an agent to consult."],"agent_access":"static","thumb":{"src":"assets/thumbs/visual-display-quantitative.webp","source":"screenshot","captured_at":"2026-09-27T09:32:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"storytelling-with-data","name":"Storytelling with Data","name_zh":null,"url":"https://www.storytellingwithdata.com/books","host":"storytellingwithdata.com","domain":"dataviz","section":"guides-principles","also":["reading:books"],"kind":"book","tags":["dataviz","business"],"best_for":"Practical business chart design and narrative","how_to_use":"For decks and dashboards aimed at managers: remove clutter first, then focus attention with one accent colour and an action title that states the takeaway.","zh":"讲商业图表设计与数据叙事的实用书；给管理层做汇报和仪表盘时读，付费。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Paid books; the site's blog and community challenges are the free part."],"agent_access":"static","thumb":{"src":"assets/thumbs/storytelling-with-data.webp","source":"screenshot","captured_at":"2026-09-27T09:32:35Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ons-dataviz","name":"ONS data visualisation guidance","name_zh":null,"url":"https://service-manual.ons.gov.uk/data-visualisation","host":"service-manual.ons.gov.uk","domain":"dataviz","section":"guides-principles","also":[],"kind":"guideline","tags":["government","charts","a11y","tables"],"best_for":"UK Office for National Statistics guidance on charts, tables and colour: chart choice, accessible colour, titles, annotation and the specifications behind its published charts","how_to_use":"Use for public-facing statistics where clarity and accessibility beat novelty; read the colour guidance and the chart-type pages before styling.","zh":"英国国家统计局的图表、表格与配色指南：选图、无障碍配色、标题与标注；面向公众的统计数据，清晰和可访问优先于新奇。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ons-dataviz.webp","source":"screenshot","captured_at":"2026-09-27T09:32:30Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"dataviz-catalogue","name":"The Data Visualisation Catalogue","name_zh":null,"url":"https://datavizcatalogue.com","host":"datavizcatalogue.com","domain":"dataviz","section":"guides-principles","also":[],"kind":"pattern-library","tags":["chart-types","chart-choice","anatomy"],"best_for":"Chart-type catalogue searchable by function (comparison, distribution, part-to-whole, relationships) with anatomy, when-to-use notes and tool lists per chart","how_to_use":"Use Search by Function when a less common chart might fit, and read the anatomy notes to name the parts in a spec.","zh":"按功能（比较、分布、占比、关系）检索的图表类型目录，每种图附结构说明、适用场景与工具；与 FT Visual Vocabulary 搭配找不常见的图表。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/dataviz-catalogue.webp","source":"screenshot","captured_at":"2026-09-27T09:32:44Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"fundamentals-of-dataviz","name":"Fundamentals of Data Visualization","name_zh":null,"url":"https://clauswilke.com/dataviz/","host":"clauswilke.com","domain":"dataviz","section":"guides-principles","also":["reading:books"],"kind":"book","tags":["free-online","colour","pitfalls","agent-readable"],"best_for":"Claus Wilke's complete book, free online: choosing visualisations, colour use and pitfalls, proportional ink, overlapping points, and figure design","how_to_use":"Read the colour chapters (colour scales, common pitfalls of colour use) and 'The principle of proportional ink' before designing charts; the whole text is static HTML an agent can read.","zh":"Claus Wilke 的完整在线免费书：选图、配色与常见陷阱、比例墨水原则、点重叠与图形设计；设计图表前先读配色与陷阱章节。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fundamentals-of-dataviz.webp","source":"screenshot","captured_at":"2026-09-27T09:32:36Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"echarts","name":"Apache ECharts","name_zh":null,"url":"https://echarts.apache.org","host":"echarts.apache.org","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["charts","canvas","china"],"best_for":"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","how_to_use":"Open the closest example and edit its option live, then look up each key in the option reference; define colours, fonts and axis styles once in a theme (the theme builder exports JSON) instead of per chart.","zh":"功能全的图表库，中文仪表盘与大屏项目的事实主力；定义一次主题对象，别逐图改样式；Apache-2.0。","zh_how":"先打开最接近的示例在线改 option，再到配置项手册逐项查；颜色、字体、坐标轴样式在主题里统一定义一次（主题编辑器可导出 JSON），不要逐图改样式。","access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Examples (live option editor)","url":"https://echarts.apache.org/examples/en/index.html"},{"label":"Option reference","url":"https://echarts.apache.org/en/option.html"},{"label":"Theme builder","url":"https://echarts.apache.org/en/theme-builder.html"},{"label":"使用手册（中文）","url":"https://echarts.apache.org/handbook/zh/get-started/"}],"api":null,"caveats":["The official ECharts Gallery and Make A Pie community sites are closed; community examples now live on isqqw (see isqqw-echarts)."],"agent_access":"static","thumb":{"src":"assets/thumbs/echarts.webp","source":"screenshot","captured_at":"2026-09-27T09:32:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"vega-lite","name":"Vega-Lite","name_zh":null,"url":"https://vega.github.io/vega-lite/","host":"vega.github.io","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["charts","declarative","json-spec","agent-readable"],"best_for":"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","how_to_use":"Have the agent write a Vega-Lite spec (data, mark, encoding) instead of bespoke chart code, validate it against the schema, render with vega-embed, and set colours and fonts once in a config object; Altair produces the same specs from Python.","zh":"声明式 JSON 交互图表语法，附公开的 JSON Schema；agent 可以把图表当数据输出并在渲染前校验。","zh_how":"让 agent 输出 Vega-Lite 规格（data、mark、encoding）而不是手写图表代码，用 schema 校验后交给 vega-embed 渲染；颜色和字体在 config 里统一设置。Python 侧可用 Altair 生成同样的规格。","access":"free","login":false,"license":"BSD-3-Clause","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Examples","url":"https://vega.github.io/vega-lite/examples/"},{"label":"GitHub","url":"https://github.com/vega/vega-lite"}],"api":{"url":"https://vega.github.io/schema/vega-lite/v6.json","sample":"https://vega.github.io/schema/vega-lite/v6.json"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/vega-lite.webp","source":"screenshot","captured_at":"2026-09-27T09:32:34Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"antv","name":"AntV","name_zh":null,"url":"https://antv.antgroup.com","host":"antv.antgroup.com","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["g2","g6","l7","china"],"best_for":"Ant Group's visualisation stack (statistical charts, graphs, maps) with design principles for data graphics","how_to_use":"Read the design spec (设计价值观, 色板, 标题与注释, 标签) before picking G2 (statistical charts), G6 (graphs) or L7 (maps). Agents: /llms.txt links Markdown versions of every spec page.","zh":"蚂蚁集团的可视化技术栈与数据图形设计原则；先读设计原则，再翻 G2、G6、L7 的图表示例，MIT。","zh_how":"先读设计规范（设计价值观、色板、标题与注释、标签），再按需选 G2（统计图表）、G6（关系图）或 L7（地图）。agent 从 /llms.txt 进入，每个规范页都有 Markdown 版本。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"llms.txt (agent index, Markdown spec pages)","url":"https://antv.antgroup.com/llms.txt"},{"label":"设计价值观","url":"https://antv.antgroup.com/zh/specification/principles/basic/"},{"label":"G2","url":"https://g2.antv.antgroup.com"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/antv.webp","source":"screenshot","captured_at":"2026-09-27T09:32:36Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tremor","name":"Tremor","name_zh":null,"url":"https://tremor.so","host":"tremor.so","domain":"dataviz","section":"chart-libraries","also":["code:components"],"kind":"library","tags":["react","dashboard","charts"],"best_for":"React and Tailwind components for charts and dashboards; the team joined Vercel in 2025","how_to_use":"Use for a quick analytical UI in a React and Tailwind stack, then restyle the defaults to the product's tokens.","zh":"面向仪表盘与图表的 React 组件库，搭分析类界面很快；默认样式记得重塑，Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The site says 'Tremor is joining Vercel' (checked 2026-09-27) and the open-source repo was last pushed 2025-10; check activity before adopting."],"agent_access":"static","thumb":{"src":"assets/thumbs/tremor.webp","source":"screenshot","captured_at":"2026-09-27T09:32:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"d3","name":"D3","name_zh":null,"url":"https://d3js.org","host":"d3js.org","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["dataviz","svg"],"best_for":"Low-level toolkit for bespoke data visualisation","how_to_use":"Use Observable Plot for standard charts and D3 only for bespoke forms (custom layouts, force, geo projections); pick the needed d3-* modules rather than the whole bundle.","zh":"定制数据可视化的底层工具箱；标准图表交给 Observable Plot，非标定制才上 D3；ISC。","zh_how":null,"access":"free","login":false,"license":"ISC","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/d3.webp","source":"screenshot","captured_at":"2026-09-27T09:32:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"observable-plot","name":"Observable Plot","name_zh":null,"url":"https://observablehq.com/plot/","host":"observablehq.com","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["charts","grammar-of-graphics","d3","svg"],"best_for":"Concise grammar-of-graphics chart library from the D3 team: marks, scales and facets with good defaults for exploratory and editorial charts","how_to_use":"Reach for it before D3 for standard charts: one Plot.plot({marks: [...]}) call per chart; restyle through the style option and CSS, and drop to D3 only for custom layouts.","zh":"D3 团队出品的图形语法图表库（mark、scale、facet），默认值出色；探索性和编辑型图表首选，D3 太底层时用它。","zh_how":null,"access":"free","login":false,"license":"ISC","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/observablehq/plot"}],"api":null,"caveats":["observablehq.com answers plain fetches with a Vercel security checkpoint (429 on 2026-09-27); the GitHub README is the agent path."],"agent_access":"blocked","thumb":{"src":"assets/thumbs/observable-plot.webp","source":"screenshot","captured_at":"2026-09-27T09:32:42Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"visx","name":"visx","name_zh":null,"url":"https://visx.airbnb.tech","host":"visx.airbnb.tech","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["charts","react","d3","low-level"],"best_for":"Airbnb's low-level React visualisation primitives on D3 (scales, shapes, axes, tooltips) for charts that must match a design system exactly","how_to_use":"Use when a React product needs fully custom charts; compose only the primitives you need and style them with the product's tokens.","zh":"Airbnb 基于 D3 的底层 React 可视化原语（比例尺、图形、坐标轴、提示框）；需要与设计系统完全一致的定制 React 图表时用。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/airbnb/visx"}],"api":null,"caveats":["The docs site is a JavaScript app (airbnb.io/visx redirects to visx.airbnb.tech); read the GitHub README instead."],"agent_access":"js","thumb":{"src":"assets/thumbs/visx.webp","source":"screenshot","captured_at":"2026-09-27T09:32:41Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"visactor","name":"VisActor","name_zh":null,"url":"https://www.visactor.io","host":"visactor.io","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["china","bytedance","charts","tables","narrative"],"best_for":"ByteDance's visualisation suite: VChart (narrative charts), VTable (very large interactive tables), VMind (AI chart generation), with themes matching Semi and Arco","how_to_use":"Choose it when a Chinese product already uses Semi or Arco, or needs tables with hundreds of thousands of rows; agents can read /llms.txt, which indexes the VChart and VTable docs.","zh":"字节跳动可视化方案：VChart（叙事图表）、VTable（超大表格）、VMind（AI 生成图表），带 Semi、Arco 主题；已用 Semi/Arco 的项目首选。","zh_how":"国内产品已用 Semi 或 Arco，或需要几十万行的交互表格时选它；agent 可读 /llms.txt，里面索引了 VChart 与 VTable 文档。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"multi","region":"cn","entry_points":[{"label":"llms.txt (agent index)","url":"https://www.visactor.io/llms.txt"},{"label":"VChart","url":"https://www.visactor.io/vchart"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/visactor.webp","source":"screenshot","captured_at":"2026-09-27T09:32:43Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"chartjs","name":"Chart.js","name_zh":null,"url":"https://www.chartjs.org","host":"chartjs.org","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["charts","canvas","framework-agnostic"],"best_for":"Simple, framework-agnostic canvas charts (eight core types) with good defaults and a large plugin ecosystem","how_to_use":"Use for a handful of standard charts in any stack; set Chart.defaults (font, colour, grid) once to the product's tokens, and pick SVG-based libraries when charts need per-element accessibility.","zh":"简单、与框架无关的 Canvas 图表库（八种基础图表），默认值好、插件多；任何技术栈里做少量标准图表时用。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Canvas output: add a text summary or data table for screen-reader users."],"agent_access":"static","thumb":{"src":"assets/thumbs/chartjs.webp","source":"screenshot","captured_at":"2026-09-27T09:32:45Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"recharts","name":"Recharts","name_zh":null,"url":"https://recharts.github.io","host":"recharts.github.io","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["charts","react","svg","shadcn"],"best_for":"Composable React chart components on SVG; the engine behind shadcn/ui charts and therefore most AI-generated dashboards","how_to_use":"Compose charts from <XAxis>, <Tooltip>, <Line> and similar components; when the project uses shadcn/ui, start from its chart blocks and retheme through the chart config and CSS variables. Version 3 changed the API; check the installed major.","zh":"基于 SVG 的可组合 React 图表组件，也是 shadcn/ui 图表的底层，因此是大多数 AI 生成仪表盘的默认；注意 v3 有破坏性变更。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"shadcn/ui charts (Recharts blocks)","url":"https://ui.shadcn.com/charts"},{"label":"GitHub","url":"https://github.com/recharts/recharts"}],"api":null,"caveats":["recharts.org now shows 'Recharts has moved' (checked 2026-09-27); use recharts.github.io."],"agent_access":"static","thumb":{"src":"assets/thumbs/recharts.webp","source":"screenshot","captured_at":"2026-09-27T09:32:46Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"highcharts","name":"Highcharts","name_zh":null,"url":"https://www.highcharts.com","host":"highcharts.com","domain":"dataviz","section":"chart-libraries","also":[],"kind":"library","tags":["charts","a11y","stock","maps","licence-trap"],"best_for":"Mature commercial chart library with the strongest built-in accessibility module (keyboard, sonification, screen-reader descriptions), plus stock, map and Gantt products","how_to_use":"Consider it for regulated or accessibility-critical products, and confirm the licence before any commercial use.","zh":"成熟的商业图表库，内置无障碍模块最完善（键盘、声音化、读屏描述），另有股票、地图、甘特图产品；商用必须购买授权。","zh_how":null,"access":"paid","login":false,"license":"Commercial (Highsoft Standard License); non-commercial use under separate terms","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Licence trap: the source is on GitHub, but commercial use needs a paid licence (shop.highcharts.com/license, checked 2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/highcharts.webp","source":"screenshot","captured_at":"2026-09-27T09:32:51Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"dashboard-design-patterns","name":"Dashboard Design Patterns","name_zh":null,"url":"https://dashboarddesignpatterns.github.io","host":"dashboarddesignpatterns.github.io","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"guideline","tags":["dashboard","research"],"best_for":"Research-based taxonomy of dashboard structures, page layouts, interactions and genres","how_to_use":"Before drawing, pick the dashboard genre (the site lists them) and walk the patterns for data information, meta information, visual representation, page layout, screen space and interaction; the design trade-offs page helps argue density decisions.","zh":"基于研究的仪表盘模式分类学，梳理页面布局、交互和类型；动手画之前先选定仪表盘类型。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/dashboard-design-patterns.webp","source":"screenshot","captured_at":"2026-09-27T09:32:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"grafana-dashboards","name":"Grafana dashboards","name_zh":null,"url":"https://grafana.com/grafana/dashboards/","host":"grafana.com","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"gallery","tags":["monitoring","ops"],"best_for":"Thousands of real operations dashboards; shows what on-call engineers actually use","how_to_use":"Sort by downloads for a data source (Prometheus, Kubernetes, PostgreSQL) to see which panels on-call engineers actually keep; open play.grafana.org in a browser for live behaviour.","zh":"数千个真实运维监控面板仓库，看值班工程师实际在用什么数据墙；配 play.grafana.org 看实时行为。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"play.grafana.org (live demo, needs JavaScript)","url":"https://play.grafana.org"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/grafana-dashboards.webp","source":"screenshot","captured_at":"2026-09-27T09:32:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"datav-aliyun","name":"Alibaba Cloud DataV","name_zh":null,"url":"https://datav.aliyun.com/portal","host":"datav.aliyun.com","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"gallery","tags":["big-screen","china"],"best_for":"The reference product for Chinese big-screen (data wall) dashboards; templates show prevailing conventions","how_to_use":"Study the templates for layout conventions of Chinese data walls (a central map or hero metric, flanking panels, a top title bar), then drop the neon-glow cliché; GeoAtlas (see datav-geoatlas) provides the map boundaries.","zh":"国内大屏数据可视化的参照系产品，模板体现主流惯例；学布局可以，霓虹光效那套要避开。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["The portal is a JavaScript app (21 characters of text to a plain fetch on 2026-09-27)."],"agent_access":"js","thumb":{"src":"assets/thumbs/datav-aliyun.webp","source":"screenshot","captured_at":"2026-09-27T09:32:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"easyv","name":"EasyV","name_zh":null,"url":"https://easyv.cloud","host":"easyv.cloud","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"gallery","tags":["big-screen","digital-twin","china"],"best_for":"Big-screen and digital-twin case library","how_to_use":"Second source for data-wall layouts","zh":"国产大屏与数字孪生案例库；做数据墙排版布局时的第二参照来源。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/easyv.webp","source":"screenshot","captured_at":"2026-09-27T09:32:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"big-book-dashboards","name":"The Big Book of Dashboards","name_zh":null,"url":"https://www.bigbookofdashboards.com","host":"bigbookofdashboards.com","domain":"dataviz","section":"dashboards-bigscreen","also":["reading:books"],"kind":"book","tags":["dashboards","examples","critique","business"],"best_for":"Real business dashboards grouped by scenario, each with expert critique of what works and why","how_to_use":"Find the scenario closest to the brief (executive summary, operations, sales, health care) and borrow its layout logic; the site hosts the dashboards shown in the book.","zh":"真实业务仪表盘按场景归类，逐个附专家点评讲清什么有效、为什么；从相近场景选仪表盘类型与布局。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/big-book-dashboards.webp","source":"screenshot","captured_at":"2026-09-27T09:32:52Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"datav-geoatlas","name":"DataV.GeoAtlas","name_zh":"DataV.GeoAtlas 地理小工具","url":"https://datav.aliyun.com/portal/school/atlas/area_selector","host":"datav.aliyun.com","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"tool","tags":["china","maps","geojson","api"],"best_for":"GeoJSON for China's administrative areas down to district level, the usual source for Chinese map charts in ECharts, AntV and big-screen tools","how_to_use":"Pick the region in the selector or fetch it directly by adcode (100000 is the whole country, _full includes the child areas).","zh":"阿里云 DataV 的中国行政区划 GeoJSON（可到区县），国内地图图表的常用数据源。","zh_how":"在选择器里选区域，或按行政区划代码直接取数据（100000 为全国，带 _full 的文件包含下级区域）。公开发布的地图须遵守审图规定、使用官方边界。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":{"url":"https://geo.datav.aliyun.com/areas_v3/bound/{adcode}_full.json","sample":"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"},"caveats":["Maps published in China must pass map review (审图) and use official boundaries; do not hand-edit borders."],"agent_access":"js","thumb":{"src":"assets/thumbs/datav-geoatlas.webp","source":"screenshot","captured_at":"2026-09-27T09:46:34Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"goview","name":"GoView","name_zh":null,"url":"https://gitee.com/dromara/go-view","host":"gitee.com","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"tool","tags":["china","big-screen","low-code","vue","echarts"],"best_for":"Open-source drag-and-drop big-screen builder (Vue 3, ECharts and VChart) from the Dromara community","how_to_use":"Use it to block out a data-wall layout quickly, then design the real hierarchy and typography by hand.","zh":"Dromara 社区开源的拖拽式大屏搭建工具（Vue3 + ECharts + VChart）；用来快速搭大屏布局原型，真正的信息层级仍要手工设计。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/goview.webp","source":"screenshot","captured_at":"2026-09-27T10:27:45Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"isqqw-echarts","name":"ECharts community gallery (isqqw)","name_zh":"echarts 图表集","url":"https://www.isqqw.com","host":"isqqw.com","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"gallery","tags":["echarts","china","big-screen","examples"],"best_for":"Community ECharts examples that replaced the closed ECharts Gallery and Make A Pie; searchable, with live option editing","how_to_use":"Find a close example, copy its option, then rewrite colours and fonts with the project theme.","zh":"ECharts Gallery 与 Make A Pie 关停后的社区示例站，可搜索、在线改配置；找相近示例再换成项目配色。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Many examples are neon big-screen clichés; take the mechanics, not the look.","JavaScript-only for agents."],"agent_access":"blocked","thumb":{"src":"assets/thumbs/isqqw-echarts.webp","source":"screenshot","captured_at":"2026-09-27T09:32:53Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"dataease","name":"DataEase","name_zh":null,"url":"https://dataease.io","host":"dataease.io","domain":"dataviz","section":"dashboards-bigscreen","also":[],"kind":"tool","tags":["china","bi","open-source","dashboard"],"best_for":"Open-source BI tool from FIT2CLOUD for dashboards and data screens; shows the conventions Chinese enterprise BI users expect","how_to_use":"Use the demo and templates to see how domestic BI dashboards are structured (filters, drill-down, screen mode) before designing one.","zh":"飞致云开源 BI 工具，可做仪表盘与数据大屏；设计前看它的模板与演示，了解国内企业 BI 用户习惯的结构（筛选、下钻、大屏模式）。","zh_how":null,"access":"free","login":false,"license":"FIT2CLOUD Open Source License (GPLv3 with extra restrictions)","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"GitHub","url":"https://github.com/dataease/dataease"}],"api":null,"caveats":["Not plain GPL: derivative works may not replace the DataEase logo or copyright notices."],"agent_access":"static","thumb":{"src":"assets/thumbs/dataease.webp","source":"screenshot","captured_at":"2026-09-27T09:32:56Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"dataviz-inspiration","name":"Dataviz Inspiration","name_zh":null,"url":"https://www.dataviz-inspiration.com","host":"dataviz-inspiration.com","domain":"dataviz","section":"exemplars-journalism","also":[],"kind":"gallery","tags":["dataviz"],"best_for":"Curated real-world data visualisations filterable by chart type","how_to_use":"Filter by chart type, then study how each piece labels directly, annotates the key point and orders its data; it is a gallery, not a guide.","zh":"真实数据可视化作品的策展画廊，可按图表类型筛；重点看专业人士怎么做标注与标签。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript-rendered (48 characters of text to a plain fetch on 2026-09-27)."],"agent_access":"js","thumb":{"src":"assets/thumbs/dataviz-inspiration.webp","source":"screenshot","captured_at":"2026-09-27T10:27:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"iib-awards","name":"Information is Beautiful Awards","name_zh":null,"url":"https://www.informationisbeautifulawards.com","host":"informationisbeautifulawards.com","domain":"dataviz","section":"exemplars-journalism","also":[],"kind":"gallery","tags":["dataviz","awards"],"best_for":"Award showcase for ambitious visualisation and infographics","how_to_use":"Browse past winners and shortlists by category for editorial-grade data storytelling.","zh":"数据可视化与信息图的奖项画廊；做编辑级数据叙事时来这里找野心参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The newest announcement on the site is the 2024 winners (checked 2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/iib-awards.webp","source":"screenshot","captured_at":"2026-09-27T09:33:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"our-world-in-data","name":"Our World in Data","name_zh":null,"url":"https://ourworldindata.org","host":"ourworldindata.org","domain":"dataviz","section":"exemplars-journalism","also":[],"kind":"gallery","tags":["charts","annotation","open-data","api"],"best_for":"Thousands of consistently designed, annotated interactive charts with sources and downloadable data","how_to_use":"Study how titles, subtitles, notes and source lines make a chart self-explanatory; append .csv to any grapher URL to get the data behind it.","zh":"数千张风格统一、有标注的交互图表，附来源与数据下载；学标题、副标题、注释和来源行如何让图表自解释。","zh_how":"重点看标题、副标题、注释和来源行怎样让图表不需要额外解释；在任意 grapher 图表网址后加 .csv 即可下载背后的数据。","access":"free","login":false,"license":"CC BY 4.0 (charts and data)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://ourworldindata.org/grapher/{slug}.csv","sample":"https://ourworldindata.org/grapher/life-expectancy.csv"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/our-world-in-data.webp","source":"screenshot","captured_at":"2026-09-27T09:33:00Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"the-pudding","name":"The Pudding","name_zh":null,"url":"https://pudding.cool","host":"pudding.cool","domain":"dataviz","section":"exemplars-journalism","also":[],"kind":"gallery","tags":["visual-essays","scrollytelling","editorial"],"best_for":"Visual essays that explain ideas with data: the reference for scrollytelling and editorial interaction","how_to_use":"Use for narrative data pages; note how each scroll step changes one thing and how annotation carries the argument.","zh":"用数据讲道理的视觉长文，滚动叙事与编辑型交互的标杆；注意每一步滚动只改变一件事。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/the-pudding.webp","source":"screenshot","captured_at":"2026-09-27T09:33:00Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"thepaper-meishuke","name":"The Paper: Meishuke (澎湃新闻·美数课)","name_zh":"澎湃新闻·美数课","url":"https://www.thepaper.cn/list_25635","host":"thepaper.cn","domain":"dataviz","section":"exemplars-journalism","also":[],"kind":"gallery","tags":["china","data-journalism","infographics","editorial"],"best_for":"One of the most consistent Chinese data-journalism desks: explainers, infographics and data stories on current news","how_to_use":"Study how Chinese headlines, annotation and vertical mobile-first layouts carry a data story; most pieces are designed for phone reading.","zh":"国内最稳定的数据新闻栏目之一：围绕新闻做解释性图表、信息图和数据故事；学中文标题、标注与竖屏手机阅读的版式。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/thepaper-meishuke.webp","source":"screenshot","captured_at":"2026-09-27T09:33:01Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"colorbrewer","name":"ColorBrewer","name_zh":null,"url":"https://colorbrewer2.org","host":"colorbrewer2.org","domain":"dataviz","section":"palettes-tools","also":["color:contrast"],"kind":"tool","tags":["dataviz","maps","colour-blind-safe"],"best_for":"Research-based sequential, diverging and qualitative schemes for maps and charts","how_to_use":"Choose the nature of the data (sequential, diverging, qualitative) and the number of classes, tick 'colorblind safe' and 'print friendly', then export HEX, RGB or a JS array.","zh":"研究背书的地图与图表配色工具，分顺序、发散、定性三类；记得勾选色盲安全，Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Source (GitHub)","url":"https://github.com/axismaps/colorbrewer"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/colorbrewer.webp","source":"screenshot","captured_at":"2026-09-27T09:33:01Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"viz-palette","name":"Viz Palette","name_zh":null,"url":"https://projects.susielu.com/viz-palette","host":"projects.susielu.com","domain":"dataviz","section":"palettes-tools","also":["color:contrast"],"kind":"tool","tags":["dataviz","colour-blind"],"best_for":"Tests a data palette in real chart types under colour-vision deficiencies","how_to_use":"Paste the categorical palette, then read the colour report: pairs that collide under each colour-vision deficiency and at small sizes are listed; adjust until none remain.","zh":"把数据配色放进真实图表、并在色盲模拟下检验的工具；发图表前查分类色板。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript app; a plain fetch returns an empty shell with an unrelated page title."],"agent_access":"js","thumb":{"src":"assets/thumbs/viz-palette.webp","source":"screenshot","captured_at":"2026-09-27T09:33:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"least-wrong-colors","name":"How to pick the least wrong colors","name_zh":null,"url":"https://mattstromawn.com/writing/how-to-pick-the-least-wrong-colors/","host":"mattstromawn.com","domain":"dataviz","section":"palettes-tools","also":["color:guides"],"kind":"article","tags":["dataviz","algorithm"],"best_for":"Algorithmic approach to categorical palettes that stay distinct","how_to_use":"For charts with many series: follow its method of maximising perceptual distance (CIELAB delta E) between categories while simulating colour-blindness (Brettel, Vienot and Mollon) and keeping WCAG contrast against the background, then check the result in Viz Palette.","zh":"讲用算法生成保持区分的分类配色的文章；图表系列很多时照它做。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/least-wrong-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:33:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"learnui-data-colors","name":"Data Color Picker (Learn UI Design)","name_zh":null,"url":"https://www.learnui.design/tools/data-color-picker.html","host":"learnui.design","domain":"dataviz","section":"palettes-tools","also":["color:palettes"],"kind":"tool","tags":["sequential","diverging","palette-generator"],"best_for":"Generates evenly spaced palettes, single-hue scales and divergent scales for charts and dashboards","how_to_use":"Start chart palettes here, then test the result in Viz Palette for colour-vision collisions.","zh":"生成间隔均匀的图表配色、单色或发散色阶；图表配色从这里起步，再用 Viz Palette 查色觉问题。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/learnui-data-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:33:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"chroma-palette-helper","name":"chroma.js palette helper","name_zh":null,"url":"https://gka.github.io/palettes/","host":"gka.github.io","domain":"dataviz","section":"palettes-tools","also":["color:system-tools"],"kind":"tool","tags":["sequential","diverging","lightness-correction","colour-blind"],"best_for":"Builds multi-hue sequential and diverging scales with lightness correction and a colour-blindness check","how_to_use":"Use for sequential scales that must stay perceptually even (maps, heatmaps); turn on 'correct lightness' and check the colour-blind preview before exporting.","zh":"生成带明度校正与色盲检查的顺序和发散配色；多色相顺序色阶要保持感知均匀时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript app; the repository (gka/palettes) was last pushed in 2024."],"agent_access":"js","thumb":{"src":"assets/thumbs/chroma-palette-helper.webp","source":"screenshot","captured_at":"2026-09-27T09:33:05Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"coloring-for-colorblindness","name":"Coloring for Colorblindness","name_zh":null,"url":"https://davidmathlogic.com/colorblind/","host":"davidmathlogic.com","domain":"dataviz","section":"palettes-tools","also":["color:contrast"],"kind":"tool","tags":["cvd","simulation","safe-palettes"],"best_for":"Simulates colour-vision deficiencies on a palette and offers known safe categorical palettes (Okabe-Ito, Wong, IBM)","how_to_use":"Check a categorical palette here before shipping, or start from one of its safe palettes when the brand allows.","zh":"模拟色觉缺陷下的配色效果，并提供经过验证的安全分类配色（Okabe-Ito、Wong、IBM）；分类配色上线前在这里检查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript app (29 characters of text to a plain fetch)."],"agent_access":"js","thumb":{"src":"assets/thumbs/coloring-for-colorblindness.webp","source":"screenshot","captured_at":"2026-09-27T09:33:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"iwanthue","name":"iWantHue","name_zh":null,"url":"https://medialab.github.io/iwanthue/","host":"medialab.github.io","domain":"dataviz","section":"palettes-tools","also":[],"kind":"tool","tags":["categorical","distinct-colours","colour-blind"],"best_for":"Generates and refines sets of optimally distinct categorical colours inside a chosen hue, chroma and lightness range, with a colour-blind option","how_to_use":"Constrain the colour space to the brand's range, generate the number of categories you need with 'improve for the colorblind' on, then sort by difference.","zh":"在限定的色相、彩度、明度范围内生成并优化“彼此最可区分”的分类色，可开启色盲优化；类别多的图表用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub (medialab/iwanthue)","url":"https://github.com/medialab/iwanthue"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/iwanthue.webp","source":"screenshot","captured_at":"2026-09-27T09:33:09Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"crameri-colour-maps","name":"Scientific colour maps (Fabio Crameri)","name_zh":null,"url":"https://www.fabiocrameri.ch/colourmaps/","host":"fabiocrameri.ch","domain":"dataviz","section":"palettes-tools","also":[],"kind":"tool","tags":["sequential","diverging","scientific","colour-blind"],"best_for":"Perceptually uniform, colour-blind-friendly scientific colour maps (batlow and family) that replace rainbow and jet scales","how_to_use":"Use for heatmaps, maps and continuous scales; download the map for your tool (CSS, Python, R, ParaView and more) and cite the version.","zh":"感知均匀、色盲友好的科学色阶（batlow 等），用来替代彩虹色和 jet；热力图、地图与连续色阶时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/crameri-colour-maps.webp","source":"screenshot","captured_at":"2026-09-27T09:33:12Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"shape-of-ai","name":"Shape of AI","name_zh":null,"url":"https://www.shapeof.ai","host":"shapeof.ai","domain":"ai","section":"ai-ux-patterns","also":[],"kind":"pattern-library","tags":["ai","patterns"],"best_for":"Pattern library for AI product UX: wayfinders, inputs, tuners, governors, trust indicators, identifiers, with real examples","how_to_use":"Pick the family for the job (Wayfinders to get a first prompt, Inputs, Tuners, Governors for user control, Trust builders, Identifiers), then read the pattern's shipped examples and when-to-use notes before drawing the AI surface.","zh":"AI 产品交互模式库：导航、输入、调节、约束、信任标识等，附真实案例与适用场景说明。","zh_how":"按任务选模式族（Wayfinders 引导第一次输入、Inputs 输入、Tuners 调节、Governors 用户控制、Trust builders 建立信任、Identifiers 标识），读该模式的真实产品案例和适用说明，再画 AI 界面。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/shape-of-ai.webp","source":"screenshot","captured_at":"2026-09-27T09:33:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"aiverse","name":"Aiverse","name_zh":null,"url":"https://www.aiverse.design","host":"aiverse.design","domain":"ai","section":"ai-ux-patterns","also":[],"kind":"pattern-library","tags":["ai","examples"],"best_for":"Library of AI interaction examples from shipped products, organised by pattern","how_to_use":"Search by interaction type (onboarding, prompt input, streaming, citations, agent handoff) to see how shipped products solve it; the case studies explain the trade-offs.","zh":"AI 交互案例库，取自已上线产品并按模式归类；做 AI 功能时按交互类型查当下惯例。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Sign-up and a paid plan unlock most of the 300+ references."],"agent_access":"static","thumb":{"src":"assets/thumbs/aiverse.webp","source":"screenshot","captured_at":"2026-09-27T09:33:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ant-design-x","name":"Ant Design X","name_zh":null,"url":"https://x.ant.design","host":"x.ant.design","domain":"ai","section":"ai-ux-patterns","also":["app-ui:design-systems"],"kind":"system","tags":["ai","chat","components","china"],"best_for":"AI-interface component system with a published design paradigm for roles, intention, conversation and hybrid UI","how_to_use":"Read the RICH design paradigm first (Role, Intention, Conversation, Hybrid UI: wake-up, AI badge, input, generation progress, feedback), then compose the chat surface from the components.","zh":"蚂蚁的 AI 界面组件体系，附带角色、意图、对话与混合界面的设计范式；搭聊天 UI 前读。MIT。","zh_how":"先读 RICH 设计范式（角色 Role、意图 Intention、会话 Conversation、混合界面 Hybrid UI：唤醒、AI 标识、输入、生成过程、反馈），再用组件拼出对话界面。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"RICH 设计范式","url":"https://x.ant.design/docs/spec/introduce-cn"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ant-design-x.webp","source":"screenshot","captured_at":"2026-09-27T09:33:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ai-elements","name":"Vercel AI Elements","name_zh":null,"url":"https://elements.ai-sdk.dev","host":"elements.ai-sdk.dev","domain":"ai","section":"ai-ux-patterns","also":["code:components"],"kind":"library","tags":["react","ai","chat"],"best_for":"Components for AI interfaces: conversation, message, reasoning, sources, tool calls, prompt input","how_to_use":"Install components into the repo with npx ai-elements@latest add <component> (conversation, message, reasoning, tool, sources, prompt-input), then restyle them with the project's shadcn tokens rather than shipping the defaults.","zh":"Vercel 的 AI 界面组件：对话、消息、推理、来源、工具调用、输入框；做聊天 UI 从它开始而非从零。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ai-elements.webp","source":"screenshot","captured_at":"2026-09-27T09:33:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"prompt-kit","name":"prompt-kit","name_zh":null,"url":"https://www.prompt-kit.com","host":"prompt-kit.com","domain":"ai","section":"ai-ux-patterns","also":["code:components"],"kind":"library","tags":["react","ai","chat"],"best_for":"Accessible, customisable React building blocks for AI chat (prompt input, message, markdown, code block, reasoning, loaders) in the shadcn copy-in style","how_to_use":"Compare its prompt input and message components with AI Elements and assistant-ui, and take the one whose API matches the stack.","zh":"shadcn 风格的 AI 应用积木组件库，聊天界面件齐全；AI Elements 之外的另一个替代选择；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/prompt-kit.webp","source":"screenshot","captured_at":"2026-09-27T09:33:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"assistant-ui","name":"assistant-ui","name_zh":null,"url":"https://www.assistant-ui.com","host":"assistant-ui.com","domain":"ai","section":"ai-ux-patterns","also":["code:components"],"kind":"library","tags":["react","chat","agents","streaming"],"best_for":"React primitives for AI chat and agent interfaces: threads, streaming, tool-call UI, attachments, branching and human approval","how_to_use":"Use instead of hand-rolling chat state; compare with AI Elements (copy-in components) and pick assistant-ui when you need runtime state such as branching and tool approval handled for you.","zh":"AI 聊天与 agent 界面的 React 基础组件：会话、流式输出、工具调用 UI、附件、分支与人工确认；别手搓聊天状态，可与 AI Elements 对比。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/assistant-ui/assistant-ui"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/assistant-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:33:14Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"json-render","name":"json-render","name_zh":null,"url":"https://json-render.dev","host":"json-render.dev","domain":"ai","section":"ai-ux-patterns","also":["code:components"],"kind":"library","tags":["generative-ui","guardrails","react","json"],"best_for":"Vercel Labs framework where the model emits JSON constrained to your own component catalogue, which is validated and streamed as UI","how_to_use":"Use when an agent must compose UI from approved components only: define the catalogue (component, props schema), let the model fill it, render the stream.","zh":"Vercel Labs 的生成式 UI 框架：模型只能输出受你的组件目录约束的 JSON，校验后流式渲染为界面；agent 只允许用批准组件拼 UI 时用。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/vercel-labs/json-render"}],"api":null,"caveats":["Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/json-render.webp","source":"screenshot","captured_at":"2026-09-27T09:33:17Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"matechat","name":"MateChat","name_zh":null,"url":"https://matechat.gitcode.com","host":"matechat.gitcode.com","domain":"ai","section":"ai-ux-patterns","also":[],"kind":"system","tags":["china","huawei","chat","vue","devtools"],"best_for":"Huawei DevUI's generative-AI experience language and Vue chat components, tuned for developer tools and IDE assistants","how_to_use":"Read its guide for how an assistant should sit inside an existing tool (side panel, inline prompts, consistent with the host UI), and use the components in Vue projects; Ant Design X is the React counterpart.","zh":"华为 DevUI 团队的生成式 AI 体验设计系统与 Vue 对话组件，面向研发工具与 IDE 助手；React 项目对应的是 Ant Design X。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"GitHub mirror","url":"https://github.com/DevCloudFE/MateChat"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/matechat.webp","source":"screenshot","captured_at":"2026-09-27T09:33:17Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"smashing-agentic-ux","name":"Designing for agentic AI (Smashing Magazine, 2026)","name_zh":null,"url":"https://www.smashingmagazine.com/2026/02/designing-agentic-ai-practical-ux-patterns/","host":"smashingmagazine.com","domain":"ai","section":"ai-ux-patterns","also":[],"kind":"article","tags":["agents","consent","control","accountability"],"best_for":"Practical patterns for control, consent and accountability when an agent acts on the user's behalf rather than only answering","how_to_use":"Use as a review checklist for any feature where the AI takes actions: preview before acting, scoped permissions, interruptibility, an activity log and undo.","zh":"Smashing 2026 年文章：agent 代用户行动时的控制、授权与问责模式；AI 会“做事”而不只是“回答”的功能都拿它做评审清单。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/smashing-agentic-ux.webp","source":"screenshot","captured_at":"2026-09-27T09:33:18Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"pair-guidebook","name":"People + AI Guidebook","name_zh":null,"url":"https://pair.withgoogle.com/guidebook","host":"pair.withgoogle.com","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"guideline","tags":["ai","human-centred"],"best_for":"Google PAIR's research-based guidance: mental models, explainability and trust, feedback and control, errors and graceful failure","how_to_use":"Work through the chapters during the brief (User needs and defining success, Data collection and evaluation, Mental models, Explainability and trust, Feedback and control, Errors and graceful failure) and use their worksheets with the team.","zh":"Google PAIR 的 AI 产品设计指南，讲心智模型、可解释性、信任与容错；立项期用章节练习。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript app: a plain fetch gets only the title, so agents need a browser."],"agent_access":"js","thumb":{"src":"assets/thumbs/pair-guidebook.webp","source":"screenshot","captured_at":"2026-09-27T09:33:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"hax-toolkit","name":"Microsoft HAX Toolkit","name_zh":null,"url":"https://www.microsoft.com/en-us/haxtoolkit/","host":"microsoft.com","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"guideline","tags":["ai","guidelines"],"best_for":"Eighteen guidelines for human-AI interaction with a design library of examples and a planning workbook","how_to_use":"Use the 18 guidelines as a review checklist for AI features (initially, during interaction, when wrong, over time) and look up each one's examples in the HAX Design Library.","zh":"微软的人机 AI 交互十八条指南，附案例库与规划工作簿；评审 AI 功能时当检查清单用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Guidelines for Human-AI Interaction","url":"https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/hax-toolkit.webp","source":"screenshot","captured_at":"2026-09-27T09:33:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"carbon-for-ai","name":"Carbon for AI","name_zh":null,"url":"https://carbondesignsystem.com/guidelines/carbon-for-ai/","host":"carbondesignsystem.com","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"guideline","tags":["ai","labelling","explainability"],"best_for":"How an enterprise system marks AI-generated content and exposes explainability","how_to_use":"Use the AI label component for every AI-generated or AI-assisted element and its explainability popover to say what the model did; the label's usage page covers placement and variants.","zh":"IBM 的 AI 界面规范：如何标注 AI 生成内容、如何呈现可解释性；做 AI 标签和说明弹层时参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"AI label: usage","url":"https://carbondesignsystem.com/components/ai-label/usage/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/carbon-for-ai.webp","source":"screenshot","captured_at":"2026-09-27T09:47:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cloudscape-genai","name":"Cloudscape generative AI patterns","name_zh":null,"url":"https://cloudscape.design/gen-ai/patterns/generative-ai-chat/","host":"cloudscape.design","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"guideline","tags":["ai","chat","enterprise"],"best_for":"Concrete patterns for generative-AI chat, loading states, output labelling and user-authorised actions","how_to_use":"Use when adding an assistant to an enterprise console: the set covers chat, output labels, loading states, progressive steps, follow-up questions, user-authorised actions, response regeneration and artifact previews.","zh":"Cloudscape 的生成式 AI 模式：对话、加载态、输出标注与用户授权操作；给企业控制台加助手时照它做。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/cloudscape-genai.webp","source":"screenshot","captured_at":"2026-09-27T09:46:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"apple-hig-genai","name":"Apple HIG: Generative AI","name_zh":null,"url":"https://developer.apple.com/design/human-interface-guidelines/generative-ai","host":"developer.apple.com","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"guideline","tags":["ai","apple"],"best_for":"Apple's guidance on designing generative-AI features responsibly","how_to_use":"Read with the platform's writing and privacy pages. The page is a JavaScript app; agents should fetch the JSON version (developer.apple.com/tutorials/data/design/human-interface-guidelines/generative-ai.json).","zh":"Apple 关于负责任地设计生成式 AI 功能的官方指引；配合写作与隐私章节一起读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/generative-ai.json","sample":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/generative-ai.json"},"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/apple-hig-genai.webp","source":"screenshot","captured_at":"2026-09-27T09:47:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"openai-apps-design","name":"OpenAI UI guidelines for ChatGPT apps (Plugins)","name_zh":null,"url":"https://developers.openai.com/plugins/concepts/ui-guidelines","host":"developers.openai.com","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"guideline","tags":["ai","chatgpt","embedded"],"best_for":"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","how_to_use":"Read before designing any widget for a chat host: every app starts inline, cards carry one action or decision, and fullscreen is for multi-step work with the composer still overlaid. Pair with MCP Apps for the open equivalent.","zh":"在 ChatGPT 里做应用界面的规范：展示模式（内联卡片、内联轮播、全屏、画中画）各自何时用、卡片布局与操作，并附 @openai/apps-sdk-ui 组件库；时效性强。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"Apps SDK UI (components, MIT)","url":"https://github.com/openai/apps-sdk-ui"}],"api":null,"caveats":["Moved in 2026 from /apps-sdk/concepts/design-guidelines to the Plugins section (redirect checked 2026-09-27).","Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/openai-apps-design.webp","source":"screenshot","captured_at":"2026-09-27T09:33:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mcp-apps","name":"MCP Apps","name_zh":null,"url":"https://modelcontextprotocol.io/extensions/apps/overview","host":"modelcontextprotocol.io","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"spec","tags":["mcp","generative-ui","embedded","hosts"],"best_for":"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","how_to_use":"Design embedded tool UI to the host's constraints (sandboxed iframe, host theming, small inline footprint, explicit actions back to the model); read with the OpenAI UI guidelines for display-mode conventions.","zh":"MCP 官方扩展：工具可返回在聊天宿主内沙箱 iframe 中渲染的交互界面（ui:// 资源），取代了 MCP-UI 实验；设计内嵌工具界面前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"SDK and examples (GitHub)","url":"https://github.com/modelcontextprotocol/ext-apps"}],"api":null,"caveats":["Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/mcp-apps.webp","source":"screenshot","captured_at":"2026-09-27T09:33:21Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"a2ui","name":"A2UI","name_zh":null,"url":"https://a2ui.org","host":"a2ui.org","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"spec","tags":["generative-ui","protocol","agents","google"],"best_for":"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","how_to_use":"Read when an agent must return forms, cards or lists rather than text; design the component catalogue the agent may use, and check which spec version your renderer supports (v0.9.1 current, v1.0 candidate on 2026-09-27).","zh":"Google 发起的开放协议：agent 以声明式组件目录（而非代码）下发界面，由客户端在 Web、移动与桌面原生渲染；规范迭代快，注意版本。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/a2ui-project/a2ui"}],"api":null,"caveats":["Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/a2ui.webp","source":"screenshot","captured_at":"2026-09-27T09:33:23Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"cn-ai-content-labelling","name":"China: Measures for Labelling AI-Generated Synthetic Content (人工智能生成合成内容标识办法)","name_zh":"人工智能生成合成内容标识办法","url":"https://www.cac.gov.cn/2025-03/14/c_1743654684782215.htm","host":"cac.gov.cn","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"spec","tags":["china","law","labelling","aigc"],"best_for":"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","how_to_use":"For any product serving users in mainland China, design the visible AI label into the surface itself: at the start or end of generated text, on images, and in the chat or generation UI; the mandatory national standard GB 45438-2025 gives the exact label methods.","zh":"国家网信办等四部门《人工智能生成合成内容标识办法》，2025-09-01 起施行：生成的文本、图片、音频、视频、虚拟场景须加显式标识（内容或交互界面中用户可感知的文字、声音、图形）与隐式标识（元数据）。","zh_how":"面向中国大陆用户的产品，把显式 AI 标识直接设计进界面：生成文本的开头或结尾、图片上、对话或生成界面中；具体标识方法见强制性国家标准 GB 45438-2025。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Orientation, not legal advice; check the CAC notice and GB 45438-2025 for the exact placement rules."],"agent_access":"static","thumb":{"src":"assets/thumbs/cn-ai-content-labelling.webp","source":"screenshot","captured_at":"2026-09-27T09:33:23Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"eu-ai-act-art50","name":"EU AI Act Article 50: transparency obligations","name_zh":null,"url":"https://artificialintelligenceact.eu/article/50/","host":"artificialintelligenceact.eu","domain":"ai","section":"ai-product-guidelines","also":[],"kind":"spec","tags":["eu","law","labelling","transparency"],"best_for":"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","how_to_use":"Design the disclosure into the first interaction (an assistant must say it is AI unless obvious), label deepfakes and AI-written public-interest text visibly, and make sure generated media carry machine-readable marks.","zh":"欧盟《人工智能法》第 50 条透明义务：与 AI 系统交互时须告知用户，合成内容须以机器可读、可检测的方式标记；2026-08-02 起适用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Unofficial but faithful reading site; the binding text is on EUR-Lex. Orientation, not legal advice."],"agent_access":"static","thumb":{"src":"assets/thumbs/eu-ai-act-art50.webp","source":"screenshot","captured_at":"2026-09-27T09:33:25Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"v0","name":"v0 by Vercel","name_zh":null,"url":"https://v0.app","host":"v0.app","domain":"ai","section":"ai-design-tools","also":[],"kind":"generator","tags":["ai-generation","templates","shadcn","nextjs","design-mode"],"best_for":"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)","how_to_use":"Use for fast throwaway variants, then apply this suite's brief, direction and critique discipline to the output; browse /templates to see what current AI-generated UI looks like, which is also the look to diverge from","zh":"Vercel 的提示词生成应用工具，带可视化设计模式和海量社区模板；快速出可弃方案，再按自己的流程改。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Its templates show the current default AI look; use them to see what to diverge from.","Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/v0.webp","source":"screenshot","captured_at":"2026-09-27T09:33:27Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"superdesign","name":"Superdesign","name_zh":null,"url":"https://superdesign.dev","host":"superdesign.dev","domain":"ai","section":"ai-design-tools","also":[],"kind":"generator","tags":["ide","design-agent","variants"],"best_for":"Open-source design agent that lives in the IDE and generates UI variants side by side","how_to_use":"Reference for the parallel-variants workflow","zh":"开源设计 agent，住在 IDE 里并排生成多个 UI 变体；参考它并行出稿的工作流。","zh_how":null,"access":"free","login":false,"license":"See repository (github.com/superdesigndev/superdesign)","tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/superdesign.webp","source":"screenshot","captured_at":"2026-09-27T09:33:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"stitch","name":"Google Stitch","name_zh":null,"url":"https://stitch.withgoogle.com","host":"stitch.withgoogle.com","domain":"ai","section":"ai-design-tools","also":["ai:design-mcp-servers"],"kind":"generator","tags":["ai-generation","design-md","mcp","variants"],"best_for":"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","how_to_use":"Use for fast visual variants from a DESIGN.md, then take the chosen direction into code and critique it like any other draft; connect the MCP server to generate or edit screens from the agent.","zh":"Google Labs 的 AI 界面设计工具：按提示生成界面与变体、读写 DESIGN.md，并通过 MCP 把项目开放给 agent；快速出变体后再落到代码并评审。","zh_how":null,"access":"free","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Stitch via MCP (setup)","url":"https://stitch.withgoogle.com/docs/mcp/setup"},{"label":"Stitch skills (GitHub)","url":"https://github.com/google-labs-code/stitch-skills"}],"api":null,"caveats":["The app and docs are JavaScript-only for plain fetches.","Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"js","thumb":{"src":"assets/thumbs/stitch.webp","source":"screenshot","captured_at":"2026-09-27T09:33:41Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"figma-make","name":"Figma Make","name_zh":null,"url":"https://www.figma.com/make/","host":"figma.com","domain":"ai","section":"ai-design-tools","also":[],"kind":"generator","tags":["ai-generation","prototype","react","figma"],"best_for":"Figma's prompt-to-app tool that turns prompts and existing frames into working React prototypes","how_to_use":"Use when the team lives in Figma and needs a clickable prototype from existing frames; bring the result back through this suite's critique before treating it as a design.","zh":"Figma 的提示词生成应用工具，可把提示与现有画板变成可运行的 React 原型；团队常驻 Figma 时用来出可点击原型。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":["Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/figma-make.webp","source":"screenshot","captured_at":"2026-09-27T10:27:13Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"relume","name":"Relume","name_zh":null,"url":"https://www.relume.ai","host":"relume.ai","domain":"ai","section":"ai-design-tools","also":["web:landing-saas"],"kind":"generator","tags":["sitemap","wireframe","webflow","figma"],"best_for":"AI sitemap and wireframe builder for marketing sites, backed by a large component library for Figma, Webflow and React","how_to_use":"Use to settle information architecture and section order before visual design, then throw away its default look.","zh":"AI 生成营销站的站点地图与线框，背后是面向 Figma、Webflow、React 的大型组件库；做视觉前先用它定信息架构和区块顺序。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/relume.webp","source":"screenshot","captured_at":"2026-09-27T09:33:42Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"lovart","name":"Lovart","name_zh":null,"url":"https://www.lovart.ai","host":"lovart.ai","domain":"ai","section":"ai-design-tools","also":[],"kind":"generator","tags":["ai-generation","brand","marketing-assets","canvas"],"best_for":"AI design agent on an infinite canvas that produces logos, brand kits, posters, social graphics and video","how_to_use":"Use for exploratory brand and campaign assets; every output still needs an art-direction pass and a licence check before use.","zh":"无限画布上的 AI 设计 agent，产出 Logo、品牌套件、海报、社媒图与视频；适合探索品牌和活动物料，仍需人工艺术指导。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"B","status":"active","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":["Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/lovart.webp","source":"screenshot","captured_at":"2026-09-27T09:33:43Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"jimeng","name":"Jimeng AI (即梦)","name_zh":"即梦 AI","url":"https://jimeng.jianying.com","host":"jimeng.jianying.com","domain":"ai","section":"ai-design-tools","also":["assets:photo-video"],"kind":"generator","tags":["china","ai-generation","image","video","chinese-text"],"best_for":"ByteDance's image and video generator with a smart canvas, strong at understanding Chinese prompts and rendering Chinese text in images","how_to_use":"Use for mood images, key-visual drafts and short motion studies; check the commercial-use terms and label AI output as Chinese rules require before shipping.","zh":"字节跳动的图片与视频生成工具（含智能画布），中文提示理解与图中中文文字表现较好；用于情绪图、主视觉草稿与短动效。","zh_how":"用来做情绪图、主视觉草稿和短动效研究；上线前核对商用条款，并按国内规定给 AI 内容加标识。","access":"freemium","login":true,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Outputs must carry AI labels in China (see cn-ai-content-labelling).","Fast-moving: check the page date and the installed version before relying on details recorded here (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/jimeng.webp","source":"screenshot","captured_at":"2026-09-27T09:33:39Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"liblib","name":"LiblibAI (哩布哩布)","name_zh":"哩布哩布 AI","url":"https://www.liblib.art","host":"liblib.art","domain":"ai","section":"ai-design-tools","also":["assets:illustrations"],"kind":"community","tags":["china","ai-generation","models","lora"],"best_for":"Large Chinese community of image-generation models and style LoRAs with online generation","how_to_use":"Use to find a style model for a consistent illustration set; check each model's licence and commercial terms individually.","zh":"国内大型图像生成模型与风格 LoRA 社区，可在线生成；找统一插画风格的模型，逐个核对模型授权。","zh_how":null,"access":"freemium","login":true,"license":"Licence per model","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["JavaScript-only for agents (34 characters of text on 2026-09-27)."],"agent_access":"js","thumb":{"src":"assets/thumbs/liblib.webp","source":"screenshot","captured_at":"2026-09-27T09:33:45Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"anthropic-frontend-design","name":"Anthropic frontend-design skill","name_zh":null,"url":"https://github.com/anthropics/skills/tree/main/skills/frontend-design","host":"github.com","domain":"ai","section":"agent-skills-rules","also":[],"kind":"skill","tags":["claude","aesthetics","anti-slop"],"best_for":"Anthropic's own short skill for distinctive front-end aesthetics: commit to a bold direction, avoid generic AI looks, mind typography, colour, motion, composition","how_to_use":"Read it as the minimal baseline any design skill must beat; the companion post (2025-11-12) explains the mechanism, distributional convergence, and ships a ~400-token aesthetics prompt","zh":"Anthropic 官方前端审美 skill：选定大胆方向、避开 AI 套路脸、盯字体色彩动效构图；当底线基准读。","zh_how":null,"access":"free","login":false,"license":"See repository licence","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"canvas-design skill","url":"https://github.com/anthropics/skills/tree/main/skills/canvas-design"},{"label":"theme-factory skill","url":"https://github.com/anthropics/skills/tree/main/skills/theme-factory"},{"label":"brand-guidelines skill","url":"https://github.com/anthropics/skills/tree/main/skills/brand-guidelines"},{"label":"web-artifacts-builder skill","url":"https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/anthropic-frontend-design.webp","source":"github","captured_at":"2026-09-27T10:27:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"impeccable","name":"Impeccable","name_zh":null,"url":"https://impeccable.style","host":"impeccable.style","domain":"ai","section":"agent-skills-rules","also":[],"kind":"skill","tags":["commands","critique","polish"],"best_for":"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","how_to_use":"Read /slop for the rule catalogue (each rule tagged CLI, browser, LLM-only or optional) and borrow the PRODUCT.md idea; npx impeccable detect src/ runs the deterministic rules without an LLM. The Chinese edition at impeccable.cn may lag the English site.","zh":"单个设计技能含二十四条命令与一份 AI 味规则目录，规则可无 LLM 确定性检测；Apache-2.0。","zh_how":"读 /slop 规则目录（每条标注 CLI、浏览器、仅 LLM 或可选），借鉴 PRODUCT.md 的做法；npx impeccable detect src/ 可不用 LLM 跑确定性规则。中文站 impeccable.cn 可能比英文站滞后。","access":"free","login":false,"license":"Apache-2.0 (github.com/pbakaus/impeccable)","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"中文站 (impeccable.cn)","url":"https://impeccable.cn"},{"label":"GitHub","url":"https://github.com/pbakaus/impeccable"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/impeccable.webp","source":"screenshot","captured_at":"2026-09-27T09:33:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"web-interface-guidelines","name":"Vercel Web Interface Guidelines","name_zh":null,"url":"https://vercel.com/design/guidelines","host":"vercel.com","domain":"ai","section":"agent-skills-rules","also":["reading:interface-craft"],"kind":"guideline","tags":["checklist","agents","web"],"best_for":"Concise, opinionated rules for interactions, animation, layout, content, forms, performance and design, shipped with an agent-readable file","how_to_use":"Give the agent the raw AGENTS.md (MUST, SHOULD and NEVER rules for keyboard, focus, forms, animation, layout, content and performance) as a review checklist for web UI.","zh":"Vercel 的网页界面规则集，覆盖交互、动效、表单与性能；仓库里的 AGENTS.md 可当评审清单，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT (github.com/vercel-labs/web-interface-guidelines)","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"AGENTS.md (raw)","url":"https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/AGENTS.md"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/web-interface-guidelines.webp","source":"screenshot","captured_at":"2026-09-27T09:46:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"taste-skill","name":"taste-skill","name_zh":null,"url":"https://tasteskill.dev","host":"tasteskill.dev","domain":"ai","section":"agent-skills-rules","also":[],"kind":"skill","tags":["anti-slop","landing","dials"],"best_for":"Popular anti-slop front-end skill: brief inference, three dials (variance, motion, density), real design systems, pre-flight check","how_to_use":"Borrow the design-read and dial ideas; scope is landing pages and portfolios only","zh":"流行的反模板化前端技能：读简报、三个拨杆（变化、动效、密度）、真实设计系统加交付前检查；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT (github.com/Leonxlnx/taste-skill)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/taste-skill.webp","source":"screenshot","captured_at":"2026-09-27T09:33:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ui-ux-pro-max","name":"UI UX Pro Max","name_zh":null,"url":"https://www.uupm.cc","host":"uupm.cc","domain":"ai","section":"agent-skills-rules","also":[],"kind":"skill","tags":["database","search","design-system-generator"],"best_for":"Searchable CSV knowledge base of styles, palettes, font pairings and UX rules with a design-system generator","how_to_use":"Useful as a lookup table; its recommendations are generic without a real brief","zh":"可检索的风格、配色、字体搭配与 UX 规则知识库，附设计系统生成器；当查询表用，缺真实 brief 时建议偏泛；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT (github.com/nextlevelbuilder/ui-ux-pro-max-skill)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ui-ux-pro-max.webp","source":"screenshot","captured_at":"2026-09-27T09:33:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ui-skills","name":"UI Skills","name_zh":null,"url":"https://www.ui-skills.com","host":"ui-skills.com","domain":"ai","section":"agent-skills-rules","also":[],"kind":"skill","tags":["constraints","agents"],"best_for":"Opinionated constraint lists for agents building interfaces","how_to_use":"Compare its constraints with your own rules","zh":"给构建界面的 agent 用的强硬约束清单，拿它和自己的规则对照查漏补缺；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT (github.com/ibelick/ui-skills)","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ui-skills.webp","source":"screenshot","captured_at":"2026-09-27T09:33:46Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"interface-design-skill","name":"interface-design","name_zh":null,"url":"https://interface-design.dev","host":"interface-design.dev","domain":"ai","section":"agent-skills-rules","also":[],"kind":"skill","tags":["consistency","memory"],"best_for":"Skill focused on keeping design decisions consistent across sessions for dashboards and apps","how_to_use":"Idea worth borrowing: persist decisions in a system file","zh":"专注让跨会话设计决策保持一致的 skill，面向仪表盘和应用；可借鉴的思路：把决策存进系统文件；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT (github.com/Dammyjay93/interface-design)","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/interface-design-skill.webp","source":"screenshot","captured_at":"2026-09-27T09:33:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"stitch-skills","name":"Stitch skills","name_zh":null,"url":"https://github.com/google-labs-code/stitch-skills","host":"github.com","domain":"ai","section":"agent-skills-rules","also":[],"kind":"skill","tags":["stitch","mcp","generation"],"best_for":"Agent skills for Google Stitch: prompt enhancement, DESIGN.md synthesis, screen generation through MCP","how_to_use":"Use when a Stitch MCP server is available for fast visual variants","zh":"Google Stitch 的 agent 技能集：提示词增强、综合生成 DESIGN.md、经 MCP 出高保真界面稿；做快速视觉变体时用；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/stitch-skills.webp","source":"github","captured_at":"2026-09-27T09:33:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"awesome-agent-skills","name":"awesome-agent-skills","name_zh":null,"url":"https://github.com/VoltAgent/awesome-agent-skills","host":"github.com","domain":"ai","section":"agent-skills-rules","also":["code:awesome-lists"],"kind":"repo","tags":["agent-skills"],"best_for":"Directory of agent skills across vendors, including design skills","how_to_use":"Track new design skills to analyse","zh":"各家 agent skill 的汇总目录，其中包含设计类条目；想跟踪新出现的设计 skill 时定期翻它；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/awesome-agent-skills.webp","source":"github","captured_at":"2026-09-27T09:46:35Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"emil-skills","name":"Emil Kowalski's skills","name_zh":null,"url":"https://github.com/emilkowalski/skills","host":"github.com","domain":"ai","section":"agent-skills-rules","also":["motion:learning"],"kind":"skill","tags":["motion","review","design-engineering","animation"],"best_for":"Design-engineering skills from the author of Sonner and Vaul, including review-animations, a motion critique an agent can run on UI code","how_to_use":"Borrow review-animations as the motion critique rubric; install with npx skills add emilkowalski/skills. His writing is in emil-kowalski (motion).","zh":"Sonner、Vaul 作者的设计工程 skill 集，含可在 UI 代码上运行的动效评审 review-animations；动效评审可直接借用。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/emil-skills.webp","source":"github","captured_at":"2026-09-27T09:47:21Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"motion-ai-kit","name":"Motion AI Kit","name_zh":null,"url":"https://motion.dev/docs/ai-kit","host":"motion.dev","domain":"ai","section":"agent-skills-rules","also":["code:motion-libs"],"kind":"skill","tags":["motion","mcp","springs","performance"],"best_for":"Motion's official skill and MCP server: current Motion docs for the agent, plus CSS spring generation, a transition editor and MotionScore performance audits","how_to_use":"Install it so the agent queries current Motion APIs instead of stale training data; with Motion+ ask it to audit animations for render cost before shipping.","zh":"Motion 官方 skill 与 MCP：让 agent 查最新 Motion 文档，另有 CSS 弹簧生成、过渡编辑器与 MotionScore 性能审计（后几项需 Motion+）。","zh_how":null,"access":"freemium","login":false,"license":"MIT (npm motion-ai)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Documentation search is free; CSS spring generation, MotionScore audits and example source need a paid Motion+ licence."],"agent_access":"static","thumb":{"src":"assets/thumbs/motion-ai-kit.webp","source":"screenshot","captured_at":"2026-09-27T09:33:50Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"rams","name":"Rams","name_zh":null,"url":"https://www.rams.ai","host":"rams.ai","domain":"ai","section":"agent-skills-rules","also":[],"kind":"tool","tags":["design-review","mcp","ci","rules"],"best_for":"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","how_to_use":"Read the public rule categories as a benchmark for your own critique rubric; the free skill gives a taste, scoring needs a plan.","zh":"商业化设计评审引擎：按 348 条公开规则（九类，含一类 AI 套路）给 UI 改动打 0-100 分，可作 skill、MCP 或 GitHub App；拿它的规则分类对标自己的评审量表。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/rams.webp","source":"screenshot","captured_at":"2026-09-27T09:33:49Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"skills-sh","name":"skills.sh","name_zh":null,"url":"https://skills.sh","host":"skills.sh","domain":"ai","section":"agent-skills-rules","also":[],"kind":"archive","tags":["agent-skills","directory","installs"],"best_for":"Vercel's open agent-skills directory with install counts, plus the npx skills installer","how_to_use":"Check install counts to see which design skills are actually used, and install with npx skills add owner/repo.","zh":"Vercel 运营的开放 agent skill 目录，带安装量排行与 npx skills 安装器；看安装量判断哪些设计 skill 真有人用。","zh_how":null,"access":"free","login":false,"license":"MIT (skills CLI)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"skills CLI (GitHub)","url":"https://github.com/vercel-labs/skills"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/skills-sh.webp","source":"screenshot","captured_at":"2026-09-27T09:33:52Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"design-md","name":"DESIGN.md specification","name_zh":null,"url":"https://github.com/google-labs-code/design.md","host":"github.com","domain":"ai","section":"agent-formats","also":[],"kind":"spec","tags":["design-md","stitch","agent-readable"],"best_for":"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","how_to_use":"Write system/DESIGN.md in this shape, then run npx @google/design.md lint DESIGN.md (structured JSON findings, including WCAG contrast) and diff against the previous version; Stitch reads and writes the same file.","zh":"Google Labs 的开放格式，用一个 Markdown 文件向 AI 代理描述设计系统；按此产出 DESIGN.md 供 Stitch 等消费；Apache-2.0。","zh_how":"按此格式写 system/DESIGN.md，然后运行 npx @google/design.md lint DESIGN.md（输出结构化 JSON，含 WCAG 对比度检查），并与上一版做 diff；Stitch 读写的是同一种文件。","access":"free","login":false,"license":"Apache-2.0 (github.com/google-labs-code/design.md)","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Specification (docs/spec.md)","url":"https://github.com/google-labs-code/design.md/blob/main/docs/spec.md"},{"label":"Stitch docs page (JavaScript app)","url":"https://stitch.withgoogle.com/docs/design-md/specification"}],"api":null,"caveats":["The token schema version is still 'alpha' (npm @google/design.md 0.4.0 on 2026-09-27); pin the version you validate against."],"agent_access":"static","thumb":{"src":"assets/thumbs/design-md.webp","source":"github","captured_at":"2026-09-27T09:47:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"awesome-design-md","name":"awesome-design-md","name_zh":null,"url":"https://getdesign.md","host":"getdesign.md","domain":"ai","section":"agent-formats","also":[],"kind":"repo","tags":["design-md","extracted-systems"],"best_for":"Collection of DESIGN.md files describing the visual systems of well-known products","how_to_use":"Use as style-DNA study material, never as a licence to clone a brand","zh":"收集知名产品视觉体系的 DESIGN.md 合集，可当风格基因研究材料；学方法可以，照抄品牌不行。","zh_how":null,"access":"free","login":false,"license":"MIT (github.com/VoltAgent/awesome-design-md); brands belong to their owners","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The files describe other companies' brands: study the structure, never ship a clone."],"agent_access":"static","thumb":{"src":"assets/thumbs/awesome-design-md.webp","source":"screenshot","captured_at":"2026-09-27T09:33:59Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"refero-styles","name":"Refero Styles","name_zh":null,"url":"https://styles.refero.design","host":"styles.refero.design","domain":"ai","section":"agent-formats","also":[],"kind":"archive","tags":["design-md","extracted-systems","tokens"],"best_for":"Design systems extracted from 2,000+ real product sites (colours, type, spacing, components), each with a DESIGN.md","how_to_use":"Use as style-DNA study material and to seed the structure of a DESIGN.md; never ship a clone of a brand.","zh":"从 2000+ 个真实产品网站提取的设计风格（颜色、字体、间距、组件），每套附 DESIGN.md；当风格基因研究材料，别用来克隆品牌。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Extracted from other companies' sites; study the structure, not the brand."],"agent_access":"static","thumb":{"src":"assets/thumbs/refero-styles.webp","source":"screenshot","captured_at":"2026-09-27T09:33:53Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"llms-txt","name":"llms.txt","name_zh":null,"url":"https://llmstxt.org","host":"llmstxt.org","domain":"ai","section":"agent-formats","also":[],"kind":"spec","tags":["agent-readable","docs","markdown"],"best_for":"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","how_to_use":"Before scraping a design system's site, try <site>/llms.txt: Carbon, Ant Design, Atlassian, Cloudscape, TDesign and AntV serve one (checked 2026-09-27). Publish one for your own system's docs.","zh":"在站点根目录放 /llms.txt（Markdown 索引，常配 llms-full.txt）为 agent 指路的约定；不少设计系统已提供。","zh_how":"抓取设计系统网站前先试 <站点>/llms.txt：Carbon、Ant Design、Atlassian、Cloudscape、TDesign、AntV 都有（2026-09-27 核对）；自己的设计系统文档也发布一份。","access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/llms-txt.webp","source":"screenshot","captured_at":"2026-09-27T09:33:55Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"agents-md","name":"AGENTS.md","name_zh":null,"url":"https://agents.md","host":"agents.md","domain":"ai","section":"agent-formats","also":[],"kind":"spec","tags":["agent-readable","repo-instructions","conventions"],"best_for":"The open Markdown convention for repository instructions to coding agents (a README for agents), now stewarded under the Linux Foundation","how_to_use":"Put the project's design rules (tokens file, component library, forbidden patterns, how to run the visual checks) in AGENTS.md so any coding agent picks them up; Vercel's interface guidelines ship in this form.","zh":"给 coding agent 的仓库说明文件开放约定（写给 agent 的 README），现由 Linux 基金会下的 Agentic AI Foundation 管理。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/agents-md.webp","source":"screenshot","captured_at":"2026-09-27T09:33:55Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"agent-skills-spec","name":"Agent Skills specification","name_zh":null,"url":"https://agentskills.io","host":"agentskills.io","domain":"ai","section":"agent-formats","also":[],"kind":"spec","tags":["agent-skills","skill-md","format"],"best_for":"The open SKILL.md format this suite is written in: a folder with SKILL.md (name, description, instructions) plus optional scripts, references and templates","how_to_use":"Check a skill's frontmatter and folder layout against the spec before publishing, so it installs in any compatible agent.","zh":"本套件所用的开放 SKILL.md 格式：一个文件夹包含 SKILL.md（名称、描述、指令）及可选的脚本、参考资料与模板；发布 skill 前对照检查。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/agentskills/agentskills"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/agent-skills-spec.webp","source":"screenshot","captured_at":"2026-09-27T09:33:57Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"chrome-devtools-mcp","name":"Chrome DevTools MCP","name_zh":null,"url":"https://developer.chrome.com/docs/devtools/agents","host":"developer.chrome.com","domain":"ai","section":"design-mcp-servers","also":[],"kind":"mcp","tags":["browser","screenshots","performance"],"best_for":"Gives an agent a real Chrome: screenshots, DOM, computed styles, performance traces","how_to_use":"Add it with npx -y chrome-devtools-mcp@latest; use it as the eyes of the render-and-look loop: screenshots at several sizes, console errors, computed styles and a performance trace for the page you just built.","zh":"给 agent 一只真 Chrome：截图、DOM、计算样式和性能轨迹都能取；渲染-查看闭环的眼睛。Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/ChromeDevTools/chrome-devtools-mcp"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/chrome-devtools-mcp.webp","source":"screenshot","captured_at":"2026-09-27T09:34:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"figma-mcp","name":"Figma MCP server","name_zh":null,"url":"https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server","host":"help.figma.com","domain":"ai","section":"design-mcp-servers","also":[],"kind":"mcp","tags":["figma","mcp","design-to-code"],"best_for":"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","how_to_use":"Connect the remote server (https://mcp.figma.com/mcp) when the source of truth is a Figma file; call get_design_context and get_screenshot for a frame before writing code, and use Code Connect so it returns the project's real components.","zh":"Figma 官方 MCP：为生成代码提供设计上下文、变量、组件与截图；2026 年起新增 use_figma，可创建和编辑 Figma 设计稿、FigJam 与 Slides。","zh_how":"设计稿是事实来源时接入远程服务（https://mcp.figma.com/mcp）；写代码前先对画框调用 get_design_context 与 get_screenshot，并配置 Code Connect 让它返回项目里的真实组件。","access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Developer docs","url":"https://developers.figma.com/docs/figma-mcp-server/"},{"label":"Tools and prompts","url":"https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/"},{"label":"Remote server setup","url":"https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/"},{"label":"Code Connect","url":"https://developers.figma.com/docs/code-connect/"}],"api":null,"caveats":["The remote server is available on all seats and plans; the desktop server needs a Dev or Full seat on a paid plan (help centre, 2026-09-27).","use_figma writes to files: review agent edits like code."],"agent_access":"static","thumb":{"src":"assets/thumbs/figma-mcp.webp","source":"screenshot","captured_at":"2026-09-27T09:34:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"framelink-figma-mcp","name":"Framelink Figma MCP","name_zh":null,"url":"https://www.framelink.ai","host":"framelink.ai","domain":"ai","section":"design-mcp-servers","also":[],"kind":"mcp","tags":["figma","mcp"],"best_for":"Community MCP server that gives agents simplified Figma layout data","how_to_use":"Alternative when the official server is unavailable","zh":"社区版 Figma MCP 服务，给 AI agent 喂简化后的布局数据；官方 MCP 不可用时的替代方案，MIT 协议。","zh_how":null,"access":"free","login":false,"license":"MIT (github.com/GLips/Figma-Context-MCP)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/framelink-figma-mcp.webp","source":"screenshot","captured_at":"2026-09-27T09:34:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"shadcn-mcp","name":"shadcn/ui registry and MCP","name_zh":null,"url":"https://ui.shadcn.com/docs/mcp","host":"ui.shadcn.com","domain":"ai","section":"design-mcp-servers","also":[],"kind":"mcp","tags":["registry","mcp","components"],"best_for":"Lets agents browse and install components from shadcn-compatible registries","how_to_use":"Run pnpm dlx shadcn@latest mcp init --client claude (or cursor, vscode, codex) in the project, then ask the agent to list and add components from the configured registries instead of writing them from memory.","zh":"通过 MCP 让 agent 浏览并安装 shadcn 兼容注册表里的真实组件，避免凭空编造不存在的组件；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/shadcn-mcp.webp","source":"screenshot","captured_at":"2026-09-27T09:34:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"magic-mcp","name":"21st MCP and CLI (formerly Magic MCP)","name_zh":null,"url":"https://21st.dev/mcp","host":"21st.dev","domain":"ai","section":"design-mcp-servers","also":[],"kind":"mcp","tags":["component-generation","mcp"],"best_for":"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","how_to_use":"Search the catalogue for a component (pricing table, command menu) and install the real code rather than generating it; treat everything as a draft to restyle with the project's tokens.","zh":"21st.dev 的 CLI 与 MCP：检索社区组件库、读真实代码、连同依赖一起安装，或用 AI 草拟变体；装进来后按项目 token 重设样式。","zh_how":null,"access":"freemium","login":true,"license":"ISC (github.com/21st-dev/magic-mcp)","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Search is free with a daily install limit; AI sketching uses paid credits (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/magic-mcp.webp","source":"screenshot","captured_at":"2026-09-27T09:34:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"playwright-mcp","name":"Playwright MCP","name_zh":null,"url":"https://github.com/microsoft/playwright-mcp","host":"github.com","domain":"ai","section":"design-mcp-servers","also":[],"kind":"mcp","tags":["browser","screenshots"],"best_for":"Browser automation for agents through Playwright","how_to_use":"Add it with npx @playwright/mcp@latest; it drives the page through accessibility snapshots, so use it for multi-viewport walkthroughs and flows, and a screenshot tool for visual judgement.","zh":"让代理通过 Playwright 操控浏览器的 MCP；当另一双眼睛用，适合多视口截图；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/playwright-mcp.webp","source":"github","captured_at":"2026-09-27T09:47:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"storybook-mcp","name":"Storybook MCP","name_zh":null,"url":"https://storybook.js.org/docs/ai/mcp/overview","host":"storybook.js.org","domain":"ai","section":"design-mcp-servers","also":["code:components"],"kind":"mcp","tags":["mcp","components","manifests","design-system"],"best_for":"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","how_to_use":"Run npx storybook add @storybook/addon-mcp, start Storybook and point the agent at http://localhost:6006/mcp; ask it to query components before writing any new one.","zh":"Storybook 官方 MCP 插件：把组件清单、文档与 stories 开放给 agent，让它复用项目里的真实组件而不是新造。","zh_how":"运行 npx storybook add @storybook/addon-mcp，启动 Storybook 后让 agent 连接 http://localhost:6006/mcp；写任何新组件前先让它查询已有组件。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The component manifest (docs toolset) works only on supported frameworks such as React and Vue 3 with Vite; other setups get no manifest."],"agent_access":"static","thumb":{"src":"assets/thumbs/storybook-mcp.webp","source":"screenshot","captured_at":"2026-09-27T09:34:04Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mobbin-mcp","name":"Mobbin MCP","name_zh":null,"url":"https://mobbin.com/mcp","host":"mobbin.com","domain":"ai","section":"design-mcp-servers","also":["app-ui:screens-flows"],"kind":"mcp","tags":["mcp","screens","flows","references"],"best_for":"Lets agents search Mobbin's 600,000+ real product screens and flows in natural language","how_to_use":"Use in the research step to pull three shipped precedents for a screen before designing it.","zh":"让 agent 用自然语言检索 Mobbin 上 60 万+ 真实产品界面与流程；研究阶段先拉三个已上线的先例再动笔。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Available on Pro and Team plans only (2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/mobbin-mcp.webp","source":"screenshot","captured_at":"2026-09-27T09:46:14Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mastergo-magic-mcp","name":"MasterGo Magic MCP","name_zh":null,"url":"https://github.com/mastergo-design/mastergo-magic-mcp","host":"github.com","domain":"ai","section":"design-mcp-servers","also":[],"kind":"mcp","tags":["mcp","mastergo","china","design-to-code"],"best_for":"MasterGo's official MCP server that turns design files into a structured DSL for coding agents","how_to_use":"Use when a Chinese team designs in MasterGo: connect with a personal token, fetch the DSL for a frame and generate code against the project's components.","zh":"MasterGo 官方 MCP：把设计稿转成结构化 DSL 交给 coding agent；国内团队用 MasterGo 时接入。","zh_how":"国内团队在 MasterGo 里做设计时接入：用个人令牌连接，取某个画框的 DSL，再对照项目组件生成代码。注意 CVE-2026-15749 影响 0.2.0 及以下版本，请使用当前版本（2026-09-27 为 0.2.9）。","access":"free","login":true,"license":"ISC (npm @mastergo/magic-mcp; no LICENSE file in the repository)","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["CVE-2026-15749 (path traversal in the c2d tool) affects versions up to 0.2.0; use a current release (0.2.9 on 2026-09-27)."],"agent_access":"static","thumb":{"src":"assets/thumbs/mastergo-magic-mcp.webp","source":"github","captured_at":"2026-09-27T09:48:03Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mcp-registry","name":"Official MCP Registry","name_zh":null,"url":"https://registry.modelcontextprotocol.io","host":"registry.modelcontextprotocol.io","domain":"ai","section":"design-mcp-servers","also":[],"kind":"api","tags":["mcp","registry","api"],"best_for":"The protocol project's official registry of MCP servers, with a public JSON API","how_to_use":"Search here for a vendor's official server before trusting a third-party listing; agents can query the API directly (for example ?search=figma returns com.figma.mcp/mcp and its remote URL).","zh":"MCP 协议项目官方的服务器注册表，带公开 JSON API；找厂商 MCP 时先查这里，再信第三方列表。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://registry.modelcontextprotocol.io/v0/servers?search={query}","sample":"https://registry.modelcontextprotocol.io/v0/servers?search=figma"},"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/mcp-registry.webp","source":"screenshot","captured_at":"2026-09-27T09:34:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"wcag-quickref","name":"WCAG 2.2 Quick Reference","name_zh":null,"url":"https://www.w3.org/WAI/WCAG22/quickref/","host":"w3.org","domain":"a11y","section":"standards-law","also":[],"kind":"spec","tags":["a11y","wcag"],"best_for":"Filterable list of every WCAG 2.2 success criterion with techniques","how_to_use":"Filter to Level A and AA and to the technologies in scope, then cite criterion numbers (for example 1.4.3 contrast, 2.4.11 focus not obscured, 2.5.8 target size) in critiques. www.w3.org challenges bots: agents should read the w3c.github.io mirrors.","zh":"可按等级筛选的 WCAG 2.2 全部成功准则与技法速查；做无障碍评审时引用准则编号说话。","zh_how":"筛选 A 与 AA 级和相关技术后，在评审中直接引用准则编号（如 1.4.3 对比度、2.4.11 焦点不被遮挡、2.5.8 目标尺寸）。www.w3.org 会拦截机器访问，agent 请读 w3c.github.io 镜像。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"WCAG 2.2 (GitHub mirror)","url":"https://w3c.github.io/wcag/guidelines/22/"},{"label":"Understanding WCAG (GitHub mirror)","url":"https://w3c.github.io/wcag/understanding/"},{"label":"WCAG 3 working draft","url":"https://w3c.github.io/wcag3/guidelines/"}],"api":null,"caveats":["www.w3.org answers plain fetches with a Cloudflare challenge (403 on 2026-09-27); the mirrors return 200.","WCAG 3 is a working draft: its contrast method is not decided and APCA is not part of it; keep WCAG 2.2 as the requirement."],"agent_access":"static","thumb":{"src":"assets/thumbs/wcag-quickref.webp","source":"screenshot","captured_at":"2026-09-27T09:34:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gb-t-37668","name":"GB/T 37668-2019 Internet content accessibility (信息技术 互联网内容无障碍可访问性技术要求与测试方法)","name_zh":"GB/T 37668-2019 互联网内容无障碍可访问性技术要求与测试方法","url":"https://openstd.samr.gov.cn/bzgk/std/newGbInfo?hcno=35ECC696805C1A67C93B74FB6D0D8EFB","host":"openstd.samr.gov.cn","domain":"a11y","section":"standards-law","also":[],"kind":"spec","tags":["china","standard","wcag","testing"],"best_for":"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","how_to_use":"Cite it for products in mainland China; read the full text through the official 在线预览, and use the MIIT 适老化 specifications for the age-friendly additions.","zh":"中国互联网网页与移动应用无障碍的国家标准（2020-03-01 实施，现行）：可感知、可操作、可理解、兼容四类要求加测试方法，与 WCAG 2.0 基本对应。","zh_how":"面向中国大陆的产品引用它；全文在官方平台“在线预览”阅读，适老化的附加要求看工信部的适老化设计规范。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["The official full-text preview needs a modern browser; plain fetches get only the metadata page."],"agent_access":"static","thumb":{"src":"assets/thumbs/gb-t-37668.webp","source":"screenshot","captured_at":"2026-09-27T09:34:03Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"china-age-friendly-a11y","name":"China Internet age-friendly and accessibility platform (适老化及无障碍公共服务平台)","name_zh":"中国互联网应用适老化及无障碍公共服务平台","url":"http://wza.isc.org.cn","host":"wza.isc.org.cn","domain":"a11y","section":"standards-law","also":["a11y:inclusive-design"],"kind":"guideline","tags":["china","elderly","regulation","mobile"],"best_for":"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","how_to_use":"Open the APP spec before shipping a consumer app in China: in elder mode main text >= 18 dp/pt and main targets >= 60x60 dp, other targets >= 44x44 dp, contrast 4.5:1 (3:1 above 18 dp), line spacing 1.3, no ads or random pop-ups, a findable 长辈版 entry, close buttons only top-left, top-right or bottom-centre.","zh":"工信部适老化通用设计规范（网站与 APP）、相关标准（GB/T 37668、T/ISC 0007-2021）与认证的官方平台；面向国内用户的产品上线前必查。","zh_how":"国内消费级 App 上线前读 APP 适老化规范：长辈版主要文字不小于 18dp/pt、主要控件点击区不小于 60×60dp，其他页面不小于 44×44dp；对比度 4.5:1（大于 18dp 时 3:1）；行距 1.3 倍；长辈版不得出现广告和随机弹窗；“长辈版”入口可搜索可达；弹窗关闭按钮只能在左上、右上或底部居中。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"APP 适老化通用设计规范","url":"http://wza.isc.org.cn/bztx/bzjd/mobile/index.html"},{"label":"互联网网站适老化通用设计规范","url":"http://wza.isc.org.cn/bztx/bzjd/lgf/index.html"}],"api":null,"caveats":["HTTP only: the https endpoint did not answer on 2026-09-27."],"agent_access":"js","thumb":{"src":"assets/thumbs/china-age-friendly-a11y.webp","source":"screenshot","captured_at":"2026-09-27T09:34:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"eaa-en-301-549","name":"European Accessibility Act and EN 301 549","name_zh":null,"url":"https://commission.europa.eu/strategy-and-policy/policies/justice-and-fundamental-rights/disability/european-accessibility-act-eaa_en","host":"commission.europa.eu","domain":"a11y","section":"standards-law","also":[],"kind":"guideline","tags":["eu","law","en-301-549","wcag"],"best_for":"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","how_to_use":"Check whether the product falls in an EAA service category, then design to EN 301 549 (in practice WCAG 2.1 AA plus the non-web clauses for apps, documents and hardware).","zh":"欧盟《无障碍法案》（2025-06-28 起适用于电商、银行、电子书、交通票务等）与其协调标准 EN 301 549（网页部分对应 WCAG 2.1 AA）。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"EN 301 549 v3.2.1 (PDF, ETSI)","url":"https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf"}],"api":null,"caveats":["Member-state enforcement and exemptions (for example micro-enterprises) differ; this is orientation, not legal advice."],"agent_access":"static","thumb":{"src":"assets/thumbs/eaa-en-301-549.webp","source":"screenshot","captured_at":"2026-09-27T09:34:14Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"section-508","name":"Section508.gov","name_zh":null,"url":"https://www.section508.gov","host":"section508.gov","domain":"a11y","section":"standards-law","also":[],"kind":"guideline","tags":["us","federal","law","testing"],"best_for":"US federal ICT accessibility: the Revised 508 Standards (WCAG 2.0 AA by reference), test methods and procurement guidance","how_to_use":"Use when selling to US federal agencies: design to WCAG 2.x AA and read the test and conformance-report (ACR/VPAT) guidance that buyers ask for.","zh":"美国联邦 ICT 无障碍官方站：修订版 508 标准（引用 WCAG 2.0 AA）、测试方法与采购指引；面向美国联邦客户时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/section-508.webp","source":"screenshot","captured_at":"2026-09-27T09:34:10Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"ada-title-ii-web-rule","name":"ADA Title II web and mobile rule (US DOJ)","name_zh":null,"url":"https://www.ada.gov/resources/2024-03-08-web-rule/","host":"ada.gov","domain":"a11y","section":"standards-law","also":[],"kind":"guideline","tags":["us","law","wcag-2.1","government"],"best_for":"The US Department of Justice rule requiring WCAG 2.1 AA for state and local government web content and mobile apps, with compliance dates","how_to_use":"Check which deadline applies to the client; the technical bar is WCAG 2.1 AA, so design and test against that version.","zh":"美国司法部 ADA 第二章规则：州与地方政府的网站和移动应用须达到 WCAG 2.1 AA，含合规期限。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["An interim final rule of 2026-04-20 moved the deadlines to 2027-04-26 (50,000+ population) and 2028-04-26 (smaller entities); check the page for later changes."],"agent_access":"static","thumb":{"src":"assets/thumbs/ada-title-ii-web-rule.webp","source":"screenshot","captured_at":"2026-09-27T09:34:13Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"axe-core","name":"axe-core and axe DevTools","name_zh":null,"url":"https://github.com/dequelabs/axe-core","host":"github.com","domain":"a11y","section":"testing-tools","also":[],"kind":"library","tags":["testing","axe","ci","playwright","wcag"],"best_for":"The most widely embedded accessibility rules engine (behind axe DevTools, Lighthouse and many CI tools); runs in any browser page or test","how_to_use":"In a render loop, inject axe with @axe-core/playwright (or run npx @axe-core/cli <url>) and fail on serious and critical violations; each result links a rule page with the fix. Then do the manual keyboard and screen-reader pass it cannot do.","zh":"嵌入最广的无障碍规则引擎（axe DevTools、Lighthouse 与大量 CI 工具都基于它），可在任意页面或测试中运行。","zh_how":"在渲染循环里用 @axe-core/playwright 注入（或运行 npx @axe-core/cli <url>），出现 serious 与 critical 就判失败；每条结果都链接到带修复方法的规则页。之后仍要人工做键盘与读屏检查。","access":"free","login":false,"license":"MPL-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Rule descriptions (Deque University)","url":"https://dequeuniversity.com/rules/axe/"},{"label":"axe DevTools browser extension","url":"https://www.deque.com/axe/devtools/"},{"label":"axe MCP server (paid)","url":"https://www.deque.com/axe/mcp-server/"}],"api":null,"caveats":["Automated rules catch only part of WCAG; a clean run is not proof of access.","The extension's guided tests and the axe MCP server are paid."],"agent_access":"static","thumb":{"src":"assets/thumbs/axe-core.webp","source":"github","captured_at":"2026-09-27T09:48:06Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"wave","name":"WAVE","name_zh":null,"url":"https://wave.webaim.org","host":"wave.webaim.org","domain":"a11y","section":"testing-tools","also":[],"kind":"tool","tags":["testing","browser-extension","webaim","visual"],"best_for":"WebAIM's evaluator that overlays errors, contrast failures and structure (headings, landmarks, ARIA) directly on the page","how_to_use":"Deep-link a report with wave.webaim.org/report#/<url> or use the extension for pages behind login; pair it with axe, since each catches different issues. The WAVE API is paid per credit.","zh":"WebAIM 的可视化检测工具，把错误、对比度问题和结构（标题、地标、ARIA）直接标在页面上。","zh_how":"用 wave.webaim.org/report#/<网址> 直接打开报告，需登录的页面用浏览器扩展；与 axe 搭配使用，两者能发现的问题不同。WAVE API 按次付费。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"WAVE API (paid)","url":"https://wave.webaim.org/api/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wave.webp","source":"screenshot","captured_at":"2026-09-27T09:34:12Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"accessibility-insights","name":"Accessibility Insights","name_zh":null,"url":"https://accessibilityinsights.io","host":"accessibilityinsights.io","domain":"a11y","section":"testing-tools","also":[],"kind":"tool","tags":["testing","guided-assessment","microsoft"],"best_for":"Microsoft's free tools for web, Windows and Android, with a guided Assessment that walks through the manual checks automation misses","how_to_use":"Run FastPass on every build, and the Assessment (tab stops, focus, landmarks, headings) before a release; export the report as evidence.","zh":"微软免费的无障碍工具（Web、Windows、Android），Assessment 模式会引导完成自动化测不到的人工检查。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/accessibility-insights.webp","source":"screenshot","captured_at":"2026-09-27T09:34:15Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"colour-contrast-analyser","name":"Colour Contrast Analyser (CCA)","name_zh":null,"url":"https://vispero.com/lp/color-contrast-checker/","host":"vispero.com","domain":"a11y","section":"testing-tools","also":["color:contrast"],"kind":"tool","tags":["contrast","desktop","eyedropper","wcag"],"best_for":"Free desktop contrast checker whose eyedropper samples any pixel on screen: text over photos, gradients, screenshots and design files","how_to_use":"Use when the colours are not in code; sample the lightest background pixel behind the text and read the WCAG AA and AAA results.","zh":"免费桌面对比度检测器，吸管可取屏幕任意像素（照片上的文字、渐变、截图、设计稿）；颜色不在代码里时用。","zh_how":null,"access":"free","login":false,"license":"GPL-3.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Source and releases (GitHub)","url":"https://github.com/ThePacielloGroup/CCAe"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/colour-contrast-analyser.webp","source":"screenshot","captured_at":"2026-09-27T09:34:20Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"pa11y","name":"Pa11y","name_zh":null,"url":"https://pa11y.org","host":"pa11y.org","domain":"a11y","section":"testing-tools","also":[],"kind":"tool","tags":["testing","cli","ci","open-source"],"best_for":"Open-source command-line accessibility tester (HTML_CodeSniffer or axe runners) with a CI variant for lists of URLs","how_to_use":"Run npx pa11y <url> for a quick check, or pa11y-ci over a sitemap in CI; set --runner axe to match axe results elsewhere.","zh":"开源命令行无障碍检测工具（可选 HTML_CodeSniffer 或 axe 引擎），pa11y-ci 可批量检查 URL 列表。","zh_how":null,"access":"free","login":false,"license":"LGPL-3.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"GitHub","url":"https://github.com/pa11y/pa11y"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pa11y.webp","source":"screenshot","captured_at":"2026-09-27T09:34:14Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"stark","name":"Stark","name_zh":null,"url":"https://www.getstark.co","host":"getstark.co","domain":"a11y","section":"testing-tools","also":[],"kind":"tool","tags":["figma","contrast","simulation","annotations"],"best_for":"Accessibility suite for design tools and code: contrast, vision simulation, focus order and alt-text annotations","how_to_use":"Use inside Figma to annotate focus order, headings and alt text before hand-off, so the implementer does not have to guess.","zh":"设计工具与代码中的无障碍套件：对比度、色觉模拟、焦点顺序与替代文本标注；交付前在 Figma 里标好焦点顺序。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Most annotation and audit features are paid."],"agent_access":"static","thumb":{"src":"assets/thumbs/stark.webp","source":"screenshot","captured_at":"2026-09-27T10:27:52Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"nvda","name":"NVDA screen reader","name_zh":null,"url":"https://www.nvaccess.org","host":"nvaccess.org","domain":"a11y","section":"testing-tools","also":[],"kind":"tool","tags":["screen-reader","windows","manual-testing"],"best_for":"The free, open-source Windows screen reader most used for manual testing, alongside VoiceOver on Apple devices","how_to_use":"Do one manual pass per key flow: navigate by headings (H), landmarks (D) and form fields (F), and listen for unlabelled controls and announcements that never come.","zh":"免费开源的 Windows 读屏软件，手动测试最常用（苹果设备用系统自带的 VoiceOver）。","zh_how":"每条关键流程人工走一遍：按标题（H）、地标（D）、表单控件（F）跳转，留意没有名称的控件和应该播报却没播报的变化。","access":"free","login":false,"license":"GPL-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Windows only."],"agent_access":"static","thumb":{"src":"assets/thumbs/nvda.webp","source":"screenshot","captured_at":"2026-09-27T09:34:19Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"apg-patterns","name":"ARIA Authoring Practices Guide","name_zh":null,"url":"https://www.w3.org/WAI/ARIA/apg/patterns/","host":"w3.org","domain":"a11y","section":"guidance-patterns","also":["app-ui:components"],"kind":"guideline","tags":["a11y","keyboard","aria"],"best_for":"Canonical keyboard interaction and ARIA roles for each widget pattern (combobox, menu, tabs, dialog)","how_to_use":"Read the pattern page (combobox, menu button, tabs, dialog, grid) for keyboard interaction and ARIA roles before specifying any custom interactive component, and prefer the native element when one exists. Agents: the pattern sources are on GitHub.","zh":"W3C 官方交互模式指南，给出每种组件的键盘行为与 ARIA 角色；写自定义交互组件规格前必读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"APG pattern sources (GitHub)","url":"https://github.com/w3c/aria-practices/tree/main/content/patterns"}],"api":null,"caveats":["www.w3.org challenges bots (403 on 2026-09-27); the old w3c.github.io/aria-practices mirror now shows only 'Content Moved'."],"agent_access":"static","thumb":{"src":"assets/thumbs/apg-patterns.webp","source":"screenshot","captured_at":"2026-09-27T09:46:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"inclusive-components","name":"Inclusive Components","name_zh":null,"url":"https://inclusive-components.design","host":"inclusive-components.design","domain":"a11y","section":"guidance-patterns","also":["app-ui:components"],"kind":"article","tags":["a11y","patterns"],"best_for":"Accessible component patterns explained in depth (toggles, menus, tabs, cards, notifications)","how_to_use":"Read the matching article before building the component","zh":"深入讲解无障碍组件模式：开关、菜单、标签页、卡片、通知；动手做组件前先读对应文章。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["No new articles for years; the patterns remain sound but check current browser and screen-reader support."],"agent_access":"static","thumb":{"src":"assets/thumbs/inclusive-components.webp","source":"screenshot","captured_at":"2026-09-27T09:34:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"a11y-project-checklist","name":"A11Y Project checklist","name_zh":null,"url":"https://www.a11yproject.com/checklist/","host":"a11yproject.com","domain":"a11y","section":"guidance-patterns","also":[],"kind":"guideline","tags":["a11y","checklist"],"best_for":"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","how_to_use":"Walk the checklist by section (content, global code, keyboard, images, headings, forms, media, appearance, animation) before hand-off; each item links the WCAG criterion it maps to.","zh":"大白话写成的 WCAG 无障碍检查清单；设计正式交付前先逐项过一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/a11y-project-checklist.webp","source":"screenshot","captured_at":"2026-09-27T09:34:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sara-soueidan","name":"Sara Soueidan and Practical Accessibility","name_zh":null,"url":"https://www.sarasoueidan.com","host":"sarasoueidan.com","domain":"a11y","section":"guidance-patterns","also":["reading:interface-craft"],"kind":"article","tags":["a11y","svg","css","custom-controls","course"],"best_for":"Deep articles on accessible front-end (accessible names, custom controls, SVG, CSS-generated content) and the Practical Accessibility video course for designers and developers","how_to_use":"Read the matching article before building a custom control or an SVG icon system; the course is the structured route for a team that designs and builds its own components.","zh":"Sara Soueidan 关于无障碍前端（可访问名称、自定义控件、SVG、CSS 生成内容）的深度文章，以及面向设计与开发的 Practical Accessibility 课程。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Practical Accessibility (course, paid)","url":"https://practical-accessibility.today"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sara-soueidan.webp","source":"screenshot","captured_at":"2026-09-27T09:34:20Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mdn-accessibility","name":"MDN Accessibility and ARIA reference","name_zh":null,"url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility","host":"developer.mozilla.org","domain":"a11y","section":"guidance-patterns","also":[],"kind":"guideline","tags":["aria","reference","html","agent-readable"],"best_for":"Plain, agent-readable reference for accessible HTML and every ARIA role, state and property, with browser-support notes","how_to_use":"Look up the role or attribute before using it (for example aria-expanded, role=switch); the first rule on every ARIA page is to use the native element when one exists.","zh":"面向 agent 也易读的无障碍 HTML 与 ARIA 角色、状态、属性参考，附浏览器支持说明。","zh_how":null,"access":"free","login":false,"license":"CC-BY-SA-2.5","tier":"A","status":"active","lang":"multi","region":"global","entry_points":[{"label":"ARIA reference","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mdn-accessibility.webp","source":"screenshot","captured_at":"2026-09-27T09:34:23Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"adrian-roselli","name":"Adrian Roselli","name_zh":null,"url":"https://adrianroselli.com","host":"adrianroselli.com","domain":"a11y","section":"guidance-patterns","also":[],"kind":"article","tags":["testing","patterns","screen-readers"],"best_for":"Rigorous accessibility testing of real patterns (tables, disclosures, toggles, dialogs) with screen-reader results across browsers","how_to_use":"Search his site for the component before inventing an ARIA pattern; the posts show what actually gets announced, which the specs cannot.","zh":"对真实组件模式（表格、折叠、开关、对话框）做严格无障碍测试，并给出各浏览器与读屏软件的实际结果；自创 ARIA 模式前先搜。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/adrian-roselli.webp","source":"screenshot","captured_at":"2026-09-27T09:34:24Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"freee-a11y-guidelines","name":"freee Accessibility Guidelines","name_zh":null,"url":"https://a11y-guidelines.freee.co.jp","host":"a11y-guidelines.freee.co.jp","domain":"a11y","section":"guidance-patterns","also":[],"kind":"guideline","tags":["japan","checklist","wcag"],"best_for":"Practical, versioned accessibility guidelines and checks from a Japanese SaaS company, each mapped to WCAG","how_to_use":"Use as a concrete checklist when WCAG prose is too abstract, especially for CJK interfaces.","zh":"日本 freee 公司按版本发布的无障碍指南与检查项，逐条对应 WCAG；WCAG 条文太抽象时用它落地。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/freee-a11y-guidelines.webp","source":"screenshot","captured_at":"2026-09-27T09:34:24Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"webaim-million","name":"The WebAIM Million","name_zh":null,"url":"https://webaim.org/projects/million/","host":"webaim.org","domain":"a11y","section":"guidance-patterns","also":[],"kind":"article","tags":["evidence","annual-report","common-failures"],"best_for":"Annual automated scan of the top million home pages: which failures are most common, so a review knows where to look first","how_to_use":"Check the six failure types that account for about 96% of detected errors in the 2026 report (low-contrast text on 83.9% of pages, missing alt text, missing form labels, empty links, empty buttons, missing document language) before anything else.","zh":"WebAIM 每年对百万个网站首页的自动检测报告：哪些错误最常见，评审时先查哪里。","zh_how":"先查 2026 年报告里占已检出错误约 96% 的六类问题：低对比度文字（83.9% 的页面）、图片缺替代文本、表单缺标签、空链接、空按钮、缺文档语言。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webaim-million.webp","source":"screenshot","captured_at":"2026-09-27T09:34:24Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"inclusive-design-microsoft","name":"Microsoft Inclusive Design","name_zh":null,"url":"https://inclusive.microsoft.design","host":"inclusive.microsoft.design","domain":"a11y","section":"inclusive-design","also":[],"kind":"guideline","tags":["inclusive","a11y"],"best_for":"Toolkit framing disability as permanent, temporary and situational","how_to_use":"Download the toolkit (manual and activity cards) and use the Persona Spectrum (permanent, temporary, situational) when writing a brief, so one constraint (one arm, a baby in arm, an arm injury) improves the design for all three.","zh":"微软包容性设计工具包，把残障分为永久、临时与情境三种；写 brief 时用它的 persona spectrum。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/inclusive-design-microsoft.webp","source":"screenshot","captured_at":"2026-09-27T09:34:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"homeoffice-a11y-posters","name":"UK Home Office accessibility posters","name_zh":null,"url":"https://github.com/UKHomeOffice/posters","host":"github.com","domain":"a11y","section":"inclusive-design","also":[],"kind":"guideline","tags":["posters","neurodiversity","low-vision","dos-and-donts"],"best_for":"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","how_to_use":"Put the relevant poster next to the design in a critique; translations exist in many languages.","zh":"英国内政部无障碍设计海报：针对自闭症、低视力、读写障碍、焦虑、行动与听力障碍及读屏用户的宜与忌；评审时对照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/homeoffice-a11y-posters.webp","source":"github","captured_at":"2026-09-27T09:48:06Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"inclusive-design-principles","name":"Inclusive Design Principles","name_zh":null,"url":"https://inclusivedesignprinciples.info","host":"inclusivedesignprinciples.info","domain":"a11y","section":"inclusive-design","also":[],"kind":"guideline","tags":["principles","critique"],"best_for":"Seven short principles (comparable experience, consider situation, be consistent, give control, offer choice, prioritise content, add value) with examples","how_to_use":"Use the seven headings as critique prompts for any interface, beyond pass-or-fail criteria.","zh":"七条包容性设计原则（体验可比、考虑情境、保持一致、给予控制、提供选择、内容优先、增加价值），可当评审提问清单。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/inclusive-design-principles.webp","source":"screenshot","captured_at":"2026-09-27T09:34:28Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"cambridge-inclusive-toolkit","name":"Inclusive Design Toolkit (University of Cambridge)","name_zh":null,"url":"https://www.inclusivedesigntoolkit.com","host":"inclusivedesigntoolkit.com","domain":"a11y","section":"inclusive-design","also":[],"kind":"guideline","tags":["research","exclusion","ageing","simulation"],"best_for":"Research-based toolkit for measuring how many people a design excludes, with capability data, an exclusion calculator and impairment simulators, strong on ageing users","how_to_use":"Estimate exclusion for the key task (vision, hearing, thinking, reach and dexterity) to argue for a change with numbers rather than opinion.","zh":"剑桥大学的包容性设计工具包：用能力数据、排除计算器和障碍模拟估算一个设计会排除多少人，适老化论证尤其有用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/cambridge-inclusive-toolkit.webp","source":"screenshot","captured_at":"2026-09-27T09:34:31Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"coga-usable","name":"Making Content Usable for People with Cognitive and Learning Disabilities (W3C)","name_zh":null,"url":"https://w3c.github.io/coga/content-usable/","host":"w3c.github.io","domain":"a11y","section":"inclusive-design","also":[],"kind":"guideline","tags":["cognitive","plain-language","w3c","patterns"],"best_for":"W3C guidance and design patterns for cognitive and learning disabilities: clear purpose, findable help, preventing mistakes, memory load, plain language","how_to_use":"Read the design patterns section before designing forms, error recovery or multi-step tasks; it covers needs WCAG's criteria mostly miss.","zh":"W3C 关于认知与学习障碍的指南和设计模式：目的清晰、帮助可找、防错、减轻记忆负担、简明语言；设计表单与多步骤任务前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The canonical copy at www.w3.org/TR/coga-usable/ is bot-walled; this is the editor's draft mirror."],"agent_access":"static","thumb":{"src":"assets/thumbs/coga-usable.webp","source":"screenshot","captured_at":"2026-09-27T09:34:32Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"60fps","name":"60fps.design","name_zh":null,"url":"https://60fps.design","host":"60fps.design","domain":"motion","section":"recordings","also":[],"kind":"gallery","tags":["mobile","app","recordings"],"best_for":"Screen recordings of UI animation in shipped apps (mostly iOS), filterable by interaction pattern and app category; the best single source for mobile motion","how_to_use":"Deep-link /shots/filter/<pattern> (loading, onboarding, navigation...) or /apps/category/<category>; play at 0.25-0.5x and write down duration, easing, origin and what stays still before specifying a transition","zh":"头部 App 界面动效的录屏库，按应用与交互类型筛选；移动端动效参考首选，放慢速度逐帧看。","zh_how":"深链 /shots/filter/<交互类型>（loading、onboarding、navigation 等）或 /apps/category/<类目>；0.25–0.5 倍速播放，记下时长、缓动、起点和哪些元素没动，再写动效规格。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Pattern filter (example: loading)","url":"https://60fps.design/shots/filter/loading"},{"label":"App category (example: finance)","url":"https://60fps.design/apps/category/finance"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/60fps.webp","source":"screenshot","captured_at":"2026-09-27T09:34:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"spottedinprod","name":"Spotted in Prod","name_zh":null,"url":"https://spottedinprod.com","host":"spottedinprod.com","domain":"motion","section":"recordings","also":[],"kind":"gallery","tags":["ios","app","details","recordings"],"best_for":"Short recordings of standout interaction details in shipped iOS apps, browsable by app and by style tag (minimal, skeuomorphic, playful, dense...)","how_to_use":"Browse Apps or a style tag, open a clip and note trigger, duration and easing; it is iOS only, so translate the idiom before using it on Android or the web","zh":"只收 iOS：上线 App 里出色交互细节的短录屏，可按应用和风格标签浏览；移植到安卓或网页前先转换平台习惯。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/spottedinprod.webp","source":"screenshot","captured_at":"2026-09-27T09:34:40Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ripplix","name":"Ripplix","name_zh":null,"url":"https://www.ripplix.com","host":"ripplix.com","domain":"motion","section":"recordings","also":[],"kind":"gallery","tags":["recordings","micro-interactions","mobile","web"],"best_for":"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","how_to_use":"Start from All elements, pick the element you are designing and compare five products at reduced speed; note timing and what does not move","zh":"7000+ 条真实 App 与网站的界面动效录屏，覆盖移动、网页、手表与 AR/VR，可按元素（引导、成功、下拉、图表等）和行业筛选。","zh_how":"从 All elements 进入，选正在设计的元素，慢放对比五个产品，记下节奏和哪些东西不动。","access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"All elements","url":"https://www.ripplix.com/all-elements"},{"label":"All apps and sites","url":"https://www.ripplix.com/all-apps"}],"api":null,"caveats":["Pro plan unlocks the full library; some clips are marketing sites rather than product UI"],"agent_access":"static","thumb":{"src":"assets/thumbs/ripplix.webp","source":"screenshot","captured_at":"2026-09-27T09:34:38Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"apple-design-awards","name":"Apple Design Awards","name_zh":null,"url":"https://developer.apple.com/design/awards/","host":"developer.apple.com","domain":"motion","section":"recordings","also":["app-ui:details-offbeat"],"kind":"gallery","tags":["ios","recordings","interaction","awards"],"best_for":"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","how_to_use":"Watch the Interaction category videos frame by frame for gesture-driven, interruptible transitions; compare with Apple's HIG before copying an idiom","zh":"苹果设计大奖历年获奖与入围作品，每个都有上线 App 的视频；「交互」与「趣味」类别就是原生动效的精选合集。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/apple-design-awards.webp","source":"screenshot","captured_at":"2026-09-27T09:47:45Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"detail-design","name":"Detail","name_zh":null,"url":"https://detail.design","host":"detail.design","domain":"motion","section":"recordings","also":["app-ui:details-offbeat"],"kind":"gallery","tags":["details","interaction","motion","copywriting","recordings"],"best_for":"Curated short recordings of the small decisions that make shipped software feel considered, tagged Design, Interactivity, Motion, Copywriting, Accessibility and Easter Egg","how_to_use":"Filter to Motion or Interactivity and study one detail at a time: what triggers it, how long it runs and why it earns its place; a Chinese edition lives at /zh","zh":"收录让产品显得用心的细小设计决策，每条配短录屏，分设计、交互、动效、文案、无障碍、彩蛋六类；有中文版。","zh_how":"中文版在 detail.design/zh；按「动效」「交互」筛选，一条条看触发方式、时长，以及它为什么值得存在。","access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"multi","region":"global","entry_points":[{"label":"中文版 (Chinese edition)","url":"https://detail.design/zh"}],"api":null,"caveats":["Some in-depth pages are for members only"],"agent_access":"static","thumb":{"src":"assets/thumbs/detail-design.webp","source":"screenshot","captured_at":"2026-09-27T09:34:35Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"codrops","name":"Codrops","name_zh":null,"url":"https://tympanus.net/codrops/","host":"tympanus.net","domain":"motion","section":"showcases","also":[],"kind":"article","tags":["web","webgl","scroll","tutorial"],"best_for":"Experimental web motion with source and tutorials: scroll effects, page transitions, WebGL, typography animation","how_to_use":"Start from the Creative Hub and filter by technique (page transition, scroll, WebGL, text); every demo links its article and source; retime and restyle before reuse","zh":"实验性网页动效博客，附源码与教程：滚动、页面过渡、WebGL、字体动画；演示授权逐个确认。","zh_how":"从 Creative Hub 按技巧（页面转场、滚动、WebGL、文字）筛选；每个演示都附文章与源码；复用前按自己的动效 token 重调时长与样式。","access":"free","login":false,"license":"Demos MIT-style, check each","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Creative Hub (tutorials and 1,000+ demos; replaces the Collective)","url":"https://tympanus.net/codrops/hub/"}],"api":null,"caveats":["Demo licences vary; read each demo's licence before shipping its code or assets","Expressive, often heavy effects: check performance and prefers-reduced-motion before using them in product UI"],"agent_access":"static","thumb":{"src":"assets/thumbs/codrops.webp","source":"screenshot","captured_at":"2026-09-27T09:34:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"madewithgsap","name":"Made With GSAP","name_zh":null,"url":"https://madewithgsap.com","host":"madewithgsap.com","domain":"motion","section":"showcases","also":[],"kind":"gallery","tags":["gsap","web"],"best_for":"Paid, growing collection of GSAP web effects (118 in September 2026, one added weekly) with explained, copyable code, plus a showcase page","how_to_use":"Browse the effect previews for scroll, cursor and drag ideas; subscribe only if the team will reuse the code, and retime every effect to your motion tokens","zh":"付费的 GSAP 网页动效合集（2026 年 9 月共 118 个，每周新增），附讲解与可复制代码，另有站点展示页；找滚动、鼠标、拖拽类效果的灵感。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Full code needs a subscription (20-25 EUR per month in September 2026)","Expressive effects: check performance and prefers-reduced-motion before using them in product UI"],"agent_access":"static","thumb":{"src":"assets/thumbs/madewithgsap.webp","source":"screenshot","captured_at":"2026-09-27T09:34:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lottiefiles","name":"LottieFiles","name_zh":null,"url":"https://lottiefiles.com","host":"lottiefiles.com","domain":"motion","section":"showcases","also":[],"kind":"asset-library","tags":["lottie","dotlottie"],"best_for":"Huge library of Lottie animations plus tooling","how_to_use":"Search, filter to free, open the file and read its licence; prefer dotLottie (.lottie) for smaller files, and retime to your motion tokens before shipping","zh":"最大的 Lottie 动画库加配套工具；筛选免费素材，每个动画上线前单独核对许可。","zh_how":null,"access":"freemium","login":true,"license":"Lottie Simple License for free files; check each","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare wall and sign-in: agents cannot fetch it, send the link","Free files use the Lottie Simple License; check each file before shipping"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/lottiefiles.webp","source":"screenshot","captured_at":"2026-09-27T09:35:24Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"olivier-larose","name":"Olivier Larose blog","name_zh":null,"url":"https://blog.olivierlarose.com","host":"blog.olivierlarose.com","domain":"motion","section":"showcases","also":[],"kind":"article","tags":["web","recreate","tutorial"],"best_for":"Tutorials that rebuild award-site animations step by step","how_to_use":"Pick an effect from the sidebar (scroll, mouse, page transitions, 3D, shaders) and follow the step-by-step React and Next.js build; retime it to your motion tokens before reuse","zh":"逐步复刻获奖网站动效的教程博客；找到想要的效果，照着搭建过程做。","zh_how":"从侧栏按类别（滚动、鼠标、页面转场、3D、shader）选效果，跟着 React/Next.js 分步实现；复用前按自己的动效 token 重调时长。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/olivier-larose.webp","source":"screenshot","captured_at":"2026-09-27T09:34:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nan-fyi","name":"nan.fyi","name_zh":null,"url":"https://www.nan.fyi","host":"nan.fyi","domain":"motion","section":"showcases","also":[],"kind":"article","tags":["interactive-essay","svg"],"best_for":"Interactive essays on SVG paths, layout animation and how motion works under the hood","how_to_use":"Read 'A Deep Dive Into SVG Path Commands' before hand-writing icon or morph paths, and the Framer Motion posts (keys, Magic Motion) before building layout animation","zh":"交互式技术随笔，把 SVG 路径、布局动画的底层原理讲到能动手；手写 path 或 FLIP 前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nan-fyi.webp","source":"screenshot","captured_at":"2026-09-27T09:34:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"codepen","name":"CodePen","name_zh":null,"url":"https://codepen.io","host":"codepen.io","domain":"motion","section":"showcases","also":["code:animated-components"],"kind":"community","tags":["demos","css","creative-coding","web"],"best_for":"The largest collection of front-end demos: almost every interaction, CSS and SVG animation technique has a working pen to fork","how_to_use":"Search the technique, fork the pen and read the code; judge the timing yourself, most pens are experiments rather than production patterns","zh":"最大的前端演示集合，几乎每种交互、CSS 与 SVG 动画技巧都有可运行的示例可 fork；站点拦截爬虫，把链接发给用户。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare wall blocks scripted fetches: send the link","Public pens are MIT-licensed under CodePen's terms, but images, fonts and libraries they load keep their own licences"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/codepen.webp","source":"screenshot","captured_at":"2026-09-27T09:34:44Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"easing-wizard","name":"Easing Wizard","name_zh":null,"url":"https://easingwizard.com","host":"easingwizard.com","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["easing","spring","linear()"],"best_for":"Generate and preview bezier, spring, bounce and wiggle easings, exported as CSS including linear()","how_to_use":"Tune by eye with the preview, then copy the CSS","zh":"缓动曲线生成器，可视调 bezier、弹簧、回弹等效果并实时预览，直接导出含 linear() 的 CSS；调动画手感时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/easing-wizard.webp","source":"screenshot","captured_at":"2026-09-27T09:34:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"easings-net","name":"Easing Functions Cheat Sheet","name_zh":null,"url":"https://easings.net","host":"easings.net","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["easing","reference"],"best_for":"Visual reference of the named easing functions with CSS and maths","how_to_use":"Look up a named curve to copy its cubic-bezier; for product UI stay in the ease-out family (quart, quint, expo) and keep elastic and bounce for rare playful moments","zh":"具名缓动函数的图解速查，附曲线形状与 cubic-bezier 值；挑好曲线直接抄参数。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["A catalogue of Penner curves: most elastic, back and bounce curves are wrong for product UI; springs suit gestures better"],"agent_access":"static","thumb":{"src":"assets/thumbs/easings-net.webp","source":"screenshot","captured_at":"2026-09-27T09:34:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"linear-easing-generator","name":"Linear easing generator","name_zh":null,"url":"https://linear-easing-generator.netlify.app","host":"linear-easing-generator.netlify.app","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["linear()","spring","css"],"best_for":"Converts a JS easing or SVG path into a CSS linear() function (springs and bounces in pure CSS)","how_to_use":"Paste a spring function, copy the linear() output","zh":"把 JS 缓动函数或 SVG 路径转成 CSS linear() 的小工具；想用纯 CSS 做弹簧与回弹动画时直接抄结果。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/linear-easing-generator.webp","source":"screenshot","captured_at":"2026-09-27T09:34:50Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cubic-bezier","name":"cubic-bezier.com","name_zh":null,"url":"https://cubic-bezier.com","host":"cubic-bezier.com","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["easing"],"best_for":"Classic bezier editor with side-by-side comparison","how_to_use":"Drag the handles, then press Go to race your curve against a library curve at the duration you plan to ship; copy the cubic-bezier() value into a motion token","zh":"经典缓动曲线编辑器，支持并排对比；调自定义曲线时和预设对照手感。","zh_how":"拖动控制柄，点 Go! 让自定义曲线和库里的曲线在计划的时长下并排跑一遍，再把 cubic-bezier() 值写进动效 token。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/cubic-bezier.webp","source":"screenshot","captured_at":"2026-09-27T09:34:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"css-springs","name":"CSS Spring Easing Generator","name_zh":null,"url":"https://www.kvin.me/css-springs","host":"kvin.me","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["spring","linear()"],"best_for":"Turns a spring given as perceptual duration and bounce into a CSS linear() easing plus the matching real duration (--spring-easing and --spring-duration)","how_to_use":"Enter the duration and bounce from the motion spec (the model SwiftUI and Motion use), copy both custom properties and always apply them together","zh":"把以感知时长与回弹度描述的弹簧（SwiftUI、Motion 用的同一模型）转成 CSS linear() 缓动和对应的实际时长两个变量；在网页上还原原生弹簧手感时用。","zh_how":"填入动效规格里的时长与 bounce，复制 --spring-easing 与 --spring-duration 两个变量并一起使用。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/css-springs.webp","source":"screenshot","captured_at":"2026-09-27T09:34:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"scroll-driven-animations","name":"Scroll-driven Animations","name_zh":null,"url":"https://scroll-driven-animations.style","host":"scroll-driven-animations.style","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["scroll","css","demos"],"best_for":"Demos and visual tools for CSS scroll-driven animations (timeline ranges, view progress)","how_to_use":"Use the range visualiser to pick animation-range values (entry, exit, cover, contain) and copy the CSS; test with prefers-reduced-motion on","zh":"CSS 滚动驱动动画的演示与可视化工具；写 animation-range 时用它的区间可视化器校准。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Check current browser support (Baseline) before relying on scroll-driven animations; ship a static fallback"],"agent_access":"static","thumb":{"src":"assets/thumbs/scroll-driven-animations.webp","source":"og","captured_at":"2026-09-27T09:52:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"view-transitions-demos","name":"View Transitions demos","name_zh":null,"url":"https://view-transitions.chrome.dev","host":"view-transitions.chrome.dev","domain":"motion","section":"tools","also":[],"kind":"gallery","tags":["view-transitions","css"],"best_for":"Reference demos for same-document and cross-document view transitions","how_to_use":"Copy the pattern closest to the navigation being designed","zh":"View Transitions 官方演示集，同文档与跨文档都有；照抄最接近你要做的导航过渡的模式。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/view-transitions-demos.webp","source":"screenshot","captured_at":"2026-09-27T09:34:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"jitter","name":"Jitter","name_zh":null,"url":"https://jitter.video","host":"jitter.video","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["motion-design","export"],"best_for":"Browser-based motion design tool with Lottie, video and GIF export","how_to_use":"Import frames from Figma, animate on the timeline and export 4K video, GIF or Lottie; suited to marketing and brand motion rather than in-product UI","zh":"浏览器里的动效设计工具，可导出 Lottie、视频与 GIF；适合做营销动画，不主攻产品内界面。","zh_how":"从 Figma 导入画面，在时间轴上做动画，导出 4K 视频、GIF 或 Lottie；适合营销与品牌动效，不适合产品内交互。","access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/jitter.webp","source":"screenshot","captured_at":"2026-09-27T09:35:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"rive","name":"Rive","name_zh":null,"url":"https://rive.app","host":"rive.app","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["interactive","state-machine"],"best_for":"Editor and runtimes for interactive vector animation driven by state machines","how_to_use":"Use when an animation must react to input across platforms; open marketplace files to study their state machines before building your own","zh":"状态机驱动的交互式矢量动画编辑器加多端运行时；动画需要响应用户输入、跨平台复用时选它。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Marketplace (remixable files, per-file licence)","url":"https://rive.app/marketplace/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/rive.webp","source":"screenshot","captured_at":"2026-09-27T09:35:01Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lottie-docs","name":"Lottie format docs","name_zh":null,"url":"https://lottiefiles.github.io/lottie-docs/","host":"lottiefiles.github.io","domain":"motion","section":"tools","also":[],"kind":"spec","tags":["lottie","format"],"best_for":"Readable reference of the Lottie JSON format (layers, shapes, keyframes, easing); the formal spec is now published by the Lottie Animation Community","how_to_use":"Keep it open when generating or editing Lottie by code; check structure against the official spec linked here","zh":"Lottie JSON 格式的人读版参考（图层、形状、关键帧、缓动），正式规范由 Lottie Animation Community 发布；用代码生成或修改 Lottie 时必备。","zh_how":null,"access":"free","login":false,"license":"CC-BY-4.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Official Lottie specification","url":"https://lottie.github.io/lottie-spec/latest/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/lottie-docs.webp","source":"screenshot","captured_at":"2026-09-27T09:34:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"animista","name":"Animista","name_zh":null,"url":"https://animista.net","host":"animista.net","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["css","presets"],"best_for":"Library of CSS keyframe presets with generated code","how_to_use":"Starting point only; retime and re-ease everything","zh":"CSS 关键帧预设库，直接生成代码；只当起点，时长与缓动都要自己重调。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/animista.webp","source":"screenshot","captured_at":"2026-09-27T09:35:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"protopie","name":"ProtoPie","name_zh":null,"url":"https://www.protopie.io","host":"protopie.io","domain":"motion","section":"tools","also":["app-ui:details-offbeat"],"kind":"tool","tags":["prototyping","interaction","sensors","hand-off"],"best_for":"High-fidelity interaction prototyping without code: variables, conditions, device sensors and multi-screen links, playable on real devices","how_to_use":"Prototype the one interaction whose feel is contested (a gesture, a sheet, a car HMI screen), test it on the device, then hand the timings to engineering","zh":"无需写代码的高保真交互原型工具：变量、条件、手机传感器与多屏联动，可在真机上运行；国内外车机与硬件团队常用。","zh_how":"只为「手感有争议」的那个交互做原型（手势、抽屉、车机屏），真机测试后把时长与曲线交给开发。","access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/protopie.webp","source":"screenshot","captured_at":"2026-09-27T09:35:06Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"devtools-animations","name":"Chrome DevTools: Animations panel","name_zh":null,"url":"https://developer.chrome.com/docs/devtools/css/animations","host":"developer.chrome.com","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["devtools","inspect","slow-motion","cdp"],"best_for":"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","how_to_use":"Open a reference site, record in the Animations panel, replay at 10% and read durations, delays and easing; agents can do the same over CDP (Animation.setPlaybackRate) while capturing frames","zh":"在任何线上页面检查、慢放（25% 或 10%）、拖动并修改 CSS 与 Web Animations 的时间参数；量参考网站动效最快的办法。","zh_how":"打开参考站点，在 Animations 面板录制后以 10% 速度回放，读出时长、延迟和缓动；智能体可通过 CDP 的 Animation.setPlaybackRate 同样慢放并截帧。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"CDP Animation domain (for scripted capture)","url":"https://chromedevtools.github.io/devtools-protocol/tot/Animation/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/devtools-animations.webp","source":"screenshot","captured_at":"2026-09-27T09:46:49Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"lottielab","name":"Lottielab","name_zh":null,"url":"https://www.lottielab.com","host":"lottielab.com","domain":"motion","section":"tools","also":[],"kind":"tool","tags":["lottie","editor","figma-import","web"],"best_for":"Browser editor for Lottie animations: import from Figma or SVG, animate on a timeline, export Lottie, GIF or MP4 without After Effects","how_to_use":"Import the static frames from Figma, animate, keep file size small, then export dotLottie for product use","zh":"浏览器里的 Lottie 动画编辑器：从 Figma 或 SVG 导入、时间轴编排，导出 Lottie、GIF、MP4，不必用 After Effects。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Lottie export needs the Pro plan; the free plan exports GIF and MP4"],"agent_access":"static","thumb":{"src":"assets/thumbs/lottielab.webp","source":"screenshot","captured_at":"2026-09-27T09:35:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"wwdc-fluid-interfaces","name":"WWDC18: Designing Fluid Interfaces","name_zh":null,"url":"https://developer.apple.com/videos/play/wwdc2018/803/","host":"developer.apple.com","domain":"motion","section":"guidelines","also":[],"kind":"article","tags":["gesture","interruptible","spring"],"best_for":"The foundational talk on gesture-driven, interruptible, redirectable interfaces","how_to_use":"Watch before designing any drag, sheet or swipe interaction","zh":"WWDC18 经典演讲，讲手势驱动、可中断、可改向的界面；做拖拽、抽屉、滑动交互前先看。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wwdc-fluid-interfaces.webp","source":"og","captured_at":"2026-09-27T10:27:46Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wwdc-animate-with-springs","name":"WWDC23: Animate with springs","name_zh":null,"url":"https://developer.apple.com/videos/play/wwdc2023/10158/","host":"developer.apple.com","domain":"motion","section":"guidelines","also":[],"kind":"article","tags":["spring","duration","bounce"],"best_for":"Explains springs through duration and bounce instead of mass, stiffness and damping","how_to_use":"Specify every spring as duration plus bounce; convert to mass, stiffness and damping only at implementation time, per platform","zh":"Apple 用 duration 和 bounce 讲弹簧动画，取代质量刚度阻尼那套；写任何平台的动效标注都可借用它的词汇。","zh_how":"动效规格一律写成 duration + bounce；到实现阶段再按平台换算成质量、刚度、阻尼。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wwdc-animate-with-springs.webp","source":"screenshot","captured_at":"2026-09-27T09:48:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"m3-motion","name":"Material 3 motion","name_zh":null,"url":"https://m3.material.io/styles/motion/overview","host":"m3.material.io","domain":"motion","section":"guidelines","also":[],"kind":"guideline","tags":["tokens","easing","duration","spring"],"best_for":"Motion system with easing and duration tokens, transition patterns and the expressive spring-based motion scheme","how_to_use":"Read How it works for the standard and expressive spring schemes, then the tokens page for easing and duration values; record the numbers as tokens","zh":"Material 3 的动效体系，缓动与时长 token、转场模式和弹簧动效方案；定动效规范时读。","zh_how":"先读 How it works 了解 standard 与 expressive 两套弹簧方案，再到 tokens 页抄缓动与时长数值；站点由 JS 渲染，智能体需要浏览器。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Easing and duration tokens","url":"https://m3.material.io/styles/motion/easing-and-duration/tokens-specs"}],"api":null,"caveats":["JS-rendered site: agents need a browser","M3 Expressive specifies motion as springs; the easing and duration tokens remain for transitions that are not spring-driven"],"agent_access":"js","thumb":{"src":"assets/thumbs/m3-motion.webp","source":"screenshot","captured_at":"2026-09-27T09:46:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"m2-motion-speed","name":"Material 2: Speed","name_zh":null,"url":"https://m2.material.io/design/motion/speed.html","host":"m2.material.io","domain":"motion","section":"guidelines","also":[],"kind":"guideline","tags":["duration","easing"],"best_for":"Still the clearest public explanation of how duration and easing should vary with size, distance and platform","how_to_use":"Read once; the reasoning outlives the version","zh":"Material 2 讲时长与缓动如何随尺寸、距离、平台变化，至今最清楚；道理比版本长寿。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Material 2 is archived: Material 3 replaced these easing and duration values and adds spring-based motion"],"agent_access":"js","thumb":{"src":"assets/thumbs/m2-motion-speed.webp","source":"screenshot","captured_at":"2026-09-27T10:44:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"apple-hig-motion","name":"Apple HIG: Motion","name_zh":null,"url":"https://developer.apple.com/design/human-interface-guidelines/motion","host":"developer.apple.com","domain":"motion","section":"guidelines","also":[],"kind":"guideline","tags":["ios","macos"],"best_for":"Apple's principles: purposeful, brief, optional motion; respecting Reduce Motion","how_to_use":"Agents: fetch the page as JSON (…/human-interface-guidelines/motion.json) instead of the JS page; pair with the WWDC springs and fluid-interfaces talks","zh":"Apple 的动效准则：有目的、简短、可关闭，尊重减弱动态效果设置；给动效定原则时先读。","zh_how":"智能体请取 JSON 版：https://developer.apple.com/tutorials/data/design/human-interface-guidelines/motion.json；配合 WWDC 的弹簧与流畅界面两个演讲看。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/{page}.json","sample":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/motion.json"},"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/apple-hig-motion.webp","source":"screenshot","captured_at":"2026-09-27T09:48:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"carbon-motion","name":"Carbon motion","name_zh":null,"url":"https://carbondesignsystem.com/elements/motion/overview/","host":"carbondesignsystem.com","domain":"motion","section":"guidelines","also":[],"kind":"guideline","tags":["productive","expressive"],"best_for":"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","how_to_use":"Copy the duration tokens (70, 110, 150, 240, 400, 700 ms) and the standard, entrance and exit curves of each mode as the skeleton of your own motion tokens","zh":"IBM Carbon 的双模式动效：效率型（克制、不打扰）与表现型（只留给少数重要时刻），公开 cubic-bezier 曲线与 70–700ms 六档时长 token；搭自家动效 token 的范本。","zh_how":"照搬六档时长 token（70、110、150、240、400、700ms）和两种模式下标准、进入、退出三类曲线，作为自家动效 token 的骨架。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/carbon-motion.webp","source":"screenshot","captured_at":"2026-09-27T09:47:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fluent-motion","name":"Fluent 2 motion","name_zh":null,"url":"https://fluent2.microsoft.design/motion","host":"fluent2.microsoft.design","domain":"motion","section":"guidelines","also":[],"kind":"guideline","tags":["windows"],"best_for":"Microsoft's motion principles and timing guidance","how_to_use":"Read Duration and easing, then Choreography: give larger elements and longer distances more time, stagger lists with gaps that shorten as they go, and keep container transforms continuous","zh":"微软 Fluent 2 的动效原则与时间指引，讲动画在界面里的职责；要做出 Windows 原生手感时参考。","zh_how":"先读 Duration and easing，再读 Choreography：元素越大、位移越远给的时间越长；列表错时入场时间隔逐渐缩短；容器变换保持连续。","access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fluent-motion.webp","source":"screenshot","captured_at":"2026-09-27T09:46:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nng-animation-duration","name":"NN/g: Animation duration","name_zh":null,"url":"https://www.nngroup.com/articles/animation-duration/","host":"nngroup.com","domain":"motion","section":"guidelines","also":[],"kind":"article","tags":["duration","evidence"],"best_for":"Evidence-based guidance on how long UI animations should last","how_to_use":"Cite when pushing back on slow animation","zh":"NN/g 用证据回答界面动画该持续多久；要顶回拖慢的动画方案时引用它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nng-animation-duration.webp","source":"screenshot","captured_at":"2026-09-27T09:35:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nng-animation-purpose","name":"NN/g: Animation purpose","name_zh":null,"url":"https://www.nngroup.com/articles/animation-purpose-ux/","host":"nngroup.com","domain":"motion","section":"guidelines","also":[],"kind":"article","tags":["purpose"],"best_for":"When motion helps: feedback, state change, navigation metaphors, signifiers","how_to_use":"Use as the justification test for each animation","zh":"NN/g 文章，讲清动效何时有用：反馈、状态变化、导航隐喻、指示线索；给每个动画找理由时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nng-animation-purpose.webp","source":"screenshot","captured_at":"2026-09-27T09:46:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wcag-animation-interactions","name":"WCAG: Animation from Interactions","name_zh":null,"url":"https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html","host":"w3.org","domain":"motion","section":"guidelines","also":["a11y:standards-law"],"kind":"spec","tags":["a11y","reduced-motion"],"best_for":"The normative basis for letting users disable interaction-triggered motion","how_to_use":"Read with 2.2.2 Pause, Stop, Hide","zh":"WCAG 条文：交互触发的动画必须能让用户关闭；做动效无障碍的规范性依据，配 2.2.2 一起读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Agent-readable mirror (w3c.github.io)","url":"https://w3c.github.io/wcag/understanding/animation-from-interactions.html"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wcag-animation-interactions.webp","source":"screenshot","captured_at":"2026-09-27T09:47:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webdev-reduced-motion","name":"web.dev: prefers-reduced-motion","name_zh":null,"url":"https://web.dev/articles/prefers-reduced-motion","host":"web.dev","domain":"motion","section":"guidelines","also":["a11y:guidance-patterns"],"kind":"article","tags":["a11y","reduced-motion","css"],"best_for":"How to implement reduced motion well on the web","how_to_use":"Follow the no-motion-first pattern","zh":"web.dev 讲如何在网页上正确实现 prefers-reduced-motion；推荐按 no-motion-first 模式，先保证无动画可用再加动效。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webdev-reduced-motion.webp","source":"screenshot","captured_at":"2026-09-27T09:35:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ala-safer-animation","name":"Designing Safer Web Animation For Motion Sensitivity","name_zh":null,"url":"https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/","host":"alistapart.com","domain":"motion","section":"guidelines","also":["a11y:guidance-patterns"],"kind":"article","tags":["a11y","vestibular"],"best_for":"Which kinds of motion trigger vestibular symptoms and how to design around them","how_to_use":"Check parallax, zoom and large-area movement against it","zh":"讲清哪些动效会诱发前庭不适、如何规避；做视差、缩放和大面积运动前对照检查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ala-safer-animation.webp","source":"screenshot","captured_at":"2026-09-27T09:35:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ant-motion","name":"Ant Motion","name_zh":null,"url":"https://motion.ant.design","host":"motion.ant.design","domain":"motion","section":"guidelines","also":[],"kind":"guideline","tags":["china","enterprise"],"best_for":"Ant Design's motion language and React motion components","how_to_use":"Read the three principles (natural, efficient, restrained) in the maintained Ant Design spec page; treat the Ant Motion React components as legacy","zh":"Ant Design 的动效语言与 React 动效组件；做国内企业级产品时用中文读它的动效原则。","zh_how":"读 Ant Design 设计规范里的动效页（自然、高效、克制三原则，有 Markdown 版）；Ant Motion 的 React 动效组件当遗留方案看。","access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"zh","region":"cn","entry_points":[{"label":"Ant Design 动效 spec (Markdown)","url":"https://ant.design/docs/spec/motion-cn.md"}],"api":null,"caveats":["motion.ant.design is barely maintained; the current principles live in the Ant Design spec"],"agent_access":"js","thumb":{"src":"assets/thumbs/ant-motion.webp","source":"screenshot","captured_at":"2026-09-27T09:35:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"harmonyos-motion","name":"HarmonyOS motion design principles","name_zh":"HarmonyOS 动效设计原则","url":"https://developer.huawei.com/consumer/cn/doc/design-guides/animation-design-principles-0000001750237392","host":"developer.huawei.com","domain":"motion","section":"guidelines","also":[],"kind":"guideline","tags":["harmonyos","china","duration","principles"],"best_for":"Huawei's motion principles for HarmonyOS apps with concrete duration caps: long moves within 350 ms, short within 250 ms, small within 150 ms","how_to_use":"Use its six principles (natural, efficient, fast response, consistent, hide waiting, brand) and duration caps as the baseline for HarmonyOS targets","zh":"华为 HarmonyOS 动效设计原则：自然流畅、简洁高效、快速响应、运动一致、隐藏等待、凸显品牌，并给出长距离 350ms、短距离 250ms、较短 150ms 的时长上限。","zh_how":"做鸿蒙应用时以这六条原则和时长上限为基线；页面是 JS 渲染，智能体可 POST 文档中心接口 getDocumentById 取正文。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["JS-rendered doc centre: the body is also served as JSON by the site's undocumented getDocumentById endpoint (POST objectId, catalogName design-guides, language cn, with an Origin header of https://developer.huawei.com)"],"agent_access":"js","thumb":{"src":"assets/thumbs/harmonyos-motion.webp","source":"screenshot","captured_at":"2026-09-27T09:46:16Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"emil-kowalski","name":"Emil Kowalski","name_zh":null,"url":"https://emilkowal.ski","host":"emilkowal.ski","domain":"motion","section":"learning","also":[],"kind":"article","tags":["web","craft","springs","easing"],"best_for":"The most practical writing on web UI animation craft: easing choice, durations, origin-aware and interruptible animation, when not to animate","how_to_use":"Read Great Animations, 7 Practical Animation Tips, Good vs Great Animations, You Don't Need Animations","zh":"网页动效工艺最实用的博客，讲缓动、时长、可打断与何时不动；写动效前读他的几篇代表作。","zh_how":"先读 Great Animations、7 Practical Animation Tips、You Don't Need Animations 三篇，再决定哪些地方根本不该动。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Great animations","url":"https://emilkowal.ski/ui/great-animations"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/emil-kowalski.webp","source":"screenshot","captured_at":"2026-09-27T10:58:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"animations-dev","name":"animations.dev","name_zh":null,"url":"https://animations.dev","host":"animations.dev","domain":"motion","section":"learning","also":[],"kind":"course","tags":["web","course"],"best_for":"Emil Kowalski's course on the theory and practice of web animation","how_to_use":"Worth it for a team standardising its motion craft","zh":"Emil Kowalski 的网页动效课程，兼顾理论与手感；团队要统一动效水准时值得买，付费。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Paid course behind sign-in; agents cannot read it"],"agent_access":"static","thumb":{"src":"assets/thumbs/animations-dev.webp","source":"screenshot","captured_at":"2026-09-27T09:35:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"josh-comeau","name":"Josh W. Comeau","name_zh":null,"url":"https://www.joshwcomeau.com","host":"joshwcomeau.com","domain":"motion","section":"learning","also":[],"kind":"article","tags":["css","springs","transitions"],"best_for":"Interactive explanations of CSS transitions, keyframes, spring physics and linear()","how_to_use":"Read 'A Friendly Introduction to Spring Physics' and the CSS transitions and keyframes posts; the interactive demos make each parameter tangible","zh":"用可交互示例讲透 CSS 过渡、关键帧与弹簧物理的博客，想真正弄懂网页动效原理就读它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"A Friendly Introduction to Spring Physics","url":"https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/josh-comeau.webp","source":"screenshot","captured_at":"2026-09-27T09:35:13Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"family-values","name":"Family Values","name_zh":null,"url":"https://benji.org/family-values","host":"benji.org","domain":"motion","section":"learning","also":[],"kind":"article","tags":["fluidity","principles"],"best_for":"How the Family wallet team thinks about simplicity, fluidity and delight, with examples","how_to_use":"Read for the principle that every element should move from somewhere","zh":"Family 钱包团队讲简洁、流畅与愉悦的动效原则，配实例；核心一条：每个元素都应从某处来。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/family-values.webp","source":"screenshot","captured_at":"2026-09-27T09:35:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"devouring-details","name":"Devouring Details","name_zh":null,"url":"https://devouringdetails.com","host":"devouringdetails.com","domain":"motion","section":"learning","also":[],"kind":"course","tags":["interaction","craft"],"best_for":"Rauno Freiberg's interactive reference manual on interaction craft: 23 chapters, each with a downloadable React component, all footage recorded from real code","how_to_use":"For deep study of interaction details","zh":"Rauno Freiberg 的交互工艺互动手册：23 章，每章附可下载的 React 组件，演示均录自真实代码；付费。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Paid and behind sign-in; agents cannot read it"],"agent_access":"static","thumb":{"src":"assets/thumbs/devouring-details.webp","source":"screenshot","captured_at":"2026-09-27T09:35:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"spring-physics-heckel","name":"The physics behind spring animations","name_zh":null,"url":"https://blog.maximeheckel.com/posts/the-physics-behind-spring-animations/","host":"blog.maximeheckel.com","domain":"motion","section":"learning","also":[],"kind":"article","tags":["spring","physics"],"best_for":"Clear derivation of mass, stiffness and damping with interactive examples","how_to_use":"Read when tuning springs numerically","zh":"弹簧动画的物理推导长文，质量、刚度、阻尼三个参数配交互例子讲透；数值调弹簧时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/spring-physics-heckel.webp","source":"screenshot","captured_at":"2026-09-27T09:35:17Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webdev-animations-guide","name":"web.dev: animations guide","name_zh":null,"url":"https://web.dev/articles/animations-guide","host":"web.dev","domain":"motion","section":"learning","also":[],"kind":"article","tags":["performance","compositor"],"best_for":"Which properties animate cheaply and how to keep motion on the compositor","how_to_use":"Check the property list before animating anything unusual","zh":"web.dev 的动画性能指南，讲哪些属性动起来便宜、如何留在合成层；动非常规属性前查表。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webdev-animations-guide.webp","source":"screenshot","captured_at":"2026-09-27T09:46:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ux-in-motion-manifesto","name":"UX in Motion Manifesto","name_zh":null,"url":"https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc","host":"medium.com","domain":"motion","section":"learning","also":[],"kind":"article","tags":["principles","taxonomy"],"best_for":"Twelve principles of how motion supports usability (easing, offset and delay, parenting, transformation, masking...)","how_to_use":"Use its vocabulary to describe choreography","zh":"提出动效支持可用性的十二条原则：缓动、错时延迟、父子关系等；用它的术语描述动画编排。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Medium answers scripts with a Cloudflare wall: send the link"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/ux-in-motion-manifesto.webp","source":"screenshot","captured_at":"2026-09-27T09:52:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"animation-performance-tier-list","name":"The Web Animation Performance Tier List","name_zh":null,"url":"https://motion.dev/magazine/web-animation-performance-tier-list","host":"motion.dev","domain":"motion","section":"learning","also":["code:motion-libs"],"kind":"article","tags":["performance","compositor","css","web"],"best_for":"Matt Perry's ranking of what is cheap and what is expensive to animate on the web (compositor, paint, layout, JS), with the reasons","how_to_use":"Check the tier of every animated property in a spec; anything below the top tiers needs a reason and a device test","zh":"Motion 作者 Matt Perry 按开销给网页动画属性分级（合成、重绘、布局、JS）并解释原因；写动效规格时逐个属性查它的等级。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/animation-performance-tier-list.webp","source":"screenshot","captured_at":"2026-09-27T09:46:40Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"swiftui-animation","name":"SwiftUI Animation","name_zh":null,"url":"https://developer.apple.com/documentation/swiftui/animation","host":"developer.apple.com","domain":"motion","section":"native","also":[],"kind":"guideline","tags":["swiftui","ios"],"best_for":"Reference for SwiftUI animations, springs and transitions","how_to_use":"Check the spring presets (smooth, snappy, bouncy) and their duration and bounce; agents can fetch the page as JSON from /tutorials/data/documentation/swiftui/<symbol>.json","zh":"SwiftUI 动画官方文档，弹簧预设 smooth、snappy、bouncy 及参数都在这；写 iOS 动效、调手感时先查。","zh_how":"查 smooth、snappy、bouncy 三个弹簧预设的 duration 与 bounce；智能体可取 /tutorials/data/documentation/swiftui/<符号>.json。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://developer.apple.com/tutorials/data/documentation/swiftui/{symbol}.json","sample":"https://developer.apple.com/tutorials/data/documentation/swiftui/animation.json"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/swiftui-animation.webp","source":"screenshot","captured_at":"2026-09-27T09:49:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"open-swiftui-animations","name":"Open SwiftUI Animations","name_zh":null,"url":"https://github.com/amosgyamfi/open-swiftui-animations","host":"github.com","domain":"motion","section":"native","also":[],"kind":"repo","tags":["swiftui","examples"],"best_for":"Large open collection of SwiftUI animation examples","how_to_use":"Find a similar effect and read the source","zh":"开源的 SwiftUI 动画示例大合集，覆盖常见动效；找到相近效果直接读它的源码；Unlicense（公有领域）。","zh_how":null,"access":"free","login":false,"license":"Unlicense","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/open-swiftui-animations.webp","source":"github","captured_at":"2026-09-27T09:48:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"compose-animation","name":"Compose: choose an animation API","name_zh":null,"url":"https://developer.android.com/develop/ui/compose/animation/choose-api","host":"developer.android.com","domain":"motion","section":"native","also":[],"kind":"guideline","tags":["android","compose"],"best_for":"Decision tree for Jetpack Compose animation APIs","how_to_use":"Start here for any Android motion work","zh":"Jetpack Compose 动画 API 的官方选型决策树；做任何 Android 动效工作都先从这页开始查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["developer.android.com redirects scripted requests to a Google sign-in page; open it in a browser"],"agent_access":"static","thumb":{"src":"assets/thumbs/compose-animation.webp","source":"screenshot","captured_at":"2026-09-27T10:27:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"flutter-animations","name":"Flutter animations","name_zh":null,"url":"https://docs.flutter.dev/ui/animations","host":"docs.flutter.dev","domain":"motion","section":"native","also":[],"kind":"guideline","tags":["flutter"],"best_for":"Implicit versus explicit animation, hero, staggered and physics-based animation in Flutter","how_to_use":"Pick implicit widgets first; go explicit only when needed","zh":"Flutter 官方动画文档，讲隐式与显式动画、hero、交错和物理动画；先用隐式组件兜底。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index of the Flutter docs)","url":"https://docs.flutter.dev/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/flutter-animations.webp","source":"screenshot","captured_at":"2026-09-27T09:46:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"flutter-animate","name":"flutter_animate","name_zh":null,"url":"https://pub.dev/packages/flutter_animate","host":"pub.dev","domain":"motion","section":"native","also":[],"kind":"library","tags":["flutter"],"best_for":"Declarative chained effects for Flutter with sensible timing control","how_to_use":"Chain effects on any widget (.animate().fadeIn().scale()) and pass durations and curves from your motion tokens; use it for UI effects, not for gesture-driven physics","zh":"Flutter 的声明式链式动效库，时间参数合理；在 Flutter 里做界面动效的默认选择；BSD-3-Clause。","zh_how":null,"access":"free","login":false,"license":"BSD-3-Clause","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/flutter-animate.webp","source":"screenshot","captured_at":"2026-09-27T09:35:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"arkui-animation","name":"ArkUI animation guide","name_zh":"ArkUI 动画开发指南","url":"https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-animation","host":"developer.huawei.com","domain":"motion","section":"native","also":[],"kind":"guideline","tags":["harmonyos","arkui","china","spring"],"best_for":"HarmonyOS developer guide to ArkUI animation: property and transition animation, curves including springs, and frame-rate considerations","how_to_use":"Map your motion tokens to ArkUI animation parameters (duration, curve, spring) here before handing off a HarmonyOS build","zh":"HarmonyOS ArkUI 动画开发指南：属性动画、转场动画、弹簧等动画曲线与帧率要点；交付鸿蒙应用前，把动效 token 映射到这里的参数。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["JS-rendered doc centre; agents can POST objectId arkts-animation, catalogName harmonyos-guides, language cn to the getDocumentById endpoint with an Origin header of https://developer.huawei.com"],"agent_access":"js","thumb":{"src":"assets/thumbs/arkui-animation.webp","source":"screenshot","captured_at":"2026-09-27T09:47:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"react-native-reanimated","name":"React Native Reanimated","name_zh":null,"url":"https://docs.swmansion.com/react-native-reanimated/","host":"docs.swmansion.com","domain":"motion","section":"native","also":["code:motion-libs"],"kind":"library","tags":["react-native","spring","gestures","layout-animation"],"best_for":"The standard animation library for React Native: UI-thread animations, springs, layout and shared-element transitions, paired with Gesture Handler","how_to_use":"Use withSpring and layout animations for native-feeling motion in React Native; tie gestures to animated values instead of setState","zh":"React Native 的标准动画库：在 UI 线程运行，支持弹簧、布局动画与共享元素转场，配合 Gesture Handler 做跟手交互；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/react-native-reanimated.webp","source":"screenshot","captured_at":"2026-09-27T09:35:31Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"wechat-miniprogram-animation","name":"WeChat Mini Program animation docs","name_zh":"微信小程序 动画","url":"https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html","host":"developers.weixin.qq.com","domain":"motion","section":"native","also":[],"kind":"guideline","tags":["wechat","mini-program","china","keyframes"],"best_for":"Official guide to animation in WeChat Mini Programs: CSS transitions, the this.animate keyframe API (base library 2.9.0+) and animation events","how_to_use":"Check which renderer the page uses before specifying motion; keyframe animation via this.animate is WebView-only","zh":"微信小程序官方动画文档：CSS 过渡、this.animate 关键帧接口（基础库 2.9.0 起）与动画事件；写动效规格前先确认页面用的渲染引擎。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wechat-miniprogram-animation.webp","source":"screenshot","captured_at":"2026-09-27T09:46:15Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"wwdc-ui-animations-transitions","name":"Enhance your UI animations and transitions (WWDC24)","name_zh":null,"url":"https://developer.apple.com/videos/play/wwdc2024/10145/","host":"developer.apple.com","domain":"motion","section":"native","also":[],"kind":"article","tags":["ios","swiftui","uikit","zoom-transition","gesture"],"best_for":"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","how_to_use":"Watch before specifying a card-to-detail or tap-to-expand transition on iOS; the Transcript and Code tabs give the exact APIs to hand to engineering","zh":"WWDC24 演讲：SwiftUI 与 UIKit 的缩放（zoom）导航转场、用 SwiftUI 动画驱动 UIKit 视图、保持连续的手势动画；设计卡片展开到详情页的转场前看。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wwdc-ui-animations-transitions.webp","source":"screenshot","captured_at":"2026-09-27T09:49:46Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"lucide","name":"Lucide","name_zh":null,"url":"https://lucide.dev","host":"lucide.dev","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["stroke","24px","react","vue","flutter"],"best_for":"Clean 24 px, 2 px-stroke community icon family (successor to Feather) with packages for every framework and a published design guide","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/lucide-static@latest/icons/<name>.svg; default choice for neutral product UI","zh":"Feather 的社区后继图标库，24px、2px 描边，各框架都有包、可直接取 SVG；中性产品界面的默认选择，ISC 协议。","zh_how":"取 SVG：cdn.jsdelivr.net/npm/lucide-static@latest/icons/<名称>.svg；智能体可读 lucide.dev/llms.txt；中性产品界面的默认选择。","access":"free","login":false,"license":"ISC","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index of the docs)","url":"https://lucide.dev/llms.txt"}],"api":{"url":"https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/house.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/lucide.webp","source":"screenshot","captured_at":"2026-09-27T09:35:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"phosphor","name":"Phosphor Icons","name_zh":null,"url":"https://phosphoricons.com","host":"phosphoricons.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["six-weights","duotone","react","vue","flutter"],"best_for":"Flexible family in six weights (thin to bold, fill, duotone); friendly geometry, wide coverage","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/@phosphor-icons/core@latest/assets/<weight>/<name>.svg; pick one weight per product","zh":"六种字重（含 fill、duotone）的图标家族，几何亲和、覆盖广；一个产品只选一种字重，MIT。","zh_how":"取 SVG：cdn.jsdelivr.net/npm/@phosphor-icons/core@latest/assets/<字重>/<名称>.svg（字重：thin、light、regular、bold、fill、duotone）；一个产品只选一种字重。","access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/@phosphor-icons/core@latest/assets/{weight}/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/@phosphor-icons/core@latest/assets/regular/house.svg"},"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/phosphor.webp","source":"screenshot","captured_at":"2026-09-27T10:27:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"material-symbols","name":"Material Symbols","name_zh":null,"url":"https://fonts.google.com/icons","host":"fonts.google.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["variable-font","android","fill","weight","grade","optical-size"],"best_for":"Google's variable icon font in outlined, rounded and sharp styles with FILL, wght, GRAD and opsz axes","how_to_use":"Tune the axes to match text weight; SVGs via @material-symbols/svg-400","zh":"Google 的可变图标字体，描边、圆角、锐利三种风格，填充、字重、灰度、视觉字号四轴可调；Apache-2.0。","zh_how":"把填充、字重、灰度、视觉字号四个轴调到与相邻文字匹配；取 SVG：cdn.jsdelivr.net/npm/@material-symbols/svg-400@latest/outlined/<名称>.svg。","access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/@material-symbols/svg-400@latest/outlined/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/@material-symbols/svg-400@latest/outlined/home.svg"},"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/material-symbols.webp","source":"screenshot","captured_at":"2026-09-27T09:35:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tabler-icons","name":"Tabler Icons","name_zh":null,"url":"https://tabler.io/icons","host":"tabler.io","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["stroke","filled","large-coverage"],"best_for":"6,000+ icons on a 24 px grid with adjustable stroke, in outline and filled; the widest free coverage in one consistent style","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/<name>.svg (icons/filled/ for the filled style); set one stroke width for the whole product","zh":"24px 网格上的六千多个图标，描边粗细可调，是免费图标里覆盖面最广的一套；MIT。","zh_how":"取 SVG：cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/<名称>.svg，面性用 icons/filled/；全产品统一一个描边粗细。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/home.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tabler-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:33Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sf-symbols","name":"SF Symbols","name_zh":null,"url":"https://developer.apple.com/sf-symbols/","host":"developer.apple.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["apple","ios","macos","variable"],"best_for":"Apple's symbol system aligned with San Francisco: weights, scales, rendering modes, animation","how_to_use":"Use natively through the SF Symbols app and SwiftUI or UIKit; match weight and scale to the adjacent text; for web or Android mock-ups pick another family","zh":"苹果官方符号体系，与 San Francisco 字重对齐并支持动画；许可限定苹果平台，别用于 Web。","zh_how":null,"access":"free","login":false,"license":"Apple licence: only for apps on Apple platforms; not for web, other platforms or logos","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Licence allows use only in apps on Apple platforms: never on the web, on Android or in logos"],"agent_access":"static","thumb":{"src":"assets/thumbs/sf-symbols.webp","source":"screenshot","captured_at":"2026-09-27T09:50:13Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"heroicons","name":"Heroicons","name_zh":null,"url":"https://heroicons.com","host":"heroicons.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["tailwind","outline","solid","mini","micro"],"best_for":"Small, well-drawn set in four sizes and styles from the Tailwind team","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/heroicons@latest/24/outline/<name>.svg (also 24/solid, 20/solid and 16/solid); use the size the icon was drawn for","zh":"Tailwind 团队出品的小巧图标集，四种尺寸风格，画法讲究；可直接取 SVG 文件用；MIT。","zh_how":"取 SVG：cdn.jsdelivr.net/npm/heroicons@latest/24/outline/<名称>.svg，另有 24/solid、20/solid、16/solid；按图标原生尺寸使用，不要缩放。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/heroicons@latest/24/outline/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/heroicons@latest/24/outline/home.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/heroicons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"remix-icon","name":"Remix Icon","name_zh":null,"url":"https://remixicon.com","host":"remixicon.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["line","fill","china-common"],"best_for":"Neutral line and fill pairs with broad coverage; widely used in Chinese products","how_to_use":"Fetch single icons through Iconify (ri:<name>-line or <name>-fill); check which licence version the installed package carries before shipping","zh":"中性风格的线性与面性成对图标，国内产品常用；2026 年起改用自有许可，商用免费但禁打包转售。","zh_how":null,"access":"free","login":false,"license":"Remix Icon License v1.0 since January 2026 (free commercial use, no resale as an icon pack); earlier releases were Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://api.iconify.design/ri/{name}.svg","sample":"https://api.iconify.design/ri/home-line.svg"},"caveats":["Licence changed in January 2026 from Apache-2.0 to the Remix Icon License v1.0 (free commercial use, no resale as an icon pack)"],"agent_access":"js","thumb":{"src":"assets/thumbs/remix-icon.webp","source":"screenshot","captured_at":"2026-09-27T09:35:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"iconoir","name":"Iconoir","name_zh":null,"url":"https://iconoir.com","host":"iconoir.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["stroke","react","flutter","swift"],"best_for":"1600+ stroke icons with a slightly softer character than Lucide","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/iconoir@latest/icons/regular/<name>.svg; packages for React, Vue, Flutter and SwiftUI","zh":"1600+ 枚描边风格的开源图标，线条气质比 Lucide 略柔和一点；前端各框架都有现成包，MIT 协议。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/iconoir@latest/icons/regular/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/iconoir@latest/icons/regular/home.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/iconoir.webp","source":"screenshot","captured_at":"2026-09-27T09:35:33Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"iconpark","name":"IconPark","name_zh":null,"url":"https://iconpark.oceanengine.com","host":"iconpark.oceanengine.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["bytedance","configurable","china"],"best_for":"ByteDance's 2600+ icons whose stroke, theme (outline, filled, two-tone, multi-colour) and joins are props","how_to_use":"Configure theme and stroke once for the whole product; fetch single icons through Iconify (prefix icon-park-outline)","zh":"字节跳动的 2600+ 图标，描边、四种主题和拐角都是参数；Apache-2.0。GitHub 仓库 2023 年已归档，不再更新。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"B","status":"archived","lang":"zh","region":"cn","entry_points":[],"api":{"url":"https://api.iconify.design/icon-park-outline/{name}.svg","sample":"https://api.iconify.design/icon-park-outline/home.svg"},"caveats":["GitHub repo bytedance/IconPark archived since February 2023: no new icons or fixes"],"agent_access":"js","thumb":{"src":"assets/thumbs/iconpark.webp","source":"screenshot","captured_at":"2026-09-27T09:35:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mingcute","name":"MingCute","name_zh":null,"url":"https://www.mingcute.com","host":"mingcute.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["line","fill","rounded"],"best_for":"3000+ carefully balanced line and fill pairs with a rounded, friendly feel","how_to_use":"Fetch single icons through Iconify (mingcute:<name>-line or <name>-fill) and use the line and fill pair for inactive and active states; also on npm, as a font and in Figma","zh":"三千多个线面成对、配比均衡的圆润风图标，提供 SVG、React、字体与 Figma 多种格式；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://api.iconify.design/mingcute/{name}.svg","sample":"https://api.iconify.design/mingcute/home-1-line.svg"},"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/mingcute.webp","source":"screenshot","captured_at":"2026-09-27T09:35:35Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fluent-system-icons","name":"Fluent System Icons","name_zh":null,"url":"https://github.com/microsoft/fluentui-system-icons","host":"github.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["microsoft","regular","filled"],"best_for":"Microsoft's icon family in regular and filled at many sizes","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/@fluentui/svg-icons@latest/icons/<name>_<size>_<style>.svg (style: regular or filled); use the size the icon was drawn for (16, 20, 24...) instead of scaling","zh":"微软开源图标族，regular 与 filled 两种风格多尺寸齐全；微软生态产品直接用。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@latest/icons/{name}_{size}_{style}.svg","sample":"https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@latest/icons/home_24_regular.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fluent-system-icons.webp","source":"github","captured_at":"2026-09-27T09:48:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"carbon-icons","name":"Carbon icons","name_zh":null,"url":"https://carbondesignsystem.com/elements/icons/library/","host":"carbondesignsystem.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["enterprise","ibm"],"best_for":"Precise enterprise icons and pictograms designed at 16, 20, 24 and 32 px","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/@carbon/icons@latest/svg/32/<name>.svg; pair with dense, Carbon-like enterprise UI and read the design guidelines before drawing a custom glyph","zh":"IBM Carbon 的企业级图标与象形图，按 16/20/24/32px 四种精度设计；配密集型企业级界面用；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"UI icon design guidelines (IBM Design Language)","url":"https://www.ibm.com/design/language/iconography/ui-icons/design/"}],"api":{"url":"https://cdn.jsdelivr.net/npm/@carbon/icons@latest/svg/32/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/@carbon/icons@latest/svg/32/home.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/carbon-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:48:17Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"bootstrap-icons","name":"Bootstrap Icons","name_zh":null,"url":"https://icons.getbootstrap.com","host":"icons.getbootstrap.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["general"],"best_for":"2000+ general-purpose icons, SVG and font","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/bootstrap-icons@latest/icons/<name>.svg; a neutral, safe choice for conventional web apps","zh":"两千多个通用图标，SVG 与图标字体两种形态；常规 Web 应用的稳妥选择，MIT 协议。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/icons/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/icons/house.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/bootstrap-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:36Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"hugeicons","name":"Hugeicons","name_zh":null,"url":"https://hugeicons.com","host":"hugeicons.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["styles","large-coverage"],"best_for":"Very large set in many styles; the free tier is one stroke-rounded style","how_to_use":"Check that the needed style is in the free tier","zh":"量级很大的多风格图标库，免费档只有一款圆角描边风格；商用前确认所需风格是否在免费档。","zh_how":null,"access":"freemium","login":false,"license":"Free set is usable commercially; Pro styles are paid","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/hugeicons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"streamline","name":"Streamline","name_zh":null,"url":"https://www.streamlinehq.com","host":"streamlinehq.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["many-styles","illustrations"],"best_for":"Huge multi-style icon and illustration library with coherent families","how_to_use":"Pick one family; read the attribution requirement for free sets","zh":"多风格图标与插画大库，家族内部风格统一；选定一套用到底，免费版需署名回链，付费可免。","zh_how":null,"access":"freemium","login":true,"license":"Free sets need a link-back; paid removes it","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/streamline.webp","source":"screenshot","captured_at":"2026-09-27T09:35:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"untitledui-icons","name":"Untitled UI Icons","name_zh":null,"url":"https://www.untitledui.com/free-icons","host":"untitledui.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["stroke","figma"],"best_for":"Tidy 24 px stroke set designed alongside a popular UI kit","how_to_use":"Line style only in the free tier","zh":"配合热门 UI kit 设计的 24px 描边图标集；免费档只有线性风格可商用，其余风格付费。","zh_how":null,"access":"freemium","login":false,"license":"Free line set for commercial use; other styles paid","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/untitledui-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:40Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"radix-icons","name":"Radix Icons","name_zh":null,"url":"https://www.radix-ui.com/icons","host":"radix-ui.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["15px","compact"],"best_for":"Crisp 15 px icons for compact interfaces","how_to_use":"Use when 16 px sets feel heavy in dense UI","zh":"15px 规格的紧凑图标集，密集界面里比 16px 图标更利落；数据表、工具栏场景适用。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/radix-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pixelarticons","name":"Pixelarticons","name_zh":null,"url":"https://pixelarticons.com","host":"pixelarticons.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["pixel","retro"],"best_for":"Pixel-grid icons for retro or playful directions","how_to_use":"Keep at integer multiples of the base grid","zh":"像素网格图标，走复古或俏皮方向时用；缩放保持基准网格整数倍；免费集 MIT。","zh_how":null,"access":"freemium","login":false,"license":"MIT for the free set","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pixelarticons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"health-icons","name":"Health Icons","name_zh":null,"url":"https://healthicons.org","host":"healthicons.org","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["medical","domain"],"best_for":"Public-domain medical and health icons","how_to_use":"Use for medical and public-health products; each icon comes filled and outline at 24 and 48 px, and CC0 means no credit is needed","zh":"医疗健康领域的公共版权图标集，补齐通用图标库没有的专科符号，CC0。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/health-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"game-icons","name":"Game-icons.net","name_zh":null,"url":"https://game-icons.net","host":"game-icons.net","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["game","fantasy"],"best_for":"4,000+ game and fantasy glyphs by Lorc, Delapouite and contributors, restylable on the site (colour, background, effects) and downloadable as SVG or PNG","how_to_use":"Restyle on the site or recolour the SVG in code; credit the author named on each icon page","zh":"4000+ 游戏与奇幻题材图标，做游戏界面或桌游物料的素材库；CC BY，必须署名。","zh_how":null,"access":"free","login":false,"license":"CC BY 3.0 (attribution required)","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["CC BY 3.0: visible attribution is required"],"agent_access":"static","thumb":{"src":"assets/thumbs/game-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:35:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"animated-lucide","name":"lucide-animated","name_zh":null,"url":"https://lucide-animated.com","host":"lucide-animated.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["animated","react","motion"],"best_for":"Lucide icons animated with Motion as copy-paste React components","how_to_use":"Use for a few key moments, not every icon","zh":"用 Motion 给 Lucide 图标加动效的 React 组件，复制粘贴即用；只点缀关键瞬间，别全用；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/animated-lucide.webp","source":"screenshot","captured_at":"2026-09-27T09:35:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lordicon","name":"Lordicon","name_zh":null,"url":"https://lordicon.com","host":"lordicon.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["animated","lottie"],"best_for":"Large animated icon library (Lottie) with interactive triggers","how_to_use":"Pick an icon, choose its animation state (intro, hover, morph, loop), adjust colour and stroke, then export Lottie, SVG or video; keep animated icons to a few key moments","zh":"数量很大的 Lottie 动画图标库，带悬停等交互触发；免费档使用需署名。","zh_how":null,"access":"freemium","login":true,"license":"Free tier needs attribution","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Free tier requires attribution"],"agent_access":"static","thumb":{"src":"assets/thumbs/lordicon.webp","source":"screenshot","captured_at":"2026-09-27T09:35:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"harmonyos-symbol","name":"HarmonyOS Symbol","name_zh":"HarmonyOS 主题图标库","url":"https://developer.huawei.com/consumer/cn/design/harmonyos-symbol","host":"developer.huawei.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["harmonyos","china","symbol-font","multi-colour","animated"],"best_for":"Huawei's system symbol library for HarmonyOS: font-like symbols with weights, multi-layer colour modes and layered animation, the counterpart of SF Symbols","how_to_use":"Use natively in HarmonyOS apps through the symbol font; pick rendering mode and weight to match the adjacent text","zh":"华为 HarmonyOS 系统图标库：具备字体属性、多层配色与分层动效，对应苹果的 SF Symbols；鸿蒙原生应用优先用它。","zh_how":null,"access":"free","login":false,"license":"HarmonyOS design resource licence","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Meant for HarmonyOS apps; read the resource licence before using the symbols elsewhere"],"agent_access":"js","thumb":{"src":"assets/thumbs/harmonyos-symbol.webp","source":"screenshot","captured_at":"2026-09-27T09:47:35Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"font-awesome","name":"Font Awesome","name_zh":null,"url":"https://fontawesome.com","host":"fontawesome.com","domain":"icons","section":"families","also":["icons:brand-logos"],"kind":"icon-set","tags":["large-coverage","brands","many-styles"],"best_for":"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","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/svgs/<style>/<name>.svg; keep one style; for custom icons follow its Icon Design Guidelines","zh":"无处不在的图标工具包（v7），免费提供 solid、regular 与品牌图标，付费风格很多；自绘图标可照它的 20px 画布与基本形指南。","zh_how":"取 SVG：cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/svgs/<风格>/<名称>.svg；全产品只用一种风格；免费图标为 CC BY 4.0，压缩 SVG 时保留文件内嵌的授权注释。","access":"freemium","login":false,"license":"Free: icons CC BY 4.0, fonts SIL OFL 1.1, code MIT; Pro is commercial","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Icon Design Guidelines (canvas, keyshapes, strokes)","url":"https://docs.fontawesome.com/web/add-icons/upload-icons/icon-design"}],"api":{"url":"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/svgs/{style}/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/svgs/solid/house.svg"},"caveats":["Free icons are CC BY 4.0: keep the licence comment embedded in each SVG (<!--! Font Awesome Free ... -->) when optimising","Instantly recognisable; restyle or choose a quieter family for a distinctive product"],"agent_access":"js","thumb":{"src":"assets/thumbs/font-awesome.webp","source":"screenshot","captured_at":"2026-09-27T09:35:58Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"solar-icons","name":"Solar Icons","name_zh":null,"url":"https://www.figma.com/community/file/1166831539721848736","host":"figma.com","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["six-styles","duotone","figma","iconify"],"best_for":"8,000+ icons from 480 Design in six styles (linear, line duotone, bold, bold duotone, broken, outline) with a soft, rounded character","how_to_use":"Design in the Figma file; in code fetch from Iconify (prefix solar, e.g. home-2-linear) and keep one style per product","zh":"480 Design 出品的 8000+ 图标，六种风格（线性、线性双色、粗体、粗体双色、断线、轮廓），气质圆润；设计用 Figma 文件，代码走 Iconify 的 solar 前缀。","zh_how":null,"access":"free","login":false,"license":"CC BY 4.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://api.iconify.design/solar/{name}.svg","sample":"https://api.iconify.design/solar/home-2-linear.svg"},"caveats":["CC BY 4.0: attribution required"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/solar-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:46:46Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"central-icons","name":"Central Icon System","name_zh":null,"url":"https://iconists.co/central","host":"iconists.co","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["configurable","corners","weights","paid"],"best_for":"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","how_to_use":"Use when the icon corner radius and stroke must match the UI radius and weight tokens exactly","zh":"付费图标系统，2000+ 图形、每个约 30 种变体（粗细、圆角、线面）；图标圆角与粗细必须匹配界面 token 时用。","zh_how":null,"access":"paid","login":true,"license":"Commercial","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/central-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:36:00Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"fluent-emoji","name":"Fluent Emoji","name_zh":null,"url":"https://github.com/microsoft/fluentui-emoji","host":"github.com","domain":"icons","section":"families","also":["assets:illustrations"],"kind":"icon-set","tags":["emoji","3d","flat","microsoft"],"best_for":"Microsoft's open emoji set in four styles (3D, Color, Flat, High Contrast) as SVG and PNG; usable as friendly spot illustrations","how_to_use":"Pick one style; fetch files by path from jsDelivr (assets/<Name>/<Style>/...) and keep them at emoji or spot-illustration sizes","zh":"微软开源的 emoji 集，四种风格（3D、彩色、扁平、高对比），SVG 与 PNG 都有；也能当亲切的点缀插画用；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@latest/assets/{Name}/{Style}/{file}.svg","sample":"https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@latest/assets/Red%20apple/Flat/red_apple_flat.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fluent-emoji.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"noto-emoji","name":"Noto Emoji","name_zh":null,"url":"https://github.com/googlefonts/noto-emoji","host":"github.com","domain":"icons","section":"families","also":["motion:showcases"],"kind":"icon-set","tags":["emoji","font","animated","lottie"],"best_for":"Google's open emoji font and images, plus animated versions (Lottie, WebP, GIF) served per codepoint from fonts.gstatic.com","how_to_use":"Static: use the font or the PNG and SVG images; animated: fetch fonts.gstatic.com/s/e/notoemoji/latest/<codepoint>/lottie.json (or 512.webp)","zh":"Google 开源的 emoji 字体与图片，另有按码位提供的动画版（Lottie、WebP、GIF）；需要会动的 emoji 时直接按码位取 lottie.json。","zh_how":null,"access":"free","login":false,"license":"Font SIL OFL 1.1; tools and most images Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Animated emoji browser","url":"https://googlefonts.github.io/noto-emoji-animation/"}],"api":{"url":"https://fonts.gstatic.com/s/e/notoemoji/latest/{codepoint}/lottie.json","sample":"https://fonts.gstatic.com/s/e/notoemoji/latest/1f600/lottie.json"},"caveats":["The animated set has its own terms: read the note on the animation page before shipping"],"agent_access":"static","thumb":{"src":"assets/thumbs/noto-emoji.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"ant-design-icons","name":"Ant Design Icons","name_zh":"Ant Design 图标","url":"https://ant.design/components/icon-cn","host":"ant.design","domain":"icons","section":"families","also":[],"kind":"icon-set","tags":["china","enterprise","outlined","filled","two-tone"],"best_for":"The icon set of Ant Design in outlined, filled and two-tone themes, the default in Chinese admin and enterprise products","how_to_use":"Raw SVG: cdn.jsdelivr.net/npm/@ant-design/icons-svg@latest/inline-svg/<theme>/<name>.svg (theme: outlined, filled or twotone); in React use @ant-design/icons; keep one theme per surface","zh":"Ant Design 官方图标集，线框、实底、双色三种主题，国内中后台与企业产品最常见的图标；MIT。","zh_how":"取 SVG：cdn.jsdelivr.net/npm/@ant-design/icons-svg@latest/inline-svg/<主题>/<名称>.svg（主题：outlined、filled、twotone）；React 项目用 @ant-design/icons；同一界面只用一种主题。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"multi","region":"cn","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/@ant-design/icons-svg@latest/inline-svg/{theme}/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/@ant-design/icons-svg@latest/inline-svg/outlined/home.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ant-design-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:46:32Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"iconify","name":"Iconify","name_zh":null,"url":"https://iconify.design","host":"iconify.design","domain":"icons","section":"search-apis","also":[],"kind":"tool","tags":["api","aggregator","200k-icons"],"best_for":"One API and tooling layer over 150+ open icon sets","how_to_use":"SVG: https://api.iconify.design/<prefix>/<name>.svg; search: https://api.iconify.design/search?query=<q>; browse sets at icon-sets.iconify.design","zh":"聚合 150 多个开源图标集的统一 API 和工具层；按需取 SVG，各图标集许可各自标注。","zh_how":"取 SVG：https://api.iconify.design/<前缀>/<图标名>.svg；搜索：/search?query=<词>；在 icon-sets.iconify.design 按图标集看授权，搜到后只用同一套。","access":"free","login":false,"license":"Each set keeps its own licence (shown per set)","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Search API (sample)","url":"https://api.iconify.design/search?query=home&limit=5"},{"label":"API reference","url":"https://iconify.design/docs/api/"},{"label":"Icon set browser (licence per set)","url":"https://icon-sets.iconify.design"}],"api":{"url":"https://api.iconify.design/{prefix}/{name}.svg","sample":"https://api.iconify.design/mdi/home.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/iconify.webp","source":"screenshot","captured_at":"2026-09-27T09:35:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"icones","name":"Icones","name_zh":null,"url":"https://icones.js.org","host":"icones.js.org","domain":"icons","section":"search-apis","also":[],"kind":"tool","tags":["browser","iconify"],"best_for":"Fast browser for all Iconify sets with copy-as (SVG, JSX, Vue, data URL)","how_to_use":"Search across sets, then stick to one family","zh":"快速浏览全部 Iconify 图标集的前端，可复制为 SVG、JSX、Vue 等格式；跨集搜索后选定一族用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/icones.webp","source":"screenshot","captured_at":"2026-09-27T09:35:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"svgrepo","name":"SVG Repo","name_zh":null,"url":"https://www.svgrepo.com","host":"svgrepo.com","domain":"icons","section":"search-apis","also":[],"kind":"asset-library","tags":["svg","collections"],"best_for":"500k+ SVG vectors and icon collections","how_to_use":"Filter by licence; prefer whole collections over single icons","zh":"五十多万个 SVG 与图标合集；各合集许可不同需逐个确认，优先整套取用保证风格统一。","zh_how":null,"access":"free","login":false,"license":"Licence varies per collection; read each","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Vercel bot checkpoint blocks scripted fetches: send the link","Licence varies per collection; single icons from mixed collections will not match"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/svgrepo.webp","source":"screenshot","captured_at":"2026-09-27T09:36:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"noun-project","name":"The Noun Project","name_zh":null,"url":"https://thenounproject.com","host":"thenounproject.com","domain":"icons","section":"search-apis","also":[],"kind":"asset-library","tags":["pictograms","diverse"],"best_for":"The widest range of pictograms for unusual concepts","how_to_use":"Use for concept exploration; styles vary too much to mix in one UI","zh":"概念覆盖最广的象形图标库，冷僻概念也能找到；风格杂不宜混用，免费版需署名，付费免署名。","zh_how":null,"access":"freemium","login":true,"license":"Free with attribution (CC BY); paid removes it","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/noun-project.webp","source":"screenshot","captured_at":"2026-09-27T09:36:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"iconfont","name":"iconfont","name_zh":"阿里巴巴矢量图标库","url":"https://www.iconfont.cn","host":"iconfont.cn","domain":"icons","section":"search-apis","also":[],"kind":"asset-library","tags":["china","aggregator","icon-font","projects"],"best_for":"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","how_to_use":"Build one project per product from a single family (prefer the official sets), then export SVG or a symbol sprite; never mix uploads from different authors in one UI","zh":"国内最大的图标平台：海量上传图标、官方品牌与产品图标库、团队项目，可导出 SVG、字体图标或 Symbol 引用；国内团队的默认图标来源。","zh_how":"每个产品建一个项目，只从同一套（优先官方）图标里挑，再导出 SVG 或 symbol；不同作者的图标别混在一个界面里。","access":"free","login":true,"license":"Licence per upload","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Licence is per upload and often unstated: prefer official sets for commercial work","Blocks scripted fetches and needs sign-in to download"],"agent_access":"js","thumb":{"src":"assets/thumbs/iconfont.webp","source":"screenshot","captured_at":"2026-09-27T09:36:02Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"yesicon","name":"Yesicon","name_zh":null,"url":"https://yesicon.app","host":"yesicon.app","domain":"icons","section":"search-apis","also":[],"kind":"tool","tags":["iconify","chinese-search","multilingual","code-snippets"],"best_for":"Iconify-based search with Chinese (and eight other languages) keywords across 320,000+ open-source icons in 230+ sets, with per-framework code snippets","how_to_use":"Search in Chinese, open the set page (yesicon.app/<prefix>) and stay within that set; the licence is shown per set","zh":"支持中文等多语言关键词的 Iconify 图标搜索，覆盖 230+ 开源图标集、32 万+ 图标，并生成各框架代码；搜到后坚持用同一套。","zh_how":null,"access":"free","login":false,"license":"Each set keeps its own licence","tier":"A","status":"active","lang":"multi","region":"cn","entry_points":[{"label":"Set page (example: solar)","url":"https://yesicon.app/solar"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/yesicon.webp","source":"screenshot","captured_at":"2026-09-27T09:36:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"flaticon","name":"Flaticon","name_zh":null,"url":"https://www.flaticon.com","host":"flaticon.com","domain":"icons","section":"search-apis","also":[],"kind":"asset-library","tags":["stock-icons","attribution","licence-trap"],"best_for":"Huge stock-icon marketplace (Freepik) that ranks first in many searches; listed mainly so its licence terms are known","how_to_use":"If a stakeholder supplies Flaticon icons, check the account type: free downloads require visible attribution; prefer an open family from this section instead","zh":"Freepik 旗下的海量图标素材站，搜索排名靠前；收录主要为了说清授权：免费下载必须署名，优先用本栏的开源图标家族。","zh_how":null,"access":"freemium","login":true,"license":"Free with attribution; Premium removes it","tier":"B","status":"active","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":["Free use requires attribution; icons from many authors rarely match each other","Security filter blocks scripted fetches (HTTP 403)"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/flaticon.webp","source":"og","captured_at":"2026-09-27T10:27:03Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"simple-icons","name":"Simple Icons","name_zh":null,"url":"https://simpleicons.org","host":"simpleicons.org","domain":"icons","section":"brand-logos","also":[],"kind":"icon-set","tags":["brands","mono"],"best_for":"3000+ single-colour brand icons with official hex colours","how_to_use":"CDN: https://cdn.simpleicons.org/<slug>/<hex>; respect each brand's guidelines","zh":"三千多个单色品牌图标，附官方色值，可走 CDN；SVG 为 CC0，商标权仍在各品牌方。","zh_how":"CDN：https://cdn.simpleicons.org/<slug>/<hex>，省略 hex 时使用品牌官方色；SVG 为 CC0，但商标仍归品牌方，遵守其使用规范。","access":"free","login":false,"license":"CC0 for the SVGs; trademarks still apply","tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.simpleicons.org/{slug}/{hex}","sample":"https://cdn.simpleicons.org/figma/F24E1E"},"caveats":["The SVGs are CC0 but the marks are trademarks: follow each brand's usage rules"],"agent_access":"js","thumb":{"src":"assets/thumbs/simple-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:36:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lobe-icons","name":"Lobe Icons","name_zh":null,"url":"https://lobehub.com/icons","host":"lobehub.com","domain":"icons","section":"brand-logos","also":[],"kind":"icon-set","tags":["ai","llm","brands"],"best_for":"SVG and React logos of AI models and providers","how_to_use":"The quick route to correct AI vendor marks","zh":"AI 模型与厂商的 SVG 和 React logo 库；要正确的 AI 厂商标志走这条捷径，代码 MIT、商标归原主。","zh_how":null,"access":"free","login":false,"license":"MIT for the code; marks belong to their owners","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons/{name}.svg","sample":"https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@latest/icons/claude-color.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/lobe-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:36:13Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"svgl","name":"SVGL","name_zh":null,"url":"https://svgl.app","host":"svgl.app","domain":"icons","section":"brand-logos","also":[],"kind":"icon-set","tags":["brands","colour","api"],"best_for":"Full-colour brand SVG logos with light and dark variants and an API","how_to_use":"API: https://api.svgl.app?search=<name> returns the SVG route (light and dark variants where they exist) and a link to the brand's guidelines","zh":"全彩品牌 logo 的 SVG 库，含明暗两套变体和查询 API；做品牌墙时取用。项目 MIT，商标归原厂。","zh_how":"接口：https://api.svgl.app?search=<名称>，返回 SVG 地址（有明暗变体时分别给出）和品牌规范链接。","access":"free","login":false,"license":"MIT for the project; marks belong to their owners","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://api.svgl.app?search={name}","sample":"https://api.svgl.app?search=figma"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/svgl.webp","source":"screenshot","captured_at":"2026-09-27T09:36:11Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"devicon","name":"Devicon","name_zh":null,"url":"https://devicon.dev","host":"devicon.dev","domain":"icons","section":"brand-logos","also":[],"kind":"icon-set","tags":["developer-tools","languages","logos"],"best_for":"Logos of programming languages and developer tools in original, plain and line variants, as SVG and an icon font","how_to_use":"Raw SVG: cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/<name>/<name>-original.svg; use one variant across a tech-stack section","zh":"编程语言与开发工具的 Logo 集，含原色、单色与线稿变体，SVG 与字体都有；技术栈展示区统一用一种变体，商标归原所有者；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT for the code; marks belong to their owners","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/{name}/{name}-original.svg","sample":"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/python/python-original.svg"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/devicon.webp","source":"screenshot","captured_at":"2026-09-27T09:36:13Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"logo-dev","name":"Logo.dev","name_zh":null,"url":"https://www.logo.dev","host":"logo.dev","domain":"icons","section":"brand-logos","also":[],"kind":"api","tags":["logo-api","companies","clearbit-replacement"],"best_for":"Company-logo API by domain (img.logo.dev/<domain>?token=...), the common replacement for the retired Clearbit Logo API","how_to_use":"Use for customer logos in dashboards and CRMs; get a free publishable token and show the attribution the free tier requires","zh":"按域名获取公司 Logo 的 API，是已停用的 Clearbit Logo API 的常用替代；仪表盘里的客户 Logo 用它，需免费 token，免费档要署名。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Every request needs a token (unauthenticated calls return 401)","Vercel bot checkpoint on the website and docs"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/logo-dev.webp","source":"screenshot","captured_at":"2026-09-27T09:36:13Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"lucide-design-guide","name":"Lucide icon design guide","name_zh":null,"url":"https://lucide.dev/contribute/icons/design-principles","host":"lucide.dev","domain":"icons","section":"guides","also":[],"kind":"guideline","tags":["grid","stroke","rules"],"best_for":"Concrete, numeric rules for a 24 px stroke icon family: canvas, padding, stroke, radii, spacing, optical balance","how_to_use":"The best template for writing the rules of a custom set","zh":"24px 描边图标族的数字化设计规则：画布、留白、描边、圆角、视觉平衡；自建图标规范的模板。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/lucide-design-guide.webp","source":"screenshot","captured_at":"2026-09-27T09:46:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"material-icon-design","name":"Material: designing icons","name_zh":null,"url":"https://m3.material.io/styles/icons/designing-icons","host":"m3.material.io","domain":"icons","section":"guides","also":[],"kind":"guideline","tags":["keylines","grid","optical-size"],"best_for":"Keyline shapes, grid, stroke and corner rules, optical sizes and the variable axes","how_to_use":"Use the keyline shapes to equalise visual weight","zh":"Material 的图标绘制规范：关键形状、网格、描边、视觉尺寸；用 keyline 统一整套图标的视觉重量。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JS-rendered site: agents need a browser"],"agent_access":"js","thumb":{"src":"assets/thumbs/material-icon-design.webp","source":"screenshot","captured_at":"2026-09-27T09:47:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"apple-sf-symbols-hig","name":"Apple HIG: SF Symbols","name_zh":null,"url":"https://developer.apple.com/design/human-interface-guidelines/sf-symbols","host":"developer.apple.com","domain":"icons","section":"guides","also":[],"kind":"guideline","tags":["symbols","rendering-modes"],"best_for":"Rendering modes, variable colour, weights and scales, custom symbol guidance","how_to_use":"Read before drawing a custom symbol for Apple platforms","zh":"Apple 官方讲 SF Symbols 的渲染模式、可变色彩、字重与缩放；为 Apple 平台画自定义符号前必读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/{page}.json","sample":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/sf-symbols.json"},"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/apple-sf-symbols-hig.webp","source":"screenshot","captured_at":"2026-09-27T09:50:24Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fluent-iconography","name":"Fluent 2: Iconography","name_zh":null,"url":"https://fluent2.microsoft.design/iconography","host":"fluent2.microsoft.design","domain":"icons","section":"guides","also":[],"kind":"guideline","tags":["microsoft","sizes","naming","product-icons"],"best_for":"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)","how_to_use":"Borrow its size ladder and naming rule when writing the icon section of a design system","zh":"微软 Fluent 2 的图标规范：系统、产品与文件类型图标，按固定尺寸出图不缩放、48px 以下简化细节、按形状而非功能命名（盾牌而非安全）。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fluent-iconography.webp","source":"screenshot","captured_at":"2026-09-27T09:47:11Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"ant-design-icon-spec","name":"Ant Design icon design spec","name_zh":"Ant Design 图标规范","url":"https://ant.design/docs/spec/icon-cn","host":"ant.design","domain":"icons","section":"guides","also":[],"kind":"guideline","tags":["china","grid","keylines","enterprise"],"best_for":"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)","how_to_use":"Use as the Chinese-language template for an icon spec; agents can read the Markdown twin","zh":"Ant Design 图标设计规范：1024 画板、64px 出血位、分层、轮廓线模板，以及准确、简单、节奏、愉悦四原则（偶数原则、去小数点）；写中文图标规范的模板。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"Markdown version (for agents)","url":"https://ant.design/docs/spec/icon-cn.md"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ant-design-icon-spec.webp","source":"screenshot","captured_at":"2026-09-27T09:47:14Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"evilmartians-favicon","name":"How to Favicon in 2026","name_zh":null,"url":"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs","host":"evilmartians.com","domain":"icons","section":"app-icons","also":[],"kind":"article","tags":["favicon","svg","dark-mode"],"best_for":"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","how_to_use":"Copy its two snippets instead of generating dozens of legacy files; agents can read the Markdown version","zh":"现代 favicon 最小方案（2026 年 1 月复核）：HTML 里只放 favicon.ico、icon.svg、apple-touch-icon.png，PWA 再加含 192、512 与 maskable 图标的 manifest。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Markdown version (for agents)","url":"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs.md"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/evilmartians-favicon.webp","source":"screenshot","captured_at":"2026-09-27T09:36:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"apple-app-icons","name":"Apple HIG: App icons","name_zh":null,"url":"https://developer.apple.com/design/human-interface-guidelines/app-icons","host":"developer.apple.com","domain":"icons","section":"app-icons","also":[],"kind":"guideline","tags":["app-icon","ios","macos","layers"],"best_for":"Current rules for layered app icons, appearances (default, dark, clear, tinted) and platform shapes","how_to_use":"Agents: fetch …/human-interface-guidelines/app-icons.json; check the layer structure, appearances (default, dark, clear, tinted) and sizes before exporting from Icon Composer","zh":"Apple 官方应用图标规范：分层结构、深色/透明/染色外观与各平台形状；导出前对照，规则随系统更新。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/{page}.json","sample":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/app-icons.json"},"caveats":["Perishable: re-read after every OS release"],"agent_access":"js","thumb":{"src":"assets/thumbs/apple-app-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:50:36Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ios-icon-gallery","name":"iOS Icon Gallery","name_zh":null,"url":"https://www.iosicongallery.com","host":"iosicongallery.com","domain":"icons","section":"app-icons","also":[],"kind":"gallery","tags":["app-icon","ios"],"best_for":"Curated app icons for iOS, macOS and watchOS","how_to_use":"Study silhouettes and palettes in the target category","zh":"精选的 iOS、macOS、watchOS 应用图标画廊；按目标类目研究成熟作品的剪影与配色套路。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ios-icon-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:36:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"macos-icons","name":"macOSicons","name_zh":null,"url":"https://macosicons.com","host":"macosicons.com","domain":"icons","section":"app-icons","also":[],"kind":"gallery","tags":["app-icon","macos"],"best_for":"Huge community gallery of macOS-style app icons","how_to_use":"Reference for the macOS icon idiom","zh":"macOS 风格应用图标的社区画廊，体量很大；揣摩 macOS 图标语言时参考，仅限个人使用。","zh_how":null,"access":"free","login":false,"license":"Community-made; personal use","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Community-made icons for personal use: study the idiom, do not ship them"],"agent_access":"static","thumb":{"src":"assets/thumbs/macos-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:36:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"icon-composer","name":"Apple Icon Composer","name_zh":null,"url":"https://developer.apple.com/icon-composer/","host":"developer.apple.com","domain":"icons","section":"app-icons","also":[],"kind":"tool","tags":["app-icon","apple","layers"],"best_for":"Apple's tool for building layered, material-aware app icons from SVG or PNG layers","how_to_use":"Supply flat layers; let the system render the material","zh":"Apple 官方的分层图标制作工具，用 SVG/PNG 图层生成带材质的 App 图标；出苹果平台图标时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/icon-composer.webp","source":"screenshot","captured_at":"2026-09-27T09:51:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"icon-kitchen","name":"Icon Kitchen","name_zh":null,"url":"https://icon.kitchen","host":"icon.kitchen","domain":"icons","section":"app-icons","also":[],"kind":"tool","tags":["android","adaptive","ios","web"],"best_for":"Generates adaptive Android icons and iOS, web and macOS icon sets from one artwork","how_to_use":"Preview mask shapes and the monochrome layer before export","zh":"一份图稿生成 Android 自适应图标与 iOS、web、macOS 全套尺寸；出应用图标时省事，导出前先预览蒙版与单色层。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/icon-kitchen.webp","source":"screenshot","captured_at":"2026-09-27T09:36:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"maskable-app","name":"Maskable.app","name_zh":null,"url":"https://maskable.app","host":"maskable.app","domain":"icons","section":"app-icons","also":[],"kind":"tool","tags":["pwa","maskable"],"best_for":"Preview and edit PWA maskable icons against every mask shape","how_to_use":"Check the safe zone before shipping the manifest","zh":"预览和编辑 PWA maskable 图标的工具，对照各种遮罩形状检查安全区，发 manifest 前用它过一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/maskable-app.webp","source":"screenshot","captured_at":"2026-09-27T09:36:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"realfavicongenerator","name":"RealFaviconGenerator","name_zh":null,"url":"https://realfavicongenerator.net","host":"realfavicongenerator.net","domain":"icons","section":"app-icons","also":[],"kind":"tool","tags":["favicon"],"best_for":"Generates and checks a complete, current favicon package","how_to_use":"Run the checker on the deployed site","zh":"生成并校验一整套符合现行标准的 favicon 的工具；站点部署上线后跑一遍它的 checker。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/realfavicongenerator.webp","source":"screenshot","captured_at":"2026-09-27T09:36:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"harmonyos-app-icons","name":"HarmonyOS app icon guidelines","name_zh":"HarmonyOS 应用图标规范","url":"https://developer.huawei.com/consumer/cn/doc/design-guides/application-icon-0000001953444009","host":"developer.huawei.com","domain":"icons","section":"app-icons","also":[],"kind":"guideline","tags":["harmonyos","china","app-icon","layers"],"best_for":"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","how_to_use":"Check the grid, layer split and gradient direction before exporting HarmonyOS icons; keep the main content centred so system masks do not clip it","zh":"华为 HarmonyOS 应用图标规范：前后景分层、体量网格、自上而下光源、9 种推荐色彩方向与多设备适配；导出鸿蒙图标前逐项核对。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["JS-rendered doc centre: the body is also served as JSON by the site's undocumented getDocumentById endpoint (POST objectId, catalogName design-guides, language cn, with an Origin header of https://developer.huawei.com)","Perishable: re-check after each HarmonyOS release"],"agent_access":"js","thumb":{"src":"assets/thumbs/harmonyos-app-icons.webp","source":"screenshot","captured_at":"2026-09-27T09:47:53Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"svgomg","name":"SVGOMG","name_zh":null,"url":"https://jakearchibald.github.io/svgomg/","host":"jakearchibald.github.io","domain":"icons","section":"svg-tools","also":[],"kind":"tool","tags":["svg","optimise"],"best_for":"Visual front end for SVGO with a live diff","how_to_use":"Keep viewBox; lower precision until the shape changes, then step back","zh":"SVGO 的可视化前端，压缩 SVG 时实时对照前后差异；保留 viewBox，精度降到变形前回退。","zh_how":"保留 viewBox；逐步降低精度直到图形开始变形，再退回一档。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/svgomg.webp","source":"github","captured_at":"2026-09-27T10:27:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"svgo","name":"SVGO","name_zh":null,"url":"https://svgo.dev","host":"svgo.dev","domain":"icons","section":"svg-tools","also":[],"kind":"library","tags":["svg","optimise","cli"],"best_for":"The SVG optimiser behind most pipelines","how_to_use":"Configure to keep viewBox and to avoid merging stroked paths","zh":"多数流水线背后的 SVG 优化器；配置时保留 viewBox、别把描边路径合并掉；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/svgo.webp","source":"screenshot","captured_at":"2026-09-27T09:36:27Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"svg-path-editor","name":"SVG Path Editor","name_zh":null,"url":"https://yqnn.github.io/svg-path-editor/","host":"yqnn.github.io","domain":"icons","section":"svg-tools","also":[],"kind":"tool","tags":["svg","path"],"best_for":"Edit path commands numerically with a live preview: round, scale, translate, convert to relative","how_to_use":"Use to snap hand-written paths to the grid","zh":"在线按数值编辑 SVG path 指令，实时预览取整、缩放、平移；把手写路径对齐到网格时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/svg-path-editor.webp","source":"screenshot","captured_at":"2026-09-27T09:36:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"svg-viewer","name":"SVG Viewer","name_zh":null,"url":"https://www.svgviewer.dev","host":"svgviewer.dev","domain":"icons","section":"svg-tools","also":[],"kind":"tool","tags":["svg","convert"],"best_for":"View, optimise and convert SVG to JSX, React Native, data URI and PNG","how_to_use":"Paste code-written SVG to check that it renders, then optimise it and copy it as JSX, React Native or a data URI","zh":"在线查看、优化并转换 SVG 的小工具，可导出 JSX、React Native、data URI 与 PNG；手写 SVG 代码后用它快速校验。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/svg-viewer.webp","source":"screenshot","captured_at":"2026-09-27T09:36:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"vtracer","name":"VTracer","name_zh":null,"url":"https://www.visioncortex.org/vtracer/","host":"visioncortex.org","domain":"icons","section":"svg-tools","also":[],"kind":"tool","tags":["raster-to-vector"],"best_for":"Raster-to-vector tracer that handles colour images","how_to_use":"Trace a sketch, then redraw cleanly; never ship the raw trace","zh":"支持彩色图像的位图转矢量工具；描完草图要重绘干净，别直接交原始描摹；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/vtracer.webp","source":"screenshot","captured_at":"2026-09-27T09:36:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"boxy-svg","name":"Boxy SVG","name_zh":null,"url":"https://boxy-svg.com","host":"boxy-svg.com","domain":"icons","section":"svg-tools","also":[],"kind":"tool","tags":["svg","editor"],"best_for":"Browser-based SVG editor that writes clean markup","how_to_use":"For manual touch-ups of generated SVG","zh":"浏览器里的 SVG 编辑器，输出的标记干净；适合手工修整生成的 SVG 文件。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/boxy-svg.webp","source":"screenshot","captured_at":"2026-09-27T09:36:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"undraw","name":"unDraw","name_zh":null,"url":"https://undraw.co","host":"undraw.co","domain":"assets","section":"illustrations","also":[],"kind":"asset-library","tags":["flat","recolour"],"best_for":"Open-source flat illustrations recolourable to a brand hue","how_to_use":"Set the brand colour on the site before downloading; restyle (line weight, palette, crop) so the set does not read as unDraw","zh":"开源扁平插画库，可按品牌色一键换色后下载；用的人太多，需改造型再用。商用免费。","zh_how":null,"access":"free","login":false,"license":"unDraw licence: free commercial use without attribution; no redistribution as packs, no AI training, no integrations","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Instantly recognisable from overuse: restyle or use sparingly","The licence forbids redistribution in packs, AI training and building integrations on it"],"agent_access":"static","thumb":{"src":"assets/thumbs/undraw.webp","source":"screenshot","captured_at":"2026-09-27T09:36:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"open-peeps","name":"Open Peeps","name_zh":null,"url":"https://www.openpeeps.com","host":"openpeeps.com","domain":"assets","section":"illustrations","also":[],"kind":"asset-library","tags":["people","hand-drawn"],"best_for":"Mix-and-match hand-drawn people library","how_to_use":"Compose characters from parts","zh":"手绘人物插画库，头、身、姿势等部件可自由拼组；需要快速拼出人物配图时用；CC0。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/open-peeps.webp","source":"screenshot","captured_at":"2026-09-27T09:36:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"open-doodles","name":"Open Doodles","name_zh":null,"url":"https://www.opendoodles.com","host":"opendoodles.com","domain":"assets","section":"illustrations","also":[],"kind":"asset-library","tags":["sketchy"],"best_for":"Loose sketchy illustration set with a colour generator","how_to_use":"For informal, friendly tone","zh":"松散手绘风插画集，带配色生成器；想要随意亲切调性的页面时用，CC0 可商用。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"B","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/open-doodles.webp","source":"screenshot","captured_at":"2026-09-27T09:36:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"blush","name":"Blush","name_zh":null,"url":"https://blush.design","host":"blush.design","domain":"assets","section":"illustrations","also":[],"kind":"asset-library","tags":["customisable","collections"],"best_for":"Customisable illustration collections from many artists","how_to_use":"Keep to one collection for consistency","zh":"多位艺术家的可定制插画合集，配色和元素可调；同一项目只用一个合集保一致，SVG 和完整库付费。","zh_how":null,"access":"freemium","login":true,"license":"Free tier with limits; paid for SVG and full access","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Free tier is limited; SVG export and full collections need a paid plan"],"agent_access":"static","thumb":{"src":"assets/thumbs/blush.webp","source":"screenshot","captured_at":"2026-09-27T09:36:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"storyset","name":"Storyset","name_zh":null,"url":"https://storyset.com","host":"storyset.com","domain":"assets","section":"illustrations","also":[],"kind":"asset-library","tags":["animated","customisable"],"best_for":"Customisable and animatable illustration concepts","how_to_use":"Attribution is mandatory on the free tier","zh":"可自定义配色、可设动画的插画概念库；免费档使用必须署名，介意就付费。","zh_how":null,"access":"freemium","login":false,"license":"Free requires attribution","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Free use requires attribution; a paid plan removes it"],"agent_access":"static","thumb":{"src":"assets/thumbs/storyset.webp","source":"screenshot","captured_at":"2026-09-27T09:36:39Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"absurd-design","name":"Absurd Design","name_zh":null,"url":"https://absurd.design","host":"absurd.design","domain":"assets","section":"illustrations","also":[],"kind":"asset-library","tags":["surreal","hand-drawn"],"best_for":"Surreal ink illustrations that stand out from flat-vector sameness","how_to_use":"Use for brands that want an odd, human voice","zh":"超现实手绘墨水插画，跳出扁平矢量的同质化；适合想要怪一点人味儿的品牌；署名免费，会员更多。","zh_how":null,"access":"freemium","login":false,"license":"Free set with attribution; membership for more","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Free set requires attribution"],"agent_access":"static","thumb":{"src":"assets/thumbs/absurd-design.webp","source":"screenshot","captured_at":"2026-09-27T09:36:39Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"recraft","name":"Recraft","name_zh":null,"url":"https://www.recraft.ai","host":"recraft.ai","domain":"assets","section":"illustrations","also":["ai:ai-design-tools","icons:svg-tools"],"kind":"generator","tags":["ai-generation","vector","svg","brand-style"],"best_for":"AI generator that outputs editable vector (SVG) illustrations and icons in a saved brand style, with an API","how_to_use":"Define one style, generate the missing pieces of an illustration or icon set, then clean paths and snap to the grid in an editor before shipping","zh":"能输出可编辑矢量（SVG）插画与图标、并保存品牌风格的 AI 生成工具，带 API；补齐同风格素材后，在编辑器里清理路径再交付。","zh_how":null,"access":"freemium","login":true,"license":"Paid plans: full ownership and commercial rights; free plan: owned by Recraft, public, not for commercial use","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Free-plan images are owned by Recraft, shown publicly and not licensed for commercial use","Generated vectors need path clean-up; disclose AI generation where required"],"agent_access":"static","thumb":{"src":"assets/thumbs/recraft.webp","source":"screenshot","captured_at":"2026-09-27T09:36:49Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"poly-haven","name":"Poly Haven","name_zh":null,"url":"https://polyhaven.com","host":"polyhaven.com","domain":"assets","section":"3d","also":[],"kind":"asset-library","tags":["hdri","textures","models"],"best_for":"Public-domain HDRIs, PBR textures and models of high quality","how_to_use":"API available; the default for lighting and materials","zh":"公共领域的 HDRI、PBR 贴图与模型库，质量高且带 API；做 3D 场景打光与材质时当默认来源用，CC0 可商用。","zh_how":"按类型列资产：https://api.polyhaven.com/assets?t=hdris（或 textures、models）；再用资产 id 取文件，全部 CC0。","access":"free","login":false,"license":"CC0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://api.polyhaven.com/assets?t={hdris|textures|models}","sample":"https://api.polyhaven.com/assets?t=hdris"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/poly-haven.webp","source":"screenshot","captured_at":"2026-09-27T09:36:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"3dicons","name":"3dicons","name_zh":null,"url":"https://3dicons.co","host":"3dicons.co","domain":"assets","section":"3d","also":[],"kind":"asset-library","tags":["3d-icons"],"best_for":"Open-source 3D icons rendered in several angles and colours","how_to_use":"Download the PNG render in the angle and colour you need, or open the Blender source to re-render in your palette; CC0, no credit needed","zh":"开源 3D 图标库，每个图标有多个角度和配色的渲染成品；提供 PNG 与 Blender 源文件。CC0。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/3dicons.webp","source":"screenshot","captured_at":"2026-09-27T09:36:46Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ambientcg","name":"ambientCG","name_zh":null,"url":"https://ambientcg.com","host":"ambientcg.com","domain":"assets","section":"3d","also":[],"kind":"asset-library","tags":["pbr","materials"],"best_for":"Public-domain PBR materials","how_to_use":"Second source for PBR textures after Poly Haven; query the JSON API by type and keyword","zh":"公共领域（CC0）的 PBR 材质库，覆盖常见表面；做 3D 渲染找贴图时的常备第二来源。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://ambientcg.com/api/v2/full_json?type={Material|HDRI|3DModel}&q={query}&limit={n}","sample":"https://ambientcg.com/api/v2/full_json?type=Material&limit=1"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ambientcg.webp","source":"screenshot","captured_at":"2026-09-27T09:36:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"spline","name":"Spline","name_zh":null,"url":"https://spline.design","host":"spline.design","domain":"assets","section":"3d","also":["motion:tools"],"kind":"tool","tags":["3d","interactive","web","remix"],"best_for":"Browser 3D design tool with states, events and web export, plus a community of remixable scenes","how_to_use":"Remix a community scene or build a simple one; check scene weight and loading on a mid-range phone before embedding it in a hero, and export a still for reduced motion","zh":"浏览器里的 3D 设计工具，支持状态、事件与网页导出，社区有大量可二次创作的场景；嵌入首屏前在中端手机上测体积与加载。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Community (remixable scenes, permissions vary)","url":"https://community.spline.design"}],"api":null,"caveats":["Runtime and scene files are heavy; lazy-load and pause off-screen"],"agent_access":"static","thumb":{"src":"assets/thumbs/spline.webp","source":"screenshot","captured_at":"2026-09-27T09:36:52Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"d-design","name":"D.Design","name_zh":"堆友","url":"https://d.design","host":"d.design","domain":"assets","section":"3d","also":["ai:ai-design-tools"],"kind":"asset-library","tags":["china","3d","free-commercial","ai-generation"],"best_for":"Alibaba Design's platform: original 3D avatars, scenes and elements marked free for commercial use, with online rendering and AI design tools","how_to_use":"Use the 3D library for icons, avatars and scenes in one style; confirm the licence note on each asset before shipping","zh":"阿里巴巴设计的堆友平台：原创 3D 头像、场景与元素，标注免费可商用，带在线渲染与 AI 设计工具；同一产品只用一种 3D 风格。","zh_how":null,"access":"free","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Downloads spend daily credits (堆豆) after sign-in","The home page now leads with the 堆友 Agent; the 3D library sits behind it"],"agent_access":"js","thumb":{"src":"assets/thumbs/d-design.webp","source":"screenshot","captured_at":"2026-09-27T09:36:59Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"kenney","name":"Kenney","name_zh":null,"url":"https://kenney.nl","host":"kenney.nl","domain":"assets","section":"3d","also":["app-ui:details-offbeat"],"kind":"asset-library","tags":["cc0","game-assets","2d","3d","ui"],"best_for":"Thousands of stylistically consistent CC0 game assets: 2D sprites, 3D models, UI packs and audio","how_to_use":"Use for playful prototypes, game UI and placeholder 3D with zero licence risk; one pack per product keeps the style coherent","zh":"数千个风格统一的 CC0 游戏素材：2D、3D、UI 套件与音效；趣味原型与游戏界面零授权风险。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/kenney.webp","source":"screenshot","captured_at":"2026-09-27T09:36:53Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"sketchfab","name":"Sketchfab","name_zh":null,"url":"https://sketchfab.com","host":"sketchfab.com","domain":"assets","section":"3d","also":[],"kind":"asset-library","tags":["3d-models","viewer","marketplace","cc"],"best_for":"The largest 3D model platform, with an embeddable viewer, a Downloadable filter and many Creative Commons models","how_to_use":"Filter Downloadable, then by licence; check polygon count and texture size before web use; record the attribution string for CC BY models","zh":"最大的 3D 模型平台，带可嵌入查看器、「可下载」筛选与大量 CC 授权模型；网页使用前查面数与贴图大小，CC BY 模型记下署名。","zh_how":null,"access":"freemium","login":false,"license":"Per model (CC variants or store licence)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The site separates 'Human Created' and 'AI Generated' models; check which you are using"],"agent_access":"static","thumb":{"src":"assets/thumbs/sketchfab.webp","source":"screenshot","captured_at":"2026-09-27T09:37:01Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"unsplash","name":"Unsplash","name_zh":null,"url":"https://unsplash.com","host":"unsplash.com","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["photos"],"best_for":"High-quality free photography with strong editorial, lifestyle and texture depth; the usual first search for free photos","how_to_use":"Skip the first page of results (the most reused images) and keep one colour grade across a product; agents need the official API with a free access key","zh":"高质量免费摄影库；避开被用滥的图，照片处理风格要统一；可商用但不得转售原图，Unsplash+ 付费。","zh_how":"跳过搜索结果第一页（被用滥的图），整个产品统一调色；智能体须用官方 API 和免费 access key。","access":"freemium","login":false,"license":"Unsplash licence: free commercial use, no resale of unaltered photos; Unsplash+ is paid","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Developer API (free access key)","url":"https://unsplash.com/developers"}],"api":null,"caveats":["Anubis bot wall ('Making sure you're not a bot!') blocks scripted fetches of the site","No resale of unaltered photos; Unsplash+ images are paid"],"agent_access":"static","thumb":{"src":"assets/thumbs/unsplash.webp","source":"screenshot","captured_at":"2026-09-27T09:36:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pexels","name":"Pexels","name_zh":null,"url":"https://www.pexels.com","host":"pexels.com","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["photos","video"],"best_for":"Free photos and stock video with an API","how_to_use":"Good for short background video","zh":"免费照片与素材视频库，带 API；拿来做短背景视频很顺手；可商用。","zh_how":null,"access":"free","login":false,"license":"Pexels licence: free commercial use","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"API (free key)","url":"https://www.pexels.com/api/"}],"api":null,"caveats":["Cloudflare wall blocks scripted fetches; the API needs a free key"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/pexels.webp","source":"screenshot","captured_at":"2026-09-27T09:36:58Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"coverr","name":"Coverr","name_zh":null,"url":"https://coverr.co","host":"coverr.co","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["video"],"best_for":"Stock video made for website backgrounds","how_to_use":"Compress and provide a poster frame","zh":"为网页背景而生的素材视频库；多数片段免费许可，使用时记得压缩并备好 poster 帧。","zh_how":null,"access":"freemium","login":false,"license":"Free licence for most clips","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/coverr.webp","source":"screenshot","captured_at":"2026-09-27T09:37:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mixkit","name":"Mixkit","name_zh":null,"url":"https://mixkit.co","host":"mixkit.co","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["video","music","sfx"],"best_for":"Free video clips, music and UI sound effects","how_to_use":"Source for subtle interface sounds","zh":"免费视频、音乐与音效素材站；给界面配克制的音效时来这找；按素材类型各有许可。","zh_how":null,"access":"free","login":false,"license":"Mixkit licence per asset type","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mixkit.webp","source":"screenshot","captured_at":"2026-09-27T10:27:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lummi","name":"Lummi","name_zh":null,"url":"https://www.lummi.ai","host":"lummi.ai","domain":"assets","section":"photo-video","also":["ai:ai-design-tools"],"kind":"asset-library","tags":["ai-generated"],"best_for":"AI-generated stock imagery with consistent styles","how_to_use":"Disclose synthetic imagery where it matters; check for artefacts","zh":"AI 生成的配图库，风格一致性较好，免费用；正式场合注意披露合成来源，并检查生成痕迹。","zh_how":null,"access":"freemium","login":false,"license":"Free use; AI-generated","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["AI-generated: disclose synthetic imagery where your market requires it (EU AI Act Art. 50, China's labelling measures)"],"agent_access":"static","thumb":{"src":"assets/thumbs/lummi.webp","source":"screenshot","captured_at":"2026-09-27T09:37:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"vcg","name":"Visual China Group","name_zh":null,"url":"https://www.vcg.com","host":"vcg.com","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["china","paid-stock"],"best_for":"Mainland China's dominant paid stock library","how_to_use":"Never use unlicensed images found online in China-facing work; enforcement is active","zh":"国内最大的付费图库，版权管理严格、维权积极；做面向国内的项目别用网上随手找的图。","zh_how":null,"access":"paid","login":true,"license":"Rights-managed; known for strict enforcement","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Rights-managed and actively enforced: never use images found online in China-facing work without a licence"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/vcg.webp","source":"screenshot","captured_at":"2026-09-27T09:37:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"openverse","name":"Openverse","name_zh":null,"url":"https://openverse.org","host":"openverse.org","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["creative-commons","search","licence-filter","api"],"best_for":"WordPress's search engine for openly licensed images and audio, with licence filters and an anonymous JSON API","how_to_use":"Filter by commercial use and modification; agents query api.openverse.org/v1/images/?q=<q>&license_type=commercial and keep the returned attribution string","zh":"WordPress 基金会的开放授权图片与音频搜索引擎，可按授权筛选，另有免登录的 JSON API；筛「可商用、可修改」并保存返回的署名字符串。","zh_how":"智能体用 api.openverse.org/v1/images/?q=<词>&license_type=commercial 查询，结果自带授权与署名字段，照抄进致谢。","access":"free","login":false,"license":"Per item (CC licences and public domain)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"API reference","url":"https://docs.openverse.org/api/reference/"}],"api":{"url":"https://api.openverse.org/v1/images/?q={query}&license_type=commercial","sample":"https://api.openverse.org/v1/images/?q=mountain&license_type=commercial&page_size=1"},"caveats":["The website is behind a Cloudflare wall; use the API","Quality varies widely; aggregated from many sources"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/openverse.webp","source":"github","captured_at":"2026-09-27T10:27:19Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"met-open-access","name":"The Met Open Access and Collection API","name_zh":null,"url":"https://metmuseum.github.io/","host":"metmuseum.github.io","domain":"assets","section":"photo-video","also":["graphic:archives"],"kind":"api","tags":["public-domain","museum","api","cc0"],"best_for":"Keyless JSON API over the Metropolitan Museum's collection; objects flagged isPublicDomain come with high-resolution CC0 images","how_to_use":"Search /search?hasImages=true&q=<q>, fetch /objects/<id>, use primaryImage only when isPublicDomain is true; stay under 80 requests per second","zh":"大都会艺术博物馆的免密钥 JSON API，isPublicDomain 为真的藏品附高清 CC0 图片；做编辑、历史与纹理类配图零授权风险。","zh_how":"先 /search?hasImages=true&q=<词> 得到 id，再取 /objects/<id>；只在 isPublicDomain 为 true 时用 primaryImage；每秒不超过 80 次请求。","access":"free","login":false,"license":"CC0 for public-domain objects","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://collectionapi.metmuseum.org/public/collection/v1/search?hasImages=true&q={query}","sample":"https://collectionapi.metmuseum.org/public/collection/v1/search?hasImages=true&q=teapot"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/met-open-access.webp","source":"screenshot","captured_at":"2026-09-27T09:37:02Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"smithsonian-open-access","name":"Smithsonian Open Access","name_zh":null,"url":"https://www.si.edu/openaccess","host":"si.edu","domain":"assets","section":"photo-video","also":["graphic:archives"],"kind":"asset-library","tags":["public-domain","cc0","museum","api"],"best_for":"Millions of CC0 images and records from Smithsonian museums, archives and zoos, searchable on the site and through an API","how_to_use":"Use for editorial, historical and natural-history imagery; agents call api.si.edu/openaccess/api/v1.0/search with an api.data.gov key (DEMO_KEY for tests)","zh":"史密森尼学会数百万条 CC0 图像与档案（博物馆、档案馆、动物园），网站与 API 都能搜；编辑和历史类配图零授权风险。","zh_how":"智能体调用 api.si.edu/openaccess/api/v1.0/search，需要免费的 api.data.gov 密钥（测试可用 DEMO_KEY，有限速）。","access":"free","login":false,"license":"CC0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://api.si.edu/openaccess/api/v1.0/search?q={query}&api_key={key}","sample":"https://api.si.edu/openaccess/api/v1.0/search?q=teapot&api_key=DEMO_KEY"},"caveats":["The website shows a verification page to scripts; the API needs a free api.data.gov key (DEMO_KEY is rate-limited)"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/smithsonian-open-access.webp","source":"screenshot","captured_at":"2026-09-27T09:37:18Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"wikimedia-commons","name":"Wikimedia Commons","name_zh":null,"url":"https://commons.wikimedia.org","host":"commons.wikimedia.org","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["open-licence","photos","diagrams","api"],"best_for":"The largest free media repository: photos, maps, diagrams and historical images, each with its licence and author on the file page","how_to_use":"Search, open the file page and copy the licence and attribution block; agents use the MediaWiki API (list=search, srnamespace=6 for files)","zh":"最大的自由媒体库：照片、地图、示意图与历史图像，每个文件页写明授权与作者；照抄文件页的授权与署名。","zh_how":"搜到后打开文件页，照抄授权与署名信息；智能体用 MediaWiki API（list=search，srnamespace=6 只搜文件）。","access":"free","login":false,"license":"Per file (CC BY, CC BY-SA, public domain...)","tier":"A","status":"active","lang":"multi","region":"global","entry_points":[{"label":"Reusing content outside Wikimedia (how to attribute)","url":"https://commons.wikimedia.org/wiki/Commons:Reusing_content_outside_Wikimedia"}],"api":{"url":"https://commons.wikimedia.org/w/api.php?action=query&list=search&srsearch={query}&srnamespace=6&format=json","sample":"https://commons.wikimedia.org/w/api.php?action=query&list=search&srsearch=teapot&srnamespace=6&format=json&srlimit=1"},"caveats":["Many files are CC BY-SA (share-alike) and need attribution; check each file"],"agent_access":"static","thumb":{"src":"assets/thumbs/wikimedia-commons.webp","source":"screenshot","captured_at":"2026-09-27T09:37:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"tuchong-creative","name":"Tuchong Creative","name_zh":"图虫创意","url":"https://stock.tuchong.com","host":"stock.tuchong.com","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["china","stock","licensed","video"],"best_for":"Licensed commercial stock images, video and audio for China; Adobe Stock's exclusive partner in mainland China","how_to_use":"Use for commercial imagery in China-facing work and keep the licence record per asset; enforcement against unlicensed use is active","zh":"图虫创意：面向国内的正版商用图片、视频、音频素材库，Adobe Stock 中国区官方独家合作伙伴；国内维权积极，逐张保留授权记录。","zh_how":null,"access":"paid","login":true,"license":"Commercial licence per asset","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tuchong-creative.webp","source":"screenshot","captured_at":"2026-09-27T10:27:53Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"hellorf","name":"Hellorf","name_zh":"站酷海洛","url":"https://www.hellorf.com","host":"hellorf.com","domain":"assets","section":"photo-video","also":[],"kind":"asset-library","tags":["china","stock","licensed","fonts"],"best_for":"ZCOOL's licensed marketplace for images, video, fonts and music in China","how_to_use":"Second licensed source in China after Tuchong or VCG; keep the licence record per asset","zh":"站酷海洛：站酷旗下的正版图片、视频、字体与音乐交易平台；国内第二个正版来源，逐张保留授权记录。","zh_how":null,"access":"paid","login":true,"license":"Commercial licence per asset","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/hellorf.webp","source":"screenshot","captured_at":"2026-09-27T09:37:13Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"shots-so","name":"Shots","name_zh":null,"url":"https://shots.so","host":"shots.so","domain":"assets","section":"mockups","also":[],"kind":"tool","tags":["device-mockup","screenshot"],"best_for":"Fast browser tool for device and browser mock-ups with good defaults","how_to_use":"Drop a screenshot, pick a frame, export","zh":"浏览器里的设备与浏览器样机工具，默认就好看；丢截图、选边框、导出，三步完事。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/shots-so.webp","source":"og","captured_at":"2026-09-27T10:27:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pika-style","name":"Pika","name_zh":null,"url":"https://pika.style","host":"pika.style","domain":"assets","section":"mockups","also":[],"kind":"tool","tags":["screenshot","beautify","og"],"best_for":"Screenshot beautifier and social-image templates","how_to_use":"Quick product shots for marketing pages","zh":"截图美化与社交分享图模板工具；营销页需要快速出产品展示图时用。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pika-style.webp","source":"screenshot","captured_at":"2026-09-27T09:37:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mockuuups","name":"Mockuuups Studio","name_zh":null,"url":"https://mockuuups.studio","host":"mockuuups.studio","domain":"assets","section":"mockups","also":[],"kind":"tool","tags":["scene-mockup"],"best_for":"Thousands of photographic device scenes","how_to_use":"Use sparingly; clean frames usually present UI better","zh":"数千个实拍设备场景样机，快速把界面放进手机电脑照片里；克制使用，干净画框更显设计。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Staged photo scenes date quickly and distract from the UI; clean device frames usually present it better"],"agent_access":"static","thumb":{"src":"assets/thumbs/mockuuups.webp","source":"screenshot","captured_at":"2026-09-27T09:37:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ls-graphics","name":"LS Graphics","name_zh":null,"url":"https://www.ls.graphics","host":"ls.graphics","domain":"assets","section":"mockups","also":[],"kind":"asset-library","tags":["premium-mockups","3d"],"best_for":"High-end device and print mock-ups","how_to_use":"For brand presentations","zh":"高端设备与印刷样机库；做品牌提案展示用；按产品付费，部分免费。","zh_how":null,"access":"freemium","login":false,"license":"Per product; some free","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ls-graphics.webp","source":"screenshot","captured_at":"2026-09-27T09:37:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"rotato","name":"Rotato","name_zh":null,"url":"https://rotato.app","host":"rotato.app","domain":"assets","section":"mockups","also":[],"kind":"tool","tags":["3d-device","video"],"best_for":"3D device mock-up animator for product videos","how_to_use":"For launch videos and store previews","zh":"3D 设备样机动画工具，把界面截图放进会动的手机电脑模型里；做发布视频与应用商店预览时用。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/rotato.webp","source":"screenshot","captured_at":"2026-09-27T09:37:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mockuphone","name":"MockUPhone","name_zh":null,"url":"https://mockuphone.com","host":"mockuphone.com","domain":"assets","section":"mockups","also":[],"kind":"tool","tags":["device-frame"],"best_for":"Free flat device frames","how_to_use":"Plain frames without scenery","zh":"免费的扁平设备边框图，没有场景装饰，快速给截图套壳展示时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mockuphone.webp","source":"screenshot","captured_at":"2026-09-27T09:37:24Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"screen-studio","name":"Screen Studio","name_zh":null,"url":"https://screen.studio","host":"screen.studio","domain":"assets","section":"mockups","also":["motion:tools"],"kind":"tool","tags":["product-video","screen-recording","macos"],"best_for":"macOS screen recorder that adds automatic zoom, smoothed cursor movement and framing, for polished product demos","how_to_use":"Record the built UI at a fixed window size, let it auto-zoom, then trim; use for launch clips and store previews","zh":"macOS 录屏工具，自动缩放、平滑光标与构图，快速做出精致的产品演示视频；录已完成的界面用于发布与商店预览。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["macOS only; subscription"],"agent_access":"static","thumb":{"src":"assets/thumbs/screen-studio.webp","source":"screenshot","captured_at":"2026-09-27T09:37:25Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"haikei","name":"Haikei","name_zh":null,"url":"https://haikei.app","host":"haikei.app","domain":"assets","section":"backgrounds","also":[],"kind":"tool","tags":["svg","blobs","waves"],"best_for":"Generators for blobs, waves, layered peaks, blurry gradients, exported as SVG or PNG","how_to_use":"Export SVG and tune the path in code","zh":"色块、波浪、层叠山峰、模糊渐变等背景生成器，导出 SVG 或 PNG；生成素材可免费使用。","zh_how":"从 generators 页选生成器，导出 SVG 后在代码里微调路径与颜色。","access":"free","login":false,"license":"Generated assets are free to use","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"All generators","url":"https://haikei.app/generators/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/haikei.webp","source":"screenshot","captured_at":"2026-09-27T09:37:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fffuel","name":"fffuel","name_zh":null,"url":"https://www.fffuel.co","host":"fffuel.co","domain":"assets","section":"backgrounds","also":[],"kind":"tool","tags":["svg","noise","patterns"],"best_for":"Collection of SVG generators: noise, grain, organic shapes, patterns, gradients","how_to_use":"nnnoise and gggrain for texture, ooorganize for grids; export SVG and keep the parameters in a comment so the texture can be regenerated","zh":"SVG 生成器合集：噪点、颗粒、有机形状、图案和渐变；做纹理背景时按需挑选。","zh_how":"纹理用 nnnoise 和 gggrain，网格用 ooorganize；导出 SVG 时把参数写进注释，方便以后重新生成。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"nnnoise (SVG noise texture)","url":"https://www.fffuel.co/nnnoise/"},{"label":"gggrain (grainy gradients)","url":"https://www.fffuel.co/gggrain/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fffuel.webp","source":"screenshot","captured_at":"2026-09-27T09:37:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"paper-shaders","name":"Paper Shaders","name_zh":null,"url":"https://shaders.paper.design","host":"shaders.paper.design","domain":"assets","section":"backgrounds","also":[],"kind":"library","tags":["shader","webgl","react"],"best_for":"Zero-dependency shader components (mesh gradient, grain, dithering, warp) for React and vanilla JS","how_to_use":"The cleanest way to ship a live shader background","zh":"零依赖 shader 组件库，含网格渐变、颗粒、抖动、形变；给网页加实时 shader 背景最干净的选择，Apache-2.0。","zh_how":"React 项目安装 @paper-design/shaders-react（原生 JS 用 @paper-design/shaders），在 mesh-gradient 等页面调好参数后复制代码。","access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Source and install (GitHub)","url":"https://github.com/paper-design/shaders"},{"label":"Mesh gradient","url":"https://shaders.paper.design/mesh-gradient"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/paper-shaders.webp","source":"screenshot","captured_at":"2026-09-27T09:37:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"grainient","name":"Grainient","name_zh":null,"url":"https://grainient.supply","host":"grainient.supply","domain":"assets","section":"backgrounds","also":[],"kind":"asset-library","tags":["gradient","grain","animated"],"best_for":"Grainy gradient backgrounds, animated gradients and shader tools","how_to_use":"Use as art direction reference, then recreate in code for control","zh":"颗粒渐变背景、动态渐变与 shader 工具；当美术方向参考，再用代码复刻以掌控细节；有免费和付费包。","zh_how":null,"access":"freemium","login":false,"license":"Per pack; free and paid","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/grainient.webp","source":"screenshot","captured_at":"2026-09-27T09:37:40Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"hero-patterns","name":"Hero Patterns","name_zh":null,"url":"https://heropatterns.com","host":"heropatterns.com","domain":"assets","section":"backgrounds","also":[],"kind":"asset-library","tags":["svg-pattern"],"best_for":"Repeatable SVG background patterns with colour controls","how_to_use":"Keep opacity low; credit as required","zh":"可调色的可平铺 SVG 背景图案库；给区块加纹理时压低不透明度用，需署名；CC BY 4.0。","zh_how":null,"access":"free","login":false,"license":"CC BY 4.0","tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["CC BY 4.0: attribution required","No longer updated"],"agent_access":"static","thumb":{"src":"assets/thumbs/hero-patterns.webp","source":"screenshot","captured_at":"2026-09-27T09:37:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pattern-monster","name":"Pattern Monster","name_zh":null,"url":"https://pattern.monster","host":"pattern.monster","domain":"assets","section":"backgrounds","also":[],"kind":"tool","tags":["svg-pattern"],"best_for":"Customisable SVG pattern generator","how_to_use":"Export as CSS background or SVG","zh":"可调参数的 SVG 图案生成器，导出为 CSS 背景或 SVG 文件；给页面做纹理底纹时直接用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pattern-monster.webp","source":"screenshot","captured_at":"2026-09-27T09:37:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"shadergradient","name":"ShaderGradient","name_zh":null,"url":"https://shadergradient.co","host":"shadergradient.co","domain":"assets","section":"backgrounds","also":[],"kind":"tool","tags":["shader","gradient","react"],"best_for":"Moving 3D gradient customiser with React, Figma and Framer outputs","how_to_use":"Export a still as the reduced-motion fallback","zh":"动态 3D 渐变定制器，可导出 React、Figma 和 Framer 三种形态；记得导一张静帧给 reduced-motion 场景兜底；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/shadergradient.webp","source":"screenshot","captured_at":"2026-09-27T09:37:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"unicorn-studio","name":"Unicorn Studio","name_zh":null,"url":"https://unicorn.studio","host":"unicorn.studio","domain":"assets","section":"backgrounds","also":[],"kind":"tool","tags":["webgl","no-code"],"best_for":"No-code WebGL scene builder for hero effects","how_to_use":"Check the runtime weight and pause off-screen","zh":"无代码 WebGL 场景搭建工具，做首屏特效；注意运行时体积，离屏时记得暂停。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The WebGL runtime adds weight: lazy-load it, pause off-screen and ship a static fallback for reduced motion"],"agent_access":"js","thumb":{"src":"assets/thumbs/unicorn-studio.webp","source":"screenshot","captured_at":"2026-09-27T09:37:50Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"shadertoy","name":"Shadertoy","name_zh":null,"url":"https://www.shadertoy.com","host":"shadertoy.com","domain":"assets","section":"backgrounds","also":[],"kind":"community","tags":["glsl","shader"],"best_for":"Community of GLSL shaders; unmatched for learning techniques","how_to_use":"Learn from it; do not copy a shader into commercial work without checking its licence","zh":"GLSL shader 社区，学着色器技法的最佳现场，网页背景动效的灵感源；默认 CC BY-NC-SA，商用前逐条查许可。","zh_how":null,"access":"free","login":false,"license":"Default licence is CC BY-NC-SA unless the author states otherwise","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Default licence is CC BY-NC-SA: not for commercial use unless the author says otherwise","Heavy fragment shaders drain battery: profile on a mid-range phone before shipping a port"],"agent_access":"blocked","thumb":null,"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"grainy-gradients","name":"Grainy Gradients (CSS-Tricks)","name_zh":null,"url":"https://css-tricks.com/grainy-gradients/","host":"css-tricks.com","domain":"assets","section":"backgrounds","also":[],"kind":"article","tags":["grain","css","svg-filter"],"best_for":"The SVG-noise-plus-gradient technique for grain in pure CSS, explained step by step","how_to_use":"Copy the feTurbulence filter; tune baseFrequency and contrast","zh":"CSS-Tricks 的教程，用 SVG 噪点滤镜加渐变在纯 CSS 里做出颗粒感；抄 feTurbulence 滤镜再调参数。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["css-tricks.com sits behind a SiteGround 'One moment, please...' wall for scripts: send the link"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/grainy-gradients.webp","source":"screenshot","captured_at":"2026-09-27T09:37:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gradient-style","name":"gradient.style","name_zh":null,"url":"https://gradient.style","host":"gradient.style","domain":"assets","section":"backgrounds","also":[],"kind":"tool","tags":["css-gradient","oklch"],"best_for":"Modern CSS gradient builder with colour-space interpolation and wide gamut","how_to_use":"Interpolate in oklch or oklab to avoid grey dead zones","zh":"现代 CSS 渐变生成器，支持广色域与色彩空间插值；用 oklch 或 oklab 插值可避免中间发灰。","zh_how":"在 oklch 或 oklab 中插值，避免中段发灰；复制生成的 CSS，需要兼容旧浏览器时附一个 sRGB 回退。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/gradient-style.webp","source":"screenshot","captured_at":"2026-09-27T09:37:46Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"josh-gradient-generator","name":"Josh Comeau gradient generator","name_zh":null,"url":"https://www.joshwcomeau.com/gradient-generator/","host":"joshwcomeau.com","domain":"assets","section":"backgrounds","also":[],"kind":"tool","tags":["css-gradient","perceptual"],"best_for":"Generates lush multi-stop gradients via perceptual colour modes","how_to_use":"For browsers without in-oklch interpolation","zh":"按感知色彩模式生成多段渐变的工具，色层丰润；浏览器不支持 oklch 插值时的替代方案。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/josh-gradient-generator.webp","source":"screenshot","captured_at":"2026-09-27T09:46:50Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uigradients","name":"uiGradients","name_zh":null,"url":"https://uigradients.com","host":"uigradients.com","domain":"assets","section":"backgrounds","also":[],"kind":"gallery","tags":["css-gradient"],"best_for":"Named two- and three-stop gradients","how_to_use":"Dated aesthetic; use as a quick starting point only","zh":"带名字的两色、三色 CSS 渐变库；审美已经偏旧，只当快速起步的起点；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Dated two-stop sRGB gradients: interpolate in oklch (see Gradient.style) for smoother blends"],"agent_access":"js","thumb":{"src":"assets/thumbs/uigradients.webp","source":"screenshot","captured_at":"2026-09-27T09:37:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"logobook","name":"Logobook","name_zh":null,"url":"https://www.logobook.com","host":"logobook.com","domain":"brand","section":"logo-archives","also":[],"kind":"archive","tags":["logo","classic","modernist"],"best_for":"Archive of the world's classic logos, browsable by letter, shape, object and designer; images can be saved directly","how_to_use":"Browse /letter/<a>/ for the client's initial, /shape/<circle|arrows…>/ or /business/<industry>/ to see how a form has already been solved","zh":"世界经典标志档案馆，可按字母、形状、物体、设计师浏览；看某个形态前人是怎么解的。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/logobook.webp","source":"screenshot","captured_at":"2026-09-27T09:37:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"logo-archive","name":"Logo Archive","name_zh":null,"url":"https://logo-archive.org","host":"logo-archive.org","domain":"brand","section":"logo-archives","also":[],"kind":"archive","tags":["logo","mid-century"],"best_for":"5,500+ historical, mostly modernist marks, each documented with designer and year","how_to_use":"Reference for reductive, geometric construction","zh":"5500+ 历史标志档案（以现代主义为主），每件注明设计师与年份；做几何化、减法造型时的参照系。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/logo-archive.webp","source":"screenshot","captured_at":"2026-09-27T09:37:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"logosystem","name":"Logosystem","name_zh":null,"url":"https://logosystem.co","host":"logosystem.co","domain":"brand","section":"logo-archives","also":[],"kind":"archive","tags":["logo","symbols"],"best_for":"Contemporary logos indexed by symbol, letter and designer","how_to_use":"Filter by type (/logos/wordmark, /logos/symbol, /animated), colour, shape and industry; each /logo/<slug> page names the designer; /app-icons for app marks","zh":"当代标志库（1300+），可按类型、颜色、形状、行业筛，每件注明设计师；另有动态 logo 与 App 图标专区。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/logosystem.webp","source":"screenshot","captured_at":"2026-09-27T09:37:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"logopedia","name":"Logopedia","name_zh":null,"url":"https://logos.fandom.com/wiki/Logopedia","host":"logos.fandom.com","domain":"brand","section":"logo-archives","also":[],"kind":"archive","tags":["logo","history","evolution"],"best_for":"Logo evolution timelines for thousands of brands","how_to_use":"Use for rebrand equity audits: what stayed constant across redesigns","zh":"数千个品牌的 Logo 演变时间线档案馆；改版前盘点品牌资产时，看历次更迭留住了什么。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Fan-maintained wiki: verify dates against the brand; Cloudflare challenge for scripts"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/logopedia.webp","source":"screenshot","captured_at":"2026-09-27T09:38:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"logo-design-love","name":"Logo Design Love","name_zh":null,"url":"https://www.logodesignlove.com","host":"logodesignlove.com","domain":"brand","section":"logo-archives","also":[],"kind":"article","tags":["logo","process"],"best_for":"David Airey's long-running blog on logo craft, process and case studies","how_to_use":"Read the process posts before presenting logo options","zh":"David Airey 写了多年的 logo 博客，讲工艺、流程与案例；给客户提方案前先读它的过程文章。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/logo-design-love.webp","source":"screenshot","captured_at":"2026-09-27T09:37:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"emblemetric","name":"Emblemetric","name_zh":null,"url":"https://www.emblemetric.com","host":"emblemetric.com","domain":"brand","section":"logo-archives","also":[],"kind":"article","tags":["logo","trends","data"],"best_for":"Quantitative analysis of logo trends from trademark data","how_to_use":"Evidence on how common a colour or form is in a category","zh":"用商标数据量化分析 logo 趋势；想知道某种颜色或造型在某行业多常见时查它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/emblemetric.webp","source":"screenshot","captured_at":"2026-09-27T09:38:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"logolounge","name":"LogoLounge","name_zh":null,"url":"https://www.logolounge.com","host":"logolounge.com","domain":"brand","section":"logo-archives","also":[],"kind":"archive","tags":["logo","trend-report"],"best_for":"Large member-submitted logo database; the annual trend report is free","how_to_use":"Read the trend report to know which cliches to avoid","zh":"会员投稿的大型标志数据库；每年的免费趋势报告值得读，能知道哪些套路该避开。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/logolounge.webp","source":"screenshot","captured_at":"2026-09-27T09:38:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"bpando","name":"BP&O","name_zh":null,"url":"https://bpando.org","host":"bpando.org","domain":"brand","section":"identity-publications","also":[],"kind":"article","tags":["identity","packaging","review"],"best_for":"In-depth reviews of identity and packaging projects with a critical eye","how_to_use":"Read the reviews for the vocabulary of identity critique; /logos/ collects mark-only posts","zh":"深度评测品牌识别与包装项目的博客，眼光挑剔；学识别设计批评的词汇。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Logo posts","url":"https://bpando.org/logos/"},{"label":"llms.txt","url":"https://bpando.org/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/bpando.webp","source":"screenshot","captured_at":"2026-09-27T09:38:01Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"logonews","name":"Logo News (标志情报局)","name_zh":null,"url":"https://www.logonews.cn","host":"logonews.cn","domain":"brand","section":"identity-publications","also":[],"kind":"article","tags":["china","rebrand","news"],"best_for":"The leading Chinese-language chronicle of logo changes and new identities worldwide and in China","how_to_use":"Search a brand name for its identity history; /archives/old-and-new pairs old and new marks for rebrand comparisons","zh":"中文标志资讯站，收录中外品牌换标与新形象；查某个品牌的标识演变史时直接搜名字。","zh_how":"直接搜品牌名看换标史；/archives/old-and-new 把新旧标志成对归档，做改版对比时很好用。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"Old vs new logo archive","url":"https://www.logonews.cn/archives/old-and-new"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/logonews.webp","source":"screenshot","captured_at":"2026-09-27T09:38:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"brand-new","name":"Brand New","name_zh":null,"url":"https://www.underconsideration.com/brandnew/","host":"underconsideration.com","domain":"brand","section":"identity-publications","also":[],"kind":"article","tags":["rebrand","review"],"best_for":"The definitive chronicle and critique of identity work and rebrands; low-cost subscription","how_to_use":"Search the archive by industry before starting a rebrand","zh":"品牌重塑案例的编年史与评论媒体；做 rebranding 前按行业搜档案，低价订阅制。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Full reviews need a paid subscription"],"agent_access":"static","thumb":{"src":"assets/thumbs/brand-new.webp","source":"screenshot","captured_at":"2026-09-27T09:38:17Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"the-brand-identity","name":"The Brand Identity","name_zh":null,"url":"https://the-brandidentity.com","host":"the-brandidentity.com","domain":"brand","section":"identity-publications","also":[],"kind":"article","tags":["identity","type"],"best_for":"Contemporary identity projects and type releases, well photographed","how_to_use":"Search projects (/search?filter=category:Project) or open /project/<slug> case studies; /features for interviews","zh":"当代品牌识别项目与新字体发布的在线刊物，摄影讲究；按项目搜索或看 /project 案例了解当下识别设计审美。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/the-brand-identity.webp","source":"screenshot","captured_at":"2026-09-27T10:27:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"identity-designed","name":"Identity Designed","name_zh":null,"url":"https://identitydesigned.com","host":"identitydesigned.com","domain":"brand","section":"identity-publications","also":[],"kind":"article","tags":["identity","case-study"],"best_for":"Identity case studies written by the studios themselves","how_to_use":"See how studios explain and sequence their own work","zh":"由设计工作室亲自撰写的品牌识别案例库，看同行如何讲解和编排自己的作品。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/identity-designed.webp","source":"screenshot","captured_at":"2026-09-27T09:38:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mindsparkle","name":"Mindsparkle Mag","name_zh":null,"url":"https://mindsparklemag.com","host":"mindsparklemag.com","domain":"brand","section":"identity-publications","also":[],"kind":"gallery","tags":["identity","web","motion"],"best_for":"Daily curation across branding, web and motion","how_to_use":"Filter /tag/<brand-identity|packaging-design|monogram> or /categories/<sector> to scan current identity work","zh":"每日更新的品牌、网页与动效策展杂志；横向扫一遍当下 identity 作品用它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mindsparkle.webp","source":"screenshot","captured_at":"2026-09-27T10:37:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"rebrand-gallery","name":"Rebrand Gallery","name_zh":null,"url":"https://rebrand.gallery","host":"rebrand.gallery","domain":"brand","section":"identity-publications","also":[],"kind":"gallery","tags":["rebrand","reveal-video"],"best_for":"Library of brand refreshes and rebrands with their reveal videos","how_to_use":"Filter by feel (/feels/<vibe>) or industry; watch how the reveal is staged","zh":"品牌焕新案例库，附发布视频；按气质或行业筛，看揭幕短片是怎么编排的。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/rebrand-gallery.webp","source":"screenshot","captured_at":"2026-09-27T10:28:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gtn9","name":"古田路9号","name_zh":null,"url":"https://www.gtn9.com","host":"gtn9.com","domain":"brand","section":"identity-publications","also":[],"kind":"community","tags":["china","brand","portfolio"],"best_for":"Chinese brand-design community and portfolio platform","how_to_use":"Reference for domestic brand-design taste and pricing of visual language","zh":"国内品牌设计社区与作品集平台；校准本土品牌视觉品味与价位时看。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/gtn9.webp","source":"screenshot","captured_at":"2026-09-27T09:38:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"dandad","name":"D&AD Awards archive","name_zh":null,"url":"https://www.dandad.org","host":"dandad.org","domain":"brand","section":"identity-publications","also":["web:awards","graphic:publications"],"kind":"archive","tags":["awards","branding","graphic-design","advertising"],"best_for":"Pencil-winning and shortlisted work across branding, graphic design, digital and advertising, with a searchable awards archive","how_to_use":"Open the awards archive and filter by discipline (branding, design, digital) and year to see what juries rewarded","zh":"D&AD 铅笔奖作品库，覆盖品牌、平面、数字与广告；在奖项档案里按类别和年份看评审奖励了什么。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"D&AD Awards archive","url":"https://www.dandad.org/work/d-ad-awards-archive"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/dandad.webp","source":"screenshot","captured_at":"2026-09-27T09:38:24Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"brandguidelines-net","name":"Brand Guidelines","name_zh":null,"url":"https://brandguidelines.net","host":"brandguidelines.net","domain":"brand","section":"guidelines-collections","also":[],"kind":"archive","tags":["guidelines","official"],"best_for":"Collection of official brand guideline documents (Twitch, Instacart, Asana and more)","how_to_use":"Open three from a similar industry and compare their table of contents","zh":"官方品牌规范文档合集，收 Twitch、Asana 等；写自家规范前挑三个同行对比目录结构。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/brandguidelines-net.webp","source":"screenshot","captured_at":"2026-09-27T09:38:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"brandingstyleguides","name":"Branding Style Guides","name_zh":null,"url":"https://brandingstyleguides.com","host":"brandingstyleguides.com","domain":"brand","section":"guidelines-collections","also":[],"kind":"archive","tags":["guidelines","pdf"],"best_for":"Large archive of brand manuals and style guides, many as PDFs","how_to_use":"Browse /directory/<letter>/ or filter by /label/<industry>/, /publication-year/<year>/ and /publication-country/; many entries link the original PDF","zh":"品牌手册与视觉规范的大型档案馆，很多是 PDF 原文；按行业分类翻，写规范前先找参照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/brandingstyleguides.webp","source":"screenshot","captured_at":"2026-09-27T09:38:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"standards-site","name":"Standards","name_zh":null,"url":"https://standards.site","host":"standards.site","domain":"brand","section":"guidelines-collections","also":[],"kind":"tool","tags":["guidelines","web-native"],"best_for":"Platform for web-native brand guidelines with public examples","how_to_use":"Study /examples/ (Mailchimp, Cash App, McLaren) for how a living guideline site is structured","zh":"网页版品牌指南平台，附公开范例；研究一份\"活的\"品牌手册该怎么搭结构。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/standards-site.webp","source":"screenshot","captured_at":"2026-09-27T09:38:35Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"standards-manual","name":"Standards Manual","name_zh":null,"url":"https://standardsmanual.com","host":"standardsmanual.com","domain":"brand","section":"guidelines-collections","also":[],"kind":"book","tags":["guidelines","nasa","nycta"],"best_for":"Reissues of landmark graphics standards manuals (NASA, NYCTA, EPA)","how_to_use":"Previews show how rigorous systems were specified","zh":"复刻出版 NASA、纽约地铁等经典图形标准手册；预览页能看出严谨系统当年怎么写规范。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/standards-manual.webp","source":"screenshot","captured_at":"2026-09-27T09:38:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"brandfetch","name":"Brandfetch","name_zh":null,"url":"https://brandfetch.com","host":"brandfetch.com","domain":"brand","section":"guidelines-collections","also":["icons:brand-logos"],"kind":"tool","tags":["brand-assets","api"],"best_for":"Logos, colours and fonts of 50M+ companies by domain, via search, a free Logo API and an MCP server","how_to_use":"Collect a competitor line-up by domain; agents use the MCP or Logo API instead of scraping logos","zh":"按域名取 5000 万+ 公司的 logo、品牌色与字体，有免费 Logo API 与 MCP；凑竞品品牌墙或让智能体取 logo 时用。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"MCP server","url":"https://brandfetch.com/developers/mcp"},{"label":"Logo API","url":"https://brandfetch.com/developers/logo-api"}],"api":null,"caveats":["Logos are trademarks: fine for competitor boards and integrations, not as material for a new mark"],"agent_access":"static","thumb":{"src":"assets/thumbs/brandfetch.webp","source":"screenshot","captured_at":"2026-09-27T09:38:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pentagram","name":"Pentagram","name_zh":null,"url":"https://www.pentagram.com/work","host":"pentagram.com","domain":"brand","section":"studios","also":[],"kind":"studio","tags":["identity","case-study"],"best_for":"Case studies from the most influential identity partnership","how_to_use":"Filter /work by discipline (brand identity) and sector; /archive holds older projects","zh":"最有影响力的设计合伙事务所的案例库；按门类与行业筛选品牌识别案例看。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Archive","url":"https://www.pentagram.com/archive"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pentagram.webp","source":"screenshot","captured_at":"2026-09-27T09:38:33Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"collins","name":"COLLINS","name_zh":null,"url":"https://wearecollins.com/case-studies/","host":"wearecollins.com","domain":"brand","section":"studios","also":[],"kind":"studio","tags":["identity","strategy"],"best_for":"Strategy-led identity case studies with strong narrative","how_to_use":"Read how each case frames the problem before showing the work","zh":"策略先行的品牌识别案例集，叙事性强；学它如何给每个案子定义问题，而不只看最终呈现。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/collins.webp","source":"screenshot","captured_at":"2026-09-27T09:38:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"koto","name":"Koto","name_zh":null,"url":"https://koto.com/work","host":"koto.com","domain":"brand","section":"studios","also":[],"kind":"studio","tags":["identity","tech"],"best_for":"Optimistic tech and start-up identities","how_to_use":"Read /projects/<client> cases (Lyft, Amazon, Instagram) for digital-first systems","zh":"以乐观气质的科技与初创品牌识别见长的工作室，做数字优先的品牌系统时看它家的作品。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/koto.webp","source":"screenshot","captured_at":"2026-09-27T09:38:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wolff-olins","name":"Wolff Olins","name_zh":null,"url":"https://www.wolffolins.com/work","host":"wolffolins.com","domain":"brand","section":"studios","also":[],"kind":"studio","tags":["identity","corporate"],"best_for":"Large corporate and public-sector rebrands that show how one idea scales across a big organisation","how_to_use":"Read a /work case end to end; note how the system, not the logo, is presented","zh":"大型公司品牌重塑案例集；看一套识别系统如何在庞大组织里铺开。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wolff-olins.webp","source":"screenshot","captured_at":"2026-09-27T09:38:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ragged-edge","name":"Ragged Edge","name_zh":null,"url":"https://raggededge.com/partnerships","host":"raggededge.com","domain":"brand","section":"studios","also":[],"kind":"studio","tags":["identity","challenger"],"best_for":"Challenger-brand identities with bold voice","how_to_use":"Reference for tone of voice paired with visuals","zh":"挑战者品牌的识别设计，语气大胆；参考文案调性与视觉怎么配合。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ragged-edge.webp","source":"screenshot","captured_at":"2026-09-27T09:38:40Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"porto-rocha","name":"Porto Rocha","name_zh":null,"url":"https://portorocha.com","host":"portorocha.com","domain":"brand","section":"studios","also":[],"kind":"studio","tags":["identity","culture","motion"],"best_for":"Culture- and motion-forward identity systems","how_to_use":"Reference for identities designed to move","zh":"以文化和动效见长的品牌识别工作室；做为动而生的识别系统时对标它的案例。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/porto-rocha.webp","source":"screenshot","captured_at":"2026-09-27T09:38:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"studio-dumbar","name":"Studio Dumbar/DEPT","name_zh":null,"url":"https://studiodumbar.com","host":"studiodumbar.com","domain":"brand","section":"studios","also":[],"kind":"studio","tags":["identity","motion"],"best_for":"Pioneers of motion-first visual identity","how_to_use":"Read /work cases (OpenAI, Google Sans Flex) for generative and kinetic identity systems","zh":"动态优先视觉识别的先行者；做生成式、动态识别系统时的参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/studio-dumbar.webp","source":"screenshot","captured_at":"2026-09-27T09:38:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wipo-brand-db","name":"WIPO Global Brand Database","name_zh":null,"url":"https://branddb.wipo.int","host":"branddb.wipo.int","domain":"brand","section":"naming-trademark","also":[],"kind":"tool","tags":["trademark","image-search"],"best_for":"Worldwide trademark search including image similarity","how_to_use":"Run an image search on a candidate mark; a lawyer's clearance is still required","zh":"WIPO 全球商标库，支持以图搜图查相似标；给候选 Logo 做初筛用，正式清权仍需律师。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Similar-name search","url":"https://branddb.wipo.int/en/similarname"},{"label":"Similar-logo (image) search","url":"https://branddb.wipo.int/en/similarlogo"}],"api":null,"caveats":["Single-page app: plain fetches get an empty shell","A knock-out search, not a clearance"],"agent_access":"js","thumb":{"src":"assets/thumbs/wipo-brand-db.webp","source":"screenshot","captured_at":"2026-09-27T09:38:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tmview","name":"TMview","name_zh":null,"url":"https://www.tmdn.org/tmview/","host":"tmdn.org","domain":"brand","section":"naming-trademark","also":[],"kind":"tool","tags":["trademark","eu"],"best_for":"Trademark search across many national and regional offices","how_to_use":"Search a candidate name across EU and national offices, then filter by Nice class, office and status","zh":"跨多国与地区商标局的检索工具，按类别交叉核对名称与图形；定名前先做排查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript app: plain fetches get an empty shell"],"agent_access":"js","thumb":{"src":"assets/thumbs/tmview.webp","source":"screenshot","captured_at":"2026-09-27T09:39:01Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cnipa-trademark","name":"中国商标网","name_zh":null,"url":"https://sbj.cnipa.gov.cn","host":"sbj.cnipa.gov.cn","domain":"brand","section":"naming-trademark","also":[],"kind":"tool","tags":["trademark","china"],"best_for":"Official portal of China's trademark office; its online search (商标网上查询) is the authoritative check for mainland names and marks","how_to_use":"Open 商标网上查询 from the portal and search the name, its pinyin and the figurative-element codes in the relevant Nice classes","zh":"国家知识产权局商标局官方门户；“商标网上查询”是大陆名称与标志查重的权威来源，面向大陆市场定名前必查。","zh_how":"从门户进入“商标网上查询”，按类别检索中文名、拼音和图形要素编码；结果以官方为准。","access":"free","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"商标网上查询 (search system)","url":"https://wcjs.sbj.cnipa.gov.cn/"}],"api":null,"caveats":["The search system blocks scripts (403) and is slow from outside mainland China"],"agent_access":"static","thumb":{"src":"assets/thumbs/cnipa-trademark.webp","source":"screenshot","captured_at":"2026-09-27T10:27:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"onym","name":"Onym","name_zh":null,"url":"https://guide.onym.co","host":"guide.onym.co","domain":"brand","section":"naming-trademark","also":[],"kind":"guideline","tags":["naming"],"best_for":"Curated guide to naming: process, tools, references","how_to_use":"Follow its process when the brief includes a name","zh":"命名方法与工具的精选指南；需求里包含起名时按它的流程走。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/onym.webp","source":"screenshot","captured_at":"2026-09-27T09:38:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"igor-naming-guide","name":"Igor Naming Guide (PDF)","name_zh":null,"url":"https://www.igorinternational.com/process/i/Igor%20Naming%20Guide%202022A.pdf","host":"igorinternational.com","domain":"brand","section":"naming-trademark","also":[],"kind":"article","tags":["naming","taxonomy"],"best_for":"Taxonomy of name types (functional, invented, experiential, evocative) with evaluation criteria","how_to_use":"Classify candidate names before judging them","zh":"命名方法论长文，把名字分成功能、生造、体验、唤起四类并给出评估标准；评审候选名前用它归类。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["SiteGround bot check blocks scripts and headless browsers; open in a normal browser","The old HTML page (/process/igor-naming-guide.php) now returns 404"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/igor-naming-guide.webp","source":"screenshot","captured_at":"2026-09-27T09:38:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uspto-trademark-search","name":"USPTO Trademark Search","name_zh":null,"url":"https://tmsearch.uspto.gov","host":"tmsearch.uspto.gov","domain":"brand","section":"naming-trademark","also":[],"kind":"tool","tags":["trademark","us","official"],"best_for":"Official US trademark search (replaced TESS in 2023)","how_to_use":"Run a knock-out search on names and marks for US filings, filtering by class and live status; not a legal clearance","zh":"美国商标局官方检索（2023 年取代 TESS）；面向美国市场的名称与标志做初筛，不等于法律意见。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript app: plain fetches get an empty shell"],"agent_access":"js","thumb":{"src":"assets/thumbs/uspto-trademark-search.webp","source":"screenshot","captured_at":"2026-09-27T09:38:58Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"tmkoo","name":"Tmkoo (标库网)","name_zh":"标库网","url":"https://www.tmkoo.com","host":"tmkoo.com","domain":"brand","section":"naming-trademark","also":[],"kind":"tool","tags":["trademark","china","similarity"],"best_for":"Third-party Chinese trademark search mirroring CNIPA data, with free similar-name, status and gazette lookups","how_to_use":"Use for a quick similar-name check before the official CNIPA search; ignore the filing-service upsell","zh":"标库网：同步商标局数据的第三方商标检索，免费查近似、状态与公告；官方查询前先用它快速初筛。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["A commercial filing agency's mirror: confirm every hit on the official CNIPA search"],"agent_access":"static","thumb":{"src":"assets/thumbs/tmkoo.webp","source":"screenshot","captured_at":"2026-09-27T09:39:02Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"instant-domain-search","name":"Instant Domain Search","name_zh":null,"url":"https://instantdomainsearch.com","host":"instantdomainsearch.com","domain":"brand","section":"naming-trademark","also":[],"kind":"tool","tags":["domains","naming","availability"],"best_for":"Checks domain availability across TLDs as you type, with generated alternatives","how_to_use":"Run the name shortlist through it before presenting; an available domain changes which names survive","zh":"边输入边查各后缀域名是否可注册，并给替代建议；提案前把候选名过一遍，域名能否拿到会影响名字去留。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Registrar affiliate links; availability is indicative until you buy"],"agent_access":"static","thumb":{"src":"assets/thumbs/instant-domain-search.webp","source":"screenshot","captured_at":"2026-09-27T09:38:56Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"typographic-posters","name":"Typographic Posters","name_zh":null,"url":"https://www.typographicposters.com","host":"typographicposters.com","domain":"graphic","section":"posters-type","also":[],"kind":"gallery","tags":["poster","typography"],"best_for":"Thousands of contemporary typographic posters by designer, studio and country","how_to_use":"Scroll the poster stream and open a designer from any poster to read a coherent body of work; note grid and scale contrast","zh":"数千张当代字体海报，按设计师、工作室、国家索引；按设计师通读，留意网格与尺度对比。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript-rendered: plain fetches get little beyond the title"],"agent_access":"js","thumb":{"src":"assets/thumbs/typographic-posters.webp","source":"screenshot","captured_at":"2026-09-27T09:38:59Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"trendlist","name":"Trend List","name_zh":null,"url":"https://www.trendlist.org","host":"trendlist.org","domain":"graphic","section":"posters-type","also":[],"kind":"archive","tags":["graphic-trends","tagged"],"best_for":"Graphic-design trends named and tagged across posters and print","how_to_use":"Look up a trend to know how dated it is before using it","zh":"给平面与海报设计潮流命名并打标签的档案站；用某个潮流元素前先查它流行多久了。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/trendlist.webp","source":"screenshot","captured_at":"2026-09-27T09:39:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"emuseum-gestaltung","name":"Museum fuer Gestaltung eMuseum","name_zh":null,"url":"https://www.emuseum.ch","host":"emuseum.ch","domain":"graphic","section":"posters-type","also":[],"kind":"archive","tags":["swiss","poster","history"],"best_for":"Online collection of the Zurich design museum, including the Swiss poster tradition","how_to_use":"Search by designer (Mueller-Brockmann, Hofmann) for canonical grid work","zh":"苏黎世设计博物馆线上馆藏，含瑞士海报传统；按设计师搜 Mueller-Brockmann、Hofmann 看网格原作。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Anubis bot check (\"Making sure you're not a bot!\") blocks scripts"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/emuseum-gestaltung.webp","source":"screenshot","captured_at":"2026-09-27T09:39:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"poster-house","name":"Poster House","name_zh":null,"url":"https://posterhouse.org","host":"posterhouse.org","domain":"graphic","section":"posters-type","also":[],"kind":"archive","tags":["poster","history"],"best_for":"Museum dedicated to posters, with exhibition archives","how_to_use":"Read the /exhibition/ pages and /blog/ essays for poster history and genres","zh":"纽约海报博物馆，带历届展览档案；补海报史与流派背景知识的地方。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/poster-house.webp","source":"screenshot","captured_at":"2026-09-27T09:39:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tokyo-tdc","name":"Tokyo TDC (Tokyo Type Directors Club)","name_zh":null,"url":"https://tokyotypedirectorsclub.org/en/","host":"tokyotypedirectorsclub.org","domain":"graphic","section":"posters-type","also":[],"kind":"archive","tags":["japan","typography","awards","cjk"],"best_for":"Annual Tokyo TDC awards for letter and word expression; the best archive of CJK typographic posters, books and identities","how_to_use":"Browse /en/award/ year by year for how kanji, kana and Latin are combined at display scale","zh":"东京字体指导俱乐部年度奖，中日文字体海报、书籍与识别设计最好的档案；看汉字、假名与拉丁字在展示尺度下如何搭配。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"multi","region":"jp","entry_points":[{"label":"Award archive","url":"https://tokyotypedirectorsclub.org/en/award/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tokyo-tdc.webp","source":"screenshot","captured_at":"2026-09-27T09:39:03Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"tdc","name":"Type Directors Club (TDC)","name_zh":null,"url":"https://tdc.org","host":"tdc.org","domain":"graphic","section":"posters-type","also":[],"kind":"archive","tags":["typography","awards","type-design"],"best_for":"New York's Type Directors Club: the annual TDC competition for communication design and typeface design, and its winners","how_to_use":"Read /news/ for each year's winners and finalists (e.g. TDC72) and the categories at /competitions/","zh":"纽约字体指导俱乐部年度竞赛（传达设计与字体设计）及获奖作品；找有野心的字体设计参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Winners and news","url":"https://tdc.org/news/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tdc.webp","source":"screenshot","captured_at":"2026-09-27T09:39:10Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"100-beste-plakate","name":"100 Beste Plakate","name_zh":null,"url":"https://100-beste-plakate.de","host":"100-beste-plakate.de","domain":"graphic","section":"posters-type","also":[],"kind":"archive","tags":["posters","germany","switzerland","awards"],"best_for":"Annual competition for the 100 best posters from Germany, Austria and Switzerland; the strongest yearly record of typographic poster design","how_to_use":"Browse each year's 100 winners for grid, scale and type-only solutions","zh":"德奥瑞三国“年度 100 张最佳海报”竞赛，最能代表当年字体海报水准的年鉴；看网格、尺度与纯文字方案。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/100-beste-plakate.webp","source":"screenshot","captured_at":"2026-09-27T09:39:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"gdc-award","name":"GDC Award (Graphic Design in China)","name_zh":"GDC 设计奖","url":"https://www.gdcaward.com","host":"gdcaward.com","domain":"graphic","section":"posters-type","also":["brand:identity-publications"],"kind":"archive","tags":["china","awards","graphic-design","posters"],"best_for":"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","how_to_use":"Browse the Award Archive and GDC Show pages for current Chinese typographic and identity work","zh":"GDC 设计奖（平面设计在中国）：深圳市平面设计协会 1992 年创办的国内最具影响力平面设计奖，海报、书籍、识别、包装都有；看当下中文字体与品牌设计水准。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/gdc-award.webp","source":"screenshot","captured_at":"2026-09-27T09:39:16Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"letterform-archive","name":"Letterform Archive Online","name_zh":null,"url":"https://oa.letterformarchive.org","host":"oa.letterformarchive.org","domain":"graphic","section":"archives","also":[],"kind":"archive","tags":["lettering","print","history"],"best_for":"High-resolution archive of lettering, type specimens and graphic design; free registration","how_to_use":"Search by decade, technique or country for authentic period references","zh":"高分辨率字体、字样与平面设计档案馆，免费注册；按年代、工艺、国家找真实的时代参考。","zh_how":null,"access":"free","login":true,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/letterform-archive.webp","source":"screenshot","captured_at":"2026-09-27T09:39:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"peoples-gd-archive","name":"People's Graphic Design Archive","name_zh":null,"url":"https://peoplesgdarchive.org","host":"peoplesgdarchive.org","domain":"graphic","section":"archives","also":[],"kind":"archive","tags":["vernacular","crowd-sourced"],"best_for":"Crowd-sourced archive including everyday and under-documented graphic design","how_to_use":"Find vernacular references outside the canon","zh":"众包平面设计档案库，收日常与少被记录的民间设计；找经典正史之外的野生参考时来挖。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/peoples-gd-archive.webp","source":"screenshot","captured_at":"2026-09-27T09:39:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"aiga-design-archives","name":"AIGA Design Archives","name_zh":null,"url":"https://designarchives.aiga.org","host":"designarchives.aiga.org","domain":"graphic","section":"archives","also":[],"kind":"archive","tags":["awards","history"],"best_for":"Decades of juried American graphic design","how_to_use":"Search by format (book, poster, identity)","zh":"AIGA 数十年评审入选的美国平面设计档案；按书籍、海报、识别等形制检索。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare challenge for scripts (403, 2026-09-27)"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/aiga-design-archives.webp","source":"screenshot","captured_at":"2026-09-27T09:53:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cooper-hewitt","name":"Cooper Hewitt collection","name_zh":null,"url":"https://www.si.edu/collections/cooper-hewitt","host":"si.edu","domain":"graphic","section":"archives","also":[],"kind":"archive","tags":["museum","api"],"best_for":"Smithsonian design museum collection, now browsed through the Smithsonian collections site","how_to_use":"Search by period, designer or object type","zh":"Smithsonian 设计博物馆馆藏，可按年代、设计师、物件类型检索；不少图片 CC0，逐件确认。","zh_how":null,"access":"free","login":false,"license":"Many images are CC0; check each object","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Smithsonian bot verification (403) blocks scripts; open in a browser"],"agent_access":"blocked","thumb":null,"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"paul-rand","name":"Paul Rand","name_zh":null,"url":"https://www.paulrand.design","host":"paulrand.design","domain":"graphic","section":"archives","also":[],"kind":"archive","tags":["rand","identity","essays"],"best_for":"Comprehensive archive of Paul Rand's work and writing","how_to_use":"Read /writing/articles/ (essays on logo presentation and design value) before presenting a mark","zh":"Paul Rand 作品与著述的完整档案站，他谈 logo 提案与呈现的随笔，给客户汇报前值得重读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/paul-rand.webp","source":"screenshot","captured_at":"2026-09-27T09:39:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"designreviewed","name":"Design Reviewed","name_zh":null,"url":"https://designreviewed.com","host":"designreviewed.com","domain":"graphic","section":"archives","also":[],"kind":"archive","tags":["history","scans","movements","magazines"],"best_for":"Free graphic design history archive: 10,000+ scanned artefacts and 500+ designer profiles across 150 years","how_to_use":"Browse /design-movement/<art-deco|swiss-style…>/ and /magazines/ for authentic period references instead of pastiche","zh":"免费的平面设计史档案：1 万+ 扫描原件、500+ 设计师档案，跨越 150 年；按设计运动或杂志找真实时代参考，别做仿品。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Archive","url":"https://designreviewed.com/archive/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/designreviewed.webp","source":"screenshot","captured_at":"2026-09-27T09:39:17Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"deck-gallery","name":"Deck Gallery","name_zh":null,"url":"https://deck.gallery","host":"deck.gallery","domain":"graphic","section":"decks","also":["brand:guidelines-collections"],"kind":"gallery","tags":["deck","brand-book"],"best_for":"Curated presentation decks: pitch decks, brand guidelines, reports, portfolios and talks, with per-slide pages","how_to_use":"Use /category/pitch/, /category/guideline/ and /slides/ (slides by purpose) to compare title, statement, data and image slides; agents read the free JSON catalogue","zh":"精选演示文稿库：路演、品牌规范、报告、作品集与演讲，每页幻灯片单独成页；另有免费 JSON 目录供智能体读取。","zh_how":"按 /category/pitch/、/category/guideline/、/slides/（按用途分的单页）对照标题页、宣言页、数据页、图片页；智能体直接读 /api/catalog/decks.json。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Pitch deck examples","url":"https://www.deck.gallery/category/pitch/"},{"label":"Public catalog API (OpenAPI)","url":"https://www.deck.gallery/openapi.json"}],"api":{"url":"https://www.deck.gallery/api/catalog/decks.json","sample":"https://www.deck.gallery/api/catalog/decks.json"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/deck-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:39:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"best-pitch-decks","name":"Best Pitch Deck","name_zh":null,"url":"https://bestpitchdeck.com","host":"bestpitchdeck.com","domain":"graphic","section":"decks","also":[],"kind":"gallery","tags":["pitch-deck","startup"],"best_for":"1,400+ decks from funded start-ups with round, amount and year, filterable by stage, industry and business model","how_to_use":"Filter with ?stage=Seed (or Series A…) and industry pages such as /AI; learn the narrative order before styling anything","zh":"1400+ 份已融资创业公司的路演 PPT，附轮次、金额与年份，可按阶段、行业、商业模式筛；先学叙事顺序再谈美化。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Before 2026-09-27 this row pointed at bestpitchdecks.com (plural), which no longer loads"],"agent_access":"static","thumb":{"src":"assets/thumbs/best-pitch-decks.webp","source":"screenshot","captured_at":"2026-09-27T09:39:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pitch-deck-hunt","name":"Pitch Deck Hunt","name_zh":null,"url":"https://www.pitchdeckhunt.com","host":"pitchdeckhunt.com","domain":"graphic","section":"decks","also":[],"kind":"gallery","tags":["pitch-deck"],"best_for":"Collection of notable pitch decks","how_to_use":"Filter /stage/<pre-seed|seed|series-a> and /pitch-deck-examples/<industry>; second source after Best Pitch Deck","zh":"知名融资路演 PPT 合集；搭路演结构时的第二参考源，看真实 deck 怎么排叙事。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pitch-deck-hunt.webp","source":"screenshot","captured_at":"2026-09-27T09:39:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sequoia-business-plan","name":"Sequoia: Writing a Business Plan","name_zh":null,"url":"https://www.sequoiacap.com/article/writing-a-business-plan/","host":"sequoiacap.com","domain":"graphic","section":"decks","also":[],"kind":"article","tags":["pitch-deck","structure"],"best_for":"The canonical pitch narrative outline","how_to_use":"Use as the default story spine for an investor deck","zh":"Sequoia 的商业计划书写法，路演叙事的经典大纲；做投资人 deck 时当默认故事骨架。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sequoia-business-plan.webp","source":"screenshot","captured_at":"2026-09-27T09:39:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pitch-templates","name":"Pitch templates","name_zh":null,"url":"https://pitch.com/templates","host":"pitch.com","domain":"graphic","section":"decks","also":[],"kind":"gallery","tags":["deck","templates"],"best_for":"Professionally designed presentation templates","how_to_use":"Reference for slide-layout systems","zh":"专业设计的演示文稿模板库；搭建幻灯片版式体系时，参考它的栅格与信息层级。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/pitch-templates.webp","source":"screenshot","captured_at":"2026-09-27T09:39:27Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cover-junkie","name":"Coverjunkie","name_zh":null,"url":"https://coverjunkie.com","host":"coverjunkie.com","domain":"graphic","section":"covers-packaging","also":[],"kind":"gallery","tags":["magazine-cover"],"best_for":"Magazine covers chosen for their ideas","how_to_use":"Reference for single-image, single-headline composition","zh":"以创意取胜的杂志封面合集，做单一图像加单一标题的构图时来这找参照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/cover-junkie.webp","source":"screenshot","captured_at":"2026-09-27T09:39:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"spine-magazine","name":"Spine","name_zh":null,"url":"https://spinemagazine.co","host":"spinemagazine.co","domain":"graphic","section":"covers-packaging","also":[],"kind":"article","tags":["book-cover"],"best_for":"Book-cover design process and interviews","how_to_use":"Filter /articles by \"The Designer's Process\" to see how cover concepts are developed and rejected","zh":"专注书籍封面设计的杂志，讲过程与访谈；看封面方案如何被发展又被否决。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/spine-magazine.webp","source":"screenshot","captured_at":"2026-09-27T09:39:27Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"the-dieline","name":"Dieline","name_zh":null,"url":"https://thedieline.com","host":"thedieline.com","domain":"graphic","section":"covers-packaging","also":[],"kind":"article","tags":["packaging"],"best_for":"Leading packaging-design publication","how_to_use":"Browse /category/redesigns/ and search by product category for shelf conventions before breaking them","zh":"包装设计领域的头部媒体；按类目浏览，摸清货架上的品类惯例。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/the-dieline.webp","source":"screenshot","captured_at":"2026-09-27T09:39:33Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"packaging-of-the-world","name":"Packaging of the World","name_zh":null,"url":"https://packagingoftheworld.com","host":"packagingoftheworld.com","domain":"graphic","section":"covers-packaging","also":[],"kind":"gallery","tags":["packaging"],"best_for":"Large packaging gallery by category and country","how_to_use":"Scan a product category quickly","zh":"大型包装设计画廊，按品类和国家分类；接到包装案时先扫一遍同品类摸清常见套路。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript redirect interstitial blocks plain fetches"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/packaging-of-the-world.webp","source":"screenshot","captured_at":"2026-09-27T09:39:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"magculture","name":"magCulture","name_zh":null,"url":"https://magculture.com","host":"magculture.com","domain":"graphic","section":"covers-packaging","also":[],"kind":"article","tags":["magazines","editorial","covers"],"best_for":"Jeremy Leslie's journal, podcast and shop on independent magazines; the best running record of editorial covers and spreads","how_to_use":"Read /blogs/journal for issue-by-issue looks at covers and spreads","zh":"Jeremy Leslie 的杂志设计期刊、播客与书店，持续记录独立杂志的封面与内页；编辑排版与封面字体参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Journal","url":"https://magculture.com/blogs/journal"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/magculture.webp","source":"screenshot","captured_at":"2026-09-27T09:39:40Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"pentawards","name":"Pentawards","name_zh":null,"url":"https://pentawards.com","host":"pentawards.com","domain":"graphic","section":"covers-packaging","also":[],"kind":"archive","tags":["packaging","awards"],"best_for":"The global packaging design competition; winners by category and an annual trends report","how_to_use":"Browse the winners by category before a packaging brief to learn shelf conventions, then decide which to break","zh":"全球包装设计竞赛，按品类公布获奖作品并出年度趋势报告；接包装案前先看同品类获奖作品，摸清货架惯例再决定打破哪条。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Winners","url":"https://pentawards.com/live/en/page/winners"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pentawards.webp","source":"screenshot","captured_at":"2026-09-27T09:39:46Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"casual-optimist","name":"The Casual Optimist","name_zh":null,"url":"https://www.casualoptimist.com","host":"casualoptimist.com","domain":"graphic","section":"covers-packaging","also":[],"kind":"article","tags":["book-covers","publishing"],"best_for":"Dan Wagstaff's long-running blog on book covers, with monthly 'covers of note' round-ups and an annual best-of","how_to_use":"Read the monthly round-ups for current cover typography and illustration","zh":"长期更新的书封设计博客，每月“值得一看的书封”与年度精选；看当下书封的字体与插画走向。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/casual-optimist.webp","source":"screenshot","captured_at":"2026-09-27T09:39:47Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"its-nice-that","name":"It's Nice That","name_zh":null,"url":"https://www.itsnicethat.com","host":"itsnicethat.com","domain":"graphic","section":"publications","also":[],"kind":"article","tags":["graphic","illustration","culture"],"best_for":"The most consistent editorial voice on contemporary graphic design and illustration","how_to_use":"Filter by /media/<book|3d|collage…> or /tags/branding; /features for long reads that build art-direction awareness","zh":"当代平面设计与插画领域最稳定的编辑声音；培养 UI 之外的 art direction 敏感度。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/its-nice-that.webp","source":"screenshot","captured_at":"2026-09-27T09:39:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"creative-boom","name":"Creative Boom","name_zh":null,"url":"https://www.creativeboom.com","host":"creativeboom.com","domain":"graphic","section":"publications","also":[],"kind":"article","tags":["graphic","branding","illustration"],"best_for":"Broad daily coverage of graphic design, branding and illustration","how_to_use":"Scan /work/ and /news/ for current commercial identity and illustration work","zh":"每日更新的设计资讯站，覆盖平面、品牌与插画；扫一眼了解当下商业作品的水准与风向。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/creative-boom.webp","source":"screenshot","captured_at":"2026-09-27T09:39:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"eye-on-design","name":"AIGA Eye on Design","name_zh":null,"url":"https://eyeondesign.aiga.org","host":"eyeondesign.aiga.org","domain":"graphic","section":"publications","also":[],"kind":"article","tags":["critical-writing"],"best_for":"AIGA's critical publication on design culture and history, discontinued in June 2024; the archive is still online","how_to_use":"Read for perspective rather than references","zh":"AIGA 旗下的设计评论媒体，2024 年 6 月停刊，旧文仍可读；读它换视角，别当素材库用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"archived","lang":"en","region":"global","entry_points":[{"label":"People's Graphic Design Archive copy","url":"https://peoplesgdarchive.org/collection/293/aiga-eye-on-design"}],"api":null,"caveats":["AIGA said it would keep only the 100 most-read articles; the People's Graphic Design Archive keeps a copy"],"agent_access":"static","thumb":{"src":"assets/thumbs/eye-on-design.webp","source":"screenshot","captured_at":"2026-09-27T09:39:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"abduzeedo","name":"Abduzeedo","name_zh":null,"url":"https://abduzeedo.com","host":"abduzeedo.com","domain":"graphic","section":"publications","also":[],"kind":"article","tags":["inspiration","3d","branding"],"best_for":"Long-running daily inspiration across branding, 3D and UI","how_to_use":"Filter /tags/<branding|editorial-design|3d> for quick daily scanning; treat it as volume, not judgement","zh":"老牌每日更新的灵感博客，覆盖面横跨品牌、3D 和 UI；适合泛泛扫图找感觉。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/abduzeedo.webp","source":"screenshot","captured_at":"2026-09-27T09:39:50Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"digitaling","name":"数英 DIGITALING","name_zh":null,"url":"https://www.digitaling.com","host":"digitaling.com","domain":"graphic","section":"publications","also":[],"kind":"community","tags":["china","advertising","campaign"],"best_for":"Chinese advertising, campaign and brand case library","how_to_use":"Use /projects/all (filter by brand, industry and type) for domestic campaign cases","zh":"国内广告与营销活动的案例库；按品牌或类目找本土 campaign 的参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/digitaling.webp","source":"screenshot","captured_at":"2026-09-27T09:39:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"topys","name":"TOPYS","name_zh":null,"url":"https://www.topys.cn","host":"topys.cn","domain":"graphic","section":"publications","also":[],"kind":"article","tags":["china","creative-culture"],"best_for":"Chinese creative-culture publication covering design, advertising and art","how_to_use":"Read for cultural context of Chinese visual trends","zh":"中文创意文化媒体，覆盖设计、广告和艺术；了解国内视觉趋势背后的文化语境时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/topys.webp","source":"screenshot","captured_at":"2026-09-27T09:39:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"eye-magazine","name":"Eye Magazine","name_zh":null,"url":"https://www.eyemagazine.com","host":"eyemagazine.com","domain":"graphic","section":"publications","also":[],"kind":"article","tags":["graphic-design","criticism","typography","history"],"best_for":"Eye, the international review of graphic design (since 1990): critical features on typography, identity and design history","how_to_use":"Search the archive by designer or topic; many older articles are free online, recent issues are print","zh":"国际平面设计评论杂志《Eye》（1990 年创刊），深度评论字体、识别与设计史；按设计师或主题搜旧文，不少可免费读。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Blog","url":"https://www.eyemagazine.com/blog"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/eye-magazine.webp","source":"screenshot","captured_at":"2026-09-27T09:39:58Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"commarts","name":"Communication Arts","name_zh":null,"url":"https://www.commarts.com","host":"commarts.com","domain":"graphic","section":"publications","also":["web:awards"],"kind":"article","tags":["awards","annuals","design","advertising"],"best_for":"Communication Arts: juried annuals in design, advertising, illustration, photography, interactive and typography, plus Exhibit and Webpicks features","how_to_use":"Use /exhibit for recent standout projects and /webpicks for curated websites; the annuals show what juries value","zh":"老牌设计刊物《Communication Arts》：设计、广告、插画、摄影、交互、字体年鉴，另有 Exhibit 与 Webpicks 精选；看评审眼光。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Exhibit","url":"https://www.commarts.com/exhibit"},{"label":"Webpicks","url":"https://www.commarts.com/webpicks"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/commarts.webp","source":"screenshot","captured_at":"2026-09-27T10:27:17Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"ogimage-gallery","name":"OG Image Gallery","name_zh":null,"url":"https://www.ogimage.gallery","host":"ogimage.gallery","domain":"graphic","section":"social-og","also":[],"kind":"gallery","tags":["og-image","social-card"],"best_for":"Open Graph images from real sites","how_to_use":"Filter /category/<app|creative|animated> and compare how brands set type and imagery at 1200×630","zh":"收集真实网站 Open Graph 图的画廊；设计社交分享卡片系统之前先看一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ogimage-gallery.webp","source":"screenshot","captured_at":"2026-09-27T09:39:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sprout-image-sizes","name":"Sprout Social: social image sizes","name_zh":null,"url":"https://sproutsocial.com/insights/social-media-image-sizes-guide/","host":"sproutsocial.com","domain":"graphic","section":"social-og","also":[],"kind":"article","tags":["sizes","perishable"],"best_for":"Continuously updated list of image sizes per platform","how_to_use":"Verify sizes here, then confirm in the platform's own help pages","zh":"持续更新的各社交平台图片尺寸清单；先在这里查，再去平台官方帮助页复核，数字会过期。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sprout-image-sizes.webp","source":"screenshot","captured_at":"2026-09-27T09:40:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"posts-design","name":"Posts Design","name_zh":null,"url":"https://posts.design","host":"posts.design","domain":"graphic","section":"social-og","also":["general:feeds"],"kind":"gallery","tags":["social-posts","og-images","launches"],"best_for":"Hand-curated gallery of real social posts and Open Graph images from companies, each linked to its source","how_to_use":"Browse /brands/<handle>, /opengraph and /trends; agents query the public JSON search API","zh":"人工精选的真实社媒帖子与 OG 图画廊，每条链回原帖；做社媒图或分享卡片前看同行实际发了什么。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Open Graph images","url":"https://posts.design/opengraph"}],"api":{"url":"https://posts.design/api/gallery/search?q={query}&collection={launches|opengraph}&limit={n}","sample":"https://posts.design/api/gallery/search?collection=opengraph&limit=5"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/posts-design.webp","source":"screenshot","captured_at":"2026-09-27T09:40:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"open-graph-protocol","name":"The Open Graph protocol","name_zh":null,"url":"https://ogp.me","host":"ogp.me","domain":"graphic","section":"social-og","also":[],"kind":"spec","tags":["open-graph","metadata","social-cards"],"best_for":"The specification behind link previews: og:title, og:image (with width, height and alt), og:type and friends","how_to_use":"Use as the checklist when shipping social cards; pair it with each platform's own card docs for sizes and crops","zh":"链接预览背后的规范：og:title、og:image（含宽高与 alt）、og:type 等；做分享卡片时当检查清单，尺寸再以各平台文档为准。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/open-graph-protocol.webp","source":"screenshot","captured_at":"2026-09-27T09:40:01Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"canva","name":"Canva","name_zh":null,"url":"https://www.canva.com","host":"canva.com","domain":"graphic","section":"social-og","also":["graphic:decks"],"kind":"tool","tags":["templates","social","brand-kit","ai"],"best_for":"The default tool non-designers use for social graphics, decks and print, with brand kits, size presets and AI","how_to_use":"When the client's team will produce assets themselves, deliver the system as a Canva brand kit and templates, not only as files","zh":"非设计师做社媒图、演示与印刷品的默认工具，带品牌套件、尺寸预设与 AI；客户要自己出物料时，把品牌套件和模板交付到这里。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Bot-protected (403 for scripts)","Template output looks generic unless the brand kit and templates are built for the client"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/canva.webp","source":"screenshot","captured_at":"2026-09-27T09:40:05Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"gaoding","name":"Gaoding (稿定设计)","name_zh":"稿定设计","url":"https://www.gaoding.com","host":"gaoding.com","domain":"graphic","section":"social-og","also":[],"kind":"tool","tags":["china","templates","social","ecommerce"],"best_for":"Chinese Canva-class platform with templates and size presets for 小红书, 公众号, e-commerce images and posters","how_to_use":"Check its 小红书 and 公众号 sections for current formats, and supply brand templates when Chinese teams produce assets here","zh":"稿定设计：国产 Canva 类平台，有小红书、公众号、电商图、海报的模板与尺寸预设；国内市场团队常在这里出图。","zh_how":"先看小红书、公众号分区里的当下尺寸与版式，再为客户团队做品牌模板；尺寸以平台官方说明为准。","access":"freemium","login":true,"license":"Licence per template","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"小红书 templates","url":"https://www.gaoding.com/explore/xiaohongshu-recommend?fid=6711058"},{"label":"公众号 templates","url":"https://www.gaoding.com/explore/wechat-recommend?fid=6710784"}],"api":null,"caveats":["Commercial-use rights differ per template: check each","Platform sizes change: confirm with the platform before export"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/gaoding.webp","source":"screenshot","captured_at":"2026-09-27T09:40:12Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"google-fonts","name":"Google Fonts","name_zh":null,"url":"https://fonts.google.com","host":"fonts.google.com","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["open-source","api","variable"],"best_for":"The largest open font library, with variable fonts, language filters and an API","how_to_use":"Filter by language (for example Chinese Simplified) and tick Variable before browsing; agents can list every family with category, axes and subsets from the metadata JSON; self-host the files (Fontsource) rather than hot-linking the CSS API","zh":"最大的开源字体库，有可变字体、语言筛选和 API；建议通过 Fontsource 自托管而非热链，多为 SIL OFL。","zh_how":"先按语言（如简体中文）筛选并勾选可变字体再浏览；智能体可从 metadata JSON 拿到所有字体的分类、可变轴与子集；上线请自托管字体文件（Fontsource），别热链 CSS API。","access":"free","login":false,"license":"Mostly SIL OFL; some Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"CSS2 API (URL syntax for families, axes and ranges)","url":"https://developers.google.com/fonts/docs/css2"}],"api":{"url":"https://fonts.google.com/metadata/fonts","sample":"https://fonts.google.com/metadata/fonts"},"caveats":["The metadata endpoint is undocumented and may change; the CSS2 API is the documented interface","Hot-linking fonts.googleapis.com sends each visitor's IP address to Google; for EU audiences self-host or use Bunny Fonts"],"agent_access":"js","thumb":{"src":"assets/thumbs/google-fonts.webp","source":"screenshot","captured_at":"2026-09-27T09:46:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fontsource","name":"Fontsource","name_zh":null,"url":"https://fontsource.org","host":"fontsource.org","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["npm","self-host","api"],"best_for":"Self-hostable open fonts as npm packages with an API","how_to_use":"npm i @fontsource-variable/<name> (or @fontsource/<name>) and import it; the API returns weights, subsets, variable flag and licence per family","zh":"把开源字体打包成 npm 包自托管，附 API；每个字体保留各自的开源协议。","zh_how":"npm i @fontsource-variable/<字体名>（或 @fontsource/<字体名>）后在代码里 import；API（api.fontsource.org/v1/fonts/<id>）返回字重、子集、是否可变与授权。","access":"free","login":false,"license":"Each font keeps its own open licence","tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://api.fontsource.org/v1/fonts/{id}","sample":"https://api.fontsource.org/v1/fonts/inter"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fontsource.webp","source":"screenshot","captured_at":"2026-09-27T09:40:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fontshare","name":"Fontshare","name_zh":null,"url":"https://www.fontshare.com","host":"fontshare.com","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["itf","quality","variable"],"best_for":"Professional-grade free fonts from Indian Type Foundry (Satoshi, General Sans, Clash, Cabinet Grotesk)","how_to_use":"Browse by category and try Satoshi, General Sans or Cabinet Grotesk as the way out of Inter; agents load fonts through the CSS API and list families as JSON","zh":"Indian Type Foundry 的专业级免费字体（Satoshi、Clash 等）；跳出 Inter/Roboto 默认的最快路径，可商用、不可转售。","zh_how":"按分类浏览，试试 Satoshi、General Sans、Cabinet Grotesk 代替 Inter；智能体用 CSS API （api.fontshare.com/v2/css?f[]=<slug>@<字重>）加载字体，用 api.fontshare.com/v2/fonts 取 JSON 字体列表。","access":"free","login":false,"license":"ITF Free Font License: free for commercial use; no redistribution or resale","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Font list as JSON","url":"https://api.fontshare.com/v2/fonts"}],"api":{"url":"https://api.fontshare.com/v2/css?f[]={slug}@{weight}&display=swap","sample":"https://api.fontshare.com/v2/css?f[]=satoshi@400&display=swap"},"caveats":["The ITF Free Font License allows commercial use but not redistribution: do not bundle the files into a template, kit or public repo"],"agent_access":"js","thumb":{"src":"assets/thumbs/fontshare.webp","source":"screenshot","captured_at":"2026-09-27T09:40:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uncut","name":"Uncut","name_zh":null,"url":"https://uncut.wtf","host":"uncut.wtf","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["contemporary","display"],"best_for":"Catalogue of contemporary free typefaces with character","how_to_use":"Filter by style (sans, serif, mono, display), open the typeface page and follow its licence link before use; licences differ per font","zh":"当代免费字体目录，专收有个性的展示字体；按风格筛选，逐款核对许可，多为 OFL。","zh_how":null,"access":"free","login":false,"license":"Licence per font, mostly OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/uncut.webp","source":"screenshot","captured_at":"2026-09-27T09:40:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"velvetyne","name":"Velvetyne","name_zh":null,"url":"https://velvetyne.fr","host":"velvetyne.fr","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["libre","experimental","display"],"best_for":"Libre foundry of expressive, experimental display faces","how_to_use":"Use for posters, covers and identities that need a voice; download from each font page, where the licence and designers are listed","zh":"自由字体铸造厂，专出表现力强的实验性展示字；海报与识别要个性时用；SIL OFL。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/velvetyne.webp","source":"screenshot","captured_at":"2026-09-27T09:40:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"open-foundry","name":"Open Foundry","name_zh":null,"url":"https://open-foundry.com","host":"open-foundry.com","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["curated","open-source"],"best_for":"Curated open-source typefaces presented well","how_to_use":"Browse the short curated list when an open typeface must look commercial-grade; follow each font to its source and licence","zh":"精选开源字体站，展示做得讲究，重质不重量；逐款字体查看各自的开源许可。","zh_how":null,"access":"free","login":false,"license":"Open licences per font","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/open-foundry.webp","source":"screenshot","captured_at":"2026-09-27T10:44:17Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"use-and-modify","name":"Use & Modify","name_zh":null,"url":"https://usemodify.com","host":"usemodify.com","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["libre","curated"],"best_for":"Personal selection of beautiful, classy, punk libre fonts","how_to_use":"Browse for unusual libre display faces for editorial and cultural projects; each entry links the designer's download and licence","zh":"个人策展的自由字体选集，品味偏优雅与朋克；找不撞脸的开放字体来这，逐字体开源授权。","zh_how":null,"access":"free","login":false,"license":"Open licences per font","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/use-and-modify.webp","source":"screenshot","captured_at":"2026-09-27T09:40:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"league-of-moveable-type","name":"The League of Moveable Type","name_zh":null,"url":"https://www.theleagueofmoveabletype.com","host":"theleagueofmoveabletype.com","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["open-source","classics"],"best_for":"The original open-source type foundry (League Gothic, Raleway origins)","how_to_use":"Use for dependable open display classics (League Gothic, League Spartan, Ostrich Sans); most are also on Google Fonts and Fontsource for self-hosting","zh":"开源字体界的鼻祖级字厂，League Gothic、Raleway 都出自这里；想要经典可靠的免费字体时用它，SIL OFL。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/league-of-moveable-type.webp","source":"screenshot","captured_at":"2026-09-27T09:40:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"collletttivo","name":"Collletttivo","name_zh":null,"url":"https://www.collletttivo.it","host":"collletttivo.it","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["open-source","display"],"best_for":"Italian open-source type collective publishing distinctive display and text faces under the OFL","how_to_use":"Browse for contemporary display and text faces; download from each font page and check glyph coverage for your languages","zh":"意大利的开源字体厂牌社区，展示字与正文字体都很有个性；SIL OFL。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/collletttivo.webp","source":"screenshot","captured_at":"2026-09-27T09:40:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"free-faces","name":"Free Faces","name_zh":null,"url":"https://www.freefaces.gallery","host":"freefaces.gallery","domain":"type","section":"free-fonts","also":[],"kind":"gallery","tags":["free","curated"],"best_for":"Curated gallery of free typefaces from around the web","how_to_use":"Check personal-only versus commercial use per font","zh":"免费字体策展画廊，从全网挑出品相好的；逐款确认个人使用还是可商用，许可各不同。","zh_how":null,"access":"free","login":false,"license":"Licences vary per font; read each","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/free-faces.webp","source":"screenshot","captured_at":"2026-09-27T09:40:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"inter","name":"Inter","name_zh":null,"url":"https://rsms.me/inter/","host":"rsms.me","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["ui","variable"],"best_for":"The workhorse UI typeface; excellent, and the most over-used default","how_to_use":"Use deliberately, with its OpenType features (tnum for tables, cv11 single-storey a, ss03 round quotes) and the optical-size axis in Inter 4","zh":"UI 字体的劳模，极好也极滥；要有意识地用，发挥 tnum、cv11 等 OpenType 特性，别凭条件反射；SIL OFL。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The default typeface of countless AI-generated and SaaS interfaces; choose it for a reason, not by reflex"],"agent_access":"static","thumb":{"src":"assets/thumbs/inter.webp","source":"screenshot","captured_at":"2026-09-27T09:40:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ibm-plex","name":"IBM Plex","name_zh":null,"url":"https://github.com/IBM/plex","host":"github.com","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["superfamily","multi-script"],"best_for":"Sans, serif, mono and condensed superfamily with wide language coverage including CJK","how_to_use":"Use when one family must cover sans, serif, mono and CJK (Plex Sans SC, TC, JP, KR); Plex Mono pairs naturally for code and data","zh":"IBM 的超级字族，无衬线、衬线、等宽、窄体齐全且覆盖中日韩；一套字体撑起整个产品，OFL。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ibm-plex.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"geist-font","name":"Geist","name_zh":null,"url":"https://vercel.com/font","host":"vercel.com","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["ui","mono"],"best_for":"Vercel's sans and mono for developer products","how_to_use":"Install from the geist npm package or Google Fonts; pair Geist Sans with Geist Mono for code and numbers","zh":"Vercel 出的无衬线与等宽字体，为开发者产品设计；工具类产品里快成默认选了，SIL OFL。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Now the default look of many AI-generated dashboards and dev-tool sites; it reads as generic unless the rest of the design carries identity"],"agent_access":"static","thumb":{"src":"assets/thumbs/geist-font.webp","source":"screenshot","captured_at":"2026-09-27T09:47:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"monaspace","name":"Monaspace","name_zh":null,"url":"https://monaspace.githubnext.com","host":"monaspace.githubnext.com","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["mono","variable","code"],"best_for":"Five-voice monospace superfamily with texture healing","how_to_use":"Mix its five voices (Neon neo-grotesque, Argon humanist, Xenon slab, Radon handwriting, Krypton mechanical) to separate code, comments and AI suggestions; texture healing works through calt","zh":"GitHub 出的五声部等宽字体超族，带 texture healing 排印微调；代码密集型界面优先用它；SIL OFL。","zh_how":"混用五种声部（Neon 新怪诞、Argon 人文、Xenon 粗衬线、Radon 手写、Krypton 机械）区分代码、注释与 AI 建议；texture healing 通过 calt 特性生效。","access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/monaspace.webp","source":"screenshot","captured_at":"2026-09-27T09:40:17Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"atkinson-hyperlegible","name":"Atkinson Hyperlegible","name_zh":null,"url":"https://www.brailleinstitute.org/freefont/","host":"brailleinstitute.org","domain":"type","section":"free-fonts","also":["a11y:inclusive-design"],"kind":"font","tags":["accessibility","legibility"],"best_for":"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","how_to_use":"Use Next for interfaces where legibility is the primary constraint, Mono for code; keep the 2019 original only for existing work","zh":"盲人学院为低视力读者设计的字体，字形互不混淆；现有三版：原版、Next（2025，七个字重加可变版，支持 150+ 语言）和 Mono。无障碍优先的界面用 Next。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/atkinson-hyperlegible.webp","source":"screenshot","captured_at":"2026-09-27T09:40:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"noto","name":"Noto","name_zh":null,"url":"https://fonts.google.com/noto","host":"fonts.google.com","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["multi-script","fallback"],"best_for":"Harmonised families for nearly every script","how_to_use":"Use as the fallback layer in font stacks for scripts the brand face lacks; Noto Sans and Serif CJK are the same designs as Source Han","zh":"Google 的 Noto 家族覆盖几乎所有文字系统且风格统一；多语言产品的兜底字体。SIL OFL。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/noto.webp","source":"screenshot","captured_at":"2026-09-27T09:47:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gwfh","name":"google-webfonts-helper","name_zh":null,"url":"https://gwfh.mranftl.com/fonts","host":"gwfh.mranftl.com","domain":"type","section":"free-fonts","also":[],"kind":"tool","tags":["self-host","css"],"best_for":"Download Google Fonts files with ready @font-face CSS for self-hosting","how_to_use":"Pick only the weights, styles and subsets you need, download the zip with generated @font-face CSS, and self-host it","zh":"下载 Google Fonts 字体文件并生成自托管 @font-face CSS 的工具；只挑需要的字重与子集。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/gwfh.webp","source":"screenshot","captured_at":"2026-09-27T09:40:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"google-sans-flex","name":"Google Sans Flex","name_zh":null,"url":"https://fonts.google.com/specimen/Google+Sans+Flex","host":"fonts.google.com","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["variable","ui","rounded-axis","google"],"best_for":"Google's brand sans, open-sourced in late 2025 with six axes: weight, width, optical size, slant, grade and roundness","how_to_use":"Use for expressive UI where one family must flex (roundness and width for tone, grade for dark mode); it reads as Google, so avoid it for brands that must not","zh":"Google 品牌无衬线字体，2025 年底以 OFL 开源，六个可变轴：字重、宽度、视觉尺寸、倾斜、字级（grade）与圆角；一套字体撑起多种语气，但 Google 辨识度高。","zh_how":"圆角轴与宽度轴调语气，grade 轴在深色模式下补偿笔画；品牌需要避开 Google 联想时别用。","access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Source and axis ranges (GitHub)","url":"https://github.com/googlefonts/googlesans-flex"}],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/google-sans-flex.webp","source":"screenshot","captured_at":"2026-09-27T09:47:49Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mona-sans","name":"Mona Sans and Hubot Sans","name_zh":null,"url":"https://github.com/mona-sans","host":"github.com","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["variable","width-axis","github","grotesque"],"best_for":"GitHub's open variable grotesques with a wide width axis, strong for display type and product UI","how_to_use":"Use the width axis for headline contrast inside one family; Hubot Sans is the more technical companion","zh":"GitHub 开源的可变无衬线（Mona Sans 与 Hubot Sans），宽度轴跨度大；用宽度轴在同一家族里拉开标题对比，Hubot Sans 更偏技术感。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mona-sans.webp","source":"screenshot","captured_at":"2026-09-27T09:46:40Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"maple-mono","name":"Maple Mono","name_zh":null,"url":"https://font.subf.dev","host":"font.subf.dev","domain":"type","section":"free-fonts","also":[],"kind":"font","tags":["mono","cjk","ligatures","nerd-font"],"best_for":"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","how_to_use":"Use the CN build (Maple Mono NF CN) for code, terminals and Markdown tables that mix Chinese and Latin","zh":"圆润的开源等宽字体，带连字与 Nerd Font 图标；CN 版中英文严格 2:1 对齐，覆盖简繁中文与日文；代码、终端、Markdown 表格中英混排时用。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Source and releases (GitHub)","url":"https://github.com/subframe7536/maple-font"}],"api":null,"caveats":["The CN build has no variable version and wider Chinese spacing than most Chinese UI fonts"],"agent_access":"js","thumb":{"src":"assets/thumbs/maple-mono.webp","source":"screenshot","captured_at":"2026-09-27T09:40:20Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"apple-fonts","name":"Apple fonts (SF Pro, SF Compact, SF Mono, New York)","name_zh":null,"url":"https://developer.apple.com/fonts/","host":"developer.apple.com","domain":"type","section":"free-fonts","also":["app-ui:platform-guidelines"],"kind":"font","tags":["apple","system-font","mockups"],"best_for":"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","how_to_use":"Install for iOS, iPadOS, macOS and watchOS mock-ups; on the web use the system-ui / -apple-system stack instead of shipping the files","zh":"苹果系统字体（SF Pro、SF Compact、SF Mono、New York）官方下载，做苹果平台界面稿时安装；网页请用 system-ui 字体栈，不要上传字体文件。","zh_how":null,"access":"free","login":false,"license":"Apple licence: only for designing and developing software for Apple platforms","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The licence forbids use outside Apple-platform design and development: not for Android, web embedding or brand work"],"agent_access":"static","thumb":{"src":"assets/thumbs/apple-fonts.webp","source":"screenshot","captured_at":"2026-09-27T09:51:28Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"bunny-fonts","name":"Bunny Fonts","name_zh":null,"url":"https://fonts.bunny.net","host":"fonts.bunny.net","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["gdpr","cdn","google-fonts-compatible","api"],"best_for":"Privacy-first mirror of the Google Fonts catalogue with a drop-in compatible CSS API and no visitor logging","how_to_use":"Swap fonts.googleapis.com for fonts.bunny.net in the stylesheet URL when self-hosting is not possible and EU privacy matters","zh":"注重隐私的 Google Fonts 镜像，CSS 接口与 Google 兼容、不记录访客；做欧盟项目又不便自托管时，把 fonts.googleapis.com 换成 fonts.bunny.net。","zh_how":null,"access":"free","login":false,"license":"Fonts keep their own open licences","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://fonts.bunny.net/css?family={family}:{weights}","sample":"https://fonts.bunny.net/css?family=inter:400,700"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/bunny-fonts.webp","source":"screenshot","captured_at":"2026-09-27T09:40:22Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"font-squirrel","name":"Font Squirrel","name_zh":null,"url":"https://www.fontsquirrel.com","host":"fontsquirrel.com","domain":"type","section":"free-fonts","also":[],"kind":"font-foundry","tags":["free-commercial","webfont-generator","identify"],"best_for":"Hand-picked fonts that are free for commercial use, plus the long-standing Webfont Generator and a font identifier","how_to_use":"Filter by licence scope; use the Webfont Generator to subset and convert a font you are licensed to embed","zh":"精选可免费商用的字体，附老牌 Webfont Generator（子集化与格式转换）和字体识别；只转换你有嵌入授权的字体。","zh_how":null,"access":"free","login":false,"license":"Licence per font; each page shows the scope","tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"Webfont Generator","url":"https://www.fontsquirrel.com/tools/webfont-generator"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/font-squirrel.webp","source":"screenshot","captured_at":"2026-09-27T09:41:23Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"klim","name":"Klim Type Foundry","name_zh":null,"url":"https://klim.co.nz","host":"klim.co.nz","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["commercial","trial"],"best_for":"Soehne, Tiempos, National: benchmark contemporary text and grotesque families","how_to_use":"Read the design-information essay for each family, and use test fonts for mock-ups before licensing","zh":"新西兰字厂，Soehne、Tiempos 等当代正文与无衬线标杆；付费商用，试用字体只能出稿不能上线。","zh_how":null,"access":"paid","login":false,"license":"Commercial; free test fonts for mock-ups only","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Test fonts are for mock-ups only and must not ship"],"agent_access":"static","thumb":{"src":"assets/thumbs/klim.webp","source":"screenshot","captured_at":"2026-09-27T10:28:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"grilli-type","name":"Grilli Type","name_zh":null,"url":"https://www.grillitype.com","host":"grillitype.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["commercial","trial"],"best_for":"GT America, GT Walsheim and richly documented mini-sites per family","how_to_use":"Study the specimen mini-sites for how a typeface is presented; use trial fonts for pitches and mock-ups only","zh":"瑞士字厂，GT America、GT Walsheim 出自其手，每款字体配独立标本小站；商用付费，有试用字体。","zh_how":null,"access":"paid","login":false,"license":"Commercial; free trial fonts","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/grilli-type.webp","source":"screenshot","captured_at":"2026-09-27T09:40:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"commercial-type","name":"Commercial Type","name_zh":null,"url":"https://commercialtype.com","host":"commercialtype.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["commercial","editorial"],"best_for":"Editorial heavyweights (Graphik, Canela, Publico)","how_to_use":"Reference for editorial pairings (Canela or Publico display over Graphik text); license before launch","zh":"编辑设计圈的重炮字厂（Graphik、Canela、Publico）；做 editorial 排版时当字体搭配参照；商业授权。","zh_how":null,"access":"paid","login":false,"license":"Commercial","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The site renders client-side: agents fetch an empty page"],"agent_access":"js","thumb":{"src":"assets/thumbs/commercial-type.webp","source":"screenshot","captured_at":"2026-09-27T09:40:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"dinamo","name":"ABC Dinamo","name_zh":null,"url":"https://abcdinamo.com","host":"abcdinamo.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["commercial","variable","trial"],"best_for":"Contemporary variable families (Diatype, Favorit, Whyte) and tools","how_to_use":"Use trial fonts for mock-ups and license before launch; test the variable axes in the specimens","zh":"当代可变字体厂牌，Diatype、Favorit 等定义潮流的那批；商用付费，可申请试用。","zh_how":null,"access":"paid","login":false,"license":"Commercial; trials on request","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Diatype, Favorit and Whyte are everywhere in startup branding, so they date a design quickly"],"agent_access":"static","thumb":{"src":"assets/thumbs/dinamo.webp","source":"screenshot","captured_at":"2026-09-27T09:40:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pangram-pangram","name":"Pangram Pangram","name_zh":null,"url":"https://pangrampangram.com","host":"pangrampangram.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["free-to-try","display"],"best_for":"Fashion-forward families that are free to try","how_to_use":"Download to try in mock-ups, then buy the commercial licence before anything ships","zh":"风格前卫的字体厂牌，可免费试用；个人版文件不能商用，正式项目需购买商业许可。","zh_how":null,"access":"freemium","login":false,"license":"Free for personal use; commercial licence required","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Free-to-try files are licensed for personal use only"],"agent_access":"static","thumb":{"src":"assets/thumbs/pangram-pangram.webp","source":"screenshot","captured_at":"2026-09-27T09:40:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ohno","name":"OH no Type Co.","name_zh":null,"url":"https://ohnotype.co","host":"ohnotype.co","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["display","expressive"],"best_for":"Expressive display faces and an excellent type-design blog","how_to_use":"Read the blog for drawing and spacing lessons","zh":"出表现力展示字体的铸造厂，附一流的字体设计博客；博客里的笔画与字距课值得读；字体付费。","zh_how":null,"access":"paid","login":false,"license":"Commercial","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ohno.webp","source":"screenshot","captured_at":"2026-09-27T09:40:58Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"future-fonts","name":"Future Fonts","name_zh":null,"url":"https://www.futurefonts.com","host":"futurefonts.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["in-progress","affordable"],"best_for":"Marketplace for in-progress typefaces bought early at lower prices","how_to_use":"Buy early versions at a lower price and receive updates; check glyph coverage first, because in-progress fonts may lack characters","zh":"未完成字体的早鸟市场，低价买入、随更新升值；想用小众新面孔时逛这里，付费。","zh_how":null,"access":"paid","login":false,"license":"Commercial, early-access pricing","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/future-fonts.webp","source":"screenshot","captured_at":"2026-09-27T09:41:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"typotheque","name":"Typotheque","name_zh":null,"url":"https://www.typotheque.com","host":"typotheque.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["multi-script","research"],"best_for":"Multi-script specialist with serious research articles","how_to_use":"Read /articles for multilingual typography","zh":"多文种字体专家，研究文章质量高；做多语言排版先读它的 articles，商用授权。","zh_how":null,"access":"paid","login":false,"license":"Commercial","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/typotheque.webp","source":"screenshot","captured_at":"2026-09-27T09:41:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"adobe-fonts","name":"Adobe Fonts","name_zh":null,"url":"https://fonts.adobe.com","host":"fonts.adobe.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["subscription","web","desktop"],"best_for":"Large commercial library bundled with Creative Cloud","how_to_use":"Activate for desktop mock-ups; on the web serve only through Adobe's embed project","zh":"Creative Cloud 捆绑的大型商业字体库；网页只能走 Adobe 嵌入、不能自托管，客户项目需客户自己的订阅。","zh_how":null,"access":"paid","login":true,"license":"Included with Creative Cloud; no self-hosting; client projects need the client's own subscription","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["No self-hosting; a client project needs the client's own Creative Cloud subscription"],"agent_access":"static","thumb":{"src":"assets/thumbs/adobe-fonts.webp","source":"screenshot","captured_at":"2026-09-27T09:41:11Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fontstand","name":"Fontstand","name_zh":null,"url":"https://fontstand.com","host":"fontstand.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["rent","trial"],"best_for":"Try commercial fonts free for an hour and rent them monthly","how_to_use":"Test a commercial face in a real layout before buying","zh":"商用字体免费试一小时、按月租用；买之前先在真实版面里验货。","zh_how":null,"access":"paid","login":true,"license":"Rental licences","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fontstand.webp","source":"screenshot","captured_at":"2026-09-27T09:41:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"youworkforthem","name":"YouWorkForThem","name_zh":null,"url":"https://www.youworkforthem.com","host":"youworkforthem.com","domain":"type","section":"foundries","also":[],"kind":"font-foundry","tags":["fonts","graphics","perpetual"],"best_for":"Independent shop for fonts and graphic assets (display faces, vector shape packs, textures)","how_to_use":"Useful for distinctive display type and Y2K-style vector packs","zh":"独立字体与图形素材商店，展示字体和 Y2K 风矢量包有特色；买断制许可，无需订阅。","zh_how":null,"access":"paid","login":false,"license":"Perpetual licences, no subscription","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/youworkforthem.webp","source":"screenshot","captured_at":"2026-09-27T09:41:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fonts-in-use","name":"Fonts In Use","name_zh":null,"url":"https://fontsinuse.com","host":"fontsinuse.com","domain":"type","section":"in-use","also":[],"kind":"archive","tags":["type-in-use","indexed"],"best_for":"Archive of typography in real use, indexed by typeface, format and industry","how_to_use":"Search a typeface to see it set in context, or browse by format (packaging, web, book) and industry to learn a sector's conventions","zh":"真实使用中的字体档案，按字体、形制、行业索引；查一款字体的实际排印效果或某行业的用字惯例。","zh_how":"搜一款字体看它在真实作品里的样子，或按形制（包装、网页、书籍）与行业浏览，了解某个领域的用字惯例。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fonts-in-use.webp","source":"screenshot","captured_at":"2026-09-27T09:41:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"typewolf","name":"Typewolf","name_zh":null,"url":"https://www.typewolf.com","host":"typewolf.com","domain":"type","section":"in-use","also":[],"kind":"article","tags":["site-of-the-day","recommendations","alternatives"],"best_for":"Type on real websites, plus trusted lists: best fonts by category and free alternatives to commercial faces","how_to_use":"Use the curated lists (best Google Fonts, free alternatives to commercial faces) and /cheatsheet for quotes, dashes and other typographic characters","zh":"真实网站用字观察站，另有分类最佳字体与商用字体免费平替榜；预算不够时查平替清单。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Typography cheatsheet (quotes, dashes, symbols)","url":"https://www.typewolf.com/cheatsheet"},{"label":"The 40 best Google Fonts","url":"https://www.typewolf.com/google-fonts"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/typewolf.webp","source":"screenshot","captured_at":"2026-09-27T09:41:11Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"beautiful-web-type","name":"Beautiful Web Type","name_zh":null,"url":"https://beautifulwebtype.com","host":"beautifulwebtype.com","domain":"type","section":"in-use","also":[],"kind":"gallery","tags":["open-source","showcase"],"best_for":"Showcase of the best open-source typefaces set beautifully","how_to_use":"Use its in-depth guide as a shortlist of open fonts, each shown set as a page with a download link","zh":"把最好的开源字体排出漂亮版式的展示站，等于一份值得用的开源字体短名单。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/beautiful-web-type.webp","source":"screenshot","captured_at":"2026-09-27T09:41:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"v-fonts","name":"Variable Fonts","name_zh":null,"url":"https://v-fonts.com","host":"v-fonts.com","domain":"type","section":"in-use","also":[],"kind":"gallery","tags":["variable"],"best_for":"Catalogue of variable fonts with live axis sliders","how_to_use":"Drag every axis with your own text before choosing; each entry links to the foundry","zh":"可变字体目录，带实时轴滑杆；选定字体前先把各轴拉一遍试试。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/v-fonts.webp","source":"screenshot","captured_at":"2026-09-27T09:41:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fontjoy","name":"Fontjoy","name_zh":null,"url":"https://fontjoy.com","host":"fontjoy.com","domain":"type","section":"in-use","also":[],"kind":"tool","tags":["pairing","ml"],"best_for":"Machine-learned font pairing generator","how_to_use":"Idea generator only; judge pairings by eye","zh":"机器学习生成字体搭配的工具；只当点子发生器，好不好看靠自己眼睛判。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fontjoy.webp","source":"screenshot","captured_at":"2026-09-27T09:41:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fonts-ninja","name":"Fonts Ninja","name_zh":null,"url":"https://fonts.ninja","host":"fonts.ninja","domain":"type","section":"in-use","also":[],"kind":"tool","tags":["identify","extension","in-use"],"best_for":"Browser extension that names the fonts on any live page, plus a catalogue of fonts spotted on websites","how_to_use":"Run the extension on a reference site to get the exact families and weights before looking for licensed or open equivalents","zh":"浏览器扩展，可识别任意网页上用的字体，附一份网站实际用字的字体目录；看到好的参考站先用它查出字体与字重，再找授权或开源替代。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fonts-ninja.webp","source":"screenshot","captured_at":"2026-09-27T09:41:26Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"fontpair","name":"Fontpair","name_zh":null,"url":"https://fontpair.co","host":"fontpair.co","domain":"type","section":"in-use","also":[],"kind":"gallery","tags":["pairing","google-fonts"],"best_for":"Gallery of Google Fonts pairings shown as headline and body specimens","how_to_use":"Scan for a starting pair, then test it with your real copy and sizes; the pairings are safe rather than distinctive","zh":"Google Fonts 字体搭配画廊，以标题加正文样张展示；拿来找起点，再用真实文案和字号验证，搭配偏稳妥、不出彩。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/fontpair.webp","source":"screenshot","captured_at":"2026-09-27T10:27:16Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"utopia","name":"Utopia","name_zh":null,"url":"https://utopia.fyi","host":"utopia.fyi","domain":"type","section":"tools","also":[],"kind":"tool","tags":["fluid-type","fluid-space","clamp"],"best_for":"Fluid type and space scales that interpolate between a small and a large viewport, output as CSS clamp()","how_to_use":"Set min and max viewport, base size and ratio in the type calculator and copy the clamp() custom properties; the space calculator produces matching fluid spacing","zh":"流式字号与间距刻度生成器，在大小两个视口间插值并输出 CSS clamp()；定好最小最大刻度后抄走。","zh_how":"在字号计算器里设最小与最大视口、基准字号和比率，复制生成的 clamp() 变量；间距计算器给出配套的流式间距。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Fluid type calculator","url":"https://utopia.fyi/type/calculator/"},{"label":"Fluid space calculator","url":"https://utopia.fyi/space/calculator/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/utopia.webp","source":"screenshot","captured_at":"2026-09-27T09:41:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"modern-font-stacks","name":"Modern Font Stacks","name_zh":null,"url":"https://modernfontstacks.com","host":"modernfontstacks.com","domain":"type","section":"tools","also":[],"kind":"guideline","tags":["system-fonts","performance"],"best_for":"System font stacks by typographic classification, no web fonts needed","how_to_use":"Copy a stack by classification (System UI, Humanist, Neo-Grotesque, Monospace Code and others) for zero-download, native-feeling type; the CSS also lives in the GitHub repo","zh":"按字体风格分类的系统字体栈，无需加载网络字体；要零成本原生感排版就抄一组，CC0。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Stacks as CSS (GitHub, CC0)","url":"https://github.com/system-fonts/modern-font-stacks"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/modern-font-stacks.webp","source":"screenshot","captured_at":"2026-09-27T09:41:25Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"typescale","name":"Typescale","name_zh":null,"url":"https://typescale.com","host":"typescale.com","domain":"type","section":"tools","also":[],"kind":"tool","tags":["type-scale","preview"],"best_for":"Visual type-scale calculator with live preview and export","how_to_use":"Compare ratios with the real typeface and your own copy, then export the CSS","zh":"可视化字号比例计算器，实时预览可导出；用真实字体比较不同比率。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/typescale.webp","source":"screenshot","captured_at":"2026-09-27T09:41:31Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wakamai-fondue","name":"Wakamai Fondue","name_zh":null,"url":"https://wakamaifondue.com","host":"wakamaifondue.com","domain":"type","section":"tools","also":[],"kind":"tool","tags":["inspect","opentype"],"best_for":"Drop a font to see its features, axes, languages and ready CSS","how_to_use":"Check what a font can do before designing with it","zh":"把字体文件拖进去就能看特性、可变轴、支持语言并生成 CSS；用一款字体前先摸清它的底细。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/wakamai-fondue.webp","source":"screenshot","captured_at":"2026-09-27T09:41:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"capsize","name":"Capsize","name_zh":null,"url":"https://seek-oss.github.io/capsize/","host":"seek-oss.github.io","domain":"type","section":"tools","also":[],"kind":"tool","tags":["leading-trim","metrics"],"best_for":"Trims text boxes to cap height and baseline using font metrics","how_to_use":"Use until CSS text-box (text-box-trim and text-box-edge) reaches Baseline; it is in Chrome, Edge and Safari but not Firefox","zh":"按字体度量把文本框精确裁到 cap height 与基线的工具；在 text-box-trim 普及之前都靠它；MIT。","zh_how":"在 CSS text-box（text-box-trim、text-box-edge）进入 Baseline 之前用它；目前 Chrome、Edge、Safari 已支持，Firefox 未支持。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/capsize.webp","source":"screenshot","captured_at":"2026-09-27T09:41:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fallback-font-generator","name":"Fallback font generator","name_zh":null,"url":"https://screenspan.net/fallback","host":"screenspan.net","domain":"type","section":"tools","also":[],"kind":"tool","tags":["font-loading","cls"],"best_for":"Generates metric overrides so a fallback font matches the web font and avoids layout shift","how_to_use":"Paste the result into the @font-face for the fallback","zh":"生成字体度量覆盖，让回退字体对齐网络字体、避免布局偏移；结果贴进回退的 @font-face。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fallback-font-generator.webp","source":"screenshot","captured_at":"2026-09-27T09:41:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"glyphhanger","name":"glyphhanger","name_zh":null,"url":"https://github.com/zachleat/glyphhanger","host":"github.com","domain":"type","section":"tools","also":[],"kind":"library","tags":["subsetting"],"best_for":"Finds the glyphs a site uses and subsets fonts accordingly","how_to_use":"Use for Latin subsetting in build pipelines","zh":"找出页面实际用到的字形并按需裁剪字体的工具；构建管线里做拉丁子集化用。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/glyphhanger.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"whatthefont","name":"WhatTheFont","name_zh":null,"url":"https://www.myfonts.com/pages/whatthefont","host":"myfonts.com","domain":"type","section":"tools","also":[],"kind":"tool","tags":["identify"],"best_for":"Identify a typeface from an image","how_to_use":"Upload a crop of one clean line of text; results come from the MyFonts catalogue, so cross-check open fonts elsewhere and use 求字体 or 字由 for Chinese","zh":"上传图片识别字体的工具；从一张截图里提取风格 DNA 时，这是第一步。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/whatthefont.webp","source":"screenshot","captured_at":"2026-09-27T09:41:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fontdrop","name":"FontDrop!","name_zh":null,"url":"https://fontdrop.info","host":"fontdrop.info","domain":"type","section":"tools","also":[],"kind":"tool","tags":["inspect","glyphs","metadata"],"best_for":"Drop a font file to see its glyphs, metrics, OpenType features, language support and name-table metadata","how_to_use":"Check a font's licence and vendor fields and its language coverage before adopting it","zh":"拖入字体文件即可查看字形、度量、OpenType 特性、语言覆盖与 name 表元数据；采用字体前先看授权字段和语言覆盖。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JS app: agents need a browser"],"agent_access":"js","thumb":{"src":"assets/thumbs/fontdrop.webp","source":"screenshot","captured_at":"2026-09-27T09:41:33Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"transfonter","name":"Transfonter","name_zh":null,"url":"https://transfonter.org","host":"transfonter.org","domain":"type","section":"tools","also":[],"kind":"tool","tags":["webfont","subset","woff2"],"best_for":"Online converter to WOFF2 with subsetting, vertical-metrics fixes and generated @font-face CSS","how_to_use":"Use for quick Latin subsetting of fonts you may embed; use cn-font-split for Chinese","zh":"在线把字体转成 WOFF2，可子集化、修正垂直度量并生成 @font-face CSS；拉丁字体快速子集化用它，中文请用 cn-font-split。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/transfonter.webp","source":"screenshot","captured_at":"2026-09-27T09:41:39Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"practical-typography","name":"Practical Typography","name_zh":null,"url":"https://practicaltypography.com","host":"practicaltypography.com","domain":"type","section":"guides","also":[],"kind":"book","tags":["rules","web-book"],"best_for":"Butterick's web book: the most useful typography rules per minute of reading","how_to_use":"Read Typography in ten minutes and Summary of key rules","zh":"Butterick 的在线排版书，单位时间收获最大的排版规则集；先读「十分钟排版」与规则摘要两章。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Typography in ten minutes","url":"https://practicaltypography.com/typography-in-ten-minutes.html"},{"label":"Summary of key rules","url":"https://practicaltypography.com/summary-of-key-rules.html"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/practical-typography.webp","source":"screenshot","captured_at":"2026-09-27T09:41:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"google-fonts-knowledge","name":"Google Fonts Knowledge","name_zh":null,"url":"https://fonts.google.com/knowledge","host":"fonts.google.com","domain":"type","section":"guides","also":[],"kind":"guideline","tags":["education","variable","pairing"],"best_for":"Structured lessons on choosing, pairing and using type, including variable fonts","how_to_use":"Look up a topic (pairing, legibility, OpenType features)","zh":"Google 的字体知识库，结构化讲解选字、搭配与可变字体；查排版、可读性、OpenType 特性用它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/google-fonts-knowledge.webp","source":"screenshot","captured_at":"2026-09-27T09:48:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"thinking-with-type","name":"Thinking with Type (3rd edition)","name_zh":null,"url":"https://papress.com/products/thinking-with-type-3-edition","host":"papress.com","domain":"type","section":"guides","also":[],"kind":"book","tags":["letter","text","grid"],"best_for":"Ellen Lupton's primer on letter, text and grid, revised with material on non-Latin writing systems and typeface design","how_to_use":"Read the Grid chapter before any layout-heavy graphic","zh":"Ellen Lupton 的字体入门经典（第三版），讲字母、文本与网格，新增非拉丁文字系统与字体设计内容；做重排版设计前先读网格一章。付费书。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The old companion site thinkingwithtype.com no longer belongs to the book (it redirects to a Namecheap page); its free lessons are gone"],"agent_access":"static","thumb":{"src":"assets/thumbs/thinking-with-type.webp","source":"screenshot","captured_at":"2026-09-27T09:41:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webtypography-net","name":"The Elements of Typographic Style Applied to the Web","name_zh":null,"url":"https://webtypography.net","host":"webtypography.net","domain":"type","section":"guides","also":[],"kind":"guideline","tags":["bringhurst","css"],"best_for":"Bringhurst's principles translated into CSS","how_to_use":"Look up a Bringhurst principle (rhythm, measure, proportion) and its web translation; take the principle, not the dated CSS","zh":"把 Bringhurst 的经典排印原则逐条译成 CSS；查网页文字的节奏与比例规则时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Examples predate variable fonts, text-wrap and text-box","Behind a bot wall for scripted fetches"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/webtypography-net.webp","source":"screenshot","captured_at":"2026-09-27T09:41:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"better-web-type","name":"Better Web Type","name_zh":null,"url":"https://betterwebtype.com","host":"betterwebtype.com","domain":"type","section":"guides","also":[],"kind":"course","tags":["web-typography"],"best_for":"Web typography course and articles for developers","how_to_use":"Take the free course in order (rhythm, scale, line length, pairing), then keep the articles for reference","zh":"面向开发者的网页排版课程与短文，篇幅短、重实操；补字体排印基本功时按课学。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/better-web-type.webp","source":"screenshot","captured_at":"2026-09-27T09:41:39Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pimp-my-type","name":"Pimp my Type","name_zh":null,"url":"https://pimpmytype.com","host":"pimpmytype.com","domain":"type","section":"guides","also":[],"kind":"article","tags":["reviews","pairing"],"best_for":"Font reviews, pairing and UI-typography advice","how_to_use":"Look up font-of-the-week reviews for well-judged open fonts","zh":"字体评测、搭配与 UI 排印建议的博客；每周字体评测里常有判断可靠的开源字。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pimp-my-type.webp","source":"screenshot","captured_at":"2026-09-27T09:41:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"web-is-typography","name":"Web Design is 95% Typography","name_zh":null,"url":"https://ia.net/topics/the-web-is-all-about-typography-period","host":"ia.net","domain":"type","section":"guides","also":[],"kind":"article","tags":["principle"],"best_for":"The classic argument that treating text as UI is most of web design","how_to_use":"Read once to recalibrate: treat text as the interface and judge a layout by its reading experience","zh":"经典檄文，主张网页设计九成是字体排印、要把文字当界面看；读一遍校准观念。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/web-is-typography.webp","source":"screenshot","captured_at":"2026-09-27T09:41:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webdev-font-best-practices","name":"web.dev: font best practices","name_zh":null,"url":"https://web.dev/articles/font-best-practices","host":"web.dev","domain":"type","section":"guides","also":[],"kind":"article","tags":["loading","performance"],"best_for":"Font loading, preloading, subsetting and font-display strategy","how_to_use":"Follow its checklist when adding any web font: self-host or preconnect, preload only the critical file, choose font-display deliberately, subset","zh":"web.dev 的字体最佳实践：加载、预载、子集化与 font-display 策略；给网页加任何字体前照做。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webdev-font-best-practices.webp","source":"screenshot","captured_at":"2026-09-27T09:47:31Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"source-han-sans","name":"Source Han Sans / Serif (思源黑体 / 宋体)","name_zh":null,"url":"https://github.com/adobe-fonts/source-han-sans","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","pan-cjk","variable"],"best_for":"The open pan-CJK standard in seven weights; identical to Noto Sans / Serif CJK","how_to_use":"Default open choice for Chinese, Japanese and Korean text; ship subsetted or sliced (cn-font-split), never the full OTC","zh":"开源泛 CJK 标准字体，七个字重，等同 Noto Sans/Serif CJK；中文默认开源选择，上线记得子集化；SIL OFL。","zh_how":"中日韩正文的默认开源选择；上线必须子集化或切片（cn-font-split），不要直接发整包字体文件。","access":"free","login":false,"license":"SIL OFL","tier":"S","status":"active","lang":"zh","region":"global","entry_points":[{"label":"Source Han Serif / 思源宋体 (GitHub)","url":"https://github.com/adobe-fonts/source-han-serif"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/source-han-sans.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"maoken","name":"猫啃网","name_zh":null,"url":"https://www.maoken.com","host":"maoken.com","domain":"type","section":"cjk","also":[],"kind":"font-foundry","tags":["cjk","licence-directory"],"best_for":"Directory of free-for-commercial Chinese fonts with licence evidence for each","how_to_use":"Check here before using any Chinese font found elsewhere","zh":"免费商用中文字体目录，每款附授权证据；别处找到的中文字体先来这核对再用。","zh_how":"在别处看到中文字体，先来这里搜名字核对授权证据；免费商用字体清单页按风格分类。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"Free Chinese fonts list","url":"https://www.maoken.com/freefonts"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/maoken.webp","source":"screenshot","captured_at":"2026-09-27T09:41:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"chinese-webfont","name":"中文网字计划","name_zh":null,"url":"https://chinese-font.netlify.app","host":"chinese-font.netlify.app","domain":"type","section":"cjk","also":["code:render-export"],"kind":"tool","tags":["cjk","webfont","slicing"],"best_for":"Free CDN of sliced Chinese web fonts plus cn-font-split, the tool that slices any CJK font into unicode-range chunks","how_to_use":"Load a sliced font from the CDN for prototypes; for production slice your own licensed font with cn-font-split (npm) so browsers fetch only the characters a page uses","zh":"中文网字计划：免费的中文字体分片 CDN，配套 cn-font-split 可把任意中日韩字体切成 unicode-range 分片，浏览器只加载页面用到的字；Apache-2.0 工具，字体各自授权。","zh_how":"原型阶段直接引 CDN 上的分片字体；正式上线用 cn-font-split（npm）切自己有授权的字体并自托管。","access":"free","login":false,"license":"Apache-2.0 tooling; fonts keep their own licences","tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"Font CDN (字图 CDN)","url":"https://chinese-font.netlify.app/zh-cn/cdn"},{"label":"cn-font-split (slicer, GitHub)","url":"https://github.com/KonghaYao/cn-font-split"}],"api":null,"caveats":["The CDN domain moved in 2026 (chinese-fonts-cdn.deno.dev is being retired); pin URLs from the CDN page or self-host"],"agent_access":"static","thumb":{"src":"assets/thumbs/chinese-webfont.webp","source":"screenshot","captured_at":"2026-09-27T09:41:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"clreq","name":"Requirements for Chinese Text Layout (中文排版需求)","name_zh":null,"url":"https://www.w3.org/TR/clreq/","host":"w3.org","domain":"type","section":"cjk","also":[],"kind":"spec","tags":["cjk","typesetting","w3c"],"best_for":"The W3C reference for Chinese typesetting: punctuation, line breaking, mixed-script spacing, emphasis, vertical text","how_to_use":"Look up the rule before arguing about punctuation or line-start prohibitions","zh":"W3C 的中文排版需求文档：标点、断行、中西混排间距、强调、竖排；争论标点与行首禁则前查它。","zh_how":"争论标点挤压、行首行尾禁则、中西文间距前先查对应章节；智能体读 w3c.github.io/clreq/ 镜像（w3.org 对脚本返回 403）。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"clreq (GitHub mirror)","url":"https://w3c.github.io/clreq/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/clreq.webp","source":"screenshot","captured_at":"2026-09-27T09:47:46Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"chinese-copywriting-guidelines","name":"中文文案排版指北","name_zh":null,"url":"https://github.com/sparanoid/chinese-copywriting-guidelines","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"guideline","tags":["cjk","copy","spacing"],"best_for":"Widely adopted conventions for spacing, punctuation and proper nouns in Chinese copy","how_to_use":"Adopt one convention per product and lint for it","zh":"中文文案排版通行约定：空格、标点与专名的写法；产品里选定一套规则并配工具检查，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/chinese-copywriting-guidelines.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"alibaba-puhuiti","name":"Alibaba PuHuiTi (阿里巴巴普惠体)","name_zh":null,"url":"https://www.alibabafonts.com","host":"alibabafonts.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","free-commercial"],"best_for":"Modern Chinese sans in many weights with Latin companions","how_to_use":"Download from the official site to keep the licence record","zh":"多字重的现代中文黑体，配西文；从官网下载以留授权记录；免费商用，不可转售字体文件。","zh_how":null,"access":"free","login":true,"license":"Free for commercial use under Alibaba's licence terms; no resale of the font files","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/alibaba-puhuiti.webp","source":"screenshot","captured_at":"2026-09-27T09:41:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"harmonyos-sans","name":"HarmonyOS Sans","name_zh":null,"url":"https://developer.huawei.com/consumer/cn/design/resource/","host":"developer.huawei.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","harmonyos","free-commercial"],"best_for":"Huawei's system typeface covering Simplified and Traditional Chinese, Latin and more","how_to_use":"Use for HarmonyOS apps and as a neutral UI face","zh":"华为系统字体，覆盖简繁中文与拉丁等多文种；鸿蒙应用标配，也可当中性 UI 字体。免费商用。","zh_how":null,"access":"free","login":false,"license":"Free commercial use under the HarmonyOS Sans licence agreement","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/harmonyos-sans.webp","source":"screenshot","captured_at":"2026-09-27T09:48:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"misans","name":"MiSans","name_zh":null,"url":"https://hyperos.mi.com/font/","host":"hyperos.mi.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","variable","free-commercial"],"best_for":"Xiaomi's variable Chinese sans with wide weight range","how_to_use":"Use the variable version for fine weight steps in UI; download from the official page to keep the licence agreement","zh":"小米的可变中文无衬线，字重范围宽；可变字重适合流动的 UI 层级；依小米协议免费商用。","zh_how":null,"access":"free","login":false,"license":"Free commercial use under Xiaomi's licence agreement","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/misans.webp","source":"screenshot","captured_at":"2026-09-27T09:41:59Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"smiley-sans","name":"Smiley Sans (得意黑)","name_zh":null,"url":"https://github.com/atelier-anchor/smiley-sans","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","display","oblique"],"best_for":"Open-source condensed oblique Chinese display face with real character","how_to_use":"Use for headlines, posters and campaign type only; the condensed oblique forms tire the eye at text sizes","zh":"得意黑：开源的窄体斜势中文标题字，性格鲜明；只适合标题场景，OFL 协议。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/smiley-sans.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lxgw-wenkai","name":"LXGW WenKai (霞鹜文楷)","name_zh":null,"url":"https://github.com/lxgw/LxgwWenKai","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","kai","reading"],"best_for":"Open-source Kai-style face for warm, literary reading text","how_to_use":"Use for literary, editorial and note-taking tone; LXGW WenKai Screen is the build tuned for screens","zh":"开源楷体风格中文字体，气质温润，适合人文阅读类正文与编辑设计；SIL OFL 协议。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"LXGW WenKai Screen (screen build)","url":"https://github.com/lxgw/LxgwWenKai-Screen"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/lxgw-wenkai.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"foundertype","name":"方正字库","name_zh":null,"url":"https://www.foundertype.com","host":"foundertype.com","domain":"type","section":"cjk","also":[],"kind":"font-foundry","tags":["cjk","commercial"],"best_for":"China's largest commercial type library","how_to_use":"License per use (print, web, app, video) before any commercial use; the same applies to Hanyi and other commercial Chinese foundries","zh":"国内最大的商业字库；商用须按用途购买授权，侵权追责活跃，别存侥幸心理。","zh_how":null,"access":"paid","login":true,"license":"Commercial licence required per use; enforcement is active","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Infringement claims over unlicensed Chinese fonts are common and actively pursued"],"agent_access":"static","thumb":{"src":"assets/thumbs/foundertype.webp","source":"screenshot","captured_at":"2026-09-27T09:41:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"the-type","name":"The Type","name_zh":null,"url":"https://www.thetype.com","host":"thetype.com","domain":"type","section":"cjk","also":[],"kind":"article","tags":["cjk","criticism","kongque"],"best_for":"The most serious Chinese-language writing on type and typesetting, including the Kongque punctuation research","how_to_use":"Read Kongque for punctuation width and spacing behaviour","zh":"中文圈最认真的字体与排印写作媒体，'孔雀计划'讲清标点宽度与间距；做中文排版必读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"孔雀计划 (Kongque: punctuation in Chinese typesetting)","url":"https://www.thetype.com/kongque/"}],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/the-type.webp","source":"screenshot","captured_at":"2026-09-27T09:41:50Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"heti","name":"赫蹏 (heti)","name_zh":null,"url":"https://github.com/sivan/heti","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"library","tags":["cjk","css","typesetting"],"best_for":"CSS typesetting enhancement for Chinese content: punctuation squeezing, mixed-script spacing, rhythm","how_to_use":"Add the heti class to long-form Chinese article containers for punctuation squeezing, CJK-Latin spacing and vertical rhythm; not for app UI","zh":"中文排版增强 CSS 库：标点挤压、中西文混排间距、阅读节奏；用在正文页上；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"slow","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/heti.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pangu-js","name":"pangu.js","name_zh":null,"url":"https://github.com/vinta/pangu.js","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"library","tags":["cjk","spacing"],"best_for":"Automatically inserts spacing between CJK and half-width characters","how_to_use":"Prefer fixing copy at the source; use for user-generated text","zh":"自动在中日韩与半角字符间加空格的库；能改源头文案就先改，用户生成内容靠它兜底；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pangu-js.webp","source":"github","captured_at":"2026-09-27T09:48:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"autocorrect","name":"AutoCorrect","name_zh":null,"url":"https://github.com/huacnlee/autocorrect","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"library","tags":["cjk","lint","copy"],"best_for":"Linter and formatter for CJK copy: spacing, punctuation, full-width rules","how_to_use":"Put it in CI to keep product copy consistent","zh":"中文文案的 lint 工具，自动处理中英文间距、标点和全半角规则；接入 CI 保持文案一致。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/autocorrect.webp","source":"github","captured_at":"2026-09-27T09:48:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pretendard","name":"Pretendard","name_zh":null,"url":"https://github.com/orioncactus/pretendard","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["korean","system-ui-alternative","variable","cjk"],"best_for":"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","how_to_use":"Default for Korean interfaces; use the dynamic-subset web build, and Pretendard JP when Japanese is needed","zh":"事实上的韩文界面字体：韩文基于思源黑体、拉丁字母源自 Inter，九个字重另有可变版，并有融合 M PLUS 1p 的日文版；韩文界面默认选它。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"ko","region":"kr","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pretendard.webp","source":"github","captured_at":"2026-09-27T09:48:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"line-seed","name":"LINE Seed","name_zh":null,"url":"https://seed.line.me/index_en.html","host":"seed.line.me","domain":"type","section":"cjk","also":[],"kind":"font","tags":["japanese","korean","thai","brand"],"best_for":"LINE's open brand typeface family with Japanese, Korean, Thai, Traditional Chinese and Latin versions","how_to_use":"Use for friendly East-Asian multi-script products; in Japan it reads as LINE","zh":"LINE 开源品牌字体家族，含日文、韩文、泰文、繁体中文与拉丁版本；适合亲和的东亚多语产品，但在日本 LINE 联想很强。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"B","status":"active","lang":"multi","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/line-seed.webp","source":"screenshot","captured_at":"2026-09-27T09:42:06Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"noonnu","name":"Noonnu (눈누)","name_zh":null,"url":"https://noonnu.cc","host":"noonnu.cc","domain":"type","section":"cjk","also":[],"kind":"font-foundry","tags":["korean","licence-directory","free-commercial"],"best_for":"Directory of free-for-commercial Korean fonts with the licence scope of each font","how_to_use":"Check here before using any Korean font found elsewhere, and read the scope (print, web, video, embedding)","zh":"可免费商用的韩文字体目录，逐款标注授权范围；用别处找到的韩文字体前先来核对，注意印刷、网页、视频、嵌入各自的范围。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ko","region":"kr","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/noonnu.webp","source":"screenshot","captured_at":"2026-09-27T09:41:58Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"hanyi","name":"Hanyi Fonts (汉仪字库)","name_zh":"汉仪字库","url":"https://www.hanyi.com.cn","host":"hanyi.com.cn","domain":"type","section":"cjk","also":[],"kind":"font-foundry","tags":["cjk","commercial","china"],"best_for":"Major commercial Chinese foundry with a very large library and active licence enforcement","how_to_use":"Never ship a Hanyi font commercially without a purchased licence; match the licence scope (web, app, video, print) to the use","zh":"国内主要商业字库之一，字库庞大、维权积极；没有购买授权绝不能商用，授权范围（网页、App、视频、印刷）要和用途一致。","zh_how":null,"access":"paid","login":true,"license":"Commercial licence required per use","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Fonts preinstalled on a computer or bundled with software are not licensed for commercial design work"],"agent_access":"static","thumb":{"src":"assets/thumbs/hanyi.webp","source":"screenshot","captured_at":"2026-09-27T09:41:55Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"justfont","name":"justfont","name_zh":null,"url":"https://justfont.com","host":"justfont.com","domain":"type","section":"cjk","also":[],"kind":"font-foundry","tags":["traditional-chinese","taiwan","webfont","education"],"best_for":"Taiwanese foundry and type-education team behind 金萱 (Jinxuan) and other Traditional Chinese families, with a web-font service","how_to_use":"Use for Traditional Chinese products and read its type-education articles on Chinese typesetting","zh":"台湾字体公司与字体教育团队，出品金萱等繁体中文字体并提供网页字体服务；繁体中文产品选字、学中文排版都值得看。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/justfont.webp","source":"screenshot","captured_at":"2026-09-27T09:41:57Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"100font","name":"100font.com","name_zh":null,"url":"https://www.100font.com","host":"100font.com","domain":"type","section":"cjk","also":[],"kind":"font-foundry","tags":["cjk","licence-directory","free-commercial"],"best_for":"Directory of free-for-commercial fonts, mostly Chinese, filterable by script and style, with licence notes and downloads","how_to_use":"Second licence check after 猫啃网; confirm on the vendor's own page before shipping","zh":"免费商用字体大全，以中文为主，可按简繁、日韩与风格筛选，附授权说明与下载；猫啃网之后的第二道授权核对，上线前再到厂商官网确认。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/100font.webp","source":"screenshot","captured_at":"2026-09-27T09:41:54Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"hellofont","name":"HelloFont (字由)","name_zh":"字由","url":"https://www.hellofont.cn","host":"hellofont.cn","domain":"type","section":"cjk","also":[],"kind":"tool","tags":["cjk","font-manager","recognition"],"best_for":"Chinese font manager with licence labels, one-click font switching in design apps and an AI font recogniser","how_to_use":"Run the recogniser on a screenshot, then verify the licence before using the match","zh":"字由：中文字体管理工具，标注授权、在设计软件里一键换字，并有 AI 字体识别；识别出结果后先核对授权再用。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/hellofont.webp","source":"screenshot","captured_at":"2026-09-27T10:28:04Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"qiuziti","name":"Qiuziti (求字体)","name_zh":"求字体","url":"https://www.qiuziti.com","host":"qiuziti.com","domain":"type","section":"cjk","also":[],"kind":"tool","tags":["cjk","identify","recognition"],"best_for":"Image-based font identification for Chinese, Latin, Japanese and Korean text: the Chinese WhatTheFont","how_to_use":"Upload a crop of the characters (JPG or PNG, up to 800 KB) to identify the face, then check its licence on 猫啃网 or the foundry","zh":"上传图片识别字体，支持中、英、日、韩；中文圈的 WhatTheFont。识别后去猫啃网或字厂核对授权。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["A download link here does not grant a licence; many identified fonts are commercial"],"agent_access":"static","thumb":{"src":"assets/thumbs/qiuziti.webp","source":"screenshot","captured_at":"2026-09-27T09:41:58Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"douyin-sans","name":"Douyin Sans (抖音美好体)","name_zh":"抖音美好体","url":"https://github.com/bytedance/fonts","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","display","free-commercial"],"best_for":"ByteDance's open bold display face with 6,763 Chinese characters and 682 Latin, figure and punctuation glyphs","how_to_use":"Headlines and campaign graphics only; it carries a strong Douyin association","zh":"抖音品牌创意中心以 OFL 开源的粗体展示字体，收 6763 个汉字和 682 个数字西文符号；只用于标题与活动物料，抖音联想强。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/douyin-sans.webp","source":"github","captured_at":"2026-09-27T09:48:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"sarasa-gothic","name":"Sarasa Gothic (更纱黑体)","name_zh":"更纱黑体","url":"https://github.com/be5invis/Sarasa-Gothic","host":"github.com","domain":"type","section":"cjk","also":[],"kind":"font","tags":["cjk","mono","ui","pan-cjk"],"best_for":"CJK composite font built from Inter, Iosevka and Source Han Sans: UI and monospace styles with exact 2:1 CJK-Latin width","how_to_use":"Use for code, tables and terminals that mix CJK and Latin; remove the old version completely before installing an update","zh":"更纱黑体：由 Inter、Iosevka 与思源黑体合成的中日韩字体，含 UI 与等宽样式，中英文严格 2:1 对齐；代码、表格、终端中英混排时用。","zh_how":null,"access":"free","login":false,"license":"SIL OFL","tier":"A","status":"active","lang":"multi","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sarasa-gothic.webp","source":"github","captured_at":"2026-09-27T09:48:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"jlreq","name":"Requirements for Japanese Text Layout (日本語組版処理の要件)","name_zh":null,"url":"https://www.w3.org/TR/jlreq/","host":"w3.org","domain":"type","section":"cjk","also":[],"kind":"spec","tags":["japanese","typesetting","w3c"],"best_for":"The W3C reference for Japanese typesetting: line breaking, punctuation, ruby, mixed scripts and vertical text","how_to_use":"Use with clreq when a product ships Japanese as well as Chinese; agents read the GitHub mirror","zh":"W3C 日文排版需求：断行、标点、注音（ruby）、混排与竖排；产品同时有日文和中文时与 clreq 一起查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"ja","region":"jp","entry_points":[{"label":"jlreq (GitHub mirror)","url":"https://w3c.github.io/jlreq/"}],"api":null,"caveats":["www.w3.org answers scripted fetches with a bot wall (403); use the mirror"],"agent_access":"static","thumb":{"src":"assets/thumbs/jlreq.webp","source":"screenshot","captured_at":"2026-09-27T09:47:57Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"klreq","name":"Requirements for Hangul Text Layout and Typography (klreq)","name_zh":null,"url":"https://www.w3.org/TR/klreq/","host":"w3.org","domain":"type","section":"cjk","also":[],"kind":"spec","tags":["korean","typesetting","w3c"],"best_for":"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","how_to_use":"Look up Korean-specific rules (word-break restrictions, punctuation position, Hangul-Latin spacing) when a product ships Korean","zh":"W3C 韩文排版需求：断行与单词分割规则、行首行尾禁则、标点、字距，以及韩文与拉丁字母混排；产品上韩文时查对应规则。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"ko","region":"kr","entry_points":[{"label":"klreq (GitHub mirror)","url":"https://w3c.github.io/klreq/"}],"api":null,"caveats":["www.w3.org answers scripted fetches with a bot wall (403); use the mirror"],"agent_access":"static","thumb":{"src":"assets/thumbs/klreq.webp","source":"screenshot","captured_at":"2026-09-27T09:48:06Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"coolors","name":"Coolors","name_zh":null,"url":"https://coolors.co","host":"coolors.co","domain":"color","section":"palettes","also":[],"kind":"tool","tags":["generator","explore"],"best_for":"Fast palette generator with locking, contrast check and a large explore section","how_to_use":"Lock the brand colour, generate around it; verify contrast separately","zh":"快速配色生成器，可锁定单色、查对比度、逛灵感区；锁住品牌色往外生成，对比度另行验证。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare wall blocks scripted fetches: send the link","Contrast and colour-blind checks are basic; verify roles with a contrast tool"],"agent_access":"blocked","thumb":null,"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"realtime-colors","name":"Realtime Colors","name_zh":null,"url":"https://www.realtimecolors.com","host":"realtimecolors.com","domain":"color","section":"palettes","also":[],"kind":"tool","tags":["preview-in-context","export"],"best_for":"Preview a palette and font pair on a real page layout, then export tokens","how_to_use":"The fastest sanity check of a palette in context","zh":"在真实页面版式上预览配色与字体搭配，可导出 token；给配色方案做体检的最快办法。","zh_how":"把 5 个角色色（文字、背景、主色、辅色、强调色）填进去看真实页面，满意后导出 CSS 变量或 Tailwind 配置，再用对比度工具核对。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/realtime-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"happy-hues","name":"Happy Hues","name_zh":null,"url":"https://www.happyhues.co","host":"happyhues.co","domain":"color","section":"palettes","also":[],"kind":"gallery","tags":["palette-in-context"],"best_for":"Curated palettes shown applied to a page, with role labels","how_to_use":"Learn role assignment, not just swatches","zh":"把精选色板直接套在页面上展示并标注角色，学的是颜色分工，不只是抄色值。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/happy-hues.webp","source":"screenshot","captured_at":"2026-09-27T09:42:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"huemint","name":"Huemint","name_zh":null,"url":"https://huemint.com","host":"huemint.com","domain":"color","section":"palettes","also":[],"kind":"tool","tags":["ml","brand","mockup"],"best_for":"Machine-learned palettes previewed on brand and website mock-ups","how_to_use":"Generate on the mock-up closest to the deliverable","zh":"机器学习生成配色，直接在品牌和网页样机上预览；在最接近交付物的样机上生成。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/huemint.webp","source":"screenshot","captured_at":"2026-09-27T10:28:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"adobe-color","name":"Adobe Color","name_zh":null,"url":"https://color.adobe.com","host":"color.adobe.com","domain":"color","section":"palettes","also":[],"kind":"tool","tags":["harmony","extract","a11y"],"best_for":"Harmony rules, extraction from images, contrast and colour-blind checks","how_to_use":"Extract a palette from a reference photograph, then run the colour-blind simulator and contrast checker pages on the result","zh":"配色和谐规则、从图片取色、对比度与色盲检查一体；拿参考照片提取色板。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Colour-blindness simulator and safe-palette tool","url":"https://color.adobe.com/create/color-accessibility"},{"label":"Contrast checker (AA/AAA)","url":"https://color.adobe.com/create/color-contrast-analyzer"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/adobe-color.webp","source":"screenshot","captured_at":"2026-09-27T09:42:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"color-hunt","name":"Color Hunt","name_zh":null,"url":"https://colorhunt.co","host":"colorhunt.co","domain":"color","section":"palettes","also":[],"kind":"gallery","tags":["palettes","trending"],"best_for":"Community palettes sorted by popularity and tag","how_to_use":"Treat as a trend indicator","zh":"社区配色方案库，按人气和标签排序；当成流行趋势风向标参考，别当最终方案。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/color-hunt.webp","source":"screenshot","captured_at":"2026-09-27T09:42:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sanzo-wada","name":"A Dictionary of Color Combinations (Sanzo Wada)","name_zh":null,"url":"https://sanzo-wada.dmbk.io","host":"sanzo-wada.dmbk.io","domain":"color","section":"palettes","also":[],"kind":"archive","tags":["historical","combinations"],"best_for":"Interactive version of Wada's 348 colour combinations from 1930s Japan","how_to_use":"Browse the numbered combinations and copy the swatches as a starting point for unusual pairings; assign roles and check contrast before use","zh":"和田三造 1930 年代 348 组配色组合的交互版；找不落俗套的成熟配色。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/sanzo-wada.webp","source":"screenshot","captured_at":"2026-09-27T09:42:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nippon-colors","name":"Nippon Colors","name_zh":null,"url":"https://nipponcolors.com","host":"nipponcolors.com","domain":"color","section":"palettes","also":[],"kind":"archive","tags":["traditional","japan"],"best_for":"Traditional colours of Japan with names and values","how_to_use":"Named traditional hues for East Asian contexts","zh":"日本传统色数据库，色名与色值俱全；做东方语境配色时，从这里取有出处的颜色。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"ja","region":"jp","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nippon-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"zhongguose","name":"中国色","name_zh":null,"url":"https://zhongguose.com","host":"zhongguose.com","domain":"color","section":"palettes","also":[],"kind":"archive","tags":["traditional","china"],"best_for":"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","how_to_use":"Pick colours by name for Chinese cultural contexts and record the name with the value; agents read /colors.json or connect to the MCP endpoint at /mcp","zh":"中国传统色网站：500 多种传统色的名称、拼音、CMYK、RGB 与十六进制值，注明依据中科院《色谱》标准；另提供 colors.json、llms.txt 与 MCP 接口。","zh_how":"按色名取色，并把色名和色值一起记进 token；智能体读 https://zhongguose.com/colors.json，或接入 https://zhongguose.com/mcp（流式 HTTP MCP）。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"llms.txt (agent guide)","url":"https://zhongguose.com/llms.txt"},{"label":"MCP endpoint (streamable HTTP)","url":"https://zhongguose.com/mcp"}],"api":{"url":"https://zhongguose.com/colors.json","sample":"https://zhongguose.com/colors.json"},"caveats":["In colors.json the hex and RGB values disagree for some colours (for example 杏仁黄): recompute hex from the value you trust"],"agent_access":"static","thumb":{"src":"assets/thumbs/zhongguose.webp","source":"screenshot","captured_at":"2026-09-27T09:42:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"poline","name":"Poline","name_zh":null,"url":"https://meodai.github.io/poline/","host":"meodai.github.io","domain":"color","section":"palettes","also":[],"kind":"tool","tags":["generative","polar"],"best_for":"Palette generator drawing lines between anchors in polar colour space","how_to_use":"For generative and illustrative palettes","zh":"在极坐标色彩空间里锚点连线生成配色的工具；做生成式、插画感配色用；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/poline.webp","source":"screenshot","captured_at":"2026-09-27T09:42:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"brandcolors","name":"BrandColors","name_zh":null,"url":"https://brandcolors.net","host":"brandcolors.net","domain":"color","section":"palettes","also":[],"kind":"archive","tags":["brands"],"best_for":"Official brand colour codes","how_to_use":"Look up how brands in a category use colour and download a collection as ASE, CSS or SCSS; confirm each value against the brand's own guidelines","zh":"收录各品牌官方色值的档案站；用来查某个行业的用色惯例。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Unofficial and not dated per brand: values may be out of date"],"agent_access":"static","thumb":{"src":"assets/thumbs/brandcolors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"oklch-picker","name":"OKLCH Color Picker","name_zh":null,"url":"https://oklch.com","host":"oklch.com","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["oklch","p3","converter"],"best_for":"Picker and converter for OKLCH with gamut visualisation (sRGB, P3, Rec2020)","how_to_use":"See where a colour leaves the sRGB gamut before building a scale","zh":"OKLCH 取色与转换工具，可视化 sRGB、P3、Rec2020 色域边界；建色阶前先看颜色是否超色域。MIT。","zh_how":"先看颜色是否超出 sRGB（或 P3）色域，再据此建色阶；复制 oklch() 值写进 token。","access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/oklch-picker.webp","source":"screenshot","captured_at":"2026-09-27T09:42:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"radix-colors","name":"Radix Colors","name_zh":null,"url":"https://www.radix-ui.com/colors","host":"radix-ui.com","domain":"color","section":"system-tools","also":[],"kind":"system","tags":["12-step","semantic","dark-mode"],"best_for":"Twelve-step scales where each step has a defined UI purpose, with matched dark and alpha scales","how_to_use":"Read Understanding the scale for the step-to-role mapping (1-2 backgrounds, 3-5 component states, 6-8 borders, 9-10 solids, 11-12 text); agents can pull any scale as CSS variables from the npm package","zh":"十二级色阶，每级有明确 UI 用途，配暗色与透明阶；级别到角色的映射可迁移到任何配色；MIT。","zh_how":"先读 Understanding the scale：1–2 背景、3–5 组件状态、6–8 边框、9–10 实色、11–12 文字；智能体可直接从 npm 包取某个色阶的 CSS 变量。","access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Understanding the scale (step to role)","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"api":{"url":"https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/{scale}.css","sample":"https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/radix-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:46:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"leonardo","name":"Leonardo","name_zh":null,"url":"https://leonardocolor.io","host":"leonardocolor.io","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["contrast-based","adobe","themes"],"best_for":"Generates colour scales by target contrast ratios, with adaptive themes","how_to_use":"Specify contrast targets, get colours; the inverse of picking then checking","zh":"按目标对比度反推色阶的工具，支持自适应主题；先定对比度再得颜色，与先选再验相反，Apache-2.0。","zh_how":"先定每级要达到的对比度（例如正文 4.5:1），让工具反推颜色；代码里用 npm 包 @adobe/leonardo-contrast-colors 生成主题。","access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Source and npm package @adobe/leonardo-contrast-colors","url":"https://github.com/adobe/leonardo"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/leonardo.webp","source":"screenshot","captured_at":"2026-09-27T09:42:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"harmonizer","name":"Harmonizer","name_zh":null,"url":"https://harmonizer.evilmartians.com","host":"harmonizer.evilmartians.com","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["oklch","apca","palette"],"best_for":"Generates consistent, accessible palettes with OKLCH and APCA contrast","how_to_use":"Build scales with uniform perceived contrast across hues","zh":"基于 OKLCH 与 APCA 对比度的配色生成器，跨色相保持感知一致；搭整套色阶时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JS app: agents need a browser","Uses APCA, which is not a legal standard; confirm WCAG 2 ratios"],"agent_access":"js","thumb":{"src":"assets/thumbs/harmonizer.webp","source":"screenshot","captured_at":"2026-09-27T09:42:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tailwind-colors","name":"Tailwind CSS colors","name_zh":null,"url":"https://tailwindcss.com/docs/colors","host":"tailwindcss.com","domain":"color","section":"system-tools","also":[],"kind":"system","tags":["palette","oklch"],"best_for":"Widely used 11-step palette defined in OKLCH","how_to_use":"Read the OKLCH lightness and chroma curve across 50-950 as a reference; agents can read every value from theme.css in the npm package","zh":"广泛使用的 11 级色阶，用 OKLCH 定义；参考其明度与彩度曲线，安全但因此常见；MIT。","zh_how":"参考 50–950 各级的 OKLCH 明度与彩度曲线；智能体可从 npm 包的 theme.css 读出全部数值。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://cdn.jsdelivr.net/npm/tailwindcss@latest/theme.css","sample":"https://cdn.jsdelivr.net/npm/tailwindcss@latest/theme.css"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tailwind-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"material-theme-builder","name":"Material Theme Builder","name_zh":null,"url":"https://material-foundation.github.io/material-theme-builder/","host":"material-foundation.github.io","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["material","dynamic-colour","hct"],"best_for":"Generates Material colour roles from a seed using HCT tonal palettes","how_to_use":"Export for Compose, Flutter, web","zh":"用 HCT 色调板从种子色生成一整套 Material 色彩角色，可导出 Compose、Flutter 与网页代码；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"M3 colour roles (what each generated role is for)","url":"https://m3.material.io/styles/color/roles"}],"api":null,"caveats":["JS app: agents should use material-color-utilities (code domain) to generate the same schemes"],"agent_access":"js","thumb":{"src":"assets/thumbs/material-theme-builder.webp","source":"screenshot","captured_at":"2026-09-27T09:42:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tints-dev","name":"tints.dev","name_zh":null,"url":"https://www.tints.dev","host":"tints.dev","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["tailwind","scale"],"best_for":"Generates an 11-step Tailwind-style scale from one hex with tweakable curves","how_to_use":"Generate an 11-step scale from one hex and tune the curves; agents call /api/<name>/<hex> for the scale as JSON (OKLCH values)","zh":"输入一个 hex 生成 Tailwind 式 11 级色阶，曲线可调；快速起品牌色阶，再用对比度校验。","zh_how":"输入一个 hex 生成 11 级色阶并调曲线；智能体调用 /api/<名称>/<hex> 取 JSON（OKLCH 值）。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://www.tints.dev/api/{name}/{hex}","sample":"https://www.tints.dev/api/brand/3B82F6"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tints-dev.webp","source":"screenshot","captured_at":"2026-09-27T09:42:24Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uicolors","name":"UI Colors","name_zh":null,"url":"https://uicolors.app","host":"uicolors.app","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["tailwind","scale","preview"],"best_for":"Tailwind scale generator with UI previews and contrast grid","how_to_use":"Enter a brand hex, add neutral and status scales (success, info, warning, error), preview them on real components and export the Tailwind config","zh":"Tailwind 色阶生成器，边调色边在真实 UI 预览和对比度网格里检查；tints.dev 之外的替代。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/uicolors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:27Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"huetone","name":"Huetone","name_zh":null,"url":"https://huetone.ardov.me","host":"huetone.ardov.me","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["lch","apca","wcag"],"best_for":"Build accessible palettes in LCH with WCAG and APCA read-outs per step","how_to_use":"Tune a whole system while watching contrast","zh":"在 LCH 空间搭建色板，每级同步显示 WCAG 与 APCA 对比度数值；边调整套色彩系统边盯可读性，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/huetone.webp","source":"screenshot","captured_at":"2026-09-27T09:42:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"accessible-palette","name":"Accessible Palette","name_zh":null,"url":"https://accessiblepalette.com","host":"accessiblepalette.com","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["lab","consistent-contrast"],"best_for":"Creates palettes with consistent lightness and contrast across hues","how_to_use":"Ensures step 600 of every hue passes the same contrast","zh":"生成各色相亮度与对比度一致的色板，保证每个色相的同一阶（如 600）都过同样的对比度。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/accessible-palette.webp","source":"screenshot","captured_at":"2026-09-27T09:42:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"atmos","name":"Atmos","name_zh":null,"url":"https://atmos.style","host":"atmos.style","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["lch","palette"],"best_for":"LCH palette builder with shade curves and contrast checking","how_to_use":"A more visual alternative for curve editing","zh":"LCH 调色板构建器，带色阶曲线和对比度检查；想要更可视化的曲线编辑用它。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/atmos.webp","source":"screenshot","captured_at":"2026-09-27T09:42:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"colorbox","name":"ColorBox","name_zh":null,"url":"https://colorbox.io","host":"colorbox.io","domain":"color","section":"system-tools","also":[],"kind":"generator","tags":["scales","curves","lyft","hsb"],"best_for":"Lyft's scale generator: shape hue, saturation and brightness per step with easing curves, then export the scale","how_to_use":"Use when a scale needs hand-tuned curves rather than a formula; check the result's contrast steps afterwards","zh":"Lyft 出品的色阶生成器：用缓动曲线逐级调整色相、饱和度与明度，再导出；色阶需要手工调曲线而非套公式时用。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0 (algorithm)","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/colorbox.webp","source":"screenshot","captured_at":"2026-09-27T09:42:27Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"reasonable-colors","name":"Reasonable Colors","name_zh":null,"url":"https://www.reasonable.work/colors/","host":"reasonable.work","domain":"color","section":"system-tools","also":[],"kind":"system","tags":["accessible","palette","contrast-by-shade","open-source"],"best_for":"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","how_to_use":"Adopt its rule (shade gap = contrast level) when naming colour tokens, so pairings can be checked without a tool","zh":"开源调色板，每色 6 阶，色阶号差值即保证对比度：差 2 至少 3:1，差 3 至少 4.5:1；写颜色 token 时借用「级差即对比度」的规则。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/reasonable-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:30Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"ant-design-colors","name":"Ant Design colour system","name_zh":"Ant Design 色彩","url":"https://ant.design/docs/spec/colors-cn","host":"ant.design","domain":"color","section":"system-tools","also":["app-ui:design-systems"],"kind":"guideline","tags":["china","palette-generation","10-step","enterprise"],"best_for":"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","how_to_use":"Pick a primary in the page's generator to get color-1 to color-10; in code use @ant-design/colors; agents can read the Markdown twin","zh":"Ant Design 色彩体系：由主色按公开算法生成 10 阶基础色板、13 阶中性色与数据可视化色板；国内中后台产品最常见的色阶来源。","zh_how":"在页面的色板生成工具里选主色得到 color-1 至 color-10；代码里用 @ant-design/colors；智能体读 .md 版。","access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"Markdown version (for agents)","url":"https://ant.design/docs/spec/colors-cn.md"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ant-design-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:47:38Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"inclusivecolors","name":"InclusiveColors","name_zh":null,"url":"https://www.inclusivecolors.com","host":"inclusivecolors.com","domain":"color","section":"system-tools","also":[],"kind":"tool","tags":["wcag","apca","tailwind","figma"],"best_for":"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","how_to_use":"Plan which foreground steps must pass on which backgrounds (body text, headings, borders) while editing, then export tokens","zh":"一次搭好整套品牌色板，手调色相、饱和度、明度曲线，同时看哪些前景背景组合通过 WCAG 或 APCA；可导出 Tailwind、CSS、Figma、Adobe。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Labelled beta by its author"],"agent_access":"static","thumb":{"src":"assets/thumbs/inclusivecolors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:34Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"arco-palette","name":"Arco Design Palette","name_zh":"Arco 色板工具","url":"https://arco.design/palette/list","host":"arco.design","domain":"color","section":"system-tools","also":["app-ui:design-systems"],"kind":"tool","tags":["china","palette-generation","10-step","dark-mode"],"best_for":"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","how_to_use":"Generate the brand scale in the tool, or in code with generate('<hex>', { list: true, dark: true }) from @arco-design/color; check the contrast of each step before assigning roles","zh":"字节跳动 Arco Design 的色板工具：由一个颜色生成浅色与深色两套 10 阶色板，内置 14 组预设色；同一算法以 @arco-design/color 开源（MIT）。","zh_how":"在工具里生成品牌色阶，或在代码里用 @arco-design/color 的 generate('<hex>', { list: true, dark: true })；分配角色前先查各阶对比度。","access":"free","login":false,"license":"MIT (@arco-design/color)","tier":"B","status":"slow","lang":"multi","region":"cn","entry_points":[{"label":"Colour algorithm (GitHub, MIT)","url":"https://github.com/arco-design/color"}],"api":null,"caveats":["The palette page is a JS app: agents should use the npm package","The package has not had a release since October 2021"],"agent_access":"js","thumb":{"src":"assets/thumbs/arco-palette.webp","source":"screenshot","captured_at":"2026-09-27T09:46:28Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"webaim-contrast","name":"WebAIM Contrast Checker","name_zh":null,"url":"https://webaim.org/resources/contrastchecker/","host":"webaim.org","domain":"color","section":"contrast","also":["a11y:testing-tools"],"kind":"tool","tags":["wcag"],"best_for":"The standard quick WCAG contrast check, with an API","how_to_use":"API: https://webaim.org/resources/contrastchecker/?fcolor=<hex>&bcolor=<hex>&api","zh":"WCAG 对比度速查的事实标准工具，带 API；定文字与背景色时随手核对。","zh_how":"接口：https://webaim.org/resources/contrastchecker/?fcolor=<前景hex>&bcolor=<背景hex>&api，返回比值与 AA/AAA 结果；hex 不带 #。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":{"url":"https://webaim.org/resources/contrastchecker/?fcolor={hex}&bcolor={hex}&api","sample":"https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF&api"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webaim-contrast.webp","source":"screenshot","captured_at":"2026-09-27T09:46:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"who-can-use","name":"Who Can Use","name_zh":null,"url":"https://www.whocanuse.com","host":"whocanuse.com","domain":"color","section":"contrast","also":["a11y:testing-tools"],"kind":"tool","tags":["vision-simulation","wcag"],"best_for":"Shows how a colour pair performs across vision types","how_to_use":"Use to make contrast findings concrete for stakeholders","zh":"展示一对颜色在不同视觉类型下的表现；向需求方解释对比度问题时，用它把后果摆出来。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/who-can-use.webp","source":"screenshot","captured_at":"2026-09-27T09:42:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"apca-contrast","name":"APCA Contrast Calculator","name_zh":null,"url":"https://apcacontrast.com","host":"apcacontrast.com","domain":"color","section":"contrast","also":["a11y:testing-tools"],"kind":"tool","tags":["apca","wcag3-draft"],"best_for":"Reference calculator for APCA lightness contrast with font-size lookup","how_to_use":"Use for exploratory perceptual contrast with the font-size lookup; report WCAG 2 ratios as the requirement","zh":"APCA 明度对比度的参考计算器，带字号查表；APCA 只是草案，交付时仍要并列 WCAG 2 比值。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Why APCA (documentation)","url":"https://git.apcacontrast.com/documentation/WhyAPCA"}],"api":null,"caveats":["APCA is an independent proposal, not part of the WCAG 3 drafts; WCAG 3's contrast method is undecided","WCAG 2 ratios remain the legal baseline"],"agent_access":"static","thumb":{"src":"assets/thumbs/apca-contrast.webp","source":"screenshot","captured_at":"2026-09-27T09:42:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"contrast-grid","name":"Contrast Grid","name_zh":null,"url":"https://contrast-grid.directededges.com","host":"contrast-grid.directededges.com","domain":"color","section":"contrast","also":["a11y:testing-tools"],"kind":"tool","tags":["matrix"],"best_for":"Tests every foreground against every background in a palette","how_to_use":"Paste the palette (one colour per line, optionally with token names), screenshot the grid into the design-system docs as the pairing rule","zh":"EightShapes 出品、现由 Directed Edges 维护的对比度矩阵：把色板里所有前景背景两两测对比度，截图贴进设计系统文档当搭配规则。","zh_how":"每行粘贴一个颜色（可带 token 名），把生成的对比度矩阵截图放进设计系统文档，作为搭配规则。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/contrast-grid.webp","source":"screenshot","captured_at":"2026-09-27T09:42:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"color-oracle","name":"Color Oracle","name_zh":null,"url":"https://colororacle.org","host":"colororacle.org","domain":"color","section":"contrast","also":["a11y:testing-tools"],"kind":"tool","tags":["cvd","simulation","desktop","full-screen"],"best_for":"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","how_to_use":"Toggle it over the design tool or browser to check that states, charts and status colours survive deuteranopia, protanopia and tritanopia","zh":"免费的色盲模拟器（Windows、Mac、Linux），实时滤镜覆盖整个屏幕，任何软件与设计稿都能查；检查状态色、图表在各类色觉下是否仍可区分。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/color-oracle.webp","source":"screenshot","captured_at":"2026-09-27T09:42:35Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"devtools-vision-deficiencies","name":"Chrome DevTools: emulate vision deficiencies","name_zh":null,"url":"https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_vision_deficiencies","host":"developer.chrome.com","domain":"color","section":"contrast","also":["a11y:testing-tools"],"kind":"tool","tags":["cvd","devtools","cdp","blurred-vision"],"best_for":"Built-in emulation of blurred vision, reduced contrast, protanopia, deuteranopia, tritanopia and achromatopsia on any live page","how_to_use":"Rendering tab > Emulate vision deficiencies; agents get the same through CDP Emulation.setEmulatedVisionDeficiency and can screenshot each mode","zh":"Chrome 自带的视觉缺陷模拟：模糊、低对比、红色盲、绿色盲、蓝色盲、全色盲，可在任何线上页面切换；智能体可经 CDP 切换并逐一截图。","zh_how":"Rendering 面板 > Emulate vision deficiencies；自动化时调用 CDP 的 Emulation.setEmulatedVisionDeficiency，逐个模式截图对比。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"CDP Emulation.setEmulatedVisionDeficiency","url":"https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setEmulatedVisionDeficiency"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/devtools-vision-deficiencies.webp","source":"screenshot","captured_at":"2026-09-27T09:47:28Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"oklch-article","name":"OKLCH in CSS: why we moved from RGB and HSL","name_zh":null,"url":"https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl","host":"evilmartians.com","domain":"color","section":"guides","also":[],"kind":"article","tags":["oklch","css"],"best_for":"The case for OKLCH: predictable lightness, easy palette generation, wide gamut","how_to_use":"Read before defining colour tokens","zh":"讲清为什么该从 RGB、HSL 迁到 OKLCH：明度可预测、色板好生成、色域广；定色彩 token 前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Markdown version (for agents)","url":"https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl.md"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/oklch-article.webp","source":"screenshot","captured_at":"2026-09-27T09:47:04Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"stripe-accessible-colors","name":"Designing accessible color systems","name_zh":null,"url":"https://stripe.com/blog/accessible-color-systems","host":"stripe.com","domain":"color","section":"guides","also":[],"kind":"article","tags":["perceptual","scales"],"best_for":"How Stripe built a palette with predictable contrast using a perceptual colour space","how_to_use":"The reasoning behind step-number contrast guarantees","zh":"Stripe 讲如何用感知色彩空间做出对比度可预测的色板；理解色阶编号保证对比度的原理。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/stripe-accessible-colors.webp","source":"screenshot","captured_at":"2026-09-27T09:42:40Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"color-and-contrast","name":"Color & Contrast","name_zh":null,"url":"https://colorandcontrast.com","host":"colorandcontrast.com","domain":"color","section":"guides","also":[],"kind":"guideline","tags":["colour-science","ui"],"best_for":"Interactive guide to colour science for UI designers","how_to_use":"Look up simultaneous contrast and colour-appearance effects","zh":"面向 UI 设计师的交互式色彩科学指南；遇到同时对比等色彩外观效应时来查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/color-and-contrast.webp","source":"screenshot","captured_at":"2026-09-27T09:42:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"learnui-color","name":"Why Color Theory Sucks (and what framework to use instead)","name_zh":null,"url":"https://www.learnui.design/blog/color-in-ui-design-a-practical-framework.html","host":"learnui.design","domain":"color","section":"guides","also":[],"kind":"article","tags":["ui-colour","hsb"],"best_for":"Practical method for deriving UI colour variations","how_to_use":"Useful mental model for darker and lighter variants","zh":"讲界面配色变体推导的实操文章，基于 HSB 给出深浅变化的心智模型；调状态色时参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/learnui-color.webp","source":"screenshot","captured_at":"2026-09-27T09:46:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"refactoring-ui-color","name":"Building your color palette","name_zh":null,"url":"https://www.refactoringui.com/previews/building-your-color-palette","host":"refactoringui.com","domain":"color","section":"guides","also":[],"kind":"article","tags":["palette","greys"],"best_for":"Why a UI needs greys, a primary and accents in eight to ten shades each","how_to_use":"The baseline for a product palette","zh":"Refactoring UI 的配色方法论：为什么 UI 需要灰、主色与强调色各八到十阶；产品色板的基线。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/refactoring-ui-color.webp","source":"screenshot","captured_at":"2026-09-27T09:42:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"material-dark-theme","name":"Material 2: Dark theme","name_zh":null,"url":"https://m2.material.io/design/color/dark-theme.html","host":"m2.material.io","domain":"color","section":"guides","also":[],"kind":"guideline","tags":["dark-mode","elevation"],"best_for":"The clearest reasoning on dark surfaces, elevation overlays and desaturated accents","how_to_use":"Read before deriving a dark mode","zh":"对暗色表面、海拔叠层、低饱和强调色讲得最清楚的指南；推导深色模式前先读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Material 2 guidance (archived): Material 3 replaces the elevation overlays with surface-container colour roles"],"agent_access":"js","thumb":{"src":"assets/thumbs/material-dark-theme.webp","source":"screenshot","captured_at":"2026-09-27T09:47:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"hd-css-color-guide","name":"High definition CSS color guide","name_zh":null,"url":"https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide","host":"developer.chrome.com","domain":"color","section":"guides","also":["code:tokens-theming"],"kind":"article","tags":["oklch","display-p3","color-mix","gamut"],"best_for":"The practical guide to CSS Color 4 and 5: new colour spaces (oklch, oklab, display-p3), gamut, interpolation in gradients and color-mix()","how_to_use":"Read before writing colour tokens in oklch or adding P3 colours; use its gamut and fallback advice for older displays","zh":"Chrome 团队的 CSS Color 4/5 实用指南：oklch、oklab、display-p3 等新色彩空间、色域、渐变插值与 color-mix()；用 oklch 写颜色 token 前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/hd-css-color-guide.webp","source":"screenshot","captured_at":"2026-09-27T09:47:48Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"apple-hig-color","name":"Apple HIG: Color","name_zh":null,"url":"https://developer.apple.com/design/human-interface-guidelines/color","host":"developer.apple.com","domain":"color","section":"guides","also":["app-ui:platform-guidelines"],"kind":"guideline","tags":["apple","system-colors","dark-mode","liquid-glass","increased-contrast"],"best_for":"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","how_to_use":"Take system colour values from the Specifications tables instead of eyeballing them; for dark mode read the Dark Mode page (contrast at least 4.5:1, aim for 7:1 with custom colours); agents fetch the JSON","zh":"苹果的色彩规范：系统色在浅色、深色、增强对比下的取值，Liquid Glass 色彩（2025 年 12 月更新）、色彩管理与各平台差异；有官方中文版。","zh_how":"系统色数值直接抄 Specifications 表，不要目测；深色模式看 Dark Mode 页（对比度至少 4.5:1，自定义颜色争取 7:1）；智能体取 color.json。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"multi","region":"global","entry_points":[{"label":"Dark Mode","url":"https://developer.apple.com/design/human-interface-guidelines/dark-mode"},{"label":"官方中文版","url":"https://developer.apple.com/cn/design/human-interface-guidelines/color"}],"api":{"url":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/{page}.json","sample":"https://developer.apple.com/tutorials/data/design/human-interface-guidelines/color.json"},"caveats":["Perishable: re-read after each OS release","JS-rendered page: agents should fetch the JSON version"],"agent_access":"js","thumb":{"src":"assets/thumbs/apple-hig-color.webp","source":"screenshot","captured_at":"2026-09-27T09:51:40Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"shadcn-ui","name":"shadcn/ui","name_zh":null,"url":"https://ui.shadcn.com","host":"ui.shadcn.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react","tailwind","own-the-code"],"best_for":"Copy-in React components on accessible primitives; the code lives in your repo","how_to_use":"Retheme through CSS variables before shipping (radius, colour, type, density); new projects default to Base UI since July 2026, Radix is still supported; agents read /llms.txt","zh":"复制进仓库的 React 组件库，底层是可访问性原语；别直接用默认主题上线，用 CSS 变量换肤，MIT。","zh_how":"上线前必须通过 CSS 变量改主题（圆角、颜色、字体、密度）；2026 年 7 月起新项目默认用 Base UI，Radix 仍受支持；智能体读 /llms.txt。","access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://ui.shadcn.com/llms.txt"},{"label":"Theming (CSS variables)","url":"https://ui.shadcn.com/docs/theming"},{"label":"July 2026: Base UI as the default","url":"https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default"}],"api":null,"caveats":["The default theme is the signature look of AI-generated apps; change it"],"agent_access":"static","thumb":{"src":"assets/thumbs/shadcn-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:46:39Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"base-ui","name":"Base UI","name_zh":null,"url":"https://base-ui.com","host":"base-ui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react","headless","a11y"],"best_for":"Unstyled, accessible React components from the Radix, Floating UI and Material UI authors; shadcn/ui's default primitives since July 2026","how_to_use":"Default headless layer for new React design systems; agents read base-ui.com/llms.txt for the component index","zh":"Radix、Floating UI 与 Material UI 作者们做的无样式无障碍 React 组件；2026 年 7 月起是 shadcn/ui 的默认底层，新建 React 设计系统的首选行为层，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://base-ui.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/base-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ant-design-lib","name":"Ant Design (React)","name_zh":null,"url":"https://ant.design/components/overview","host":"ant.design","domain":"code","section":"components","also":[],"kind":"library","tags":["react","enterprise","china"],"best_for":"The enterprise React library behind most Chinese admin systems; themable through design tokens","how_to_use":"Theme with ConfigProvider tokens and algorithms (dark, compact), never CSS overrides; agents fetch any component doc as Markdown by appending .md","zh":"国内后台系统事实标准的 React 组件库；换主题走 ConfigProvider 的 token 与算法，别写 CSS 覆盖。MIT。","zh_how":"用 ConfigProvider 的 token 与算法（暗色、紧凑）换主题，不写 CSS 覆盖；智能体在组件文档地址后加 .md 即可取 Markdown（如 /components/button.md）。","access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"Customize theme (tokens and algorithms)","url":"https://ant.design/docs/react/customize-theme"},{"label":"Component doc as Markdown (example)","url":"https://ant.design/components/button.md"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ant-design-lib.webp","source":"screenshot","captured_at":"2026-09-27T09:47:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"radix-primitives","name":"Radix Primitives","name_zh":null,"url":"https://www.radix-ui.com/primitives","host":"radix-ui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react","headless","a11y"],"best_for":"Unstyled accessible primitives for React","how_to_use":"Keep as the behaviour layer in existing Radix codebases; for new headless work prefer Base UI, which shadcn/ui made its default in July 2026","zh":"React 无样式无障碍组件原语，只管行为不管外观；做自定义设计时垫在下面的行为层，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["shadcn/ui switched new projects to Base UI in July 2026; Radix remains maintained and supported"],"agent_access":"static","thumb":{"src":"assets/thumbs/radix-primitives.webp","source":"screenshot","captured_at":"2026-09-27T09:47:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"react-aria","name":"React Aria","name_zh":null,"url":"https://react-aria.adobe.com","host":"react-aria.adobe.com","domain":"code","section":"components","also":["a11y:guidance-patterns"],"kind":"library","tags":["react","headless","a11y","i18n"],"best_for":"Adobe's headless components with the deepest accessibility and internationalisation work","how_to_use":"Choose when a11y and i18n requirements are strict","zh":"Adobe 的 headless React 组件库，无障碍与国际化做得最深；这两项是硬要求时选它；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://react-aria.adobe.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/react-aria.webp","source":"screenshot","captured_at":"2026-09-27T09:42:39Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ark-ui","name":"Ark UI","name_zh":null,"url":"https://ark-ui.com","host":"ark-ui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react","vue","solid","svelte","headless"],"best_for":"Headless components for several frameworks built on state machines","how_to_use":"One behaviour layer across React, Vue and Solid","zh":"基于状态机的无样式组件库，一套行为层覆盖 React、Vue、Solid 等多框架；换框架不换交互。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://ark-ui.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ark-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"reka-ui","name":"Reka UI","name_zh":null,"url":"https://reka-ui.com","host":"reka-ui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["vue","headless"],"best_for":"Unstyled, accessible primitives for Vue (formerly Radix Vue); the base under shadcn-vue","how_to_use":"Headless base for custom Vue design systems","zh":"相当于 Vue 版的 Radix：headless 无样式组件库，正适合给自己的 Vue 设计系统打地基；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://reka-ui.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/reka-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"shadcn-vue","name":"shadcn-vue","name_zh":null,"url":"https://www.shadcn-vue.com","host":"shadcn-vue.com","domain":"code","section":"components","also":[],"kind":"library","tags":["vue","tailwind"],"best_for":"Community Vue port of shadcn/ui on Reka UI: copy-in components for Vue and Nuxt","how_to_use":"Default copy-in kit for Vue and Nuxt; retheme through CSS variables exactly as with shadcn/ui","zh":"shadcn/ui 的 Vue 移植版，同样把组件代码复制进项目由自己持有；技术栈是 Vue 或 Nuxt 时的选择，MIT 协议。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://www.shadcn-vue.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/shadcn-vue.webp","source":"screenshot","captured_at":"2026-09-27T09:42:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nuxt-ui","name":"Nuxt UI","name_zh":null,"url":"https://ui.nuxt.com","host":"ui.nuxt.com","domain":"code","section":"components","also":[],"kind":"library","tags":["vue","nuxt","tailwind"],"best_for":"Full component library for Vue and Nuxt with a token-based theme","how_to_use":"Use for Vue or Nuxt apps that want a complete kit (125+ components) themed through app config and CSS variables; agents read ui.nuxt.com/llms.txt","zh":"为 Vue 与 Nuxt 准备的全套组件库，主题用 token 体系定制；做 Nuxt 项目快速起步的选择，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://ui.nuxt.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nuxt-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"mantine","name":"Mantine","name_zh":null,"url":"https://mantine.dev","host":"mantine.dev","domain":"code","section":"components","also":[],"kind":"library","tags":["react","full-featured"],"best_for":"Large, well-documented React component and hooks library","how_to_use":"Pragmatic choice for internal tools and dashboards (100+ components and hooks); agents read mantine.dev/llms.txt","zh":"大而全、文档写得好的 React 组件与 hooks 库；给团队做内部工具时的务实选择；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://mantine.dev/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mantine.webp","source":"screenshot","captured_at":"2026-09-27T09:42:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"heroui","name":"HeroUI","name_zh":null,"url":"https://www.heroui.com","host":"heroui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react","tailwind"],"best_for":"HeroUI v3 (formerly NextUI): polished React and React Native components on Tailwind CSS v4 and React Aria","how_to_use":"Attractive defaults; customise the theme so the product does not look like the demo","zh":"HeroUI v3（原 NextUI）：基于 Tailwind CSS v4 与 React Aria 的 React 及 React Native 组件库，默认就好看；务必改主题，别和官方演示撞脸，Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://heroui.com/llms.txt"}],"api":null,"caveats":["Its default look is instantly recognisable"],"agent_access":"static","thumb":{"src":"assets/thumbs/heroui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ant-design-vue","name":"Ant Design Vue","name_zh":null,"url":"https://antdv.com","host":"antdv.com","domain":"code","section":"components","also":[],"kind":"library","tags":["vue","enterprise","china"],"best_for":"Vue 3 implementation of Ant Design's components and token theming, maintained by the vueComponent team","how_to_use":"For Vue admin systems; theme through ConfigProvider tokens as in the React version","zh":"Ant Design 的 Vue 实现，企业级组件一应俱全；搭 Vue 后台管理系统时的常用底座；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/ant-design-vue.webp","source":"screenshot","captured_at":"2026-09-27T09:42:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"element-plus","name":"Element Plus","name_zh":null,"url":"https://element-plus.org","host":"element-plus.org","domain":"code","section":"components","also":[],"kind":"library","tags":["vue","admin","china"],"best_for":"The most common Vue 3 admin component library in China","how_to_use":"Theme through CSS variables and SCSS variables","zh":"国内最常见的 Vue 3 中后台组件库，做管理系统时的默认选项；通过 CSS 变量与 SCSS 变量定制主题，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"llms.txt (agent index)","url":"https://element-plus.org/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/element-plus.webp","source":"screenshot","captured_at":"2026-09-27T09:42:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"naive-ui","name":"Naive UI","name_zh":null,"url":"https://www.naiveui.com","host":"naiveui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["vue","typescript","theme"],"best_for":"Vue 3 library with a strong TypeScript theme-override system","how_to_use":"Theme in TypeScript through n-config-provider theme overrides; the default look is cleaner than most admin kits","zh":"Vue 3 组件库，TypeScript 写就，主题覆盖系统做得好；默认观感比多数后台模板干净，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/naive-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"vant","name":"Vant","name_zh":null,"url":"https://vant.pro/vant/","host":"vant.pro","domain":"code","section":"components","also":[],"kind":"library","tags":["vue","mobile","mini-program","china"],"best_for":"Lightweight mobile Vue components with a WeChat mini-program edition","how_to_use":"Default for mobile H5 in the Chinese ecosystem","zh":"轻量移动端 Vue 组件库，有微信小程序版；中文生态做移动 H5 的默认选择；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/vant.webp","source":"screenshot","captured_at":"2026-09-27T09:42:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"forui","name":"Forui","name_zh":null,"url":"https://forui.dev","host":"forui.dev","domain":"code","section":"components","also":[],"kind":"library","tags":["flutter","minimal"],"best_for":"Minimalist, platform-agnostic Flutter widget library","how_to_use":"A way out of stock Material look in Flutter","zh":"极简、平台无关的 Flutter 组件库，样式克制；想让 Flutter 应用摆脱默认 Material 长相时的出路。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/forui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"shadcn-flutter","name":"shadcn_flutter","name_zh":null,"url":"https://sunarya-thito.github.io/shadcn_flutter/","host":"sunarya-thito.github.io","domain":"code","section":"components","also":[],"kind":"library","tags":["flutter","shadcn"],"best_for":"shadcn-style component set for Flutter","how_to_use":"Use when a Flutter app should look like a shadcn web app rather than stock Material","zh":"shadcn 风格的 Flutter 组件集，不是 Material 那副默认面孔；想给自己的 Flutter 应用换种气质时用；BSD-3-Clause。","zh_how":null,"access":"free","login":false,"license":"BSD-3-Clause","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/shadcn-flutter.webp","source":"screenshot","captured_at":"2026-09-27T09:42:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"react-native-reusables","name":"React Native Reusables","name_zh":null,"url":"https://reactnativereusables.com","host":"reactnativereusables.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react-native","shadcn"],"best_for":"shadcn/ui approach for React Native","how_to_use":"Use when a React Native app must share the shadcn look and tokens with its web app (styled with NativeWind)","zh":"把 shadcn/ui 的复制进仓库做法搬到 React Native 的组件集；想让 Web 端与原生应用保持同一风格时用，MIT 协议。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/react-native-reusables.webp","source":"screenshot","captured_at":"2026-09-27T09:42:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tailwind-plus","name":"Tailwind Plus","name_zh":null,"url":"https://tailwindcss.com/plus","host":"tailwindcss.com","domain":"code","section":"components","also":[],"kind":"library","tags":["tailwind","blocks","templates","catalyst"],"best_for":"The Tailwind team's paid library (formerly Tailwind UI) of UI blocks, site templates and the Catalyst application kit","how_to_use":"Reference for well-proportioned default layouts and spacing; restyle before shipping, and do not redistribute the code as a kit","zh":"Tailwind 官方付费库（原 Tailwind UI）：UI 区块、站点模板与 Catalyst 应用套件，一次买断终身使用；比例与间距得当的默认布局参考，禁止把代码当套件再分发。","zh_how":null,"access":"paid","login":true,"license":"Commercial; one-time purchase; no redistribution as a kit","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The pages redirect to a login, so agents cannot browse it"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/tailwind-plus.webp","source":"og","captured_at":"2026-09-27T10:27:10Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"coss-ui","name":"coss ui","name_zh":null,"url":"https://coss.com/ui","host":"coss.com","domain":"code","section":"components","also":[],"kind":"library","tags":["base-ui","copy-paste","tailwind","agents"],"best_for":"Large copy-paste React component library on Base UI and Tailwind from the Cal.com team (successor of Origin UI), with 500+ example 'particles'","how_to_use":"Mine the particles for Base UI patterns when moving a shadcn project to Base UI; agents read coss.com/ui/llms.txt (Markdown docs)","zh":"Cal.com 团队基于 Base UI 与 Tailwind 的大型复制粘贴 React 组件库（Origin UI 的后继），附 500 多个示例；shadcn 项目迁到 Base UI 时拿来参考。","zh_how":null,"access":"free","login":false,"license":"Unclear: repository and the @coss/ui package declare AGPL-3.0-or-later; the docs app declares MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://coss.com/ui/llms.txt"}],"api":null,"caveats":["Confirm the licence before copying components into closed-source code: the repo root and @coss/ui are AGPL-3.0-or-later"],"agent_access":"static","thumb":{"src":"assets/thumbs/coss-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:59Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"untitledui-react","name":"Untitled UI React","name_zh":null,"url":"https://www.untitledui.com/react","host":"untitledui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react-aria","tailwind","copy-paste","figma-kit"],"best_for":"Open-source React components on React Aria and Tailwind CSS v4 that match the Untitled UI Figma kit; PRO adds thousands of sections","how_to_use":"Good default when design and code must share one kit; the open-source set is MIT, PRO is a paid licence","zh":"与 Untitled UI Figma 套件一一对应的开源 React 组件（React Aria + Tailwind CSS v4），PRO 版另有大量区块；设计稿与代码想共用一套时的好默认，开源部分 MIT。","zh_how":null,"access":"freemium","login":false,"license":"MIT (open-source components); PRO is commercial","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Source (GitHub)","url":"https://github.com/untitleduico/react"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/untitledui-react.webp","source":"screenshot","captured_at":"2026-09-27T09:46:55Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mui","name":"MUI (Material UI and MUI X)","name_zh":null,"url":"https://mui.com","host":"mui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["react","material","data-grid","date-pickers"],"best_for":"The most-used React component suite: Material UI plus MUI X data grid, date pickers and charts; the team also maintains Base UI","how_to_use":"Choose for data-heavy React apps that need a mature grid and date pickers; theme it away from stock Material; agents read the Material UI llms.txt","zh":"使用最广的 React 组件套件：Material UI 加 MUI X 数据表格、日期选择与图表，团队也维护 Base UI；需要成熟表格与日期控件的数据型应用选它，记得去掉 Material 原味。","zh_how":null,"access":"freemium","login":false,"license":"MIT (Material UI, MUI X community); MUI X Pro and Premium are commercial","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Material UI llms.txt","url":"https://mui.com/material-ui/llms.txt"}],"api":null,"caveats":["Stock Material styling makes a product look like a Google template"],"agent_access":"static","thumb":{"src":"assets/thumbs/mui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:57Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"shadcn-svelte","name":"shadcn-svelte","name_zh":null,"url":"https://www.shadcn-svelte.com","host":"shadcn-svelte.com","domain":"code","section":"components","also":[],"kind":"library","tags":["svelte","copy-paste","bits-ui"],"best_for":"Community Svelte port of shadcn/ui built on Bits UI","how_to_use":"Default copy-in kit for Svelte and SvelteKit; retheme through CSS variables as with shadcn/ui","zh":"社区维护的 shadcn/ui Svelte 移植版（基于 Bits UI）；Svelte 与 SvelteKit 项目的默认复制粘贴组件库，同样用 CSS 变量换肤，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://www.shadcn-svelte.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/shadcn-svelte.webp","source":"screenshot","captured_at":"2026-09-27T09:42:57Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"nutui","name":"NutUI","name_zh":null,"url":"https://nutui.jd.com","host":"nutui.jd.com","domain":"code","section":"components","also":[],"kind":"library","tags":["china","jd","mobile","taro","mini-program"],"best_for":"JD's lightweight mobile component library in Vue and React editions, both supporting multi-host mini-programs through Taro","how_to_use":"Pick for e-commerce style mobile H5 pages or Taro mini-programs; retheme away from the JD red","zh":"京东风格的轻量移动端组件库，有 Vue 与 React 两个版本，均可通过 Taro 支持多端小程序；做电商类移动 H5 或 Taro 小程序时选，记得换掉京东红。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"NutUI React","url":"https://nutui.jd.com/react/"}],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/nutui.webp","source":"screenshot","captured_at":"2026-09-27T09:43:00Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"weui","name":"WeUI","name_zh":null,"url":"https://weui.io","host":"weui.io","domain":"code","section":"components","also":[],"kind":"library","tags":["china","wechat","official","mobile"],"best_for":"WeChat's official base style library that matches native WeChat visuals","how_to_use":"Use for H5 pages opened inside WeChat so they feel native; read it with the WeChat mini-program design guidelines","zh":"微信官方基础样式库，视觉与微信原生一致；在微信里打开的 H5 页面用它显得原生，配合微信小程序设计指南阅读，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"slow","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/weui.webp","source":"screenshot","captured_at":"2026-09-27T09:42:59Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"antd-mobile","name":"Ant Design Mobile","name_zh":null,"url":"https://mobile.ant.design","host":"mobile.ant.design","domain":"code","section":"components","also":[],"kind":"library","tags":["china","ant-group","mobile","react"],"best_for":"Ant Group's React component library for mobile web, the mobile sibling of Ant Design","how_to_use":"Pick for React H5 apps in the Alipay or Ant ecosystem; theme through its CSS variables","zh":"蚂蚁集团的移动端 React 组件库，Ant Design 的移动版；支付宝或蚂蚁生态的 React H5 应用首选，用 CSS 变量换主题，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/antd-mobile.webp","source":"screenshot","captured_at":"2026-09-27T09:43:01Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"wot-ui","name":"Wot UI","name_zh":null,"url":"https://wot-ui.cn","host":"wot-ui.cn","domain":"code","section":"components","also":[],"kind":"library","tags":["china","uni-app","mini-program"],"best_for":"Popular uni-app component library (80+ components, dark mode, i18n, custom themes) for multi-host mini-programs","how_to_use":"Pick when the stack is uni-app; test host-specific behaviour on each mini-program platform","zh":"流行的 uni-app 组件库（80+ 组件，暗色模式、国际化、自定义主题）；技术栈是 uni-app 时选，注意在各小程序宿主上分别验证。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wot-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:43:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"floating-ui","name":"Floating UI","name_zh":null,"url":"https://floating-ui.com","host":"floating-ui.com","domain":"code","section":"components","also":[],"kind":"library","tags":["positioning","tooltip","popover","headless"],"best_for":"The positioning engine for tooltips, popovers, menus and selects: collision-aware placement plus interaction hooks","how_to_use":"Use directly when building a custom floating element; most headless libraries already embed it","zh":"提示框、弹出层、菜单、下拉的定位引擎：避让碰撞的定位加交互 hooks；自己造浮层组件时直接用，多数无头组件库已内置它，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["CSS anchor positioning is not yet Baseline (webstatus.dev: limited, 2026-09); keep a JS positioner until it is"],"agent_access":"static","thumb":{"src":"assets/thumbs/floating-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:43:04Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"tanstack-table","name":"TanStack Table","name_zh":null,"url":"https://tanstack.com/table/latest","host":"tanstack.com","domain":"code","section":"components","also":["dataviz:dashboards-bigscreen"],"kind":"library","tags":["headless","tables","data-grid","react","vue"],"best_for":"Headless table and data-grid logic (sorting, filtering, grouping, pagination, virtualisation hooks) for React, Vue, Solid and Svelte","how_to_use":"Use when a dense table must match your own design system; you own all markup and styling","zh":"无头表格与数据网格逻辑库：排序、筛选、分组、分页，可配虚拟滚动，支持 React、Vue、Solid、Svelte；密集表格要贴合自家设计系统时用，标记与样式全由你定，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"TanStack llms.txt","url":"https://tanstack.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tanstack-table.webp","source":"screenshot","captured_at":"2026-09-27T09:43:07Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"dnd-kit","name":"dnd kit","name_zh":null,"url":"https://dndkit.com","host":"dndkit.com","domain":"code","section":"components","also":[],"kind":"library","tags":["drag-and-drop","sortable","accessible","headless"],"best_for":"Toolkit for accessible drag-and-drop and sortable lists with keyboard and pointer sensors, for React, Vue, Svelte, Solid and plain TypeScript","how_to_use":"Use for kanban boards, reorderable lists and builders; design the drag preview, drop indicator and keyboard instructions explicitly","zh":"可访问的拖拽与排序工具包，支持键盘与指针传感器，覆盖 React、Vue、Svelte、Solid 与原生 TypeScript；做看板、可排序列表、搭建器时用，拖拽预览、落点提示与键盘说明都要专门设计，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/dnd-kit.webp","source":"screenshot","captured_at":"2026-09-27T09:43:04Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"sonner","name":"Sonner","name_zh":null,"url":"https://sonner.emilkowal.ski","host":"sonner.emilkowal.ski","domain":"code","section":"components","also":[],"kind":"library","tags":["toast","react","craft"],"best_for":"Emil Kowalski's opinionated toast component for React: stacking, swipe to dismiss and promise states, the toast most shadcn apps ship","how_to_use":"Use as is in React, or study its stacking and timing when designing notifications in another stack","zh":"Emil Kowalski 的 React 通知（toast）组件，堆叠、滑动关闭与 promise 状态都很讲究，多数 shadcn 应用用的就是它；其他技术栈设计通知时也值得研究它的堆叠与节奏，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sonner.webp","source":"github","captured_at":"2026-09-27T10:27:19Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"web-awesome","name":"Web Awesome (formerly Shoelace)","name_zh":null,"url":"https://webawesome.com","host":"webawesome.com","domain":"code","section":"components","also":[],"kind":"library","tags":["web-components","framework-agnostic","themes","ssr"],"best_for":"Framework-agnostic web components from the Font Awesome team, successor to Shoelace, with themes, design tokens and SSR","how_to_use":"Use when a design must work across frameworks or in plain HTML; theme through its CSS custom properties; agents read webawesome.com/llms.txt","zh":"Font Awesome 团队的框架无关 Web Components 组件库（Shoelace 的后继），带主题、设计 token 与 SSR；设计要跨框架或用在纯 HTML 里时选它，免费部分 MIT，Pro 付费。","zh_how":null,"access":"freemium","login":false,"license":"MIT (free components); Web Awesome Pro is commercial","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://webawesome.com/llms.txt"},{"label":"Shoelace (previous generation)","url":"https://shoelace.style"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/web-awesome.webp","source":"screenshot","captured_at":"2026-09-27T09:43:10Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"magic-ui","name":"Magic UI","name_zh":null,"url":"https://magicui.design","host":"magicui.design","domain":"code","section":"animated-components","also":[],"kind":"library","tags":["react","marketing","animated"],"best_for":"Animated marketing components (marquees, beams, bento, text effects) for shadcn projects","how_to_use":"Use one or two components with intent (a marquee of logos, one text effect) and restyle them","zh":"面向 shadcn 项目的营销动效组件：跑马灯、光束、bento、文字特效；挑一两个点睛，整页都用就撞脸。MIT。","zh_how":null,"access":"freemium","login":false,"license":"MIT for the open set","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["A page assembled from these looks like every other AI-built landing page"],"agent_access":"static","thumb":{"src":"assets/thumbs/magic-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:43:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"react-bits","name":"React Bits","name_zh":null,"url":"https://reactbits.dev","host":"reactbits.dev","domain":"code","section":"animated-components","also":[],"kind":"library","tags":["react","animated","text","backgrounds"],"best_for":"Large set of animated text, backgrounds and interactive components","how_to_use":"Take one animated text or background for a single signature moment, then retime it to your motion tokens","zh":"大量动效文字、背景与交互组件的集合；适合取一件做页面的点睛时刻；授权见仓库。","zh_how":null,"access":"free","login":false,"license":"MIT + Commons Clause (use freely; do not resell the components)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/react-bits.webp","source":"screenshot","captured_at":"2026-09-27T09:43:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"motion-primitives","name":"Motion Primitives","name_zh":null,"url":"https://motion-primitives.com","host":"motion-primitives.com","domain":"code","section":"animated-components","also":[],"kind":"library","tags":["react","motion"],"best_for":"Tasteful, restrained animated primitives built on Motion","how_to_use":"Closer to product UI needs than the flashier kits","zh":"基于 Motion 的克制风动效组件集，比炫技类库更贴近产品界面的实际需要，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/motion-primitives.webp","source":"screenshot","captured_at":"2026-09-27T09:43:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"aceternity-ui","name":"Aceternity UI","name_zh":null,"url":"https://ui.aceternity.com","host":"ui.aceternity.com","domain":"code","section":"animated-components","also":[],"kind":"library","tags":["react","marketing","effects"],"best_for":"Eye-catching effect components (spotlights, beams, 3D cards) for React and Tailwind","how_to_use":"Use as a technique reference, restyle heavily","zh":"效果炫目的 React 组件库，一眼能看出是模板；当技法参考用，务必大幅改样式。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Instantly recognisable as a template; restyle heavily or use only as a technique reference"],"agent_access":"static","thumb":{"src":"assets/thumbs/aceternity-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:43:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"animate-ui","name":"Animate UI","name_zh":null,"url":"https://animate-ui.com","host":"animate-ui.com","domain":"code","section":"animated-components","also":[],"kind":"library","tags":["react","animated"],"best_for":"Animated versions of common components","how_to_use":"Reference for state-transition polish (tabs, accordions, toggles) before animating your own components","zh":"常见组件的动画版本合集；做状态过渡打磨时的参考；许可见仓库。","zh_how":null,"access":"free","login":false,"license":"MIT + Commons Clause","tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/animate-ui.webp","source":"screenshot","captured_at":"2026-09-27T10:27:18Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"inspira-ui","name":"Inspira UI","name_zh":null,"url":"https://inspira-ui.com","host":"inspira-ui.com","domain":"code","section":"animated-components","also":[],"kind":"library","tags":["vue","nuxt","animated"],"best_for":"Animated components for Vue and Nuxt, inspired by the React kits","how_to_use":"The Vue and Nuxt route to the React-kit effects; take one component for a signature moment and restyle it","zh":"Vue 与 Nuxt 的动画组件库，灵感来自 React 系套件；Vue 技术栈要那些效果时用它；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/inspira-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:43:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fancy-components","name":"Fancy Components","name_zh":null,"url":"https://www.fancycomponents.dev","host":"fancycomponents.dev","domain":"code","section":"animated-components","also":[],"kind":"library","tags":["react","microinteractions","text-effects","physics"],"best_for":"Open-source React components and microinteractions with an experimental bent: kinetic typography, physics and cursor effects","how_to_use":"Use one effect as a signature moment on an otherwise quiet page; check the performance cost on mobile","zh":"开源的 React 组件与微交互库，偏实验性：动态文字、物理效果、光标效果；在整体克制的页面上只取一个效果做点睛，并检查移动端性能，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/fancy-components.webp","source":"screenshot","captured_at":"2026-09-27T09:43:15Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"motion","name":"Motion","name_zh":null,"url":"https://motion.dev","host":"motion.dev","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["js","react","vue","springs","layout"],"best_for":"The standard animation library for the web (formerly Framer Motion): springs, gestures, layout and scroll animation","how_to_use":"Import from motion/react in React (motion for vanilla JS, motion-v for Vue); check the installed major version; agents read motion.dev/llms.txt","zh":"Web 动画事实标准库（原 Framer Motion）：弹簧、手势、布局与滚动动画；React 从 motion/react 引入，留意大版本。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://motion.dev/llms.txt"},{"label":"Examples (filter JS, React, Vue; some need Motion+)","url":"https://motion.dev/examples"}],"api":null,"caveats":["Some examples and premium components require a paid Motion+ membership"],"agent_access":"static","thumb":{"src":"assets/thumbs/motion.webp","source":"screenshot","captured_at":"2026-09-27T09:47:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"threejs","name":"three.js","name_zh":null,"url":"https://threejs.org","host":"threejs.org","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["webgl","3d"],"best_for":"The standard WebGL and WebGPU 3D library for the web: scenes, materials, glTF loading and post-processing","how_to_use":"Read the manual before the API docs; in React use react-three-fiber with drei","zh":"Web 端 3D 图形的事实标准库，封装了 WebGL 的复杂度；做 3D 场景、产品可视化或创意网页时用，React 项目配 react-three-fiber，MIT 协议。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Manual","url":"https://threejs.org/manual/"},{"label":"API docs","url":"https://threejs.org/docs/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/threejs.webp","source":"screenshot","captured_at":"2026-09-27T09:43:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gsap","name":"GSAP","name_zh":null,"url":"https://gsap.com","host":"gsap.com","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["timeline","scrolltrigger","svg"],"best_for":"Timeline-based animation platform with ScrollTrigger, SplitText, MorphSVG","how_to_use":"Best for sequenced timelines and scroll-driven storytelling (ScrollTrigger, SplitText, MorphSVG); honour prefers-reduced-motion","zh":"时间轴动画平台，带 ScrollTrigger、SplitText、MorphSVG；做编排式滚动叙事的首选；免费但非 OSI 开源。","zh_how":null,"access":"free","login":false,"license":"GSAP Standard 'no charge' licence: free for commercial use, including every plugin since April 2025; not allowed inside visual no-code animation builders that compete with Webflow; not OSI open source","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Showcase","url":"https://gsap.com/showcase/"}],"api":null,"caveats":["gsap.com sits behind a bot wall for scripted fetches; agents should read the source and README on GitHub (greensock/GSAP)"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/gsap.webp","source":"screenshot","captured_at":"2026-09-27T09:43:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"animejs","name":"Anime.js","name_zh":null,"url":"https://animejs.com","host":"animejs.com","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["js","timeline","svg"],"best_for":"Lightweight animation engine with timelines, staggering and SVG support (v4 rewrite)","how_to_use":"Dependency-light alternative to GSAP for timelines, staggers and SVG line drawing; v4 uses module imports, so import only what you use","zh":"轻量 JS 动画引擎，支持时间线、交错动画与 SVG，v4 已重写；想要少依赖的 GSAP 替代时用，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/animejs.webp","source":"screenshot","captured_at":"2026-09-27T09:43:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lottie-web","name":"dotLottie web player (and lottie-web)","name_zh":null,"url":"https://github.com/LottieFiles/dotlottie-web","host":"github.com","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["lottie","playback"],"best_for":"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","how_to_use":"Prefer .lottie files and the dotLottie player; lottie-web still works but changes rarely","zh":"网页端 Lottie 动画播放器：dotLottie 播放器（支持 .lottie 与 JSON，文件更小、可换主题、有状态机）和老牌 lottie-web；优先用 .lottie 与 dotLottie，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["lottiefiles.com is behind a Cloudflare wall for scripted fetches"],"agent_access":"static","thumb":{"src":"assets/thumbs/lottie-web.webp","source":"github","captured_at":"2026-09-27T09:48:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"rive-runtimes","name":"Rive runtimes","name_zh":null,"url":"https://rive.app/docs/runtimes/getting-started","host":"rive.app","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["rive","web","flutter","ios","android"],"best_for":"Runtimes to play interactive Rive files on every platform","how_to_use":"One animation asset across web, Flutter and native","zh":"让交互式 Rive 动画跑在各平台的运行时；一份动画资产跨 Web、Flutter 和原生；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/rive-runtimes.webp","source":"screenshot","captured_at":"2026-09-27T09:46:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"auto-animate","name":"AutoAnimate","name_zh":null,"url":"https://auto-animate.formkit.com","host":"auto-animate.formkit.com","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["zero-config","lists"],"best_for":"One-line automatic transitions for list and layout changes","how_to_use":"Add the one-line hook to lists and layout containers for enter, leave and reorder transitions; cheap polish for admin UIs","zh":"一行接入的列表与布局自动过渡库；给后台界面低成本加精致感；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/auto-animate.webp","source":"screenshot","captured_at":"2026-09-27T09:43:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lenis","name":"Lenis","name_zh":null,"url":"https://lenis.dev","host":"lenis.dev","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["smooth-scroll"],"best_for":"Smooth-scroll library used on many award sites","how_to_use":"Use only when smooth scroll is part of the concept; keep native scroll for product UI","zh":"许多获奖站用的平滑滚动库；劫持滚动有无障碍代价，非必要不上。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Scroll hijacking has accessibility and performance costs; respect prefers-reduced-motion"],"agent_access":"static","thumb":{"src":"assets/thumbs/lenis.webp","source":"screenshot","captured_at":"2026-09-27T09:43:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"theatre-js","name":"Theatre.js","name_zh":null,"url":"https://www.theatrejs.com","host":"theatrejs.com","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["sequencer","webgl"],"best_for":"Visual sequencer for choreographing code-driven animation","how_to_use":"Keyframe cinematic hero sequences in its studio UI and play them from code; development has been quiet since 2024","zh":"可视化动画编排序器，用来编排代码驱动的动效；做电影感首屏序列；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/theatre-js.webp","source":"screenshot","captured_at":"2026-09-27T09:43:24Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"react-three-fiber","name":"react-three-fiber","name_zh":null,"url":"https://r3f.docs.pmnd.rs","host":"r3f.docs.pmnd.rs","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["react","webgl","3d"],"best_for":"React renderer for three.js with the drei helper library","how_to_use":"Declarative 3D scenes and digital-twin views","zh":"three.js 的 React 渲染器，配 drei 助手库；要用声明式写法搭 3D 场景、做数字孪生可视化时选它，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/react-three-fiber.webp","source":"screenshot","captured_at":"2026-09-27T09:43:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"remotion","name":"Remotion","name_zh":null,"url":"https://www.remotion.dev","host":"remotion.dev","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["video","react"],"best_for":"Programmatic video in React: motion graphics and product videos from code","how_to_use":"Check the company licence threshold before commercial use","zh":"用 React 以代码生成视频，动态图形和产品视频都能写；个人小团队免费，公司超阈值需付费授权。","zh_how":null,"access":"freemium","login":false,"license":"Remotion licence: free for individuals and small teams, paid company licence above a threshold","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Licence and company thresholds","url":"https://www.remotion.dev/docs/license"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/remotion.webp","source":"screenshot","captured_at":"2026-09-27T09:43:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"motion-canvas","name":"Motion Canvas","name_zh":null,"url":"https://motioncanvas.io","host":"motioncanvas.io","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["video","typescript","explainers"],"best_for":"Code-driven animation for explainer videos","how_to_use":"Write explainer and diagram animations in TypeScript with the live editor, then render the video","zh":"用 TypeScript 代码驱动的讲解视频动画库；做图表式演示动画的开源选择；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/motion-canvas.webp","source":"screenshot","captured_at":"2026-09-27T09:43:24Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"p5js","name":"p5.js","name_zh":null,"url":"https://p5js.org","host":"p5js.org","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["creative-coding","generative"],"best_for":"Creative-coding library for generative visuals","how_to_use":"Sketch generative posters, patterns and backgrounds in the web editor, then export frames as PNG","zh":"创意编程库，做生成式视觉的入门标配；生成艺术海报与动态背景时上手最快，LGPL-2.1。","zh_how":null,"access":"free","login":false,"license":"LGPL-2.1","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/p5js.webp","source":"screenshot","captured_at":"2026-09-27T09:43:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pixijs","name":"PixiJS","name_zh":null,"url":"https://pixijs.com","host":"pixijs.com","domain":"code","section":"motion-libs","also":[],"kind":"library","tags":["2d","webgl","webgpu","canvas"],"best_for":"Fast 2D rendering engine (WebGL and WebGPU) for games, interactive stories and rich animated interfaces","how_to_use":"Use when DOM and SVG animation hit performance limits (thousands of sprites, particles, filters)","zh":"高速 2D 渲染引擎（WebGL 与 WebGPU），用于游戏、互动叙事和复杂动画界面；DOM 与 SVG 动画撞到性能上限（大量精灵、粒子、滤镜）时换用，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pixijs.webp","source":"screenshot","captured_at":"2026-09-27T09:43:35Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"dtcg-spec","name":"Design Tokens Format Module (DTCG 2025.10)","name_zh":null,"url":"https://www.designtokens.org","host":"designtokens.org","domain":"code","section":"tokens-theming","also":[],"kind":"spec","tags":["tokens","w3c","spec"],"best_for":"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","how_to_use":"Write tokens.json to the Format module; use the Resolver module for light, dark and brand sets instead of duplicating files","zh":"W3C 社区组的 design token 文件格式，2025.10 为稳定版（2025 年 10 月 28 日终版报告），另有 Color 模块与处理主题和模式的 Resolver 模块；写 tokens.json 按它来。","zh_how":"tokens.json 按 Format 模块写；明暗与多品牌用 Resolver 模块组合，不要复制多份文件。","access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Format module 2025.10","url":"https://www.designtokens.org/tr/2025.10/format/"},{"label":"Color module 2025.10","url":"https://www.designtokens.org/tr/2025.10/color/"},{"label":"Resolver module 2025.10 (themes, modes)","url":"https://www.designtokens.org/tr/2025.10/resolver/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/dtcg-spec.webp","source":"screenshot","captured_at":"2026-09-27T09:43:31Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"style-dictionary","name":"Style Dictionary","name_zh":null,"url":"https://styledictionary.com","host":"styledictionary.com","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["tokens","build","multi-platform"],"best_for":"Transforms token files into CSS, iOS, Android, Flutter and more","how_to_use":"The default token build tool; supports DTCG syntax","zh":"把 design token 源文件编译成 CSS、iOS、Android、Flutter 等各平台代码的标配构建工具，做跨端主题时默认选它，支持 W3C DTCG 格式；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"DTCG support","url":"https://styledictionary.com/info/dtcg/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/style-dictionary.webp","source":"screenshot","captured_at":"2026-09-27T09:43:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tailwindcss","name":"Tailwind CSS","name_zh":null,"url":"https://tailwindcss.com","host":"tailwindcss.com","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["css","utility-first","theme-variables","tokens"],"best_for":"Utility-first CSS framework whose v4 @theme variables are the token layer of most AI-generated and shadcn-based UIs","how_to_use":"Map the design system's tokens to @theme namespaces (--color-*, --font-*, --spacing, --radius-*) instead of hard-coding values in class names","zh":"原子化 CSS 框架，v4 的 @theme 变量就是大多数 AI 生成界面与 shadcn 项目的 token 层；把设计系统的 token 映射到 @theme 命名空间（--color-*、--font-*、--spacing、--radius-*），别在类名里写死数值，MIT。","zh_how":"先读 Theme variables 文档，把 DESIGN.md 里的颜色、字体、间距、圆角写进 @theme，再用生成的工具类。","access":"free","login":false,"license":"MIT","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Theme variables (@theme)","url":"https://tailwindcss.com/docs/theme"}],"api":null,"caveats":["Stock Tailwind defaults (palette, radius, shadows) are the generic AI look; define your own theme"],"agent_access":"static","thumb":{"src":"assets/thumbs/tailwindcss.webp","source":"screenshot","captured_at":"2026-09-27T09:47:32Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"tweakcn","name":"tweakcn","name_zh":null,"url":"https://tweakcn.com","host":"tweakcn.com","domain":"code","section":"tokens-theming","also":[],"kind":"tool","tags":["shadcn","theme-editor"],"best_for":"Visual theme editor for shadcn/ui with exportable CSS variables","how_to_use":"The quickest way to move a shadcn project off its default look","zh":"shadcn/ui 的可视化主题编辑器，导出 CSS 变量；让项目摆脱默认脸的最快路径；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/tweakcn.webp","source":"screenshot","captured_at":"2026-09-27T09:43:35Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"terrazzo","name":"Terrazzo","name_zh":null,"url":"https://terrazzo.app","host":"terrazzo.app","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["tokens","dtcg","build"],"best_for":"DTCG-native token toolchain with linting and plugins","how_to_use":"Lighter DTCG-native alternative to Style Dictionary; its lint rules include a11y/min-contrast for token pairs","zh":"原生支持 DTCG 的 token 构建工具链，带 lint 与插件机制；想要比 Style Dictionary 更轻的选择时用它；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/terrazzo.webp","source":"screenshot","captured_at":"2026-09-27T09:43:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tokens-studio","name":"Tokens Studio","name_zh":null,"url":"https://tokens.studio","host":"tokens.studio","domain":"code","section":"tokens-theming","also":[],"kind":"tool","tags":["figma","tokens","sync"],"best_for":"Figma plugin to author tokens and sync them to Git","how_to_use":"Author tokens and themes in the Figma plugin, sync the JSON to Git, then build it with Style Dictionary","zh":"在 Figma 里编写 design token 并同步到 Git 的插件；设计师留在 Figma、代码库要单一来源时用它衔接。MIT。","zh_how":null,"access":"freemium","login":true,"license":"MIT for the plugin","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tokens-studio.webp","source":"screenshot","captured_at":"2026-09-27T09:43:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"open-props","name":"Open Props","name_zh":null,"url":"https://open-props.style","host":"open-props.style","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["css-variables","presets"],"best_for":"Expertly tuned CSS custom properties: sizes, easings, shadows, gradients, colours","how_to_use":"Borrow its easing, shadow and size scales as a starting point; import only the props you use","zh":"调好的 CSS 自定义属性集：尺寸、缓动、阴影、渐变、颜色；缓动与阴影阶可直接借走；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/open-props.webp","source":"screenshot","captured_at":"2026-09-27T09:43:39Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"material-color-utilities","name":"Material Color Utilities","name_zh":null,"url":"https://github.com/material-foundation/material-color-utilities","host":"github.com","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["hct","dynamic-colour"],"best_for":"HCT colour space, tonal palettes and dynamic schemes in TS, Dart, Java, Swift","how_to_use":"Generate Material schemes in build scripts","zh":"Google 的取色算法库：HCT 色彩空间、色调色板与动态配色，多语言实现；构建脚本里生成主题，Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/material-color-utilities.webp","source":"github","captured_at":"2026-09-27T09:48:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"culori","name":"Culori","name_zh":null,"url":"https://culorijs.org","host":"culorijs.org","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["colour","oklch","interpolation"],"best_for":"Comprehensive colour library with OKLCH, interpolation and gamut mapping","how_to_use":"Use in token build scripts to convert to OKLCH, interpolate scales and clamp to the sRGB or P3 gamut","zh":"功能齐全的颜色处理库，支持 OKLCH、插值与色域映射；写 design token 构建脚本时的好帮手，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/culori.webp","source":"screenshot","captured_at":"2026-09-27T09:43:36Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"colorjs","name":"Color.js","name_zh":null,"url":"https://colorjs.io","host":"colorjs.io","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["colour","css-color-4"],"best_for":"Colour science library by CSS Color spec editors","how_to_use":"Reference implementation behaviour for CSS colour spaces","zh":"CSS Color 规范作者写的色彩科学库；要参考 CSS 色彩空间的实现行为时用它；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/colorjs.webp","source":"screenshot","captured_at":"2026-09-27T09:43:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"panda-css","name":"Panda CSS","name_zh":null,"url":"https://panda-css.com","host":"panda-css.com","domain":"code","section":"tokens-theming","also":[],"kind":"library","tags":["css-in-js","tokens","semantic-tokens","recipes"],"best_for":"Type-safe, build-time CSS-in-JS for design systems with first-class tokens, semantic tokens, text styles and component recipes","how_to_use":"Use when a design system wants tokens and variants defined in TypeScript and compiled to static CSS; agents read panda-css.com/llms.txt","zh":"类型安全、构建时生成的 CSS-in-JS 框架，原生支持 token、语义 token、文字样式与组件 recipe；设计系统想用 TypeScript 定义 token 与变体并编译成静态 CSS 时用，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://panda-css.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/panda-css.webp","source":"screenshot","captured_at":"2026-09-27T09:43:39Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"satori","name":"Satori","name_zh":null,"url":"https://github.com/vercel/satori","host":"github.com","domain":"code","section":"render-export","also":[],"kind":"library","tags":["og-image","html-to-svg"],"best_for":"Converts HTML and CSS (a flexbox subset) to SVG; the engine behind generated OG images","how_to_use":"Pair with resvg to rasterise; fonts must be supplied as files","zh":"把 HTML 与 CSS 的 flexbox 子集渲染成 SVG，是生成 OG 图的核心引擎；配 resvg 出位图，字体需自备；MPL-2.0。","zh_how":null,"access":"free","login":false,"license":"MPL-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"OG image playground","url":"https://og-playground.vercel.app"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/satori.webp","source":"github","captured_at":"2026-09-27T09:48:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"playwright","name":"Playwright","name_zh":null,"url":"https://playwright.dev","host":"playwright.dev","domain":"code","section":"render-export","also":[],"kind":"library","tags":["screenshots","pdf","visual-regression"],"best_for":"Browser automation with full-page screenshots, PDF output and screenshot assertions","how_to_use":"toHaveScreenshot() is the mechanical gate for visual regressions","zh":"浏览器自动化库，整页截图、导出 PDF、截图断言俱全；用 toHaveScreenshot() 做视觉回归的机械关卡，Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"Visual comparisons (toHaveScreenshot)","url":"https://playwright.dev/docs/test-snapshots"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/playwright.webp","source":"screenshot","captured_at":"2026-09-27T09:43:38Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"takumi","name":"Takumi","name_zh":null,"url":"https://takumi.kane.tw","host":"takumi.kane.tw","domain":"code","section":"render-export","also":[],"kind":"library","tags":["og-image","rust","fast"],"best_for":"Rust image-rendering engine for JSX layouts, a faster Satori alternative","how_to_use":"For high-volume OG and social images (and PDFs) from JSX when Satori plus resvg is too slow","zh":"Rust 写的 JSX 布局图片渲染引擎，定位是更快的 Satori 替代；大批量生成 OG 图时选它。MIT/Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"MIT or Apache-2.0","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/takumi.webp","source":"screenshot","captured_at":"2026-09-27T09:43:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"resvg","name":"resvg","name_zh":null,"url":"https://github.com/linebender/resvg","host":"github.com","domain":"code","section":"render-export","also":[],"kind":"library","tags":["svg-to-png"],"best_for":"Accurate SVG rasteriser with JS bindings (resvg-js)","how_to_use":"Deterministic SVG to PNG in scripts (resvg-js in Node); supply the fonts explicitly","zh":"精度可靠的 SVG 光栅化器，有 JS 绑定（resvg-js）；在构建脚本里确定性地把 SVG 转成 PNG；Apache-2.0 或 MIT。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0 or MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/resvg.webp","source":"github","captured_at":"2026-09-27T09:48:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"snapdom","name":"snapDOM","name_zh":null,"url":"https://snapdom.dev","host":"snapdom.dev","domain":"code","section":"render-export","also":[],"kind":"library","tags":["dom-to-image"],"best_for":"Fast in-browser DOM-to-image capture","how_to_use":"For client-side 'export as image' features; test web fonts and cross-origin images","zh":"浏览器内高速把 DOM 节点截成图片的库，给产品做客户端导出图片功能时用，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/snapdom.webp","source":"screenshot","captured_at":"2026-09-27T09:43:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sharp","name":"sharp","name_zh":null,"url":"https://sharp.pixelplumbing.com","host":"sharp.pixelplumbing.com","domain":"code","section":"render-export","also":[],"kind":"library","tags":["image-processing"],"best_for":"High-performance image resizing, format conversion and compositing in Node","how_to_use":"Produce responsive image sets and AVIF or WebP","zh":"Node 里高性能的图像缩放、格式转换与合成库；生成响应式图片集和 AVIF/WebP 用它；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sharp.webp","source":"screenshot","captured_at":"2026-09-27T09:43:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"typst","name":"Typst","name_zh":null,"url":"https://typst.app","host":"typst.app","domain":"code","section":"render-export","also":[],"kind":"tool","tags":["typesetting","pdf","print"],"best_for":"Modern markup-based typesetting system that compiles to PDF quickly","how_to_use":"Strong choice for reports, one-pagers and print pieces made from code","zh":"现代标记式排版系统，编译 PDF 很快；用代码做报告、单页与印刷品的好选择；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/typst.webp","source":"screenshot","captured_at":"2026-09-27T09:43:46Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pagedjs","name":"Paged.js","name_zh":null,"url":"https://pagedjs.org","host":"pagedjs.org","domain":"code","section":"render-export","also":[],"kind":"library","tags":["css-paged-media","print"],"best_for":"Polyfill for CSS Paged Media: page size, margins, running headers, bleed and crop marks in the browser","how_to_use":"HTML to print-ready PDF through a browser","zh":"CSS Paged Media 的浏览器 polyfill：页面尺寸、页边距、页眉、出血和裁切标记；HTML 直接出印刷级 PDF。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pagedjs.webp","source":"screenshot","captured_at":"2026-09-27T09:43:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"vivliostyle","name":"Vivliostyle","name_zh":null,"url":"https://vivliostyle.org","host":"vivliostyle.org","domain":"code","section":"render-export","also":[],"kind":"tool","tags":["css-typesetting","cjk","print"],"best_for":"CSS typesetting engine with strong CJK and vertical-text support","how_to_use":"For Chinese and Japanese books and documents from HTML","zh":"CSS 排版引擎，中日文与竖排支持扎实；适合用 HTML 排中文、日文的书籍与文档；AGPL-3.0。","zh_how":null,"access":"free","login":false,"license":"AGPL-3.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/vivliostyle.webp","source":"screenshot","captured_at":"2026-09-27T09:43:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"weasyprint","name":"WeasyPrint","name_zh":null,"url":"https://weasyprint.org","host":"weasyprint.org","domain":"code","section":"render-export","also":[],"kind":"library","tags":["html-to-pdf","python"],"best_for":"HTML and CSS to PDF in Python with paged-media support","how_to_use":"Server-side HTML to PDF for reports and invoices using @page rules for size, margins and running headers","zh":"Python 写的渲染库，把 HTML 与 CSS 直接排成分页 PDF；适合在服务端批量生成报告类文档，BSD-3-Clause 协议。","zh_how":null,"access":"free","login":false,"license":"BSD-3-Clause","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/weasyprint.webp","source":"screenshot","captured_at":"2026-09-27T09:43:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"slidev","name":"Slidev","name_zh":null,"url":"https://sli.dev","host":"sli.dev","domain":"code","section":"render-export","also":[],"kind":"tool","tags":["slides","markdown","vue"],"best_for":"Markdown and Vue slides for developers with themes and PDF export","how_to_use":"Decks from Markdown with live Vue components and code highlighting; export PDF or PNG with the CLI","zh":"用 Markdown 和 Vue 写幻灯片，支持主题、实时组件与 PDF 导出；开发者的演示文稿工具，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/slidev.webp","source":"screenshot","captured_at":"2026-09-27T09:43:48Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"revealjs","name":"reveal.js","name_zh":null,"url":"https://revealjs.com","host":"revealjs.com","domain":"code","section":"render-export","also":[],"kind":"library","tags":["slides","html"],"best_for":"Mature HTML presentation framework: nested slides, speaker notes, PDF export and full CSS control","how_to_use":"Use when a deck is designed in HTML and CSS; export PDF by printing the ?print-pdf view","zh":"HTML 演示文稿框架的标杆；要做完全掌控版式的设计感幻灯片用它；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/revealjs.webp","source":"screenshot","captured_at":"2026-09-27T09:43:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"marp","name":"Marp","name_zh":null,"url":"https://marp.app","host":"marp.app","domain":"code","section":"render-export","also":[],"kind":"tool","tags":["slides","markdown","pptx"],"best_for":"Markdown to slides with PDF and PPTX export","how_to_use":"Fast, plain decks from Markdown themed with CSS; the CLI exports PDF, PPTX and images","zh":"把 Markdown 文稿直接转成幻灯片，可导出 PDF 与 PPTX；需要快速出朴素演示稿时用；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["PPTX export is pre-rendered images by default; --pptx-editable is experimental, so use PptxGenJS when recipients must edit"],"agent_access":"static","thumb":{"src":"assets/thumbs/marp.webp","source":"screenshot","captured_at":"2026-09-27T09:43:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pptxgenjs","name":"PptxGenJS","name_zh":null,"url":"https://gitbrent.github.io/PptxGenJS/","host":"gitbrent.github.io","domain":"code","section":"render-export","also":[],"kind":"library","tags":["pptx","editable"],"best_for":"Generates editable PowerPoint files from JavaScript","how_to_use":"When the recipient must edit in PowerPoint or Keynote","zh":"从 JavaScript 生成真正可编辑的 PowerPoint 文件的库；交付物必须让对方在 PowerPoint 或 Keynote 里继续改时用它。MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pptxgenjs.webp","source":"screenshot","captured_at":"2026-09-27T09:43:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"fonttools","name":"fontTools","name_zh":null,"url":"https://github.com/fonttools/fonttools","host":"github.com","domain":"code","section":"render-export","also":[],"kind":"library","tags":["fonts","subset","python"],"best_for":"Python library and pyftsubset for inspecting and subsetting fonts","how_to_use":"Subset to the characters actually used with pyftsubset (--flavor=woff2) and inspect font tables with ttx","zh":"字体处理的 Python 库，pyftsubset 可按实际用到的字符裁剪字体；上线前做子集化减体积，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/fonttools.webp","source":"github","captured_at":"2026-09-27T09:48:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"opentype-js","name":"opentype.js","name_zh":null,"url":"https://opentype.js.org","host":"opentype.js.org","domain":"code","section":"render-export","also":[],"kind":"library","tags":["fonts","outlines"],"best_for":"Parse fonts and convert text to SVG paths in JavaScript","how_to_use":"Outline a wordmark or headline to SVG paths in code (getPath().toSVG) so it renders without the font file","zh":"在 JavaScript 里解析字体文件、把文字转成 SVG 路径的库；要用代码给字标转曲描边时用，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/opentype-js.webp","source":"screenshot","captured_at":"2026-09-27T09:43:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"penpot","name":"Penpot","name_zh":null,"url":"https://penpot.app","host":"penpot.app","domain":"code","section":"design-tools","also":["ai:design-mcp-servers"],"kind":"tool","tags":["open-source","figma-alternative","css-native"],"best_for":"Open-source design tool built on SVG and CSS concepts, with tokens and an MCP server","how_to_use":"Self-hostable design source of truth; agents connect through its official MCP server","zh":"开源设计工具，建立在 SVG 和 CSS 概念之上，自带 token 与 MCP server；可自托管的设计源头文件；MPL-2.0。","zh_how":null,"access":"free","login":false,"license":"MPL-2.0","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/penpot.webp","source":"screenshot","captured_at":"2026-09-27T09:44:01Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"excalidraw","name":"Excalidraw","name_zh":null,"url":"https://excalidraw.com","host":"excalidraw.com","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["whiteboard","sketch"],"best_for":"Hand-drawn style whiteboard for flows and wireframes","how_to_use":"Low-fidelity flows and wireframes before pixels; its .excalidraw JSON can be generated by an agent and reopened for editing","zh":"手绘风格白板，画流程与线框；上像素之前的低保真思考工具；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/excalidraw.webp","source":"og","captured_at":"2026-09-27T10:27:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tldraw","name":"tldraw","name_zh":null,"url":"https://www.tldraw.com","host":"tldraw.com","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["canvas","sdk"],"best_for":"Infinite-canvas whiteboard plus a React SDK for building your own canvas tools","how_to_use":"Sketch flows on tldraw.com; build on the SDK only after checking its licence","zh":"无限画布与配套 SDK；自己造画布类工具时基于它搭，SDK 商用需购买授权。","zh_how":null,"access":"freemium","login":false,"license":"tldraw licence (SDK requires a licence for commercial use)","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["The SDK needs a commercial licence for production use"],"agent_access":"js","thumb":{"src":"assets/thumbs/tldraw.webp","source":"screenshot","captured_at":"2026-09-27T09:44:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"graphite","name":"Graphite","name_zh":null,"url":"https://graphite.art","host":"graphite.art","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["vector","procedural"],"best_for":"Open-source procedural vector and raster editor in the browser","how_to_use":"Watch as an emerging open alternative for node-based procedural vector work","zh":"浏览器里的开源程序化矢量与位图编辑器；矢量工具的新候选；Apache-2.0。","zh_how":null,"access":"free","login":false,"license":"Apache-2.0","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/graphite.webp","source":"screenshot","captured_at":"2026-09-27T09:43:56Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"inkscape","name":"Inkscape","name_zh":null,"url":"https://inkscape.org","host":"inkscape.org","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["vector","svg"],"best_for":"Mature open-source SVG editor with a command line for batch export","how_to_use":"Batch-export SVG to PNG or PDF from the command line (inkscape --export-type=png file.svg)","zh":"成熟的开源矢量编辑器，带命令行接口，可批量把 SVG 导出成 PNG 或 PDF；GPL 协议。","zh_how":null,"access":"free","login":false,"license":"GPL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["inkscape.org answers scripted fetches with 403"],"agent_access":"static","thumb":{"src":"assets/thumbs/inkscape.webp","source":"screenshot","captured_at":"2026-09-27T09:43:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"blender","name":"Blender","name_zh":null,"url":"https://www.blender.org","host":"blender.org","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["3d","render"],"best_for":"Open-source 3D suite, scriptable in Python","how_to_use":"Scripted renders of product or icon scenes","zh":"开源 3D 创作套件，建模、渲染、动画齐备且可用 Python 脚本化；批量渲染产品或图标场景用，GPL。","zh_how":null,"access":"free","login":false,"license":"GPL","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/blender.webp","source":"screenshot","captured_at":"2026-09-27T09:43:59Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"figma","name":"Figma","name_zh":null,"url":"https://www.figma.com","host":"figma.com","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["design-tool","variables","dev-mode","rest-api"],"best_for":"The design tool of record for most product teams: components, variables (tokens and modes), Dev Mode and a REST API","how_to_use":"Read the team's variables and components before designing; agents pull file data through the REST API or the Figma MCP server","zh":"多数产品团队的主力设计工具：组件、变量（token 与模式）、Dev Mode 和 REST API；动手前先读团队已有的变量与组件，智能体通过 REST API 或 Figma MCP 取文件数据。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"REST API","url":"https://developers.figma.com/docs/rest-api/"},{"label":"Guide to variables","url":"https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/figma.webp","source":"screenshot","captured_at":"2026-09-27T10:27:28Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"pen-dev","name":"pen.dev (formerly Pencil)","name_zh":null,"url":"https://www.pen.dev","host":"pen.dev","domain":"code","section":"design-tools","also":["ai:design-mcp-servers"],"kind":"tool","tags":["agentic-canvas","mcp","open-format","design-as-code"],"best_for":"Agent-native design canvas (desktop and IDE) whose .pen files are an open format kept in the repo, with MCP, WebMCP and CLI access","how_to_use":"Keep .pen files next to the code so agents and people edit the same design; review agent edits like code","zh":"原 Pencil，面向智能体的设计画布（桌面与 IDE），.pen 为开放格式、放在代码仓库里，可通过 MCP、WebMCP 与 CLI 接入；.pen 与代码放一起，像评审代码一样评审智能体的改动。","zh_how":null,"access":"free","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Docs (.pen format, CLI, design and code)","url":"https://docs.pen.dev"}],"api":null,"caveats":["Free today; the pricing page says paid plans may come later"],"agent_access":"static","thumb":{"src":"assets/thumbs/pen-dev.webp","source":"screenshot","captured_at":"2026-09-27T09:44:01Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"paper-design","name":"Paper","name_zh":null,"url":"https://paper.design","host":"paper.design","domain":"code","section":"design-tools","also":["ai:design-mcp-servers"],"kind":"tool","tags":["html-css-canvas","mcp","agents"],"best_for":"Design tool whose canvas is built on HTML and CSS, with an MCP server through which agents read and write frames","how_to_use":"Use when designs should hand off as CSS; connect the MCP server so an agent can lay out frames or turn a selected frame into code","zh":"画布基于 HTML 与 CSS 的设计工具，智能体可通过 MCP 读写画板；希望交付物直接是 CSS 时用，接上 MCP 让智能体排版或把选中画板转成代码。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"MCP server","url":"https://paper.design/docs/mcp"}],"api":null,"caveats":["The free plan caps MCP tool calls (100 per week); Pro is paid per editor"],"agent_access":"static","thumb":{"src":"assets/thumbs/paper-design.webp","source":"screenshot","captured_at":"2026-09-27T09:44:06Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"mastergo","name":"MasterGo (莫高设计)","name_zh":"莫高设计","url":"https://mastergo.com","host":"mastergo.com","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["china","figma-alternative","ai","mcp"],"best_for":"Leading domestic Figma-class design tool (from the Lanhu team) with prototyping, a developer mode, AI features and an official MCP server","how_to_use":"Expect Chinese product teams to deliver files here; read components and styles in developer mode, and connect MasterGo Magic MCP for agents","zh":"国内领先的 Figma 级设计工具（蓝湖团队出品），含原型、研发模式、AI 功能与官方 MCP；国内团队常用它交付设计稿，研发模式里看组件与样式，智能体接 MasterGo Magic MCP。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"MasterGo Magic MCP (GitHub)","url":"https://github.com/mastergo-design/mastergo-magic-mcp"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/mastergo.webp","source":"screenshot","captured_at":"2026-09-27T09:44:11Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"jsdesign","name":"JS Design (即时设计)","name_zh":"即时设计","url":"https://js.design","host":"js.design","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["china","figma-alternative","collaboration"],"best_for":"Domestic browser-based UI design tool with real-time collaboration, prototyping, developer annotations and Figma, Sketch and XD import","how_to_use":"A common source-file home in Chinese teams; its community (jsdesign-community) holds UI kits","zh":"国产在线 UI 设计工具，多人实时协作、原型交互、开发标注，兼容 Figma、Sketch、XD 文件；国内团队常见的源文件所在地，资源广场另有 UI 套件。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/jsdesign.webp","source":"screenshot","captured_at":"2026-09-27T09:44:03Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"pixso","name":"Pixso","name_zh":null,"url":"https://pixso.cn","host":"pixso.cn","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["china","figma-alternative","ai","mcp"],"best_for":"Domestic collaborative UI design and prototyping tool with in-canvas AI generation and a Pixso MCP that connects designs to code","how_to_use":"Check which domestic tool the client team uses before handoff; connect Pixso MCP when the source files live here","zh":"国产协同 UI 设计与原型工具，画布内 AI 生成与优化设计稿，另有连接设计与代码的 Pixso MCP；交付前先确认对方用哪家国产工具。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/pixso.webp","source":"screenshot","captured_at":"2026-09-27T09:44:17Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"modao","name":"Modao (墨刀)","name_zh":"墨刀","url":"https://modao.cc","host":"modao.cc","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["china","prototyping","product"],"best_for":"Chinese prototyping and product-collaboration platform: interactive prototypes, whiteboard, UI design with design-to-code, and AI generation","how_to_use":"Common for PM wireframes in China; treat its output as structure and flow, not as the visual design","zh":"国产原型与产研协作平台：交互原型、白板、带设计转代码的 UI 设计，以及 AI 生成；常见于产品经理的线框稿，把它当结构与流程参考，不当视觉设计。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/modao.webp","source":"screenshot","captured_at":"2026-09-27T09:44:05Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"lanhu","name":"Lanhu (蓝湖)","name_zh":"蓝湖","url":"https://lanhuapp.com","host":"lanhuapp.com","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["china","handoff","specs"],"best_for":"The dominant Chinese design-handoff platform: auto-generated spec annotations, slices, clickable prototypes and Axure hosting for engineers","how_to_use":"Expect engineers in China to read specs here; upload from the design tool with consistent naming so annotations and slices stay usable","zh":"国内最主流的设计交付平台：自动生成标注、切图、可点击原型，并可在线展示 Axure；国内工程师多在这里看规范，从设计工具上传时命名要规范，标注与切图才好用。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/lanhu.webp","source":"screenshot","captured_at":"2026-09-27T09:44:08Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"storybook","name":"Storybook","name_zh":null,"url":"https://storybook.js.org","host":"storybook.js.org","domain":"code","section":"design-tools","also":[],"kind":"tool","tags":["components","workshop","visual-testing","docs"],"best_for":"The standard workshop for building, documenting and testing UI components in isolation, with visual, interaction and accessibility tests","how_to_use":"If the project has a Storybook, render new components as stories in every state before building screens; agents read storybook.js.org/llms.txt","zh":"在隔离环境里开发、记录与测试 UI 组件的行业标准工作台，支持视觉、交互与无障碍测试；项目里有 Storybook 就先把新组件的各个状态写成 story，再拼页面，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (agent index)","url":"https://storybook.js.org/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/storybook.webp","source":"screenshot","captured_at":"2026-09-27T09:46:45Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"awesome-design-systems","name":"awesome-design-systems","name_zh":null,"url":"https://github.com/alexpate/awesome-design-systems","host":"github.com","domain":"code","section":"awesome-lists","also":[],"kind":"repo","tags":["design-systems"],"best_for":"Table of public design systems with links to components, voice and source","how_to_use":"Find a system from a comparable domain, then read its component and voice pages","zh":"公开设计系统清单，附组件、文案语调与源码链接；找同类域的系统来对照。","zh_how":null,"access":"free","login":false,"license":"Unlicense","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/awesome-design-systems.webp","source":"github","captured_at":"2026-09-27T09:48:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"design-resources-for-developers","name":"design-resources-for-developers","name_zh":null,"url":"https://github.com/bradtraversy/design-resources-for-developers","host":"github.com","domain":"code","section":"awesome-lists","also":[],"kind":"repo","tags":["resources"],"best_for":"Very large categorised list of design resources for developers","how_to_use":"Breadth; verify quality yourself","zh":"面向开发者的超大型分类设计资源清单；胜在广，质量自己把关；MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/design-resources-for-developers.webp","source":"github","captured_at":"2026-09-27T09:48:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"awesome-web-animation","name":"awesome-web-animation","name_zh":null,"url":"https://awesome-web-animation.netlify.app","host":"awesome-web-animation.netlify.app","domain":"code","section":"awesome-lists","also":[],"kind":"repo","tags":["animation"],"best_for":"Libraries, tools and articles on web animation","how_to_use":"Find a specialised animation library","zh":"网页动画相关的库、工具与文章的精选清单；找某个专项动画库时从这里翻起；CC0。","zh_how":null,"access":"free","login":false,"license":"CC0","tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/awesome-web-animation.webp","source":"screenshot","captured_at":"2026-09-27T09:44:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"awesome-creative-coding","name":"awesome-creative-coding","name_zh":null,"url":"https://github.com/terkelg/awesome-creative-coding","host":"github.com","domain":"code","section":"awesome-lists","also":[],"kind":"repo","tags":["generative"],"best_for":"Resources for generative art and creative coding","how_to_use":"Starting point for generative graphics","zh":"生成艺术与创意编程的资源大清单，教程、工具、社区俱全；入门生成图形时当起点索引。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/awesome-creative-coding.webp","source":"github","captured_at":"2026-09-27T09:48:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"awesome-shadcn-ui","name":"awesome-shadcn/ui","name_zh":null,"url":"https://github.com/birobirobiro/awesome-shadcn-ui","host":"github.com","domain":"code","section":"awesome-lists","also":[],"kind":"repo","tags":["shadcn","registries"],"best_for":"Index of shadcn-compatible component registries and themes","how_to_use":"Find a registry before building a component","zh":"shadcn 兼容组件注册表与主题的索引站，动手写组件前先查有没有人做过，MIT。","zh_how":null,"access":"free","login":false,"license":"MIT","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/awesome-shadcn-ui.webp","source":"github","captured_at":"2026-09-27T09:48:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"awesome-design-tokens","name":"Awesome Design Tokens","name_zh":null,"url":"https://github.com/sturobson/Awesome-Design-Tokens","host":"github.com","domain":"code","section":"awesome-lists","also":["code:tokens-theming"],"kind":"repo","tags":["tokens","tooling","articles"],"best_for":"Curated list of design-token tools, platforms, articles and talks","how_to_use":"Scan before choosing a token pipeline (Figma sync, transformers, documentation) to see the options beside Style Dictionary and Terrazzo","zh":"design token 相关工具、平台、文章与演讲的精选清单；选 token 流水线（Figma 同步、转换、文档）前先扫一遍，看看 Style Dictionary 与 Terrazzo 之外的选项。","zh_how":null,"access":"free","login":false,"license":"Unlicense","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/awesome-design-tokens.webp","source":"github","captured_at":"2026-09-27T09:48:10Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"rauno-interfaces","name":"Rauno Freiberg: Web Interface Guidelines","name_zh":null,"url":"https://interfaces.rauno.me","host":"interfaces.rauno.me","domain":"reading","section":"interface-craft","also":[],"kind":"guideline","tags":["details","interaction","web"],"best_for":"Non-obvious details that make web interfaces feel right: interactivity, typography, motion, touch, accessibility","how_to_use":"Use as a polish checklist after the structure is sound","zh":"Rauno 总结的网页界面细节清单：交互、字体、动效、触控、无障碍；结构理顺后当打磨核对表用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Vercel's Web Interface Guidelines (listed under AI > agent skills) grew out of this list and is the maintained, agent-installable version"],"agent_access":"static","thumb":{"src":"assets/thumbs/rauno-interfaces.webp","source":"screenshot","captured_at":"2026-09-27T09:44:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"rauno-invisible-details","name":"Invisible Details of Interaction Design","name_zh":null,"url":"https://rauno.me/craft/interaction-design","host":"rauno.me","domain":"reading","section":"interface-craft","also":["motion:learning"],"kind":"article","tags":["interaction","metaphor","kinetics"],"best_for":"Essay on the reasoning behind great interactions: metaphors, kinetic physics, responsiveness, frequency and novelty","how_to_use":"Read before designing any gesture","zh":"Rauno 的交互设计随笔，讲隐喻、运动物理、响应速度与新鲜感背后的推理；设计任何手势前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/rauno-invisible-details.webp","source":"screenshot","captured_at":"2026-09-27T09:44:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"design-engineering-vercel","name":"Design Engineering at Vercel","name_zh":null,"url":"https://vercel.com/blog/design-engineering-at-vercel","host":"vercel.com","domain":"reading","section":"interface-craft","also":[],"kind":"article","tags":["design-engineering"],"best_for":"What design engineers do and the standards they hold","how_to_use":"Shared vocabulary for design-minded engineers","zh":"Vercel 讲设计工程师做什么、持什么标准；给有设计感的工程师的共同语言。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/design-engineering-vercel.webp","source":"screenshot","captured_at":"2026-09-27T09:47:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"linear-redesign","name":"How we redesigned the Linear UI","name_zh":null,"url":"https://linear.app/now/how-we-redesigned-the-linear-ui","host":"linear.app","domain":"reading","section":"interface-craft","also":[],"kind":"article","tags":["redesign","theme","lch"],"best_for":"A disciplined product redesign: reduce, align, rebuild the theme system in LCH","how_to_use":"Model for a redesign that keeps equity","zh":"Linear 复盘自家界面改版：删繁、对齐、用 LCH 重建主题系统；想改版又保住品牌资产时参照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/linear-redesign.webp","source":"screenshot","captured_at":"2026-09-27T09:44:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"atomic-design","name":"Atomic Design","name_zh":null,"url":"https://atomicdesign.bradfrost.com","host":"atomicdesign.bradfrost.com","domain":"reading","section":"interface-craft","also":[],"kind":"book","tags":["design-systems","methodology"],"best_for":"Brad Frost's free web book on building interface systems","how_to_use":"Read chapter 2 for the mental model","zh":"Brad Frost 的免费网络书，讲如何搭建界面体系；第二章的心智模型最值得一读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/atomic-design.webp","source":"screenshot","captured_at":"2026-09-27T09:44:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"every-layout","name":"Every Layout","name_zh":null,"url":"https://every-layout.dev","host":"every-layout.dev","domain":"reading","section":"interface-craft","also":[],"kind":"book","tags":["css","layout","algorithmic"],"best_for":"Algorithmic CSS layout primitives that adapt without breakpoints","how_to_use":"The rudiments are free; they change how responsive layout is specified","zh":"讲算法化 CSS 布局原语的书，不靠断点自适应；基础篇免费，会改变你写响应式的方式。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/every-layout.webp","source":"screenshot","captured_at":"2026-09-27T09:44:21Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ishadeed","name":"Ahmad Shadeed","name_zh":null,"url":"https://ishadeed.com","host":"ishadeed.com","domain":"reading","section":"interface-craft","also":[],"kind":"article","tags":["css","layout","rtl"],"best_for":"Deep, visual CSS articles on layout, defensive CSS and RTL","how_to_use":"Look up the component you are about to build","zh":"Ahmad Shadeed 的深度图解 CSS 博客，讲布局、防御性 CSS 与 RTL；做组件前先查有没有对应文章。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ishadeed.webp","source":"screenshot","captured_at":"2026-09-27T09:44:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"defensive-css","name":"Defensive CSS","name_zh":null,"url":"https://defensivecss.dev","host":"defensivecss.dev","domain":"reading","section":"interface-craft","also":[],"kind":"guideline","tags":["css","robustness"],"best_for":"Patterns that keep layouts from breaking with real content","how_to_use":"Checklist for long text, missing images, overflow","zh":"防御性 CSS 模式集：长文本、缺图、溢出等真实内容下的不翻车写法；上线前当清单查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/defensive-css.webp","source":"screenshot","captured_at":"2026-09-27T09:44:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"maggie-appleton","name":"Maggie Appleton","name_zh":null,"url":"https://maggieappleton.com","host":"maggieappleton.com","domain":"reading","section":"interface-craft","also":["reading:ai-design"],"kind":"article","tags":["ai-interfaces","visual-essays"],"best_for":"Illustrated essays on language-model interfaces and tools for thought","how_to_use":"Perspective for AI product concepts","zh":"关于语言模型界面与思维工具的插画式长文；给 AI 产品概念找视角。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/maggie-appleton.webp","source":"screenshot","captured_at":"2026-09-27T09:44:19Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"userinterface-wiki","name":"userinterface.wiki","name_zh":null,"url":"https://www.userinterface.wiki","host":"userinterface.wiki","domain":"reading","section":"interface-craft","also":[],"kind":"guideline","tags":["design-engineering","animation","web-apis","skill"],"best_for":"Raphael Salaja's living manual of interface craft, from animation principles to modern web APIs, with demos and an agent skill","how_to_use":"Read the entry for the interaction you are about to build; open it in a browser, the site is JS-rendered","zh":"Raphael Salaja 维护的界面工艺活手册：从动画原则到现代 Web API，附演示与智能体技能；实现交互细节前先读对应条目。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["JavaScript-rendered: plain fetches get only the navigation"],"agent_access":"js","thumb":{"src":"assets/thumbs/userinterface-wiki.webp","source":"screenshot","captured_at":"2026-09-27T09:44:20Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"jhey","name":"Jhey Tompkins","name_zh":null,"url":"https://www.jhey.dev","host":"jhey.dev","domain":"reading","section":"interface-craft","also":[],"kind":"article","tags":["css","interaction","demos"],"best_for":"Inventive CSS and interaction demos with explanations, often the first to use new platform features","how_to_use":"Search his demos before building a scroll, hover or anchor-positioning effect","zh":"Jhey Tompkins 的创意 CSS 与交互演示及讲解，常率先用上新平台特性；做滚动、悬停、锚点定位效果前先搜他的演示。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/jhey.webp","source":"screenshot","captured_at":"2026-09-27T09:44:21Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"nerdy-dev","name":"Adam Argyle (nerdy.dev)","name_zh":null,"url":"https://nerdy.dev","host":"nerdy.dev","domain":"reading","section":"interface-craft","also":[],"kind":"article","tags":["css","open-props","gui-challenges"],"best_for":"CSS and UI craft from the author of Open Props and the GUI Challenges series","how_to_use":"Use the GUI Challenges posts for accessible, modern implementations of common components","zh":"Open Props 作者 Adam Argyle 的 CSS 与 UI 工艺博客，GUI Challenges 系列尤佳；常见组件的现代、无障碍实现参考。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nerdy-dev.webp","source":"screenshot","captured_at":"2026-09-27T09:44:28Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"smashing-magazine","name":"Smashing Magazine","name_zh":null,"url":"https://www.smashingmagazine.com","host":"smashingmagazine.com","domain":"reading","section":"interface-craft","also":[],"kind":"article","tags":["ux","css","accessibility","long-form"],"best_for":"Long-running practitioner magazine on UX, CSS, accessibility and design systems","how_to_use":"Browse /category/<ux-design|css|accessibility> or search a pattern name; articles are long, practical and dated","zh":"老牌从业者杂志，涵盖 UX、CSS、无障碍与设计系统；按分类或模式名搜深度实践文章，注意发表日期。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"UX design category","url":"https://www.smashingmagazine.com/category/ux-design/"},{"label":"RSS feed","url":"https://www.smashingmagazine.com/feed/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/smashing-magazine.webp","source":"screenshot","captured_at":"2026-09-27T09:46:35Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"web-baseline","name":"Baseline and Web Platform Status","name_zh":null,"url":"https://web.dev/baseline","host":"web.dev","domain":"reading","section":"interface-craft","also":[],"kind":"guideline","tags":["browser-support","css","platform","baseline"],"best_for":"Baseline labels (newly or widely available) for web platform features; webstatus.dev and its JSON API give each feature's status and dates","how_to_use":"Before a design depends on popover, anchor positioning or view transitions, query webstatus.dev or its API for the feature's Baseline status","zh":"web.dev 的 Baseline 可用性标签（新近可用 / 广泛可用）；webstatus.dev 及其 JSON API 给出每个特性的状态与日期，设计依赖新特性前先查。","zh_how":"要用 popover、锚点定位、视图过渡等新特性前，查 webstatus.dev 或调 API（q=name:popover）看它是否已 Baseline。","access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Web Platform Status","url":"https://webstatus.dev"}],"api":{"url":"https://api.webstatus.dev/v1/features?q={query}","sample":"https://api.webstatus.dev/v1/features?q=name:popover"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/web-baseline.webp","source":"screenshot","captured_at":"2026-09-27T09:47:51Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"anthropic-frontend-blog","name":"Improving frontend design through Skills","name_zh":null,"url":"https://claude.com/blog/improving-frontend-design-through-skills","host":"claude.com","domain":"reading","section":"ai-design","also":["ai:agent-skills-rules"],"kind":"article","tags":["ai","skills","aesthetics"],"best_for":"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","how_to_use":"Read with the current skill: several remedies it recommended in 2025 are flagged as tells by 2026 detectors","zh":"Anthropic 分析模型为何产出千篇一律的设计、哪些提示词轴向有效；注意部分旧解法如今已成破绽。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/anthropic-frontend-blog.webp","source":"screenshot","captured_at":"2026-09-27T09:44:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"frontend-aesthetics-cookbook","name":"Prompting for frontend aesthetics","name_zh":null,"url":"https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb","host":"github.com","domain":"reading","section":"ai-design","also":["ai:agent-skills-rules"],"kind":"article","tags":["ai","prompting"],"best_for":"Cookbook showing which prompt levers change front-end aesthetics (typography, themes, motion, backgrounds)","how_to_use":"Evidence for which instructions actually move output","zh":"Anthropic 的食谱笔记，实测哪些提示词杠杆能改变前端美学（字体、主题、动效、背景）。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/frontend-aesthetics-cookbook.webp","source":"screenshot","captured_at":"2026-09-27T09:47:28Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"linear-design-ai-age","name":"Design for the AI age","name_zh":null,"url":"https://linear.app/now/design-for-the-ai-age","host":"linear.app","domain":"reading","section":"ai-design","also":["ai:ai-product-guidelines"],"kind":"article","tags":["ai","product"],"best_for":"Linear's view on designing software where AI agents are users and collaborators","how_to_use":"Framing for AI-product briefs","zh":"Linear 谈\"AI 是用户也是协作者\"时代的软件设计；接 AI 产品 brief 前用它校准框架。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/linear-design-ai-age.webp","source":"screenshot","captured_at":"2026-09-27T09:47:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"brad-frost-ai-ds","name":"AI and design systems","name_zh":null,"url":"https://bradfrost.com/blog/post/ai-and-design-systems/","host":"bradfrost.com","domain":"reading","section":"ai-design","also":["ai:agent-formats"],"kind":"article","tags":["ai","design-systems"],"best_for":"How design systems become the constraint layer for AI-generated UI","how_to_use":"Argument for investing in tokens before generation","zh":"论述设计系统如何成为 AI 生成界面的约束层；是先投 token 再谈生成的论据。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/brad-frost-ai-ds.webp","source":"screenshot","captured_at":"2026-09-27T09:44:26Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"wattenberger-boo-chatbots","name":"Why Chatbots Are Not the Future of Interfaces","name_zh":null,"url":"https://wattenberger.com/thoughts/boo-chatbots","host":"wattenberger.com","domain":"reading","section":"ai-design","also":[],"kind":"article","tags":["ai-ux","interfaces","essay"],"best_for":"Amelia Wattenberger's illustrated essay on why a text box is a poor default interface for language models, and what to design instead","how_to_use":"Read before defaulting an AI feature to a chat panel; use it to argue for inline, contextual controls","zh":"Amelia Wattenberger 的图解长文：为什么输入框不是大模型的好默认界面、该设计什么替代；AI 功能默认做聊天框之前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/wattenberger-boo-chatbots.webp","source":"og","captured_at":"2026-09-27T10:37:06Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"malleable-software","name":"Malleable software (Ink & Switch)","name_zh":null,"url":"https://www.inkandswitch.com/essay/malleable-software/","host":"inkandswitch.com","domain":"reading","section":"ai-design","also":[],"kind":"article","tags":["malleable-software","end-user-programming","ai","essay"],"best_for":"Ink & Switch's essay on restoring user agency in locked-down apps, and how AI changes who can reshape software","how_to_use":"Read when a brief proposes generated or user-customisable UI; use it to decide what users should be able to reshape","zh":"Ink & Switch 的长文：在封闭应用时代把改造软件的能力还给用户，以及 AI 如何改变谁能塑造软件；做生成式或可定制界面前读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/malleable-software.webp","source":"screenshot","captured_at":"2026-09-27T09:44:25Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"hobday-safe-rules","name":"Visual design rules you can safely follow every time","name_zh":null,"url":"https://anthonyhobday.com/sideprojects/saferules/","host":"anthonyhobday.com","domain":"reading","section":"visual-fundamentals","also":[],"kind":"article","tags":["rules","checklist"],"best_for":"A plain list of visual design rules with brief explanations","how_to_use":"Use as a lint list for a finished screen","zh":"一份朴素但每次都可安全遵守的视觉设计规则清单，附简短解释；完稿后当检查表逐条过。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/hobday-safe-rules.webp","source":"screenshot","captured_at":"2026-09-27T09:44:24Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"laws-of-ux","name":"Laws of UX","name_zh":null,"url":"https://lawsofux.com","host":"lawsofux.com","domain":"reading","section":"visual-fundamentals","also":[],"kind":"guideline","tags":["psychology","heuristics"],"best_for":"The perception and cognition principles designers cite (Fitts, Hick, Jakob, Miller, proximity, peak-end...) with sources","how_to_use":"Match the scenario to a law, then cite its takeaways and origin; each law page lists sources","zh":"设计师常引用的感知与认知定律合集（Fitts、Hick、Jakob、Miller 等），附出处；给决策找依据时报定律名。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (every law, one line each)","url":"https://lawsofux.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/laws-of-ux.webp","source":"screenshot","captured_at":"2026-09-27T09:44:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"refactoring-ui","name":"Refactoring UI","name_zh":null,"url":"https://www.refactoringui.com","host":"refactoringui.com","domain":"reading","section":"visual-fundamentals","also":[],"kind":"book","tags":["ui","tactics"],"best_for":"Tactical UI design book for developers by the Tailwind authors","how_to_use":"Start with the free Medium article (entry point), then the chapters on hierarchy, spacing and colour; the single best purchase for an engineer who designs","zh":"Tailwind 作者写给开发者的 UI 设计战术书，付费；先读免费的“7 个作弊技巧”文章，再读层级、间距、配色章节。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Free article: 7 practical tips for cheating at design (Medium)","url":"https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886"}],"api":null,"caveats":["Medium blocks scripts (403) on the free article"],"agent_access":"static","thumb":{"src":"assets/thumbs/refactoring-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:47:00Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"learn-ui-7-rules","name":"7 Rules for Creating Gorgeous UI","name_zh":null,"url":"https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html","host":"learnui.design","domain":"reading","section":"visual-fundamentals","also":[],"kind":"article","tags":["ui","light","shadow"],"best_for":"Erik Kennedy's rules: light comes from the sky, black and white first, double your whitespace","how_to_use":"Run the seven rules (light from the sky, black and white first, double the whitespace, text over images…) as a quick pass on a finished screen","zh":"Erik Kennedy 的七条 UI 法则：光从天上来、先用黑白、留白翻倍；适合当自查清单。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/learn-ui-7-rules.webp","source":"screenshot","captured_at":"2026-09-27T09:47:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gestalt-ixdf","name":"Gestalt principles","name_zh":null,"url":"https://ixdf.org/literature/topics/gestalt-principles","host":"ixdf.org","domain":"reading","section":"visual-fundamentals","also":[],"kind":"article","tags":["gestalt","perception"],"best_for":"Overview of the grouping principles behind layout decisions","how_to_use":"Reference when explaining grouping choices","zh":"格式塔分组原则的入门综述；向人解释布局分组决策时引用它。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/gestalt-ixdf.webp","source":"screenshot","captured_at":"2026-09-27T10:28:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"rams-ten-principles","name":"Dieter Rams: ten principles for good design","name_zh":null,"url":"https://www.vitsoe.com/us/about/good-design","host":"vitsoe.com","domain":"reading","section":"visual-fundamentals","also":[],"kind":"article","tags":["principles"],"best_for":"The ten principles, from the source","how_to_use":"A yardstick for restraint","zh":"Dieter Rams 好设计十原则的原始出处；需要一把克制与功能的标尺时回来对照。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/rams-ten-principles.webp","source":"screenshot","captured_at":"2026-09-27T10:28:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webs-grain","name":"The Web's Grain","name_zh":null,"url":"https://frankchimero.com/blog/2015/the-webs-grain/","host":"frankchimero.com","domain":"reading","section":"visual-fundamentals","also":[],"kind":"article","tags":["web","medium"],"best_for":"Frank Chimero on designing with the nature of the web instead of against it","how_to_use":"Read when a layout fights the medium","zh":"Frank Chimero 谈顺着网页媒介的本性去设计，而不是对抗它；版式跟媒介较劲时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webs-grain.webp","source":"screenshot","captured_at":"2026-09-27T09:44:30Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"magic-ink","name":"Magic Ink","name_zh":null,"url":"https://worrydream.com/MagicInk/","host":"worrydream.com","domain":"reading","section":"visual-fundamentals","also":[],"kind":"article","tags":["information-software"],"best_for":"Bret Victor's argument that most software is information design, not interaction design","how_to_use":"Reframe dashboards and tools as graphics to be read","zh":"Bret Victor 的长文，主张多数软件本质是信息设计而非交互设计；做仪表盘时换成「被阅读的图形」视角。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/magic-ink.webp","source":"screenshot","captured_at":"2026-09-27T09:44:32Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"practical-ui","name":"Practical UI","name_zh":null,"url":"https://www.practical-ui.com","host":"practical-ui.com","domain":"reading","section":"visual-fundamentals","also":[],"kind":"book","tags":["rules","visual-design","figma"],"best_for":"Adham Dannaway's rule-based book and Figma kit for logical, accessible interface design","how_to_use":"Adopt its explicit rules (spacing, hierarchy, contrast) as a critique checklist","zh":"Adham Dannaway 基于规则的界面设计书与 Figma 套件，逻辑清晰、兼顾无障碍；把它的明确规则当评审清单，付费。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/practical-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:44:48Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"nng-heuristics","name":"NN/g: 10 usability heuristics","name_zh":null,"url":"https://www.nngroup.com/articles/ten-usability-heuristics/","host":"nngroup.com","domain":"reading","section":"ux-evidence","also":[],"kind":"article","tags":["heuristics","evaluation"],"best_for":"The standard heuristic-evaluation framework","how_to_use":"Tag critique findings with the heuristic violated","zh":"NN/g 的十大可用性启发式，启发式评估的标准框架；给评审发现打标签就按违犯的是哪条来。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nng-heuristics.webp","source":"screenshot","captured_at":"2026-09-27T09:47:33Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nng-articles","name":"Nielsen Norman Group articles","name_zh":null,"url":"https://www.nngroup.com/articles/","host":"nngroup.com","domain":"reading","section":"ux-evidence","also":[],"kind":"article","tags":["research","evidence"],"best_for":"Decades of research-based UX guidance","how_to_use":"Search before asserting a usability claim","zh":"Nielsen Norman Group 几十年来基于研究的 UX 文章库；要下任何可用性断言之前先来这里搜一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nng-articles.webp","source":"screenshot","captured_at":"2026-09-27T09:47:53Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"baymard","name":"Baymard Institute","name_zh":null,"url":"https://baymard.com/blog","host":"baymard.com","domain":"reading","section":"ux-evidence","also":[],"kind":"article","tags":["ecommerce","forms","research"],"best_for":"Large-scale e-commerce and form usability research; articles free, full database paid","how_to_use":"Check before designing checkout, search, filters or forms","zh":"电商与表单可用性的大样本研究机构；做结账、搜索、筛选或表单前查结论，文章免费、库付费。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"llms.txt (article index)","url":"https://baymard.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/baymard.webp","source":"screenshot","captured_at":"2026-09-27T09:44:41Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"nng-response-times","name":"NN/g: response time limits","name_zh":null,"url":"https://www.nngroup.com/articles/response-times-3-important-limits/","host":"nngroup.com","domain":"reading","section":"ux-evidence","also":[],"kind":"article","tags":["latency","feedback"],"best_for":"The 0.1 s, 1 s and 10 s limits that govern feedback design","how_to_use":"Cite for loading-state decisions","zh":"0.1 秒、1 秒、10 秒三条响应时限，决定反馈设计；做加载态与骨架屏决策时引用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nng-response-times.webp","source":"screenshot","captured_at":"2026-09-27T09:48:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"growth-design","name":"Growth.Design case studies","name_zh":null,"url":"https://growth.design/case-studies","host":"growth.design","domain":"reading","section":"ux-evidence","also":[],"kind":"article","tags":["case-study","psychology"],"best_for":"Product UX teardowns told as comics, tied to psychology principles","how_to_use":"Read the teardown of a comparable flow; agents append /markdown to any case-study URL for clean text","zh":"用漫画形式拆解产品 UX，逐条挂心理学原理；做某类流程前找对应案例读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Case study as Markdown (append /markdown)","url":"https://growth.design/case-studies/duolingo-user-retention/markdown"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/growth-design.webp","source":"screenshot","captured_at":"2026-09-27T09:44:35Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"lukew","name":"LukeW","name_zh":null,"url":"https://www.lukew.com/ff/","host":"lukew.com","domain":"reading","section":"ux-evidence","also":[],"kind":"article","tags":["forms","mobile","data"],"best_for":"Luke Wroblewski's notes on forms, mobile and input design with data","how_to_use":"Search for form-design evidence","zh":"Luke Wroblewski 的随笔站，表单、移动端与输入设计居多且带数据；给表单方案找证据时搜这里。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/lukew.webp","source":"screenshot","captured_at":"2026-09-27T09:44:37Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"govuk-design-principles","name":"GOV.UK design principles","name_zh":null,"url":"https://www.gov.uk/guidance/government-design-principles","host":"gov.uk","domain":"reading","section":"ux-evidence","also":[],"kind":"guideline","tags":["principles","service-design"],"best_for":"Ten principles for user-centred services","how_to_use":"Start with user needs; do the hard work to make it simple","zh":"英国政府的十条服务设计原则，'从用户需求出发''下功夫让它简单'都出自这里。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/govuk-design-principles.webp","source":"screenshot","captured_at":"2026-09-27T09:44:36Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ux-myths","name":"UX Myths","name_zh":null,"url":"https://uxmyths.com","host":"uxmyths.com","domain":"reading","section":"ux-evidence","also":[],"kind":"archive","tags":["myths","evidence"],"best_for":"Common UX misconceptions with research that refutes them","how_to_use":"Settle arguments such as the three-click rule","zh":"常见 UX 误解合集，每条附反驳的研究证据；争论三次点击规则之类时拿来定胜负。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/ux-myths.webp","source":"screenshot","captured_at":"2026-09-27T09:44:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"built-for-mars","name":"Built for Mars","name_zh":null,"url":"https://builtformars.com","host":"builtformars.com","domain":"reading","section":"ux-evidence","also":["web:conversion"],"kind":"article","tags":["case-studies","ux-audits","flows"],"best_for":"Peter Ramsey's step-by-step UX case studies of real products (onboarding, banking, checkout) plus 1,400+ UX examples","how_to_use":"Read the case study for the flow you are designing; feeds exist for case studies and UX Bites","zh":"逐步拆解真实产品的 UX 案例（注册引导、银行、结账），另有 1400+ 条 UX 小例；设计某个流程前读对应案例。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Case studies","url":"https://builtformars.com/case-studies"},{"label":"llms.txt","url":"https://builtformars.com/llms.txt"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/built-for-mars.webp","source":"screenshot","captured_at":"2026-09-27T09:44:43Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"measuringu","name":"MeasuringU","name_zh":null,"url":"https://measuringu.com","host":"measuringu.com","domain":"reading","section":"ux-evidence","also":[],"kind":"article","tags":["research","metrics","sus"],"best_for":"Quantitative UX research: benchmarks, SUS and sample sizes explained with data","how_to_use":"Use when a claim needs numbers rather than opinion (task time, SUS norms, how many users to test)","zh":"定量 UX 研究：基准、SUS 与样本量，用数据讲清楚；需要数字而不是观点时查。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Article pages sit behind a SiteGround bot check for scripts"],"agent_access":"static","thumb":{"src":"assets/thumbs/measuringu.webp","source":"screenshot","captured_at":"2026-09-27T09:44:45Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"nng-design-critiques","name":"NN/g: Design critiques","name_zh":null,"url":"https://www.nngroup.com/articles/design-critiques/","host":"nngroup.com","domain":"reading","section":"process-critique","also":[],"kind":"article","tags":["critique","process"],"best_for":"How to run and participate in useful critiques","how_to_use":"Structure for critique sessions","zh":"NN/g 讲如何组织和参与真正有用的设计评审；要给团队评审会立规矩时读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/nng-design-critiques.webp","source":"screenshot","captured_at":"2026-09-27T09:48:13Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"figma-design-critiques","name":"Design critiques at Figma","name_zh":null,"url":"https://www.figma.com/blog/design-critiques-at-figma/","host":"figma.com","domain":"reading","section":"process-critique","also":[],"kind":"article","tags":["critique","formats"],"best_for":"Several critique formats and when each works","how_to_use":"Pick a format for the feedback needed","zh":"Figma 介绍内部几种设计评审形式及各自适用场景；按想要的反馈类型挑一种来组织评审。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/figma-design-critiques.webp","source":"screenshot","captured_at":"2026-09-27T09:47:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"gv-critique-rules","name":"Nine rules for running productive design critiques","name_zh":null,"url":"https://library.gv.com/nine-rules-for-running-productive-design-critiques-f8320655fc8c","host":"library.gv.com","domain":"reading","section":"process-critique","also":[],"kind":"article","tags":["critique"],"best_for":"Jake Knapp's concise critique ground rules from GV: the designer owns the work, everyone else helps","how_to_use":"Share before a critique","zh":"GV 的 Jake Knapp 总结的设计评审九条规则：设计师是负责人，其他人是来帮忙的；开评审会前发给与会者对齐预期。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["library.gv.com (Medium) was unreachable from our probe network on 2026-09-27; confirm in a browser"],"agent_access":"unknown","thumb":null,"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"monteiro-presentations","name":"13 ways designers screw up client presentations","name_zh":null,"url":"https://medium.com/@monteiro/13-ways-designers-screw-up-client-presentations-51aaee11e28c","host":"medium.com","domain":"reading","section":"process-critique","also":[],"kind":"article","tags":["presenting","clients"],"best_for":"Mike Monteiro on presenting design work with authority","how_to_use":"Read before presenting options","zh":"Mike Monteiro 讲设计师向客户提案的 13 个翻车点；给客户讲方案之前读一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Medium blocks scripts (403)"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/monteiro-presentations.webp","source":"screenshot","captured_at":"2026-09-27T09:46:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"articulating-design-decisions","name":"Articulating Design Decisions","name_zh":null,"url":"https://tomgreever.com/articulating-design-decisions-book/","host":"tomgreever.com","domain":"reading","section":"process-critique","also":[],"kind":"book","tags":["stakeholders","communication"],"best_for":"Tom Greever's book on explaining and defending design decisions","how_to_use":"The method behind rationale sections","zh":"Tom Greever 讲如何向干系人解释与捍卫设计决策的书；写设计理由的方法论来源。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/articulating-design-decisions.webp","source":"screenshot","captured_at":"2026-09-27T09:44:45Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"shape-up","name":"Shape Up","name_zh":null,"url":"https://basecamp.com/shapeup","host":"basecamp.com","domain":"reading","section":"process-critique","also":[],"kind":"book","tags":["shaping","breadboard","fat-marker"],"best_for":"Basecamp's free book: shaping work, breadboarding and fat-marker sketches","how_to_use":"Use breadboards to settle flow before visuals","zh":"Basecamp 的免费书，讲 shaping、面包板图和粗马克笔草图；先定流程再画视觉时按它做。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/shape-up.webp","source":"screenshot","captured_at":"2026-09-27T09:44:47Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"dribbblisation","name":"The Dribbblisation of Design","name_zh":null,"url":"https://www.intercom.com/blog/the-dribbblisation-of-design/","host":"intercom.com","domain":"reading","section":"process-critique","also":[],"kind":"article","tags":["criticism","process"],"best_for":"The classic critique of surface-first design and the four layers of product design","how_to_use":"Antidote to styling before understanding","zh":"批评“表面先行”设计的经典文章，提出产品设计四层次；没搞懂就 styling 的解药。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"archived","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/dribbblisation.webp","source":"screenshot","captured_at":"2026-09-27T09:44:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"dont-make-me-think","name":"Don't Make Me Think","name_zh":null,"url":"https://sensible.com/dont-make-me-think/","host":"sensible.com","domain":"reading","section":"books","also":[],"kind":"book","tags":["usability"],"best_for":"Steve Krug's short classic on web usability","how_to_use":"First usability book to read","zh":"Steve Krug 的可用性小书，第一本该读的可用性经典；付费。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/dont-make-me-think.webp","source":"screenshot","captured_at":"2026-09-27T09:44:49Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"design-of-everyday-things","name":"The Design of Everyday Things","name_zh":null,"url":"https://www.hachettebookgroup.com/titles/don-norman/the-design-of-everyday-things/9780465050659/","host":"hachettebookgroup.com","domain":"reading","section":"books","also":[],"kind":"book","tags":["affordance","signifiers"],"best_for":"Don Norman on affordances, signifiers, mapping and feedback","how_to_use":"The vocabulary of interaction design","zh":"Don Norman 的设计经典，affordance、signifier、映射与反馈这套词汇的出处；做交互设计绕不开的一本，付费。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/design-of-everyday-things.webp","source":"screenshot","captured_at":"2026-09-27T09:44:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"grid-systems","name":"Grid Systems in Graphic Design","name_zh":null,"url":"https://niggli.ch/en/products/rastersysteme-fur-die-visuelle-gestaltung","host":"niggli.ch","domain":"reading","section":"books","also":[],"kind":"book","tags":["grid","swiss"],"best_for":"Mueller-Brockmann's definitive manual on grids","how_to_use":"Reference for poster, editorial and deck layout","zh":"Mueller-Brockmann 的网格系统圣经；做海报、编辑版式和幻灯片排版时的案头参照。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/grid-systems.webp","source":"screenshot","captured_at":"2026-09-27T09:44:59Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"elements-of-typographic-style","name":"The Elements of Typographic Style","name_zh":null,"url":"https://typographica.org/typography-books/the-elements-of-typographic-style-4th-edition/","host":"typographica.org","domain":"reading","section":"books","also":[],"kind":"book","tags":["typography"],"best_for":"Robert Bringhurst's reference on proportion, rhythm, spacing and the details of Latin typesetting (v4.0)","how_to_use":"Consult the chapters on rhythm and proportion (measure, leading) and on the page before inventing a rule; the link is Typographica's review, the book is in print from Hartley & Marks","zh":"Bringhurst 的排印经典（第 4 版），比例、节奏、间距与西文排版细节的出处；定规则前先查它，付费书。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/elements-of-typographic-style.webp","source":"screenshot","captured_at":"2026-09-27T09:44:55Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"interaction-of-color","name":"Interaction of Color","name_zh":null,"url":"https://yalebooks.yale.edu/book/9780300179354/interaction-of-color/","host":"yalebooks.yale.edu","domain":"reading","section":"books","also":[],"kind":"book","tags":["colour","perception"],"best_for":"Albers on how colours change each other","how_to_use":"Why a colour looks wrong in context","zh":"Albers 讲颜色如何互相改变的经典；某个颜色放进版面就变味时，答案在这里。付费书。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/interaction-of-color.webp","source":"screenshot","captured_at":"2026-09-27T09:45:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"designing-interface-animation","name":"Designing Interface Animation","name_zh":null,"url":"https://rosenfeldmedia.com/books/designing-interface-animation/","host":"rosenfeldmedia.com","domain":"reading","section":"books","also":[],"kind":"book","tags":["motion"],"best_for":"Val Head's book on purposeful UI animation","how_to_use":"Depth on motion in design systems","zh":"Val Head 讲有目的的界面动效的书，关于设计系统中动效的深度读物；付费。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Publisher site blocks scripts (403)"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/designing-interface-animation.webp","source":"screenshot","captured_at":"2026-09-27T09:45:12Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"microcopy-guide","name":"Microcopy: The Complete Guide","name_zh":null,"url":"https://www.microcopybook.com","host":"microcopybook.com","domain":"reading","section":"books","also":[],"kind":"book","tags":["ux-writing"],"best_for":"Kinneret Yifrah's guide to interface words","how_to_use":"Reference for error, empty-state and button copy","zh":"Kinneret Yifrah 写的界面文案指南；写报错提示、空状态和按钮文案时翻它准没错。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/microcopy-guide.webp","source":"screenshot","captured_at":"2026-09-27T09:45:06Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"form-design-patterns","name":"Form Design Patterns","name_zh":null,"url":"https://www.smashingmagazine.com/printed-books/form-design-patterns/","host":"smashingmagazine.com","domain":"reading","section":"books","also":["a11y:guidance-patterns"],"kind":"book","tags":["forms","a11y"],"best_for":"Adam Silver's inclusive form patterns","how_to_use":"Before designing any complex form","zh":"Adam Silver 的包容性表单设计模式书；动手设计任何复杂表单之前先读；付费。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/form-design-patterns.webp","source":"screenshot","captured_at":"2026-09-27T09:47:22Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"smart-interface-patterns","name":"Smart Interface Design Patterns","name_zh":null,"url":"https://smart-interface-design-patterns.com","host":"smart-interface-design-patterns.com","domain":"reading","section":"courses","also":[],"kind":"course","tags":["patterns","checklists"],"best_for":"Vitaly Friedman's video course and checklists on complex UI patterns","how_to_use":"Tables, filters, navigation, forms at depth","zh":"Vitaly Friedman 的复杂界面模式视频课与清单；表格、筛选、导航、表单往深挖时看。付费。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/smart-interface-patterns.webp","source":"screenshot","captured_at":"2026-09-27T09:44:58Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"learn-ui-design","name":"Learn UI Design","name_zh":null,"url":"https://www.learnui.design","host":"learnui.design","domain":"reading","section":"courses","also":[],"kind":"course","tags":["ui","visual"],"best_for":"Erik Kennedy's comprehensive visual UI course","how_to_use":"For engineers building real visual skill","zh":"Erik Kennedy 的系统化视觉 UI 课，覆盖面完整；工程师想练真视觉功夫的付费课程。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/learn-ui-design.webp","source":"screenshot","captured_at":"2026-09-27T09:47:43Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"shift-nudge","name":"Shift Nudge","name_zh":null,"url":"https://shiftnudge.com","host":"shiftnudge.com","domain":"reading","section":"courses","also":[],"kind":"course","tags":["ui","visual"],"best_for":"Matt D. Smith's interface design course","how_to_use":"Alternative with strong typography and layout modules","zh":"Matt D. Smith 的界面设计课程，字体与版面模块尤其扎实；系统补视觉功底的付费课。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/shift-nudge.webp","source":"screenshot","captured_at":"2026-09-27T09:45:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"css-for-js","name":"CSS for JavaScript Developers","name_zh":null,"url":"https://css-for-js.dev","host":"css-for-js.dev","domain":"reading","section":"courses","also":[],"kind":"course","tags":["css"],"best_for":"Josh Comeau's course that builds a real mental model of CSS","how_to_use":"When layout bugs block design fidelity","zh":"Josh Comeau 的 CSS 课，专为 JS 开发者建立真正的 CSS 心智模型；布局 bug 挡住设计还原度时报它，付费。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/css-for-js.webp","source":"screenshot","captured_at":"2026-09-27T09:45:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"webdev-learn-design","name":"web.dev: Learn Responsive Design","name_zh":null,"url":"https://web.dev/learn/design","host":"web.dev","domain":"reading","section":"courses","also":[],"kind":"course","tags":["responsive","free"],"best_for":"Free course on modern responsive design techniques","how_to_use":"Container queries, fluid type, theming","zh":"web.dev 的免费响应式设计课程：容器查询、流式字体、主题化；把设计落地前端前补一遍。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/webdev-learn-design.webp","source":"screenshot","captured_at":"2026-09-27T09:48:05Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"google-ux-certificate","name":"Google UX Design Certificate","name_zh":null,"url":"https://www.coursera.org/professional-certificates/google-ux-design","host":"coursera.org","domain":"reading","section":"courses","also":[],"kind":"course","tags":["ux","process"],"best_for":"Structured introduction to the UX process","how_to_use":"Process fundamentals for newcomers","zh":"Coursera 上的结构化 UX 流程入门课；很适合给新人系统打流程基础；付费。","zh_how":null,"access":"paid","login":true,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/google-ux-certificate.webp","source":"screenshot","captured_at":"2026-09-27T09:45:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"build-ui","name":"Build UI","name_zh":null,"url":"https://buildui.com","host":"buildui.com","domain":"reading","section":"courses","also":[],"kind":"course","tags":["react","animation","recipes"],"best_for":"Courses and recipes on building polished interactive UI in React and Motion","how_to_use":"Use /recipes as reference implementations for interaction details","zh":"用 React 与 Motion 构建精致交互界面的课程与配方；/recipes 可当交互细节的参考实现。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"Recipes","url":"https://buildui.com/recipes"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/build-ui.webp","source":"screenshot","captured_at":"2026-09-27T09:45:17Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"uisdc","name":"优设网","name_zh":null,"url":"https://www.uisdc.com","host":"uisdc.com","domain":"reading","section":"zh-reading","also":[],"kind":"article","tags":["china","tutorials","news"],"best_for":"The largest Chinese design learning site: tutorials, trend reports, tool news","how_to_use":"Search a topic in Chinese; quality varies by author","zh":"国内最大的设计学习站，教程、趋势报告、工具资讯都有；中文搜主题方便，质量随作者参差。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/uisdc.webp","source":"screenshot","captured_at":"2026-09-27T09:45:08Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tencent-isux","name":"腾讯 ISUX","name_zh":null,"url":"https://isux.tencent.com","host":"isux.tencent.com","domain":"reading","section":"zh-reading","also":[],"kind":"article","tags":["china","tencent","case-study"],"best_for":"Tencent's social UX team writes up real product and brand design cases","how_to_use":"Case studies of mass-market Chinese products","zh":"腾讯社交 UX 团队的博客，复盘真实产品与品牌设计案例；看国内大众产品的设计打法。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tencent-isux.webp","source":"screenshot","captured_at":"2026-09-27T10:28:09Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tencent-cdc","name":"腾讯 CDC","name_zh":null,"url":"https://cdc.tencent.com","host":"cdc.tencent.com","domain":"reading","section":"zh-reading","also":[],"kind":"article","tags":["china","tencent","research"],"best_for":"Tencent's customer research and design centre","how_to_use":"User-research and enterprise-product perspective","zh":"腾讯用户研究与体验设计中心的博客；看国内大厂如何做用研与企业级产品设计。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/tencent-cdc.webp","source":"screenshot","captured_at":"2026-09-27T09:45:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"alibaba-design","name":"阿里巴巴设计","name_zh":null,"url":"https://www.alibabadesign.com","host":"alibabadesign.com","domain":"reading","section":"zh-reading","also":[],"kind":"article","tags":["china","alibaba"],"best_for":"Alibaba Design's D20 summit site: talks and case write-ups from Alibaba's design teams","how_to_use":"Use the talks for commerce and enterprise design at scale; Alibaba Design's free 3D and AI assets live on 堆友 (d.design)","zh":"阿里巴巴设计 D20 峰会站，收录各设计团队的分享与案例；看超大业务量下的电商与企业级设计方法。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["JavaScript app; the old team-blog content is no longer the front page"],"agent_access":"js","thumb":{"src":"assets/thumbs/alibaba-design.webp","source":"screenshot","captured_at":"2026-09-27T09:45:14Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ant-design-yuque","name":"Ant Design 语雀专栏","name_zh":null,"url":"https://www.yuque.com/ant-design","host":"yuque.com","domain":"reading","section":"zh-reading","also":[],"kind":"article","tags":["china","enterprise","design-system"],"best_for":"Long-form writing from the Ant Design team on enterprise product design","how_to_use":"Depth behind Ant Design's patterns","zh":"Ant Design 团队关于企业级产品设计的长文专栏；想理解 Ant 模式背后的深度读这里。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/ant-design-yuque.webp","source":"screenshot","captured_at":"2026-09-27T09:45:15Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sspai","name":"少数派","name_zh":null,"url":"https://sspai.com","host":"sspai.com","domain":"reading","section":"zh-reading","also":[],"kind":"article","tags":["china","apps","reviews"],"best_for":"Chinese publication on apps, tools and digital craft","how_to_use":"App reviews reveal what Chinese power users value","zh":"中文应用、工具与数字生活媒体；从应用评测看国内重度用户在意什么。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sspai.webp","source":"screenshot","captured_at":"2026-09-27T09:45:16Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uxren","name":"UXRen","name_zh":null,"url":"https://www.uxren.cn","host":"uxren.cn","domain":"reading","section":"zh-reading","also":[],"kind":"community","tags":["china","ux","translations"],"best_for":"Chinese UX community with translations of international articles","how_to_use":"Find Chinese translations of canonical articles","zh":"中文 UX 社区，译介国外经典文章较多；找某篇国外 UX 名篇的中译版时先来搜。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/uxren.webp","source":"screenshot","captured_at":"2026-09-27T09:45:34Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"woshipm","name":"Woshipm (人人都是产品经理)","name_zh":"人人都是产品经理","url":"https://www.woshipm.com","host":"woshipm.com","domain":"reading","section":"zh-reading","also":[],"kind":"article","tags":["china","product","ux"],"best_for":"The largest Chinese product-management community, with many UX, interaction and industry teardown articles","how_to_use":"Search Chinese product patterns and teardowns; the 产品设计 channel (/category/pd) is the most relevant; quality varies","zh":"人人都是产品经理：国内最大的产品经理社区，有大量交互、体验与行业拆解文章；看“产品设计”频道，质量参差。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"产品设计 channel","url":"https://www.woshipm.com/category/pd"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/woshipm.webp","source":"screenshot","captured_at":"2026-09-27T09:45:17Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"juejin","name":"Juejin (稀土掘金)","name_zh":"稀土掘金","url":"https://juejin.cn","host":"juejin.cn","domain":"reading","section":"zh-reading","also":[],"kind":"community","tags":["china","front-end","design-engineering"],"best_for":"The largest Chinese developer community; its front-end channel covers CSS, animation, component libraries and design-to-code practice","how_to_use":"Search in Chinese for how domestic teams implement a pattern (Taro, mini-programs, ECharts); quality varies by author","zh":"稀土掘金：国内最大的开发者社区，前端频道覆盖 CSS、动效、组件库与设计还原实践；中文搜国内团队的实现方式，质量随作者参差。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[{"label":"Front-end channel","url":"https://juejin.cn/frontend"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/juejin.webp","source":"screenshot","captured_at":"2026-09-27T09:45:21Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"dribbble","name":"Dribbble","name_zh":null,"url":"https://dribbble.com","host":"dribbble.com","domain":"general","section":"communities","also":[],"kind":"community","tags":["shots","concept"],"best_for":"Designer community of shots; strong for visual styling ideas","how_to_use":"Use for visual treatment ideas only; verify against real products","zh":"设计师晒 shots 的社区，视觉样式强、真实感弱；只取视觉处理灵感，拿真产品验证。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Concept shots ignore real content, states and accessibility","Plain fetches get an empty 202 shell"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/dribbble.webp","source":"screenshot","captured_at":"2026-09-27T10:27:23Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"behance","name":"Behance","name_zh":null,"url":"https://www.behance.net","host":"behance.net","domain":"general","section":"communities","also":[],"kind":"community","tags":["case-study","branding","illustration"],"best_for":"Full project case studies across branding, illustration, UI and motion","how_to_use":"Search by field and tool; read the process, not just the cover","zh":"全领域设计案例社区，品牌、插画、UI、动效都有完整项目；按领域与工具搜，看过程别只看封面。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Blocks scripts (403) as of 2026-09-27"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/behance.webp","source":"screenshot","captured_at":"2026-09-27T09:45:31Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"layers","name":"Layers","name_zh":null,"url":"https://layers.to","host":"layers.to","domain":"general","section":"communities","also":[],"kind":"community","tags":["ui","designers"],"best_for":"Smaller, higher-signal community for product designers","how_to_use":"Find working designers' real projects","zh":"规模较小、信噪比高的产品设计师社区，能看到在职设计师的真实项目而非作品集包装。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/layers.webp","source":"screenshot","captured_at":"2026-09-27T09:45:35Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"figma-community","name":"Figma Community","name_zh":null,"url":"https://www.figma.com/community","host":"figma.com","domain":"general","section":"communities","also":["general:zh-communities"],"kind":"community","tags":["files","plugins","ui-kits"],"best_for":"Shared design files, UI kits and plugins, including many Chinese design-system kits","how_to_use":"Inspect how a system is constructed, not just how it looks","zh":"Figma 社区的文件、UI kit 与插件库，含大量中文设计系统套件；看系统怎么搭而非只看外表；许可逐文件定。","zh_how":null,"access":"free","login":false,"license":"Licence per file","tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/figma-community.webp","source":"screenshot","captured_at":"2026-09-27T09:48:11Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"artstation","name":"ArtStation","name_zh":null,"url":"https://www.artstation.com","host":"artstation.com","domain":"general","section":"communities","also":[],"kind":"community","tags":["illustration","3d","concept-art","game-art"],"best_for":"The main portfolio community for illustration, concept art, 3D and game art; strong for art direction outside UI","how_to_use":"Search by medium and subject for illustration and 3D styles; credit artists and never lift work","zh":"插画、概念设计、3D 与游戏美术的主力作品集社区；找 UI 之外的美术风格参考，引用要署名，绝不挪用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["Cloudflare challenge for scripts (403, 2026-09-27)","Artwork is the artists' copyright; many opt out of AI training with the NoAI tag"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/artstation.webp","source":"screenshot","captured_at":"2026-09-27T09:45:57Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"are-na","name":"Are.na","name_zh":null,"url":"https://www.are.na","host":"are.na","domain":"general","section":"moodboards","also":[],"kind":"community","tags":["research","channels"],"best_for":"Designer-run research boards with unusually thoughtful curation","how_to_use":"Search channels for a concept and follow the people who built good ones; agents query the public search API for channels and blocks","zh":"设计师经营的研究图板社区，策展异常用心；按频道搜概念，来源常在设计圈之外。","zh_how":"按概念搜频道，顺着好频道找到策展的人；智能体调公开搜索 API（/v2/search/channels?q=）拿频道与内容块。","access":"freemium","login":false,"license":null,"tier":"S","status":"active","lang":"en","region":"global","entry_points":[{"label":"API v3 (OpenAPI)","url":"https://api.are.na/v3/openapi.json"},{"label":"llms.txt","url":"https://www.are.na/llms.txt"}],"api":{"url":"https://api.are.na/v2/search/channels?q={query}","sample":"https://api.are.na/v2/search/channels?q=editorial+design"},"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/are-na.webp","source":"screenshot","captured_at":"2026-09-27T09:45:29Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pinterest","name":"Pinterest","name_zh":null,"url":"https://www.pinterest.com","host":"pinterest.com","domain":"general","section":"moodboards","also":[],"kind":"community","tags":["moodboard","visual-search"],"best_for":"Visual search engine for moodboarding across every discipline","how_to_use":"Use visual search on a reference image to find relatives","zh":"跨全学科的视觉搜索引擎，情绪板主力；拿参考图做以图搜图找同类。","zh_how":null,"access":"free","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/pinterest.webp","source":"screenshot","captured_at":"2026-09-27T09:45:54Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"cosmos","name":"Cosmos","name_zh":null,"url":"https://www.cosmos.so","host":"cosmos.so","domain":"general","section":"moodboards","also":[],"kind":"community","tags":["moodboard","curation"],"best_for":"Ad-free visual bookmarking for creatives with strong aesthetic curation","how_to_use":"Follow clusters for art-direction references","zh":"无广告的视觉收藏夹社区，策展审美在线；建情绪板、找艺术指导参考时关注合辑。","zh_how":null,"access":"freemium","login":true,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/cosmos.webp","source":"screenshot","captured_at":"2026-09-27T09:45:42Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"savee","name":"Savee","name_zh":null,"url":"https://savee.com","host":"savee.com","domain":"general","section":"moodboards","also":[],"kind":"community","tags":["moodboard"],"best_for":"Bookmarking feed used by graphic and art directors","how_to_use":"Collect art-direction references into boards; members can connect the read-only MCP so an agent searches their saves and the public library","zh":"平面设计师与美术指导爱用的图片收藏流；做情绪板时找宽泛的 art direction 灵感。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[{"label":"MCP install guide","url":"https://docs.savee.com/mcp/install"}],"api":null,"caveats":["The MCP and REST API act for a signed-in member (free tier exists) and are read-only"],"agent_access":"static","thumb":{"src":"assets/thumbs/savee.webp","source":"screenshot","captured_at":"2026-09-27T09:45:44Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"same-energy","name":"Same Energy","name_zh":null,"url":"https://same.energy","host":"same.energy","domain":"general","section":"moodboards","also":[],"kind":"tool","tags":["visual-search"],"best_for":"Visual search engine that finds images with the same feel","how_to_use":"Start with one image, explore its neighbours","zh":"以图搜图的视觉搜索引擎，专找「感觉一样」的图；拼情绪版时从一张图出发逛它的邻居。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/same-energy.webp","source":"screenshot","captured_at":"2026-09-27T10:27:20Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"designspiration","name":"Designspiration","name_zh":null,"url":"https://www.designspiration.com","host":"designspiration.com","domain":"general","section":"moodboards","also":[],"kind":"community","tags":["search-by-colour"],"best_for":"Inspiration search by keyword and colour","how_to_use":"Find references matching a palette","zh":"按关键词和颜色搜灵感图的网站，给情绪板找与色板匹配的参考图时用。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"slow","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/designspiration.webp","source":"screenshot","captured_at":"2026-09-27T09:45:40Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"eagle","name":"Eagle","name_zh":null,"url":"https://eagle.cool","host":"eagle.cool","domain":"general","section":"moodboards","also":[],"kind":"tool","tags":["asset-manager","local"],"best_for":"Local asset manager for collecting and tagging references","how_to_use":"Personal reference library","zh":"本地素材管理器，收集参考图并打标签管理；建个人灵感库用；付费。","zh_how":null,"access":"paid","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/eagle.webp","source":"screenshot","captured_at":"2026-09-27T09:45:50Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"pureref","name":"PureRef","name_zh":null,"url":"https://www.pureref.com","host":"pureref.com","domain":"general","section":"moodboards","also":[],"kind":"tool","tags":["reference-board"],"best_for":"Lightweight reference-board app","how_to_use":"Keep references visible while working","zh":"轻量的参考图板应用；干活时把参考图一直钉在屏幕旁边看。","zh_how":null,"access":"freemium","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/pureref.webp","source":"screenshot","captured_at":"2026-09-27T09:45:52Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"sidebar","name":"Sidebar","name_zh":null,"url":"https://sidebar.io","host":"sidebar.io","domain":"general","section":"feeds","also":[],"kind":"newsletter","tags":["links","daily"],"best_for":"Five hand-picked design links a day: a low-noise daily reading feed","how_to_use":"Subscribe by email or RSS and skim daily; save what matters, ignore the rest","zh":"每天只推五条精选设计链接的订阅源；低噪音的日常设计阅读。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/sidebar.webp","source":"screenshot","captured_at":"2026-09-27T09:45:51Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"dense-discovery","name":"Dense Discovery","name_zh":null,"url":"https://www.densediscovery.com","host":"densediscovery.com","domain":"general","section":"feeds","also":[],"kind":"newsletter","tags":["newsletter","culture"],"best_for":"Thoughtful weekly newsletter across design, tech and culture","how_to_use":"Breadth beyond the UI bubble","zh":"每周一期的精选 newsletter，横跨设计、科技与文化；用来跳出 UI 圈子换换脑子。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":["SiteGround bot check blocks scripts"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/dense-discovery.webp","source":"screenshot","captured_at":"2026-09-27T09:45:57Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"tldr-design","name":"TLDR Design","name_zh":null,"url":"https://tldr.tech/design","host":"tldr.tech","domain":"general","section":"feeds","also":[],"kind":"newsletter","tags":["newsletter","news"],"best_for":"Daily design and tooling news digest","how_to_use":"Skim the daily email or /design/archives for tool releases and product updates","zh":"每日设计与工具新闻摘要邮件，跟新工具发布和行业动态用的轻量信息源。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/tldr-design.webp","source":"screenshot","captured_at":"2026-09-27T09:45:58Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"muzli","name":"Muzli","name_zh":null,"url":"https://muz.li","host":"muz.li","domain":"general","section":"feeds","also":[],"kind":"newsletter","tags":["aggregator"],"best_for":"Aggregated inspiration feed","how_to_use":"Install the browser extension for a new-tab feed, or browse /inspiration/ collections; high volume, mixed quality","zh":"聚合式的设计灵感订阅流；量大质杂，只适合当日常背景输入。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"en","region":"global","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/muzli.webp","source":"screenshot","captured_at":"2026-09-27T09:46:07Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"design-compass","name":"Design Compass (디자인 나침반)","name_zh":null,"url":"https://designcompass.org","host":"designcompass.org","domain":"general","section":"feeds","also":[],"kind":"article","tags":["korea","news","design-systems"],"best_for":"Korean design news covering local design systems, rebrands and tools","how_to_use":"Follow for the Korean design scene (KRDS, Toss, Kakao); an English edition lives at /en/","zh":"韩国设计资讯（디자인 나침반），关注本地设计系统、品牌升级与工具；了解韩国设计动态（KRDS、Toss、Kakao），有英文版。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"ko","region":"kr","entry_points":[{"label":"English edition","url":"https://designcompass.org/en/"}],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/design-compass.webp","source":"screenshot","captured_at":"2026-09-27T09:46:04Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"zcool","name":"站酷 ZCOOL","name_zh":null,"url":"https://www.zcool.com.cn","host":"zcool.com.cn","domain":"general","section":"zh-communities","also":[],"kind":"community","tags":["china","portfolio"],"best_for":"The largest Chinese designer community across every discipline","how_to_use":"Search in Chinese by category; the domestic equivalent of Behance","zh":"国内最大的设计师社区，覆盖各设计门类；按分类中文检索，地位相当于本土版 Behance。","zh_how":null,"access":"free","login":false,"license":null,"tier":"S","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/zcool.webp","source":"screenshot","captured_at":"2026-09-27T09:46:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"huaban","name":"花瓣","name_zh":null,"url":"https://huaban.com","host":"huaban.com","domain":"general","section":"zh-communities","also":[],"kind":"community","tags":["china","moodboard"],"best_for":"Chinese Pinterest-style image collecting","how_to_use":"Moodboards with Chinese-market references","zh":"国内的 Pinterest 式图片收藏社区，画板即情绪板；找中国市场的视觉参考时用。","zh_how":null,"access":"free","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"blocked","thumb":{"src":"assets/thumbs/huaban.webp","source":"screenshot","captured_at":"2026-09-27T09:46:10Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"ui-cn","name":"UI中国","name_zh":null,"url":"https://www.ui.cn","host":"ui.cn","domain":"general","section":"zh-communities","also":[],"kind":"community","tags":["china","ui"],"best_for":"Chinese UI designer community: app and web UI portfolios, UI kits and job posts","how_to_use":"Search by category for domestic app and web UI work; check dates, many kits are old","zh":"国内 UI 设计师社区，作品与招聘信息集中；了解本土 UI 风向和同行作品集的地方。","zh_how":null,"access":"free","login":false,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Blocks scripts (403) and times out from outside mainland China"],"agent_access":"unknown","thumb":null,"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"uisdc-nav","name":"优设导航","name_zh":null,"url":"https://hao.uisdc.com","host":"hao.uisdc.com","domain":"general","section":"zh-communities","also":[],"kind":"archive","tags":["china","directory"],"best_for":"The most complete Chinese design-site directory; contains promoted links","how_to_use":"Locate Chinese tools and asset sites","zh":"国内最全的设计网站导航，找中文工具与素材站从这入手；注意其中含推广链接。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/uisdc-nav.webp","source":"screenshot","captured_at":"2026-09-27T09:46:03Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"jsdesign-community","name":"即时设计资源广场","name_zh":null,"url":"https://js.design/community","host":"js.design","domain":"general","section":"zh-communities","also":[],"kind":"community","tags":["china","files","ui-kits"],"best_for":"Chinese design tool with a large shared-resource community","how_to_use":"Domestic UI kits for Ant Design, TDesign, HarmonyOS","zh":"即时设计国内的资源共享社区；找 Ant Design、TDesign、HarmonyOS 的国产 UI kit；授权以各文件为准。","zh_how":null,"access":"free","login":true,"license":"Licence per file","tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"js","thumb":{"src":"assets/thumbs/jsdesign-community.webp","source":"screenshot","captured_at":"2026-09-27T09:47:02Z"},"added":"2026-09-21","checked_at":"2026-09-27"},{"id":"figma-cool","name":"Figma.Cool (Figma 中文社区)","name_zh":"Figma 中文社区","url":"https://www.figma.cool","host":"figma.cool","domain":"general","section":"zh-communities","also":[],"kind":"community","tags":["china","figma","plugins","localisation"],"best_for":"Chinese Figma community with localisation, plugin and component-kit guides","how_to_use":"Use to find Chinese-language Figma resources, plugins and localisation help for domestic teams","zh":"Figma 中文社区，提供汉化、插件与组件库教程；给国内团队找中文 Figma 资源与汉化帮助。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":[],"agent_access":"static","thumb":{"src":"assets/thumbs/figma-cool.webp","source":"screenshot","captured_at":"2026-09-27T10:27:23Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"ai-bot-cn","name":"AI Tools Directory (AI工具集)","name_zh":"AI工具集","url":"https://ai-bot.cn","host":"ai-bot.cn","domain":"general","section":"zh-communities","also":["ai:ai-design-tools"],"kind":"archive","tags":["china","ai-tools","directory"],"best_for":"Large Chinese directory of 1,000+ AI tools, including domestic design, image and video generators","how_to_use":"Use to discover current domestic AI design tools; verify each tool before recommending it","zh":"AI 工具集：收录 1000+ 工具的中文 AI 导航，含国产设计、图像与视频生成工具；用来发现新工具，推荐前逐个核实。","zh_how":null,"access":"free","login":false,"license":null,"tier":"B","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Contains promoted listings"],"agent_access":"static","thumb":{"src":"assets/thumbs/ai-bot-cn.webp","source":"screenshot","captured_at":"2026-09-27T09:46:11Z"},"added":"2026-09-27","checked_at":"2026-09-27"},{"id":"xiaohongshu","name":"Xiaohongshu (小红书)","name_zh":"小红书","url":"https://www.xiaohongshu.com","host":"xiaohongshu.com","domain":"general","section":"zh-communities","also":[],"kind":"community","tags":["china","trends","social","moodboards"],"best_for":"The lifestyle platform where Chinese designers and brands post moodboards, case notes and visual trends","how_to_use":"Search design keywords in Chinese (海报排版, 品牌升级, UI 灵感) to see what the domestic audience responds to right now","zh":"国内设计师与品牌晒灵感板、案例笔记和视觉趋势的主阵地；用中文关键词搜，看国内受众当下买账的风格。","zh_how":"搜“海报排版”“品牌升级”“UI 灵感”等关键词，按最热与最新各看一轮；把它当趋势信号，不当质量标准。","access":"free","login":true,"license":null,"tier":"A","status":"active","lang":"zh","region":"cn","entry_points":[],"api":null,"caveats":["Redirects to a login wall: not agent-readable","Engagement-ranked feed: a trend signal, not a quality filter"],"agent_access":"blocked","thumb":{"src":"assets/thumbs/xiaohongshu.webp","source":"screenshot","captured_at":"2026-09-27T09:46:10Z"},"added":"2026-09-27","checked_at":"2026-09-27"}]}