UI 中英文字体精选包
中文与英文分开精选，附来源与使用建议。
资源
从找参考，到做出网页。设计灵感
Mobbin真实产品界面，完整流程，参考落地性强
Minimal Gallery精选优质网站合集
Land-book落地页参考库，可按多维度筛选
Recent Design最新设计灵感收录
Pinterest搜集视觉灵感，并收进画板
Refero Styles各个品牌的Design.md
MotionSites AI网页效果，附AI 提示词Screenshots Club应用商店截图与卖点文案参考
Collect UI按页面类型归类的界面合集
Game UI Database游戏界面截图库，按游戏和类型筛
Interface In Game游戏界面截图加演示视频
Godly前沿设计+APP/网站参考+设计资源+logo等综合性网站
Awwwards网页设计奖项与灵感平台
Dark Mode Design深色模式网站参考查看全部 60展示与包装
Ultramock上传界面截图，调整 3D 设备、灯光与镜头，制作展示图和动画。
Shots为截图添加设备外框、背景与动效，制作分享图和视频。
Mockuuups Studio将设计稿放入设备、实拍与印刷场景，快速生成样机展示图。
LS Graphics下载或在线编辑设备、包装与品牌样机，制作提案和作品集。Skill与提示词
UI Skills查找界面设计、动效与前端实现相关的 Agent 技能。
YouMind 提示词库浏览图像、视频和网页案例，复制提示词并改成自己的版本。
GetLayers挑选网页模板与交互动效，复制提示词交给 AI 生成并改成自己的页面。
Jiro挑选完整落地页与页面区块，复制提示词交给 AI 建站工具继续修改。
腾讯 SkillHub用中文查找国内外 Skills，获取介绍与安装入口。
PromptHero从生成效果寻找灵感，查看对应的提示词与模型信息。
Promptsref · GPT Image对照 GPT Image 效果图与完整提示词，改写生成自己的图像。
Midlibrary · SREF浏览 Midjourney 风格样张，复制 SREF 参考码探索图像风格。
SrefHuntMidjourney 风格代码（sref）
Skill Issue按设计、开发、动效等用途浏览 Agent 技能，参考热度并复制安装命令。
SkillsMP按用途、语言和更新时间筛选 Skills，查看对应源码。
Skillstore按 PPT、表格、写作和设计等任务，查找可组合使用的技能包。
prompts.chat查找写作、学习、设计等场景的社区提示词。查看全部 14字体
精选网站
Google Fonts按语言与风格查找网页可用的字体。
Fonts In Use从真实作品中学习字体选择与排版。
Typewolf参考真实网站的字体与排版搭配。
Fontshare挑选字体家族，寻找标题与正文的搭配。
Fontjoy尝试标题与正文字体的搭配。
Fontsource为项目安装并自行托管字体。
Type Department挑选独立设计师的原创字体，参考字形与实际应用。
Mixfont从文字描述或参考图片生成字体，探索标题与品牌字形。
Free Faces按字形风格浏览免费字体，寻找标题与排版灵感。
猫啃网查找免费中文字体，按风格、字重和授权类型筛选。
字由配合客户端挑选字体，在设计软件中快速换字。
识字体上传中文文字截图，识别字体并查找相似字形。
汉仪字库参考中文字体样本，挑选标题、书法与正文风格。
Font In Logo查知名品牌 Logo 用的是什么字体，还能找到免费替代。AI工具
Codex与编程 Agent 协作实现功能、修改代码并检查运行结果。
Claude Code在项目代码中协作实现功能、定位问题并迭代应用。
WorkBuddy让办公 Agent 协作整理文件、处理数据与完成日常任务。
Muse让个人 AI 助手协作安排日程、查找资料并持续跟进任务。
Manus把调研、文档、演示和网页制作交给 AI Agent 协作完成。
Cursor在代码编辑器中用 AI 编写、理解和修改项目。
TRAE用中文描述开发任务，与 AI 协作编写和调试项目。
扣子编程用中文描述需求，搭建网页应用、小程序与智能体。
Lovable用对话搭建网页应用，逐步完善界面、数据与功能。
Midjourney从文字或参考图生成图像，探索构图、风格与视觉方向。
Lovart在画布中与设计 Agent 协作，生成并调整成套视觉素材。
Google Flow在同一个创意工作区生成、编辑图片与视频，继续打磨镜头。
可灵AI用文字、图片与参考素材生成视频，继续调整动作和镜头。
腾讯混元3D从文字或图片生成 3D 模型，制作可导出的立体资产。查看全部 35
图标
极简通用Icon包
四种界面图标样式，选好后直接交给 Agent。
精选网站
Lucide一套免费干净百搭的线性图标（1800+）
HeroiconsTailwind 官方团队制作的免费图标
Iconify一站免费搜遍所有图标库
Phosphor Icons一套免费图标（9000+），可调整粗细和线面风格
Tabler Icons一套免费图标（5000+），线性+面性，可调粗细
Feather一套极简线性图标（280+）
SVG Repo五十万免费 SVG 素材
Font Awesome老牌图标库，品牌图标全查看全部 22设计系统和组件
21st.dev浏览 React 组件与页面区块，复制代码或提示词接入项目。
shadcn/ui复制可定制的组件与页面区块，搭建自己的 React 界面。
Arc UI复用带动效的 React 组件与页面区块，搭建细腻的产品界面。
Kobra给表单和 AI 对话界面补上细腻交互。
Beautiful UI参考 AI 产品的思考、对话与任务状态组件。
affectUI复用 AI 对话、Agent 任务与完整应用界面，搭建自己的 React 产品。
AlignUI Pro复用 React 产品界面组件与页面区块，搭建风格统一的应用。
BoardUI使用数据表格、图表与应用区块，搭建仪表盘和 Agent 产品界面。
EvilCharts复用带动画与交互的 React 图表，为数据界面补充细腻的视觉表现。
HeroUI使用带默认样式的 React 组件，搭建网页并定制主题。
Mantine使用 React 组件与 Hooks，搭建表单、导航和应用界面。
Semi Design使用 React 组件、设计资源与主题工具，搭建风格统一的产品界面。
TDesign使用腾讯的多端组件与设计资源，搭建网页、移动端和小程序界面。
Ant Design参考企业级设计规范与 React 组件，搭建表单、表格和管理界面。
AstryxMeta 开源设计系统，提供可定制的 React 组件、主题与 AI 工作流。
Base UI使用无预设样式的 React 组件，自定义按钮、菜单和弹窗。
Radix UI组合主题组件与无样式交互组件，搭建可定制的 React 界面。
Fancy Components复用 React 文字、图片与交互动效组件，为页面添加细节。
beUI复用 React 动效组件，为按钮、弹窗和界面交互添加细节。
Rare UI参考可复用的 React 交互组件，为界面加入细腻的动态反馈。
Cursify为 React 网页添加鼠标跟随、粒子拖尾与聚光灯效果。
Framer University查找可复制到 Framer 的组件、交互动效与网站示例。
Component Gallery对照不同设计系统的组件实例，查找交互模式与设计规范。
Vibe UI Design Guide参考 UI Kit、设计规范与提示词，梳理 AI 设计到开发的流程。
Impeccable Slop通过界面反例检查字体、配色、布局等常见 AI 设计问题。
UI Design Course通过文字课程与交互示例，学习字体、间距、布局和配色基础。查看全部 28配色
Color Hunt按风格与主题浏览精选配色，寻找颜色搭配灵感。
Coolors生成配色、锁定主色继续搭配，或从图片提取颜色。
中国色查找中国传统色名与色值，参考东方色彩。
Realtime Colors在网页中预览文字、背景和按钮的配色效果。
OKLCH.fyi用 OKLCH 调整颜色、转换色值并生成配色。查看全部 16动效
60fps观看真实 App 和网页的动效案例，参考转场、手势与交互反馈。
Canvas UI为网页加入粒子、液态、玻璃与图像变形等可调视觉效果。
React Bits复用 React 动画组件，为页面加入动态文字、交互背景与鼠标效果。
OriginKit浏览并复用背景、文字和鼠标交互等网页动效组件。
Motion Primitives复制可定制的界面动画组件，制作文字变化与界面过渡。
Amicro复用 React 与 Motion 微交互组件，为按钮、卡片和加载状态添加动效。
Kinetics预览弹性动效，复制 CSS、React 示例或 AI 提示词到自己的界面。
Bencho体验并调整可交互的界面区块，复用菜单、切换与拖拽等交互细节。
transitions.dev预览并复用网页界面过渡，直接复制代码或交给编程 Agent 接入。
Magic UI为 React 页面选择带动效的文字、背景和展示组件，搭建产品落地页。
Aceternity UI复用 React 与 Tailwind 动效组件，制作卡片、背景与产品落地页。
Kokonut UI复用 React、Tailwind CSS 与 Motion 组件，制作按钮、卡片和文字动效。
PlanesReact 动效组件库，提供卡片、轮播、AI 界面和 WebGL 背景；含免费组件，完整库需付费。
Swishy用文字描述生成动效，制作动态文字、图形与产品展示动画。
Opus 动效案例库收集用 AI 编程制作的动画与交互案例，提供效果预览、复刻对比和提示词。
Launch Videos看真实产品的发布视频，参考产品演示和宣传片怎么拍。
Prompt Motion浏览 AI 动效视频，参考对应的提示词与 Skills，改成自己的项目。
Motion会跟着鼠标动的网页模块，复制提示词交给 Agent 就能做出来。
animos把设计图片放入动效模板，调整排布与节奏，制作作品展示动画。
Brik探索可调整的文字、图形与 3D 动效工具，生成并导出视觉素材。
Unicorn Studio在可视化画布中组合视觉特效、3D 与交互动效，并嵌入网页。
Shaders在网页编辑器里调出流动渐变、玻璃和光影效果，用作网站背景。
Scroll Shaders挑选渐变、颗粒、液态金属和玻璃等动态背景，复制代码或下载视频使用。
Rive制作可响应点击与状态变化的交互动画，并用于网页、应用和游戏。
Spline在浏览器中搭建 3D 场景，添加材质、动画与交互并发布到网页。查看全部 26