#frontend-design #design-tools #color-picker #ui-design

Design Tools Index

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/.

Ezra Y.Finn@ezra-y

Install

openclaw skills install @ezra-y/design-tools-index

设计工具索引

按用途分类的设计工具导航：每条为外部链接 + 一行说明，便于快速选型。下方 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