Ezra-Y/设计工具索引

设计工具索引 是做什么的？

按用途分类的设计工具导航：每条为外部链接 + 一行说明，便于快速选型。下方 12 个高频类目各放 2-3 条最经典工具并指向 references/ 中更完整的列表；其余 24 个类目见文末「更多类目」，按需打开对应 reference 文件即可。条目来自 Awesome-Design-Tools。

动画工具

为界面/产品制作动效与交互动画（微交互、转场、Motion）。

• Lottie — 将 AE 动画导出为 JSON，并在移动端和网页端原生渲染。
• GSAP — 一套面向脚本化、高性能 HTML5 动画的工具集，支持所有主流浏览器。
• After Effects — Adobe 的动态图形、视觉特效与合成应用。 → 完整列表（Haiku、Flare、Kite、Keyshape 等）见 references/prototyping-and-animation.md

配色

生成或挑选配色方案、调色板。

• Coolors — 超快的配色方案生成器。
• Adobe Color — 通过色轮创建方案或浏览社区组合。
• Color Hunt — 数千个手工挑选的时尚调色板，供灵感参考。 → 完整列表（Khroma、Paletton、Sip、Pigment 等）见 references/color.md

渐变

生成 CSS/背景渐变。

• UI Gradients — 手选的精美色彩渐变集合。
• CSS Gradient — 免费的 CSS 渐变生成器，用于制作彩色背景。
• Web Gradients — 180 个免费线性渐变，可作为内容背景使用。 → 完整列表（Grabient、CoolHue、Gradienta 等）见 references/color.md

原型

制作可交互的高保真原型。

• Framer — 可视化设计逼真的交互式原型。
• InVision — 原型设计、协作与工作流平台。
• ProtoPie — 快速组合高保真交互和传感器辅助原型。 → 完整列表（Marvel、Origami、Principle、Axure、UXPin 等）见 references/prototyping-and-animation.md

设计交付 (Design Handoff)

向开发交付设计标注、Spec、切图与代码片段。

• Zeplin — 交付设计稿和样式指南，附带准确的规格、资源和代码片段。
• Avocode — 无需设计工具即可打开设计稿；点击图层获取代码。
• InVision Inspect — 为开发准备设计稿。 → 完整列表（Sympli、Sketch Measure、Flawless App、Specctr 等）见 references/handoff-and-code.md

Design to Code

把设计稿转为可运行代码或网站。

• Webflow — 在浏览器中构建响应式网站，然后托管或导出代码。
• Anima — 一个 Sketch 插件/网页应用，可将 Sketch 设计稿转换为 HTML。
• Supernova Studio — 将 Sketch 设计稿转换为 Android、iOS 或 React Native 代码。 → 完整列表（PaintCode、Pinegrow、Tilda、Draftbit 等）见 references/handoff-and-code.md

图标

图标库与图标工具。

• Feather Icons — 基于 24x24 网格的图标，强调简约、一致性和可读性。
• Font Awesome — 网络上最受欢迎的开源图标集和工具包。
• Material Design Icons — 通过开源贡献提供的免费 Material Design 图标。 → 完整列表（Flaticon、Icons8、Simple Icons、SVGRepo 等）见 references/graphic-assets.md

字体

字体资源、管理与配对。

• Google Fonts — 通过卓越的排版让网页更美观、更开放。
• Adobe Fonts — Adobe 提供的数千种精美字体。
• FontPair — 帮助你将 Google Fonts 进行搭配。 → 完整列表（DaFont、FontBase、Font Squirrel、RightFont 等）见 references/graphic-assets.md

插画

插画素材库与生成器。

• unDraw — 一个精美的 SVG 图片集合。
• Blush — 由全球艺术家创作、组合和定制插画。
• Humaaans — 一个可自由混搭人物插画的免费素材库。 → 完整列表（ManyPixels、Open Doodles、Blobmaker、IRA Design 等）见 references/graphic-assets.md

Mockup

产品/设备样机展示。

• Smartmockups — 只需点击几下即可创建产品样机。
• Artboard Studio — 专注于产品样机的在线平面设计应用。
• Rotato — 适用于应用设计的动画 3D 样机。 → 完整列表（Device Shots、Mockup World、Mockuuups、Threed 等）见 references/mockup.md

UI 设计

界面与视觉设计工具。

• Figma — 基于浏览器的设计和原型工具，支持实时协作。
• Sketch — 专为 Mac 打造的设计工具包。
• Adobe XD — 为 Web、移动端和语音进行设计、原型制作和分享 UX。 → 完整列表（Photoshop、Illustrator、Affinity、Inkscape、Photopea 等）见 references/ui-and-wireframe.md

线框图

低保真线框与结构草图。

• Balsamiq Cloud — 轻松绘制 UI 草图，支持协作。
• Wireframe.cc — 一个简单实用的线框工具，不干扰你的思路。
• Whimsical Wireframes — 即时线框图，配有丰富的元素库。 → 完整列表（Pidoco、Gliffy、Layoutit、BLOKK 等）见 references/ui-and-wireframe.md

更多类目（按需读取 references）

以下类目不在首页精选中，遇到对应需求时直接打开对应 reference 文件；每个文件顶部按分类组织。

• 无障碍工具（WCAG 检查、对比度、色盲模拟）→ references/accessibility.md
• 用户研究 / 信息架构 / 用户流程 / 体验监测（招募访谈、卡片排序、站点地图、用户流程图、热图、埋点分析）→ references/user-research-and-ia.md
• 协作 / 设计反馈 / 设计版本控制（团队协作、批注审阅、设计文件 Git）→ references/collaboration-feedback-vcs.md
• 设计系统 / 开发工具 / 视觉调试 / 无代码（组件库文档、开发浏览器、网页检查、无代码搭建）→ references/design-systems-and-dev.md
• 媒体素材（免费图库/视频/音效/截图软件）→ references/media-assets.md
• 创作 / 灵感 / 学习（灵感站、设计课程、Logo、社媒设计、手绘草图、像素艺术）→ references/creation-and-inspiration.md
• 3D 建模 / 增强现实 → references/3d-and-ar.md

更全的 awesome 设计相关总目录见 https://github.com/sindresorhus/awesome