本文档涵盖了设计师和开发者可用的辅助资源，这些资源能够增强设计工作流程，但不属于UI元素、媒体资产或代码框架等核心类别。重点在于设计系统、灵感图库、优化工具以及其他支持设计和开发过程的实用工具。有关特定UI组件的资源，请参阅资源类别及其子类别。
设计系统和样式指南为创建一致的用户界面提供了全面的框架。它们通常包含指导方针、组件和原则，以标准化产品设计。
| 设计系统 | 创建者 | 主要功能 | 最佳用途 |
|---|---|---|---|
| Material Design | 谷歌 | 组件库、动效指南、主题系统 | 跨平台应用 |
| Ant Design | 阿里巴巴 | 企业级组件、全面文档 | 商业应用 |
| Carbon Design | IBM | 注重无障碍性、开源组件 | 企业软件 |
| Primer | GitHub | 开发者友好、实用主义方法 | 开发者工具 |
| Apple 设计资源 | 苹果 | 平台特定指南、原生组件 | iOS/macOS 应用 |
设计系统通过文档化的标准和可复用组件，弥合了设计意图与代码实现之间的鸿沟。它们确保了一致性，同时减少了开发时间。
基于Web的工具，可帮助完成各种设计任务，从模型到原型再到视觉编辑。
| 工具类型 | 热门选项 | 最佳使用场景 |
|---|---|---|
| 矢量图形 | Figma, Vectr, Penpot | UI/UX设计、界面模型 |
| 图片编辑 | Photopea, Fotor, Pixlr | 图像处理、平面设计 |
| 线框图设计 | Wireframe.cc, Whimsical | 早期UI规划 |
| 特殊效果 | Remove.bg, Blobmaker, Glassmorphism | 背景移除、独特视觉效果 |
| 图表绘制 | Excalidraw, Diagrams.net, Mermaid | 流程图、系统图 |
| 代码可视化 | Carbon, Ray.so, Codepng | 可共享的代码片段 |
在线设计工具通过消除对昂贵软件安装的需求，并支持通过基于云的界面进行协作，从而使设计民主化。
高级设计应用程序的免费开源替代品，可离线使用。
| 软件 | 替代产品 | 平台 | 最佳用途 |
|---|---|---|---|
| GIMP | Photoshop | 跨平台 | 图像编辑、照片处理 |
| Inkscape | Illustrator | 跨平台 | 矢量图形、插图 |
| Blender | Maya, 3D Max | 跨平台 | 3D建模、动画 |
| Krita | Photoshop, Painter | 跨平台 | 数字绘画、插图 |
| Darktable | Lightroom | 跨平台 | RAW照片处理 |
| Pencil Project | Sketch, Balsamiq | 跨平台 | UI原型设计、线框图设计 |
这些应用程序提供了专业级功能，而无需支付商业同类产品的订阅费用，这使得它们成为预算有限的业余爱好者和专业人士的宝贵资源。
展示优秀设计的网站，以激发创造力并为设计决策提供参考。
| 类型 | 值得关注的资源 | 重点 |
|---|---|---|
| UI/UX 画廊 | Dribbble, Behance, Awwwards | 专业设计作品集 |
| 着陆页 | Land Book, lapa.ninja, Landingfolio | 营销和转化导向设计 |
| 网页设计合集 | Httpster, SiteSee, Webframe | 创意网站实现 |
| 模式库 | UI Garage, Collect UI | 界面组件模式 |
| CSS 展示 | CSS Zen Garden, CSS-Tricks | 创意CSS实现 |
设计灵感资源在整个设计过程中充当参考点，帮助设计师跟上趋势和模式，同时拓展创意边界。
用于优化图像的工具，可在不牺牲视觉质量的前提下提高网站性能。
| 工具 | 类型 | 支持格式 | 特殊功能 |
|---|---|---|---|
| TinyPNG | 在线 | PNG、JPEG | 智能压缩算法 |
| Squoosh.app | 在线 | 多选 | 带有高级选项的Google Chrome Labs工具 |
| ImageOptimizer | 在线 | JPEG、PNG、GIF | 质量选项 |
| Compressor.io | 在线 | JPEG、PNG、GIF、SVG | 高压缩比 |
| SVG OMG | 在线 | SVG | SVG优化与清理 |
| CompressNow | 在线 | JPEG、GIF、PNG | 批量处理 |
图像压缩工具对于Web性能优化至关重要，通常可将文件大小减少50-80%，同时保持可接受的视觉质量。这显著提升了页面加载时间和用户体验。
增强设计和开发功能的浏览器插件。
为Google Chrome提供设计和开发实用工具的扩展程序。
| 类别 | 值得注意的扩展程序 | 目的 |
|---|---|---|
| 字体工具 | WhatFont, Fonts Ninja | 识别和检查网站字体 |
| 颜色工具 | ColorZilla, ColorPick Eyedropper | 从网页拾取颜色 |
| 布局和设计 | VisBug, Dimensions | 视觉调试、测量元素 |
| 开发者工具 | Web Developer, JSONView | DOM检查、JSON格式化 |
| 屏幕截图 | Awesome Screenshot, GoFullPage | 全页截图、批注 |
| 可访问性 | WCAG对比度检查器, Wave | 测试无障碍性合规性 |
Mozilla Firefox浏览器的同等工具。
| 类别 | 值得注意的扩展程序 | 目的 |
|---|---|---|
| 字体工具 | WhatFont, FontFinder | 识别网站上使用的字体 |
| 颜色工具 | ColorZilla, Eye Dropper | 从网页提取颜色 |
| 布局和设计 | Measure It, Page Ruler | 测量网页元素、检查布局 |
| 开发者工具 | Web Developer, JSONView | 检查和修改页面元素 |
| 屏幕截图 | Fireshot, Screenshot Capture | 捕获全页截图 |
| 可访问性 | WAVE, Accessibility Checker | 测试无障碍性问题 |
浏览器扩展程序直接在浏览器环境中提供对专用工具的即时访问，显著简化了设计和开发工作流程。
AI驱动的工具，辅助生成和修改设计。
| 工具 | 主要功能 | 最佳用途 |
|---|---|---|
| Leonardo.Ai | AI图像生成 | 概念艺术、插图 |
| Galileo AI | UI生成 | 快速界面模型 |
| ImgGen.Ai | 图像创建和增强 | 创建原创视觉效果 |
| VMind | 智能可视化 | 数据可视化 |
| Unblurimage.Ai | 图像增强 | 修复模糊图像 |
| 免费AI图表生成器 | 自动化图表绘制 | 系统和流程图 |
AI设计工具正在迅速发展，成为创意过程中的宝贵助手，以日益复杂的方式生成起点、变体或完成日常设计任务。
不属于其他类别的额外工具和资源，但为设计师和开发者提供了重要价值。
| 类别 | 知名示例 | 用途 |
|---|---|---|
| 代码共享 | CodePen, JSFiddle | 演示和共享代码片段 |
| 文档 | DevDocs, Devhints | 语言/框架快速参考 |
| CSS工具 | CSS Grid生成器, Flexbox工具 | 复杂CSS的可视化构建器 |
| QR码生成器 | QR Code Generator | 为应用程序和网站创建QR码 |
| 技术检查 | Can I Use, 浏览器支持表 | 检查功能兼容性 |
| 代码美化器 | Prettier, JS Beautifier | 格式化和清理代码 |
| 可访问性 | a11ygator, WAVE | 测试无障碍性合规性 |
这些杂项资源弥补了设计和开发工作流程中的空白，为项目期间出现的特定任务提供了专门的功能。
本文档中涵盖的各种“其他资源”贯穿整个开发工作流程，在项目的不同阶段为设计师和开发者提供支持。
本节记录的资源提供了核心UI元素和编码框架之外的补充工具和参考资料。它们通过提供既定模式、创意灵感、优化技术和提高生产力的实用工具来增强设计和开发过程。通过利用这些资源，团队可以更高效地交付高质量的产品。