正在加载开发资源
推荐
各分类常用站点精选。
Unsplash
免费全球高质量免费摄影图库，适合 Landing 与展示页配图（请遵守站点授权说明）。
- Photography
shadcn/ui
免费免费商用全球基于 Base UI（早期为 Radix）+ Tailwind 的 React 复制粘贴组件；可按需拷进项目，而不是作为 npm 依赖安装整库。
- React
- Tailwind
JSONPlaceholder
免费全球免费在线 REST 假数据 API；适合在 Fiddle 里用 fetch 演示列表、详情与表单提交。
- REST
- JSON
GSAP
部分免费全球专业级 JavaScript 动画库；文档、示例与插件。编辑器内亦支持 GSAP 模板与类型补全。
- JavaScript
- Timeline
WAVE 无障碍评估工具
免费全球网页无障碍检测工具，可发现缺失 alt 文本、表单标签、标题层级、ARIA 问题及对比度错误等常见问题。
- A11y
- WCAG
Pinterest
免费全球视觉灵感发现平台：按关键词聚合海量图片 Pin，适合为 Landing 配色、排版与情绪板找参考（Pin 版权归原作者，国内访问可能受限）。
- Inspiration
- Moodboard
在 Pixorla 中使用
GSAP import map
HTML粘贴到 HTML 面板顶部，即可在 JS 中用 ESM `import gsap from "gsap"`（版本与 GSAP 模板一致）。
<script type="importmap"> { "imports": { "gsap": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/index.js", "gsap/SplitText": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/SplitText.js", "gsap/ScrollTrigger": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/ScrollTrigger.js", "gsap/Draggable": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/Draggable.js", "gsap/MotionPathPlugin": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/MotionPathPlugin.js", "gsap/Flip": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/Flip.js", "gsap/Observer": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/Observer.js", "gsap/TextPlugin": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/TextPlugin.js", "gsap/CustomEase": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/CustomEase.js", "gsap/CustomBounce": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/CustomBounce.js", "gsap/CustomWiggle": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/CustomWiggle.js", "gsap/DrawSVGPlugin": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/DrawSVGPlugin.js", "gsap/MorphSVGPlugin": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/MorphSVGPlugin.js", "gsap/ScrollSmoother": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/ScrollSmoother.js", "gsap/": "https://cdn.jsdelivr.net/npm/gsap@3.15.0/" } } </script>- GSAP
- CDN
Three.js import map
HTML粘贴到 HTML 面板，配合 JS 中 `import * as THREE from "three"` 与 addons 路径。
<script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.184.0/examples/jsm/" } } </script>- Three.js
- CDN
Tailwind Play CDN
HTML平台默认 Tailwind v4 脚本标签；粘贴到 HTML 后可在 CSS 面板写 @theme / 工具类。
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.3.0" crossorigin="anonymous"></script>- Tailwind
- CDN
Google Fonts @import
CSSInter 字体 @import 与 body 示例，粘贴到 CSS 面板（需网络可访问 Google Fonts）。
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"); body { font-family: Inter, system-ui, sans-serif; }- Web fonts
- CSS
Landing Hero 结构
HTML最小 Hero 语义结构，粘贴到 HTML 后在 CSS 面板补样式即可。
<section class="hero"> <p class="badge">Pixorla</p> <h1>Your headline</h1> <p class="lead">One line describing your demo.</p> <button type="button">Get started</button> </section>- HTML
- Layout
JSONPlaceholder fetch
JS在 JS 面板粘贴即可演示 fetch 假数据 API（与 Mock API 分类互补）。
const response = await fetch( "https://jsonplaceholder.typicode.com/posts/1", ); const post = await response.json(); console.log(post.title);- JavaScript
- Mock API
GSAP 入门模板
在编辑器打开 GSAP 模板：import map、旋转方块与循环动画已就绪。
- GSAP
- Template
Three.js 入门模板
在编辑器打开 Three.js 模板：canvas、OrbitControls 与旋转立方体。
- Three.js
- Template
GSAP 时间轴示例
打开 Explore 同款官方 GSAP 示例，适合学习 timeline 与 stagger。
- GSAP
- Demo
Web 字体
文风字库 Windfonts
免费免费商用国内友好中文 Web 字体 CDN，Google Fonts 风格 API；在站内复制 CSS 嵌入代码到 HTML/CSS。
- Web fonts
- CDN
ZeoSeven Fonts (ZSFT)
免费免费商用国内友好免费商用字体库与 FontsAPI；嵌入格式为 fontsapi.zeoseven.com 的 result.css。
- Web fonts
- CDN
Google Fonts
免费全球全球 Web 字体服务；含 Noto 等 CJK 字体。国内访问可能不稳定，海外用户常用。
- Web fonts
- CDN
Fontshare
免费免费商用全球印度字体厂 ITF 出品的免费字体库：个人与商用全免费，质量高于多数免费库，提供 Web 字体 API 与配对建议。
- Web fonts
- Foundry
图库 / 图标
Unsplash
免费全球高质量免费摄影图库，适合 Landing 与展示页配图（请遵守站点授权说明）。
- Photography
Pinterest
免费全球视觉灵感发现平台：按关键词聚合海量图片 Pin，适合为 Landing 配色、排版与情绪板找参考（Pin 版权归原作者，国内访问可能受限）。
- Inspiration
- Moodboard
Pexels
免费全球免费图片与视频素材库，可下载后上传至作品或引用许可范围内的链接。
- Photography
iconfont 阿里图标库
部分免费国内友好国内常用图标与矢量素材平台，支持 Web 字体与 SVG 引用方式。
- Icons
Koboyo Icons
免费免费商用全球海量手绘风格免费 SVG 图标，可商用免署名，无需注册即可搜索与下载，适合 Landing 与 UI 点缀。
- Icons
Magnific
部分免费全球AI 创意平台（原 Freepik）：图像/视频/音频生成与编辑、超分辨率放大，含 2.5 亿+ 可商用素材库。
- AI
- Stock
- Design
Vecteezy
部分免费全球矢量图、插画与摄影素材库；含免费与 Pro 授权，适合 Landing 与 UI 配图（请遵守各素材许可）。
- Vector
- Illustration
- Photography
Boring Avatars
部分免费全球开源 React SVG 头像库：用用户名、邮箱等字符串生成独特几何头像；另有订阅制在线服务。
- Avatars
- SVG
DiceBear
免费免费商用全球开源头像库与 HTTP API：按 seed 稳定生成插画、像素等风格头像。编辑器可用 piximg-dicebear 插入占位头像。
- Avatars
- API
Morphicons
免费免费商用全球轻量 SVG 图标形变库：任意描边图标（Lucide / Tabler / Heroicons 等）可互相 morph，支持 React、Vue、Svelte。
- Icons
- Animation
Iconify
免费免费商用全球30 万+ 开源图标聚合框架：一套 API / 组件通吃 Lucide、Tabler、Material 等 300+ 图标集，搜索后可直接引用 SVG 或 Web Component。
- Icons
- SVG
Lucide
免费免费商用全球Feather 的社区续作、事实标准的描边图标库：1,800+ 图标风格统一，可调颜色 / 尺寸 / 描边宽，免署名商用。
- Icons
- SVG
unDraw
免费免费商用全球开源 SVG 插画库：在线改主题色后直接下载，免署名可商用，适合 Landing 首屏、空状态与引导页配图。
- Illustration
- SVG
Open Peeps
免费免费商用全球CC0 手绘小人插画库：发型 / 表情 / 姿势 / 服装积木式组合出数十万配置，做人物场景与演示配图零授权负担。
- Illustration
- Characters
图床
CDN 库
UI 组件库
shadcn/ui
免费免费商用全球基于 Base UI（早期为 Radix）+ Tailwind 的 React 复制粘贴组件；可按需拷进项目，而不是作为 npm 依赖安装整库。
- React
- Tailwind
Origin UI NG
免费免费商用全球Origin UI 的 Angular 移植：Tailwind CSS v4 + RadixNG，复制粘贴式组件，支持 Zoneless。
- Angular
- Tailwind
HeroUI
免费免费商用全球原 NextUI：基于 React Aria 与 Tailwind CSS v4 的无障碍 React 组件库，亦提供 Native 方案。
- React
- Tailwind
Ant Design
免费免费商用国内友好企业级 React UI：表单、表格、布局与设计语言完整，中文文档与国内生态成熟。
- React
- Enterprise
Element Plus
免费免费商用国内友好Vue 3 桌面端组件库（Element UI 后继）：表单、表格、导航等开箱即用，中文文档齐全。
- Vue
- Enterprise
Naive UI
免费免费商用国内友好Vue 3 组件库：TypeScript 完整、主题可调，无多余依赖，适合中后台与原型。
- Vue
- TypeScript
MUI
免费免费商用全球Material Design 的 React 实现（原 Material UI）：组件、主题与 Data Grid 生态完整。
- React
- Material
vxe-table
免费免费商用国内友好Vue 高性能表格：虚拟滚动、编辑、筛选、树形与导出；中文文档，适合大数据表格。
- Vue
- Table
STK Table Vue
免费免费商用国内友好轻量 Vue 虚拟表格：基于 sticky 固定行列，支持不等高与单元格高亮，兼容 Vue 2.7 / 3。
- Vue
- Table
React Bits
免费免费商用全球可复制粘贴的 React 动效组件：文字、背景与 UI，提供 JS/TS + CSS/Tailwind 四种写法。
- React
- Animation
daisyUI
免费免费商用全球纯 CSS 的 Tailwind 组件库：btn / card / toggle 等类名零 JS 即可用，配合本站「Tailwind Play CDN」片段可直接在 HTML 面板引入。
- Tailwind
- CSS
Base UI
免费免费商用全球Radix / MUI / Floating UI 原班人马的无样式 React 组件库（MIT）：可访问性逻辑内置、样式完全自定，2026 年 7 月起成为 shadcn/ui 默认底层。
- React
- Headless
Mock API / 占位数据
JSONPlaceholder
免费全球免费在线 REST 假数据 API；适合在 Fiddle 里用 fetch 演示列表、详情与表单提交。
- REST
- JSON
DummyJSON
免费全球更丰富的假数据 REST API：用户、商品、购物车、认证等，便于搭建完整 UI 原型。
- REST
- JSON
Random User Generator
免费全球随机生成用户头像与资料字段，适合用户卡片、评论列表等组件 Demo。
- Avatars
- JSON
Lorem Picsum
免费全球按 URL 参数生成占位图（如 picsum.photos/宽/高），无需下载即可在 img 标签中引用。
- Images
- Placeholder
Mockaroo
部分免费全球按自定义字段 schema 生成 CSV / JSON / SQL 等假数据，适合表格与图表 Demo。
- Schema
- Export
FakeStoreAPI
免费全球电商域假数据 REST API：商品 / 购物车 / 用户外加 JWT 登录测试，比通用假数据更接近真实业务，写购物车与登录 Demo 直接可用。
- REST
- E-commerce
PokéAPI
免费全球宝可梦数据的免费公开 API（REST 与 GraphQL），无需 key；练习 fetch、分页与筛选最有趣的数据源之一。
- REST
- GraphQL
Rick and Morty API
免费全球瑞克和莫蒂数据 API：826 角色 / 126 地点 / 51 剧集，REST 与 GraphQL 双形态、无需 key，官方文档带 playground。
- REST
- GraphQL
在线工具
ezGIF
免费全球浏览器内 GIF 制作、裁剪、压缩与格式转换；亦支持 WebP、APNG 及视频转 GIF。
- GIF
- Images
123APPS
免费全球免安装的在线工具集：视频/音频剪辑与转换、PDF 处理、图片编辑等，适合快速处理素材。
- Video
- Audio
LDDGO
免费国内友好国产在线工具大全：JSON/编码转换、加密解密、图片处理、单位换算、网络与坐标工具等，免安装即用。
- JSON
- Convert
- Crypto
Haikei
部分免费全球SVG 背景资产生成器：波浪、blob、低多边形、模糊渐变等在线调参导出 SVG/PNG，免费层无需注册，给 demo 快速配背景。
- SVG
- Generator
- Backgrounds
Realtime Colors
免费全球在真实页面布局上试配色（非静态色板）：对比度检查与类似色 / 三色方案生成，可导出 CSS / Tailwind / SCSS 变量直接粘进编辑器，永久免费。
- Color
- Palette
Squoosh
免费免费商用全球Google Chrome Labs 开源的浏览器内图片压缩与转格式（JPEG / PNG / WebP / AVIF）：全程本地处理不上传，前后对比滑块直观调质量。
- Images
- Compression
动画 / UI 灵感
GSAP
部分免费全球专业级 JavaScript 动画库；文档、示例与插件。编辑器内亦支持 GSAP 模板与类型补全。
- JavaScript
- Timeline
Codrops
免费全球前端动效与交互设计灵感：教程、实验性 Demo 与可复用的 CSS/JS 片段。
- Tutorials
- CSS
Animista
免费全球可视化 CSS 关键帧动画生成器，可导出 @keyframes 代码直接粘贴到 CSS 面板。
- CSS
- Keyframes
LottieFiles
部分免费全球Lottie 矢量动画资源库与预览工具，适合轻量动效与加载状态 Demo。
- Lottie
- JSON
Uiverse
免费全球社区 CSS 组件合集：按钮、卡片、加载器等，可复制 HTML/CSS 到 Fiddle 快速起步。
- Components
- CSS
Motion
免费免费商用全球开源 JS / React / Vue 动效库（Framer Motion 与 Motion One 合并版）：弹簧物理、滚动联动与手势，可通过 CDN 在 Fiddle 里直接使用。
- JavaScript
- Spring
Shaders
免费免费商用全球WebGPU 视效组件库（Evan You 出品，MIT 开源）：Aurora、Plasma 等生成式背景与 Glass / Glow 滤波组件，支持 React / Vue / Svelte / Solid / 原生 JS，一行接入高级动态背景。
- WebGPU
- Effects
无障碍
WAVE 无障碍评估工具
免费全球网页无障碍检测工具，可发现缺失 alt 文本、表单标签、标题层级、ARIA 问题及对比度错误等常见问题。
- A11y
- WCAG
WebAIM 对比度检查器
免费全球检查前景色与背景色对比度是否符合 WCAG AA / AAA 可读性要求。
- A11y
- Contrast
- WCAG
WebAIM 链接对比度检查器
免费全球检查链接颜色是否与周围正文及背景色足够区分。
- A11y
- Links
- Contrast
HTML 语义与无障碍速查表
免费全球HTML 元素、语义与无障碍写法速查：页面结构、表单、图片、按钮与表格等。
- A11y
- HTML
- Cheatsheet
WCAG 2 检查清单
免费全球简化版 WCAG 清单，便于在发布页面或组件前审查无障碍要求。
- A11y
- WCAG
- Checklist
MDN 无障碍
免费全球MDN 无障碍指南：基础概念、语义 HTML、ARIA、键盘支持与无障碍 CSS/JS。
- A11y
- MDN
- Guide
axe DevTools
部分免费全球Deque 的无障碍检测套件：浏览器扩展免费（Chrome / Firefox / Edge），基于开源 axe-core 规则引擎，行业标准；付费版增加报告与 CI 集成。
- A11y
- Browser extension
设计灵感
Mobbin
部分免费全球真人真机 App 界面与流程截图库：按 iOS / Android 应用浏览登录、引导、设置、支付等 UI 模式，做界面设计与前端还原的参考。
- UI
- UX
- iOS
- Android
One Page Love
免费全球2008 年起人工精选的单页 / 落地页画廊：9,000+ 整站与分区块示例，写 Landing Demo 找版式与叙事参考首选。
- Landing
- Gallery
recent.design
免费全球Godly 官方后继站：按整站、OG 图、App 图标、字体排印等要素分类的精选设计画廊，浏览免费。
- Gallery
- Curation
Lapa Ninja
部分免费全球2015 年起运营的最大免费落地页画廊：7,300+ 整页与 15,000+ 截图，可按分类、颜色、平台、年份过滤，另附免费插画与样机资源。
- Landing
- Gallery
视频 / 音频素材
外链将打开非 Pixorla 运营的第三方网站。作品内图片请优先使用站内资产上传；CSS 库与 Web 字体请写在 CSS 面板的 @import 中，允许的主机见 CSS @import 白名单。