- Published on
独立开发者常用设计工具清单
- Authors
- Name
- Aldrin
🎨 独立开发者常用设计工具清单
适用于产品从 0 到 1 的全过程设计：原型图、UI组件、封面图、交互动画、3D、视觉输出等。
🖌️ 1. UI / 原型设计工具
| 工具 | 用途 | 推荐指数 | 说明 |
|---|---|---|---|
| Figma | UI、原型、组件系统 | ⭐⭐⭐⭐ | 主力工具，建议精通 |
| FigJam | 信息架构 / 流程图 | ⭐⭐⭐ | 可作为脑图工具使用 |
| Sketch | Mac专属 UI 工具 | ⭐⭐ | 不推荐新学者投入精力 |
🧱 2. UI 组件库 / 模板平台
| 工具/平台 | 用途 | 说明 |
|---|---|---|
| shadcn/ui | React + Tailwind UI 库 | 推荐开发者直接用来实现 |
| Tailwind UI | 官方组件库（付费） | 页面快速搭建 |
| Flowbite / UI8 | 商用 UI 模板 | 下载即用，适合初期构建 |
🎞️ 3. 图标 & 矢量图工具
| 工具 | 用途 | 推荐方式 |
|---|---|---|
| Figma 插件 | 快速插入 Icon / Illustration | 简洁高效 |
| Iconify / Heroicons | 图标系统 | 免费、现代感强 |
| SVG Repo | 免费插画 / SVG 素材库 | 无需授权可商用 |
| Illustrator | 专业矢量图软件 | 熟悉者可使用，不强求 |
🖼️ 4. 图片处理 & 展示工具
| 工具 | 用途 | 推荐用途 |
|---|---|---|
| Canva | 海报 / 博客封面 | 上手快，适合内容型输出 |
| Remove.bg | 快速抠图 | 免费在线工具 |
| Photoshop | 专业图像编辑 | 成本高，仅推荐熟手 |
| Previewed.app | Mockup 生成器 | 展示产品封面 / 页面截图 |
🧊 5. 交互动效 & 3D
| 工具 | 用途 | 说明 |
|---|---|---|
| Rive | 轻量级交互动效 | 可导出为 Lottie / Web 可嵌入 |
| Spline | 3D 动画工具 | 快速制作视觉炫酷的 3D 场景 |
| Adobe After Effects | 专业动画工具 | 付费，可导出为 Lottie |
| LottieFiles | 动画资源 & 播放器 | 与 Rive/AE 兼容 |
| Blender | 开源 3D 工具 | 入门门槛较高，不建议早期投入 |
🧠 6. 灵感收集 / 模板网站
- Mobbin – 真机界面，适合 UX 学习
- Dribbble – 高质量设计作品社区
- UI8 – 商业模板与设计系统
- Figma 社区 – 免费组件 / 模板
- Landingfolio – 落地页灵感宝库
✅ 推荐组合（初期最实用）
Figma
+ shadcn/ui
+ Tailwind CSS
+ Canva
+ Remove.bg
🧩 文档支持持续更新，可在博客 skill-map 页面集成状态追踪（✅/⏳/🚧）