设计代理
48种代理技能，适用于网络、应用程序、图形和印刷品的设计和产品开发。专为Anderson Collaborative打造。
安装
# Clone
git clone https://github.com/andersoncollaborative/design-agent.git
# Or install as Claude Code plugin
/plugin marketplace add andersoncollaborative/design-agent
/plugin install design-skills
API密钥
复制 .env.example 到 .env 并添加您的密钥：
- Brandfetch --品牌数据（徽标、颜色、字体）： 获取密钥
- remove.bg --背景移除： 获取密钥
技能
网页设计
| 技能 | 类型 | 描述 |
|---|
brand-research | 组件 | 通过Brandfetch API获取任何品牌的标识 |
aesthetic-direction | 互动 | 15个以上方向的引导式美学选择 |
typography-pairing | 组件 | 按心情进行字体共享字体配对 |
color-system | 组件 | 调色板+渐变配方 |
bento-layout | 组件 | 带生产代码的Bento网格图案 |
component-patterns | 组件 | 60+UI组件最佳实践 |
motion-design | 组件 | Web动画模式（CSS、Framer Motion、滚动） |
responsive-patterns | 组件 | 断点策略、流体类型、容器查询 |
dark-mode | 组件 | 带有主题标记和切换的黑暗模式系统 |
background-removal | 组件 | remove.bg API集成 |
icon-systems | 组件 | 图标库选择、尺寸比例、可访问性 |
image-optimization | 组件 | 格式选择、响应式srcset、延迟加载、CWV |
seo-design-patterns | 组件 | 语义HTML、结构化数据、标题层次结构 |
micro-interactions | 组件 | 悬停效果、按钮反馈、切换动画 |
form-design | 组件 | 输入模式、验证、多步骤向导 |
i18n-rtl | 组件 | 国际化、RTL布局、逻辑属性 |
white-label-systems | 组件 | 多租户主题化，动态品牌切换 |
design-qa | 组件 | 视觉回归测试、发布前检查表 |
above-the-fold-audit | 工作流程 | 审核移动设备上的实时URL，定位CTA，运送手术CSS贴片，并在验证前后进行测量 |
design-handoff | 工作流 | 开发移交规范、注释、资产导出 |
gsap-animations | 组件 | GSAP时间线、ScrollTrigger、SplitText、交错 |
lottie-rive | 组件 | After Effects Lottie+Rive交互式动画 |
navigation-patterns | 组件 | 导航栏、侧栏、底部选项卡、命令选项板 |
onboarding-ux | 组件 | 首次运行体验、空州、特色之旅 |
error-states | 组件 | 404/500页，离线模式，优雅降级 |
data-visualization | 组件 | 图表选择、D3/重新绘制、数据颜色 |
typography-animation | 组件 | 动态类型、文本显示、可变字体 |
spacing-layout-system | 组件 | 4px网格，CSS网格/子网格，节节奏 |
产品和应用程序设计
| 技能 | 类型 | 描述 |
|---|
figma-pipeline | 工作流程 | Figma MCP→ 生产代码管道 |
landing-page-patterns | 组件 | 具有CRO心理学的高转化率页面模式 |
email-design | 组件 | Gmail、Outlook、Apple Mail、Yahoo的电子邮件模板 |
dashboard-patterns | 组件 | 数据，即KPI卡、管理面板布局 |
scroll-animations | 组件 | CSS滚动驱动动画（动画时间线） |
accessibility-system | 组件 | 深度a11y系统：焦点、ARIA、键盘、测试 |
design-tokens | 组件 | 用于供应商中立令牌交换的W3C DTCG格式 |
page-transitions | 组件 | 视图转换API模式以实现无缝导航 |
app-design-system | 交互式 | 应用程序设计系统向导（导航、状态、表单） |
agentic-ui | 组件 | 人工智能界面模式：意图预览、自主拨号 |
图形
| 技能 | 类型 | 描述 |
|---|
social-media-design | 组件 | 适用于所有平台的社交创意模板 |
ad-creative-design | 组件 | 付费广告创意模式和规格 |
打印
| 技能 | 类型 | 描述 |
|---|
print-design | 组件 | 打印就绪的规格（名片、小册子、标牌） |
工作流
| 技能 | 类型 | 描述 |
|---|
design-system-generator | 交互式 | 完整设计系统创建向导 |
visual-audit | 工作流程 | 审核现有网站的设计质量 |
design-critique | 组件 | 8维设计质量评分框架 |
design-to-code | 工作流 | 端到端概念→ 生产代码 |
brand-identity-system | 工作流程 | 从头开始完成品牌标识 |
competitive-design-intel | 工作流程 | 自动化竞争设计分析 |
client-deliverables | 工作流程 | 机构可交付成果生成（PDF、报告、指南） |
MCP集成
| MCP服务器 | 它支持什么 |
|---|
| Figma | 设计提取、令牌同步、代码连接映射 |
| 可画 | AI设计生成、编辑、导出 |
| Brandfetch | 任何域名的品牌标识数据 |
外部资源
| 资源 | URL | 类型 |
|---|
| Fontshare | Fontshare.com | 免费字体（CDN） |
| 粒度 | 粒度.应用 | 梯度+背景 |
| Bentogrids | Bentogrids.com | 布局灵感 |
| 组件库 | 组件库 | UI组件引用 |
| 工艺品 | 工艺品设计 | 网站设计灵感 |
| Brandfetch | Brandfetch.com | 品牌数据API |
| remove.bg | remove.bg | 后台删除API |
| W3C设计令牌 | tr.designtokens.org | 令牌交换规范 |
许可证
麻省理工学院
