設計工具索引

按用途分類的設計工具導航：每條為外部連結 + 一行說明，便於快速選型。下方 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

插畫

小蔥技能7w4.net有更新，你可以訪問看下。

插畫素材庫與生成器。

• 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

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