---

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。

动画工具

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

• Lottie — parses AE animations exported as JSON and renders them natively on mobile and web.
• GSAP — a suite of tools for scripted, high-performance HTML5 animations in all major browsers.
• After Effects — Adobe's motion graphics, visual effects and compositing app. → 完整列表（Haiku、Flare、Kite、Keyshape 等）见 references/prototyping-and-animation.md

配色

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

• Coolors — the super-fast color scheme generator.
• Adobe Color — create schemes with the color wheel or browse community combinations.
• Color Hunt — thousands of hand-picked, trendy color palettes for inspiration. → 完整列表（Khroma、Paletton、Sip、Pigment 等）见 references/color.md

渐变

生成 CSS/背景渐变。

• UI Gradients — a handpicked collection of beautiful color gradients.
• CSS Gradient — a free CSS gradient generator for colorful backgrounds.
• Web Gradients — 180 free linear gradients usable as content backdrops. → 完整列表（Grabient、CoolHue、Gradienta 等）见 references/color.md

原型

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

• Framer — visually design realistic interactive prototypes.
• InVision — prototyping, collaboration and workflow platform.
• ProtoPie — 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 — handoff designs and style guides with accurate specs, assets and code snippets.
• Avocode — open designs without design tools; click layers to get code.
• InVision Inspect — prepare designs for development. → 完整列表（Sympli、Sketch Measure、Flawless App、Specctr 等）见 references/handoff-and-code.md

Design to Code

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

• Webflow — build responsive sites in the browser, then host or export the code.
• Anima — a Sketch plugin/web app that converts Sketch designs to HTML.
• Supernova Studio — convert Sketch designs into Android, iOS or React Native code. → 完整列表（PaintCode、Pinegrow、Tilda、Draftbit 等）见 references/handoff-and-code.md

图标

图标库与图标工具。

• Feather Icons — icons on a 24x24 grid emphasizing simplicity, consistency and readability.
• Font Awesome — the web's most popular open-source icon set and toolkit.
• Material Design Icons — free Material Design icons via open-source contributions. → 完整列表（Flaticon、Icons8、Simple Icons、SVGRepo 等）见 references/graphic-assets.md

字体

字体资源、管理与配对。

• Google Fonts — making the web more beautiful and open through great typography.
• Adobe Fonts — thousands of beautiful fonts by Adobe.
• FontPair — helps you pair Google Fonts together. → 完整列表（DaFont、FontBase、Font Squirrel、RightFont 等）见 references/graphic-assets.md

插画

插画素材库与生成器。

• unDraw — a collection of beautiful SVG images.
• Blush — create, mix and customize illustrations by artists worldwide.
• Humaaans — a free library to mix-and-match illustrations of people. → 完整列表（ManyPixels、Open Doodles、Blobmaker、IRA Design 等）见 references/graphic-assets.md

Mockup

产品/设备样机展示。

• Smartmockups — create product mockups in just a few clicks.
• Artboard Studio — online graphic design app focused on product mockups.
• Rotato — animated 3D mockups for app designs. → 完整列表（Device Shots、Mockup World、Mockuuups、Threed 等）见 references/mockup.md

UI 设计

界面与视觉设计工具。

• Figma — browser-based design and prototyping with real-time collaboration.
• Sketch — a design toolkit built for Mac.
• Adobe XD — design, prototype and share UX for web, mobile and voice. → 完整列表（Photoshop、Illustrator、Affinity、Inkscape、Photopea 等）见 references/ui-and-wireframe.md

线框图

低保真线框与结构草图。

• Balsamiq Cloud — effortless UI sketching with collaboration.
• Wireframe.cc — a simple wireframing tool that doesn't get in your way.
• Whimsical 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