mcpField
F
frontend-design

frontend-design

github.com/b-open-io设计与 UI1647 次安装4 周前更新
代码仓库

关于 frontend-design

面向编码 Agent 的前端设计技能，指导打造有辨识度的界面并落实生产级实现，涵盖字体、配色、构图、动效与无障碍。

主要功能

  1. 01特色字体选择指导
  2. 02有意图的配色方案
  3. 03非对称空间构图
  4. 04目的明确的动效模式
  5. 05生产质量与无障碍检查

适用场景

  1. 01规划独特的界面视觉方向
  2. 02构建带动效的响应式组件
  3. 03完善界面的无障碍与性能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/b-open-io/prompts --skill frontend-design

安装后在 Claude Code 中输入/frontend-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
color-animation-patterns.md
color-systems.md
production-patterns.md
typography-examples.md
typography-resources.md

详细介绍

前端设计技能

打造独具特色、达到生产级水准的 UI，避免落入千篇一律的 AI 生成界面。

官方插件可用：从 Anthropic marketplace 安装 frontend-design@claude-code-plugins，即可在前端任务中自动调用。本技能提供了超出官方版本的扩展指南。

核心理念

大多数 AI 生成的 UI 都有“AI 垃圾感”——功能上没问题，视觉上却平淡无奇。本技能通过鼓励你做出大胆的美学选择，帮助你打破这种模式，让界面拥有鲜明的个性。

五大支柱

1. 有个性的字体排印

避免使用： Inter、Arial、Roboto、system-ui（AI 常用默认选项）

改用： 根据项目调性，选择独具特色的字体组合：

  • 标题：Clash Display、Cabinet Grotesk、Satoshi、General Sans、Syne、Archivo
  • 正文：Outfit、Plus Jakarta Sans、Switzer、Geist
  • 等宽字体：JetBrains Mono、Geist Mono、IBM Plex Mono

核心原则： 不同项目之间绝不要使用相同字体。每个设计都应呈现真正不同的感觉。

2. 有意为之的配色方案

避免使用： Tailwind 默认颜色、基础蓝色按钮、灰色背景

打造标志性配色方案：

  • 语义化令牌（主色、强调色、中性色、表面色）
  • 使用 HSL，便于调整
  • 在中性色中微妙地调整色相（暖石色、冷板岩色）
  • 将渐变用作主色
3. 大胆的空间构图

避免： 所有内容居中、对称、受网格严格限制

有意打破网格：

  • 将负空间用作设计元素
  • 叠加元素以营造层次感
  • 有目的地打破对齐规则
  • 使用 clamp() 实现流式字体排印
4. 以动效塑造个性

避免： 完全没有动画或千篇一律的淡入效果

添加有目的的动效：

  • 弹簧物理效果（而非线性缓动）
  • 错落入场动画
  • 微妙的模糊过渡
  • 响应式悬停状态
  • 尊重 prefers-reduced-motion
5. 达到生产级水准的实现

要求：

  • 使用类型完善的 TypeScript
  • 无障碍性（焦点状态、ARIA、键盘导航）
  • 加载状态
  • 错误边界
  • 响应式设计
  • 性能优化

让复杂度契合设计愿景

  • 极繁主义设计： 复杂代码、大量动画、多层效果
  • 极简主义设计： 克制、精准，细致关注间距

工作流

  1. 确立设计方向——定义情绪、目标用户、配色方案和字体排印
  2. 创建组件架构——通过组合构建原子化设计系统
  3. 增添视觉个性——做出鲜明选择，建立有意为之的关联，采用有目的的不对称布局
  4. 实现动效——入场动画、交互和过渡
  5. 强化生产就绪性——为所有内容添加类型，处理边缘情况并进行优化

应避免的反模式

  • 默认使用 Inter/Roboto 字体
  • 不同项目之间使用相同字体
  • 灰白配色搭配蓝色按钮
  • 所有内容都居中且对称
  • 没有动画或使用千篇一律的淡入效果
  • 忽略深色模式
  • 遗漏加载/错误状态
  • 忽略无障碍性

补充资源

如需详细的实现指南，请参阅 references 目录：

  • references/typography-examples.md——按调性分类的字体组合、可变字体、响应式比例
  • references/color-animation-patterns.md——高级配色方案、渐变、深色模式、动画模式
  • references/production-patterns.md——完整组件示例、错误边界、性能优化、工具推荐

快速参考

# Distinctive font stacks (vary these per project!)
font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans'
font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist'
font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'

# Tailwind config pattern
theme: {
  extend: {
    colors: { /* HSL tokens */ },
    fontFamily: { /* Variable fonts */ },
    animation: { /* Spring-based */ },
  }
}

与设计专家 Agent 集成

以下情况使用此技能：

  • 打造独特的视觉形象
  • 创意性地选择字体和颜色
  • 采用大胆的空间构图
  • 构建可用于生产环境的动画组件

以下情况使用设计师 Agent：

  • 全面的 UI/UX 审查
  • 无障碍性审计
  • 设计系统架构
  • 组件库搭建

评论

支持 Markdown