浏览器收藏

共 32 个资源，按主题整理。

UI 组件

Componentry Annotated Text在行内文字周围绘制圆圈、高亮、下划线和删除线等手绘标注的 React 组件。componentry.dev2026-10-14shadcn/ui可直接修改源码的 UI 组件与页面区块，适合搭建自己的组件库和设计系统。ui.shadcn.com2026-10-12Base UI无预设样式的 React 组件，提供交互行为与可访问性基础，可搭配自己的样式构建设计系统。base-ui.com2026-10-12Rare UI开源 React 动效组件集，可预览效果，并通过 shadcn CLI 安装后修改源码。rareui.comObsidianUI基于 React、Motion 与 Tailwind CSS 的交互组件，可预览效果并查看源码。obsidianui.dev2026-09-15Beautiful UI面向 AI 界面的组件参考，覆盖聊天、思考状态与人工确认等场景。beautifului.dev2026-08-12

UI 资源

Kombai Selects精选界面与动效案例，汇集 X、Dribbble、Behance 和实际产品的设计参考。kombai.comMCP 连接状态卡片Michal Muller 为 Figgle 设计的 MCP 服务连接卡片，参考连接、加载与成功状态的呈现。dribbble.comtayo.开发者个人作品集，作为个人网站与作品展示的设计参考。tayoszn.vercel.app2026-09-21MotionSites可复制的网站设计提示，适合寻找首屏、3D 视觉与 AI 建站的起稿方向。motionsites.ai2026-09-18Tailwind CSS TypographyMarkdown 正文排版的样式预览，查看标题、列表、表格和引用的实际效果。tailwindcss-typography.vercel.app2026-07-12中国传统配色浏览传统色色卡、复制色值与查找配色关系，适合界面和视觉设计选色。colors.xiaoxiaodong.ai2026-06-10

图标与字体

Streamline内部设计团队绘制的大型图标库，覆盖 35 个图标家族，可下载或复制 SVG / PNG。streamlinehq.com2026-10-12Tabler Icons6000+ 个免费开源 SVG 图标，可调尺寸、颜色和描边，支持 React、Vue 与 Figma。tabler.io2026-10-12HeroiconsTailwind CSS 团队手工绘制的 SVG 图标集。heroicons.com2026-10-12Lucide Animated基于 Lucide 与 Motion 的开源动画 React 图标，350+ 个，可直接复制使用。lucide-animated.com2026-10-12Lordicon48000+ 个免费与付费动画图标，可用于网页、移动端和内容设计。lordicon.com2026-10-12Simple Icons3400+ 个热门品牌的免费 SVG 图标，附品牌色值和品牌规范链接。simpleicons.org2026-10-12Boxicons3500+ 个免费高质量图标，支持 SVG、PNG、JSX 格式及 React、Vue、Figma。boxicons.com2026-10-12Phosphor Icons风格统一、提供多种字重的图标库，用于界面、图表与演示设计。phosphoricons.commacOSicons API搜索 macOS 应用图标，并通过 API 生成、转换和导出图标资源。macosicons.com2026-08-11

动效

Motion 动画库适用于 React、JavaScript 与 Vue 的动画库，查看过渡、手势、布局与滚动动画的实现。motion.devMotion 视频 Agent从文字提示制作产品演示、发布视频与标志动画，参考 AI 动效制作的工作流。motion.soTransitions.dev常用 UI 过渡效果合集，参考组件动效，也可配合编码 Agent 使用。transitions.dev2026-09-22animations.devEmil Kowalski 的交互动效课程，学习缓动、时长、弹簧动画与性能取舍。animations.dev2026-09-22Calligraph基于 Motion 的流畅文字过渡效果，参考文本切换时的动画处理。calligraph.raphaelsalaja.com2026-06-10

AI 与 Harness

Models.dev Providers开源 AI 模型数据库的服务商列表，按提供商查看模型规格、价格与功能。models.dev2026-10-15Kern：Agent 记忆界面查看 Agent 的会话、分段摘要、笔记、检索与上下文，参考记忆可视化和排查方式。kern-ai.comjson-render用组件目录约束 AI 生成的界面，阅读生成式 UI 的框架文档与示例。json-render.devAIHOTAI 热点资讯聚合站，可通过 Agent Skill、MCP、RSS 和 REST API 接入。aihot.news2026-10-14ColaOS住在电脑里的 AI 拍档与 Agent OS，观察长期记忆和跨应用操作的产品形态。colaos.ai2026-10-10Taste Skill为编码 Agent 提供字体、间距、配色、布局和动效规则，改善生成界面的设计质量。tasteskill.dev2026-09-22OpenAI 图像提示指南官方图像生成与编辑示例，参考提示写法、构图约束和逐步修改方式。developers.openai.com2026-09-10π-agent book围绕 Pi Agent 的在线书籍预览，作为理解 Agent 与 Harness 的阅读入口。books.antinomie.org2026-08-09米羊学 AI从大模型原理到 Agent 架构，按主题学习 Context Engineering、Harness 和 Agent 设计模式。xueai.miyang.cn2026-08-09LoRA 微调原理Sebastian Raschka 讲解低秩适配的原理、参数效率与实现思路，适合补齐模型微调基础。sebastianraschka.com2026-08-09

工具与阅读

Hayden BleaselOpenAI 设计工程师的个人简介，记录职业经历、开源项目与常用工具栈。haydenbleasel.com2026-10-16Learn Git Branching交互式 Git 分支可视化教程，通过关卡练习提交、分支、合并与变基。learngitbranching.js.org2026-10-14Codex Resets追踪 OpenAI Codex 额度重置，查看历史记录并在新重置公布时获取通知。codex-resets.com2026-10-12Tibo 的 28 天 Codex 挑战追踪 Tibo 为期 28 天的 Codex 挑战：每天的产品改进或额度重置，附公告来源与社区投票。codex-resets.com2026-10-12Randy’s Blog关于产品开发、技术、阅读与写作的个人记录。lutaonan.com2026-07-23