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

设计工具索引

动画工具

为界面/产品制作动效与交互动画（微交互、转场、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

design-tools-index

设计工具索引

动画工具

配色

渐变

原型

设计交付 (Design Handoff)

Design to Code

图标

字体

插画

Mockup

UI 设计

线框图

更多类目（按需读取 references）

设计工具索引

动画工具

配色

渐变

原型

设计交付 (Design Handoff)

Design to Code

图标

字体

插画

Mockup

UI 设计

线框图

更多类目（按需读取 references）