Design Tools Index

SKILL.md

---
name: design-tools-index
description: >-
  Categorized index of design tools by purpose — animation, color pickers, prototyping, design handoff, design-to-code, icons, fonts, gradients, illustration, mockup, UI design, wireframing, plus 20+ more categories. Use this skill whenever the user needs to pick a tool for a design task: choosing a color tool, prototyping tool, handoff tool, design-to-code converter, or any design software — even if they don't name a specific tool. Dispatcher: high-frequency categories inline, the rest in references/.
---

# 设计工具索引

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

## 动画工具
为界面/产品制作动效与交互动画（微交互、转场、Motion）。
- [Lottie](https://airbnb.io/lottie/) — parses AE animations exported as JSON and renders them natively on mobile and web.
- [GSAP](https://greensock.com/) — a suite of tools for scripted, high-performance HTML5 animations in all major browsers.
- [After Effects](https://www.adobe.com/products/aftereffects.html) — Adobe's motion graphics, visual effects and compositing app.
→ 完整列表（Haiku、Flare、Kite、Keyshape 等）见 `references/prototyping-and-animation.md`

## 配色
生成或挑选配色方案、调色板。
- [Coolors](https://coolors.co/) — the super-fast color scheme generator.
- [Adobe Color](https://color.adobe.com/explore/) — create schemes with the color wheel or browse community combinations.
- [Color Hunt](https://colorhunt.co/) — thousands of hand-picked, trendy color palettes for inspiration.
→ 完整列表（Khroma、Paletton、Sip、Pigment 等）见 `references/color.md`

## 渐变
生成 CSS/背景渐变。
- [UI Gradients](https://uigradients.com/) — a handpicked collection of beautiful color gradients.
- [CSS Gradient](https://cssgradient.io/) — a free CSS gradient generator for colorful backgrounds.
- [Web Gradients](https://webgradients.com/) — 180 free linear gradients usable as content backdrops.
→ 完整列表（Grabient、CoolHue、Gradienta 等）见 `references/color.md`

## 原型
制作可交互的高保真原型。
- [Framer](https://framer.com/) — visually design realistic interactive prototypes.
- [InVision](https://www.invisionapp.com/) — prototyping, collaboration and workflow platform.
- [ProtoPie](https://www.protopie.io/) — piece hi-fi interactions and sensor-aided prototypes together in minutes.
→ 完整列表（Marvel、Origami、Principle、Axure、UXPin 等）见 `references/prototyping-and-animation.md`

## 设计交付 (Design Handoff)
向开发交付设计标注、Spec、切图与代码片段。
- [Zeplin](https://zeplin.io/) — handoff designs and style guides with accurate specs, assets and code snippets.
- [Avocode](https://avocode.com) — open designs without design tools; click layers to get code.
- [InVision Inspect](https://www.invisionapp.com/feature/inspect/) — prepare designs for development.
→ 完整列表（Sympli、Sketch Measure、Flawless App、Specctr 等）见 `references/handoff-and-code.md`

## Design to Code
把设计稿转为可运行代码或网站。
- [Webflow](https://webflow.com/) — build responsive sites in the browser, then host or export the code.
- [Anima](https://www.animaapp.com/) — a Sketch plugin/web app that converts Sketch designs to HTML.
- [Supernova Studio](https://supernova.io/) — convert Sketch designs into Android, iOS or React Native code.
→ 完整列表（PaintCode、Pinegrow、Tilda、Draftbit 等）见 `references/handoff-and-code.md`

## 图标
图标库与图标工具。
- [Feather Icons](https://feathericons.com/) — icons on a 24x24 grid emphasizing simplicity, consistency and readability.
- [Font Awesome](https://fontawesome.com/) — the web's most popular open-source icon set and toolkit.
- [Material Design Icons](https://materialdesignicons.com/) — free Material Design icons via open-source contributions.
→ 完整列表（Flaticon、Icons8、Simple Icons、SVGRepo 等）见 `references/graphic-assets.md`

## 字体
字体资源、管理与配对。
- [Google Fonts](https://fonts.google.com/) — making the web more beautiful and open through great typography.
- [Adobe Fonts](https://fonts.adobe.com/fonts) — thousands of beautiful fonts by Adobe.
- [FontPair](https://fontpair.co/) — helps you pair Google Fonts together.
→ 完整列表（DaFont、FontBase、Font Squirrel、RightFont 等）见 `references/graphic-assets.md`

## 插画
插画素材库与生成器。
- [unDraw](https://undraw.co) — a collection of beautiful SVG images.
- [Blush](https://blush.design/) — create, mix and customize illustrations by artists worldwide.
- [Humaaans](https://www.humaaans.com/) — a free library to mix-and-match illustrations of people.
→ 完整列表（ManyPixels、Open Doodles、Blobmaker、IRA Design 等）见 `references/graphic-assets.md`

## Mockup
产品/设备样机展示。
- [Smartmockups](https://smartmockups.com/) — create product mockups in just a few clicks.
- [Artboard Studio](https://artboard.studio/) — online graphic design app focused on product mockups.
- [Rotato](https://www.rotato.xyz/) — animated 3D mockups for app designs.
→ 完整列表（Device Shots、Mockup World、Mockuuups、Threed 等）见 `references/mockup.md`

## UI 设计
界面与视觉设计工具。
- [Figma](https://www.figma.com/) — browser-based design and prototyping with real-time collaboration.
- [Sketch](https://www.sketchapp.com/) — a design toolkit built for Mac.
- [Adobe XD](https://www.adobe.com/products/xd.html) — design, prototype and share UX for web, mobile and voice.
→ 完整列表（Photoshop、Illustrator、Affinity、Inkscape、Photopea 等）见 `references/ui-and-wireframe.md`

## 线框图
低保真线框与结构草图。
- [Balsamiq Cloud](https://balsamiq.cloud/) — effortless UI sketching with collaboration.
- [Wireframe.cc](https://wireframe.cc/) — a simple wireframing tool that doesn't get in your way.
- [Whimsical Wireframes](https://whimsical.co/wireframes/) — instant wireframing with a rich element library.
→ 完整列表（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