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

字型

想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。

字型資源、管理與配對。 - 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

這個技能質量不錯，分類全面、查詢方便，能快速幫你找到設計工具。工具覆蓋範圍廣，從配色到原型都有，選幾個經典工具放在前面便於快速參考。需要注意的是，它提供的都是外部連結，這些工具的收費、隱私政策各有不同，用之前最好自己確認一下是否合適。另外裡面的連結可能不是最新的，用的時候自己再核實一下更好。整體來說是個好用的參考工具，適合需要快速瞭解設計工具選項的人。