25个设计师必备AI代理技能

在数字化时代，设计工作已经不仅仅依赖于传统的设计软件。AI代理技能正在改变设计师的工作方式，从UI/UX设计到品牌管理，从图标生成到色彩系统，AI技能为设计师提供了前所未有的效率和创造力。本文将为您介绍设计师最需要的AI代理技能，帮助您在现代设计工作中脱颖而出。

一、UI/UX设计

1、Frontend Design

安装量: 52 | 作者: 多个贡献者

Frontend Design是最受欢迎的设计技能之一，专注于创建独特、生产级的前端界面，避免通用的AI生成美感。

核心设计理念： 大胆的目的性胜过安全的默认值。关键在于做出清晰的概念选择并精确执行。无论是极繁主义还是极简主义，关键在于目的性而非强度。

美学方向选择：

• 极简主义：简洁、大量留白、以排版为主
• 极繁主义：分层、密集、视觉元素丰富
• 复古未来主义：霓虹、网格、科技灵感
• 有机/自然：流动形状、大地色调、纹理
• 奢华/精致：优雅排版、微妙动画、高级感
• 俏皮/玩具风：明亮色彩、圆润形状、弹跳动画
• 编辑/杂志风：强烈排版层次、戏剧性图像
• 粗野主义/原始：暴露结构、等宽字体、原始美感
• 装饰艺术/几何：棱角形状、金色点缀、对称
• 工业/实用主义：功能性、单色、有目的性

GitHub仓库: 5dlabs/cto

2、UI-UX Pro Max

安装量: 17 | 作者: 多个贡献者

专业的UI/UX设计技能，提供全面的用户体验设计指导。

功能特性：

• 用户研究方法论
• 信息架构设计
• 交互设计模式
• 可用性测试
• 设计系统构建

GitHub仓库: aiskillstore/marketplace

3、UX Designer

安装量: 4 | 作者: 多个贡献者

专注于用户体验设计的技能，帮助设计师创造以用户为中心的产品。

核心内容：

• 用户旅程地图
• 人物角色创建
• 用户流程设计
• 可用性启发式评估
• 原型测试

二、Figma设计自动化

4、Figma UI Design

安装量: 37 | 作者: aaaaqwq

专门用于自动化Figma设计工作流的技能，是设计师的得力助手。

功能说明：

• 设计系统和组件库创建
• 自动化设计稿生成
• 设计资源导出
• 设计规范文档生成
• Figma API集成
• 设计到代码的转换

使用场景：

• 创建登录页面的Figma设计
• 生成设计系统组件库
• 从Figma导出所有图标
• 将Figma设计转换为React组件
• 自动化设计审查流程
• 生成设计规范文档

核心功能模块：

1. 设计系统

• 颜色系统：定义品牌色、语义色、中性色
• 字体系统：字体家族、字号、行高、字重
• 间距系统：统一的间距规范（4px、8px、16px等）
• 组件库：按钮、表单、卡片等可复用组件
• 图标库：统一的图标集合

2. 页面设计

• 布局设计：响应式布局、栅格系统
• 交互设计：原型和交互流程
• 动效设计：过渡动画和微交互
• 适配设计：多端适配（Web、移动端）

3. 资源导出

• 图片导出：PNG、JPG、SVG格式
• 图标导出：SVG图标和图标字体
• 切图导出：@1x、@2x、@3x倍图
• 样式导出：CSS、SCSS变量

4. 设计到代码

• 组件生成：React、Vue、Angular组件
• 样式生成：CSS、Tailwind、Styled Components
• 代码规范：遵循团队代码规范
• 类型定义：TypeScript类型

GitHub仓库: aaaaqwq/claude-code-skills

5、Figma

安装量: 19 | 作者: andrejones92

通过浏览器自动化与Figma交互的技能，实现设计文件管理和团队协作。

功能特性：

• 查看和导航设计文件、画框和页面
• 以各种格式导出资源（PNG、SVG、PDF、JPG）
• 访问和管理团队库和组件
• 审查设计评论和反馈
• 检查文件版本历史并恢复先前版本
• 管理文件共享和权限

使用示例：

• 导出设计资源：将Figma设计中的所有图标导出为SVG
• 查看设计反馈：显示主页设计上的所有评论
• 检查设计版本：查看本周登录屏幕的更改

GitHub仓库: andrejones92/canifi-life-os

6、Figma to Code

安装量: 1 | 作者: ayushya-patel

将Figma设计转换为生产就绪代码的技能，自动检测技术栈并复用现有组件。

功能特性：

• 自动检测框架：Astro、Next.js、React/Vite、Remix、Nuxt、Angular
• 解析Figma URL：自动提取文件密钥和节点ID
• 扫描代码库：查找并复用现有组件、工具、模式
• 映射设计令牌：将Figma颜色/排版转换为您的主题
• 使用现有动画库：Framer Motion、GSAP或CSS
• 下载资源：在您的项目结构中组织图片/图标
• 应用最佳实践：无障碍性、性能、语义化HTML

适用场景：

• 将Figma模型转换为React/Vue/Astro组件
• 从Figma设计构建页面
• 创建具有桌面和移动变体的响应式组件
• 需要生产就绪代码而非粗略草稿

GitHub仓库: ayushya-patel/figma-to-code-agent

三、品牌与视觉设计

7、Brand Guidelines

安装量: 22 | 作者: 多个贡献者

品牌指南技能，帮助创建和维护统一的品牌视觉识别系统。

核心内容：

• 品牌色彩系统
• 字体和排版规范
• 标志使用规范
• 视觉元素应用
• 品牌语调指南

GitHub仓库: aaaaqwq/claude-code-skills

8、Web Design Guidelines

安装量: 23 | 作者: calcom

Web界面设计指南技能，确保设计符合现代Web标准。

工作原理：

1. 从源URL获取最新指南
2. 读取指定文件（或提示用户提供文件/模式）
3. 根据获取的指南中的所有规则进行检查
4. 以简洁的file:line格式输出发现

指南来源： https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

GitHub仓库: calcom/cal.com

9、Canvas Design

安装量: 19 | 作者: 多个贡献者

Canvas设计技能，用于创建视觉设计和图形内容。

应用场景：

• 营销物料设计
• 社交媒体图形
• 演示文稿设计
• 信息图表创建

四、色彩系统与配色

10、Color Accessibility

安装量: 59 | 作者: aj-geddes

色彩无障碍设计技能，确保所有用户（包括色觉障碍用户）都能访问和理解信息。

WCAG对比度标准：

WCAG AA（最低）：

• 普通文本：4.5:1
• 大文本（18pt+）：3:1
• UI组件和图形元素：3:1
• 焦点指示器：3:1

WCAG AAA（增强）：

• 普通文本：7:1
• 大文本：4.5:1
• 更适合无障碍性

测试工具：

• WebAIM Contrast Checker
• Color Contrast Analyzer
• Figma插件
• 浏览器DevTools

通过AA的示例：

• 黑色（#000000）在白色（#FFFFFF）上 = 21:1
• 白色在深蓝（#003366）上 = 12.6:1
• 深灰（#333333）在浅灰（#EEEEEE）上 = 10:1

GitHub仓库: aj-geddes/useful-ai-prompts

11、Rampa Colors

安装量: 2 | 作者: basiclines

使用OKLCH色彩空间从基础色生成感知均匀的色彩调色板。

安装与使用：

# 直接运行
npx @basiclines/rampa -C "#3b82f6"

# 或全局安装
npm install -g @basiclines/rampa

功能示例：

生成基本10色调色板：

rampa -C "#3b82f6"

输出为CSS变量：

rampa -C "#3b82f6" -O css --name=primary

输出：

:root {
  --primary-0: #000000;
  --primary-1: #1e3a5f;
  --primary-2: #2d5a8a;
  ...
}

添加互补色和谐：

rampa -C "#3b82f6" --add=complementary -O css

生成5色三色和谐：

rampa -C "#3b82f6" --size=5 --add=triadic -O css --name=brand

GitHub仓库: basiclines/rampa-studio

12、Color Converter

安装量: 1 | 作者: aidotnet

色彩转换工具，在不同格式之间转换颜色并生成色彩调色板。

使用方法：

# HEX转RGB
python scripts/color_converter.py "#FF5733"

# RGB转HEX
python scripts/color_converter.py "rgb(255,87,51)"

# 生成调色板
python scripts/color_converter.py "#FF5733" --palette complementary

# 列出命名颜色
python scripts/color_converter.py --list

GitHub仓库: aidotnet/moyucode

四、图标与图形资源

13、Better Icons

安装量: 342 | 作者: better-auth

通过Iconify从200+图标库中搜索和检索图标，是最受欢迎的图标技能。

CLI使用：

# 搜索图标
better-icons search <query> [--prefix <prefix>] [--limit <n>] [--json]

# 获取图标SVG（输出到stdout）
better-icons get <icon-id> [--color <color>] [--size <px>] [--json]

# 为AI代理设置MCP服务器
better-icons setup [-a cursor,claude-code] [-s global|project]

使用示例：

better-icons search arrow --limit 10
better-icons search home --json | jq '.icons[0]'
better-icons get lucide:home > icon.svg
better-icons get mdi:home --color '#333' --json

图标ID格式： prefix:name - 例如：lucide:home、mdi:arrow-right、heroicons:check

热门集合： lucide、mdi、heroicons、tabler、ph、ri、solar、iconamoon

MCP工具（用于AI代理）：

• search_icons：跨所有库搜索
• get_icon：获取单个图标SVG
• get_icons：批量检索多个图标
• list_collections：浏览可用图标集

GitHub仓库: better-auth/better-icons

14、Generate Icon

安装量: 1 | 作者: b-open-io

使用Gemini AI为任何平台生成专业图标，具有自动背景移除、裁剪和多尺寸导出功能。

快速开始：

# 网站Favicon
bun run icon "modern tech startup logo letter S" --preset favicon --output ./icons/favicon

# iOS App Store图标
bun run icon "meditation app lotus flower" --preset apple-app-icon --output ./icons/ios

# Android Play Store + 自适应图标
bun run icon "fitness tracker flame icon" --preset android-app-icon --output ./icons/android

# PWA清单图标
bun run icon "productivity app checkmark" --preset pwa --output ./icons/pwa

# macOS桌面应用
bun run icon "code editor brackets symbol" --preset macos-icns --output ./icons/macos

# Windows桌面应用
bun run icon "music player note icon" --preset windows-ico --output ./icons/windows

# 通用UI图标
bun run icon "settings gear" --preset ui-icons --output ./icons/ui

预设配置：

• apple-app-icon：iOS/iPadOS App Store，18个尺寸（1024-20px）
• android-app-icon：Google Play + 自适应层，11个尺寸 + 前景
• pwa：PWA清单图标
• macos-icns：macOS桌面应用
• windows-ico：Windows桌面应用
• favicon：网站Favicon

GitHub仓库: b-open-io/gemskills

15、Favicon Generator

安装量: 6 | 作者: andrehfp

为Next.js项目生成完整Favicon套装的技能。

工作流程：

1. 自动检测应用信息（扫描package.json、layout.tsx、README.md等）
2. 生成各种尺寸的Favicon
3. 自动配置到项目中

检测来源：

• package.json：应用名称和描述
• Next.js Metadata (app/layout.tsx)：标题和描述
• README.md：H1标题和第一段描述
• Tailwind配置：主题颜色
• CSS变量：品牌颜色
• 现有Favicon/图标

GitHub仓库: andrehfp/tinyplate

16、Icon Generator

作者: dkyazzentwatwa

图标生成技能，用于创建自定义图标集。

GitHub仓库: dkyazzentwatwa/chatgpt-skills

17、Logo Remover

作者: bear2u

使用Gemini AI移除图片中的Logo，用于清理素材。

排版与字体

18、Typography Ref

作者: charleswiltgen, derklinke

排版参考技能，提供字体和排版指导。

核心内容：

• 字体选择指南
• 排版层次结构
• 行高和字距
• 响应式排版
• 字体配对

五、原型与线框图

19、Wireframe Prototyping

作者: aj-geddes

线框图原型设计技能，快速创建低保真原型。

使用场景：

• 快速概念验证
• 用户流程测试
• 布局探索
• 早期反馈收集

GitHub仓库: aj-geddes/useful-ai-prompts

20、Canvas Design

安装量: 19 | 作者: 多个贡献者

Canvas设计技能，用于创建视觉设计和图形内容。

应用场景：

• 营销物料设计
• 社交媒体图形
• 演示文稿设计
• 信息图表创建

21、Excalidraw

作者: acking-you

Excalidraw集成技能，用于创建手绘风格的图表和示意图。

特点：

• 手绘风格图形
• 协作绘图
• 多种图形元素
• 导出为多种格式

22、JSON Canvas

作者: aleister1102

JSON Canvas技能，用于创建和编辑结构化画布内容。

23、UML Diagram Design

作者: aaaaqwq

UML图设计技能，用于创建软件架构图。

图表类型：

• 类图
• 时序图
• 用例图
• 活动图
• 组件图

六、设计系统与组件

24、Design System

作者: 多个贡献者

设计系统构建技能，帮助团队建立和维护统一的设计语言。

核心组件：

• 设计令牌（颜色、字体、间距）
• 基础组件（按钮、输入框、卡片）
• 复合组件（表单、导航、模态框）
• 布局模式
• 文档规范

25、Tailwind Design System

作者: 多个贡献者

Tailwind CSS设计系统技能，提供实用优先的CSS框架指导。

特性：

• 自定义配置
• 组件模式
• 响应式设计
• 暗黑模式支持

七、设计到开发交接

26、Web Artifacts Builder

安装量: 18 | 作者: 多个贡献者

Web构件构建技能，将设计转换为Web就绪的资源。

功能：

• 资源优化
• 代码生成
• 响应式转换
• 性能优化

八、架构图与文档

27、Architecture Diagrams

作者: aj-geddes

架构图绘制技能，用于创建系统架构图和技术文档。

图表类型：

• 系统架构图
• 数据流图
• 网络拓扑图
• 部署图

GitHub仓库: aj-geddes/useful-ai-prompts

28、结束语

AI代理技能正在重新定义设计工作流。从构思到交付，这些技能为设计师提供了强大的工具，帮助他们更高效地工作，同时保持创造力和质量。

无论您是专注于UI/UX设计、品牌设计、图标设计还是前端开发，这些技能都能帮助您提升工作效率，创造出更出色的设计作品。随着AI技术的不断发展，我们期待看到更多创新的设计技能出现，为设计师社区带来更多可能性。

汇智网策划整理，转载请标明出处