Frontend Design 前端设计插件

Frontend Design 插件帮助创建独特、生产级的前端界面，超越通用 AI 生成的审美，追求真正有设计感的 UI 实现。

概述

Frontend Design 插件是一个前端 UI/UX 设计技能模块，它为 Claude 提供了设计理念和原则，帮助生成具有独特审美的前端代码，而不是千篇一律的"AI 风格"界面。

核心理念

mermaid

graph LR
    A[通用 AI 审美] --> B[千篇一律]
    B --> C[可预测的设计]

    D[Frontend Design] --> E[独特审美]
    E --> F[精确执行]
    F --> G[生产级界面]

    style A fill:#ffcdd2
    style D fill:#c8e6c9

核心目标：

"Generate distinctive, production-grade frontend interfaces that exceed generic AI aesthetics." — 生成独特的生产级前端界面，超越通用 AI 审美

设计原则概览

原则	说明
清晰的概念方向	先确定设计方向，再精确执行
独特审美	避免通用默认选择
代码匹配野心	复杂设计需要复杂代码
细节决定品质	关注纹理、渐变、装饰元素

安装与配置

插件安装

bash

# 安装 frontend-design 插件
/plugin install frontend-design@claude-plugins-official

目录结构

plugins/frontend-design/
├── .claude-plugin/
│   └── plugin.json
├── README.md
└── skills/
    └── frontend-design/
        └── SKILL.md           # 设计技能内容

配置文件 (plugin.json)

json

{
  "name": "frontend-design",
  "version": "1.0.0",
  "description": "Frontend design skill for UI/UX implementation",
  "author": {
    "name": "Prithvi Rajasekaran, Alexander Bricken",
    "email": "prithvi@anthropic.com, alexander@anthropic.com"
  }
}

设计理念详解

编码前准备

在开始编码之前，必须先建立清晰的设计方向：

mermaid

graph TD
    A[接收需求] --> B[建立背景]
    B --> C[确定目的]
    C --> D[定义语调]
    D --> E[识别约束]
    E --> F[确定差异化点]
    F --> G[开始编码]

    style A fill:#e3f2fd
    style G fill:#c8e6c9

背景建立清单：

要素	问题
目的	这个界面要解决什么问题？
语调	专业？活泼？极简？奢华？
约束	技术限制？品牌规范？
差异化	如何与竞品区分？

审美执行原则

1. 排版

避免：

默认字体（Arial、Helvetica）
通用的行高和间距
无层次的文字大小

追求：

独特的字体组合
精心设计的文字层次
有意义的间距系统

css

/* ❌ 通用默认 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

/* ✅ 独特选择 */
body {
  font-family: 'Instrument Serif', Georgia, serif;
  line-height: 1.65;
  letter-spacing: -0.02em;
}

h1 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

2. 色彩与主题

原则：

构建一致的调色板
主色 + 锐利的重音色
使用 CSS 变量管理

css

:root {
  /* 主色调 */
  --color-primary: #1a1a2e;
  --color-primary-light: #2d2d44;

  /* 重音色 - 锐利、引人注目 */
  --color-accent: #ff6b6b;
  --color-accent-hover: #ff8585;

  /* 中性色 */
  --color-surface: #fafafa;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;

  /* 功能色 */
  --color-success: #10b981;
  --color-error: #ef4444;
}

3. 动画

优先考虑：

高价值交互时刻
交错显示效果
滚动触发动画

css

/* 交错显示 */
.card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

4. 构图

追求：

拥抱不对称
元素重叠
打破网格布局

css

/* 打破常规的布局 */
.hero {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
}

.hero-image {
  /* 突破容器 */
  margin-right: -10%;
  transform: rotate(-2deg);
}

.floating-badge {
  position: absolute;
  top: -1rem;
  right: -1rem;
  /* 打破边界 */
}

5. 细节

关注：

分层纹理
微妙渐变
装饰元素

css

.card {
  /* 多层阴影 */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 8px rgba(0,0,0,0.04),
    0 16px 32px rgba(0,0,0,0.04);

  /* 微妙边框 */
  border: 1px solid rgba(0,0,0,0.06);

  /* 背景纹理 */
  background:
    linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%),
    url('noise.png');
}

避免的反模式

通用 AI 审美特征

特征	为什么要避免
过度使用渐变	看起来像模板
默认圆角	缺乏个性
居中对齐一切	无趣的构图
蓝紫配色	AI 生成的标志性配色
通用图标库	缺乏品牌特色

常见错误

mermaid

graph TD
    A[常见错误] --> B[过度使用字体]
    A --> C[可预测的配色]
    A --> D[千篇一律的布局]
    A --> E[忽视移动端]

    B --> B1[限制在 2-3 种字体]
    C --> C1[建立独特的调色板]
    D --> D1[尝试不对称和重叠]
    E --> E1[移动优先设计]

    style A fill:#ffcdd2
    style B1 fill:#c8e6c9
    style C1 fill:#c8e6c9
    style D1 fill:#c8e6c9
    style E1 fill:#c8e6c9

实现哲学

复杂性匹配

代码复杂性应该与审美野心匹配

设计类型	代码复杂度	重点
极简设计	低	精确间距、完美排版
丰富设计	高	复杂动画、多层效果
数据密集	中	清晰层次、信息架构

极简设计示例

jsx

// 极简 = 精确
function MinimalCard({ title, description }) {
  return (
    <article className="card">
      <h2 className="card-title">{title}</h2>
      <p className="card-description">{description}</p>
    </article>
  );
}

css

.card {
  padding: 2.5rem;
  background: #fff;
  /* 精确的间距和留白 */
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  /* 每个值都是精心选择的 */
}

.card-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

丰富设计示例

jsx

// 丰富 = 复杂
function RichCard({ title, description, image, badge }) {
  return (
    <article className="rich-card">
      <div className="card-image-wrapper">
        <img src={image} alt="" className="card-image" />
        <div className="card-overlay" />
      </div>
      {badge && <span className="card-badge">{badge}</span>}
      <div className="card-content">
        <h2 className="card-title">{title}</h2>
        <p className="card-description">{description}</p>
      </div>
      <div className="card-shine" />
    </article>
  );
}

css

.rich-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.rich-card:hover {
  transform: translateY(-4px) rotateX(2deg);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.7) 100%
  );
}

.card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  background: var(--color-accent);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  animation: pulse 2s ease infinite;
}

.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255,255,255,0.1) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
}

.rich-card:hover .card-shine {
  animation: shine 0.6s ease;
}

@keyframes shine {
  to {
    transform: translateX(100%);
  }
}

应用场景

场景 1：音乐平台仪表板

方向：暗色主题、动态、有节奏感

jsx

// 波形可视化 + 动态色彩
function NowPlaying({ track, isPlaying }) {
  return (
    <div className="now-playing">
      <div className="album-glow" style={{
        background: `radial-gradient(circle, ${track.dominantColor} 0%, transparent 70%)`
      }} />
      <img src={track.cover} className="album-cover" />
      <div className="track-info">
        <h3>{track.title}</h3>
        <p>{track.artist}</p>
      </div>
      <Waveform isPlaying={isPlaying} />
    </div>
  );
}

场景 2：科技初创登陆页

方向：现代、自信、前沿

jsx

// 渐变 + 模糊 + 网格
function HeroSection() {
  return (
    <section className="hero">
      <div className="hero-gradient" />
      <div className="hero-grid" />
      <div className="hero-content">
        <h1 className="hero-title">
          Build the future
          <span className="gradient-text">today</span>
        </h1>
        <p className="hero-subtitle">
          The platform that powers the next generation of apps.
        </p>
        <div className="hero-cta">
          <Button variant="primary">Get Started</Button>
          <Button variant="ghost">Learn More</Button>
        </div>
      </div>
    </section>
  );
}

场景 3：数据仪表板

方向：清晰、专业、信息丰富

jsx

// 数据可视化 + 清晰层次
function Dashboard() {
  return (
    <div className="dashboard">
      <header className="dashboard-header">
        <h1>Analytics Overview</h1>
        <DateRangePicker />
      </header>

      <div className="stats-grid">
        <StatCard title="Revenue" value="$124,500" trend="+12%" />
        <StatCard title="Users" value="8,420" trend="+5%" />
        <StatCard title="Conversion" value="3.2%" trend="-0.5%" />
      </div>

      <div className="charts-section">
        <Chart type="area" title="Revenue Over Time" />
        <Chart type="donut" title="Revenue by Source" />
      </div>
    </div>
  );
}

使用技巧

触发 Skill

当你需要前端设计帮助时，可以：

bash

# 明确提及设计需求
"帮我设计一个现代风格的登录页面"

# 或者使用功能描述
"创建一个科技感的仪表板 UI"

提供设计方向

给 Claude 更多上下文会得到更好的结果：

bash

# ❌ 模糊的请求
"做一个好看的页面"

# ✅ 清晰的方向
"创建一个音乐流媒体应用的播放器界面：
- 暗色主题
- 突出专辑封面
- 有动态的波形可视化
- 风格参考 Spotify 但更有个性"

迭代改进

bash

# 第一轮：基础实现
"创建一个产品卡片组件"

# 第二轮：增强细节
"添加悬停效果和微妙的阴影层次"

# 第三轮：完善动画
"添加入场动画和交互反馈"

常见问题

Q: 这个插件如何触发？

A: 当你的请求涉及前端界面设计时，Claude 会自动加载这个 Skill 来指导实现。

Q: 可以用于现有项目吗？

A: 可以。插件提供的是设计理念和原则，可以应用到任何前端项目。

Q: 支持哪些技术栈？

A: 设计原则是通用的，可以用于：

React / Vue / Svelte
CSS / Tailwind / styled-components
原生 HTML/CSS/JS

Q: 如何保持设计一致性？

A: 在项目开始时建立设计系统：

定义颜色变量
确定字体组合
建立间距系统
创建可复用组件

总结

Frontend Design 插件帮助创建有设计感的前端界面：

清晰的方向 - 先确定设计目标再编码
独特审美 - 避免通用 AI 风格
精确执行 - 代码复杂度匹配设计野心
关注细节 - 纹理、阴影、动画

让你的前端界面从"能用"升级到"出色"。

参考资源

GitHub 源码 - 官方插件仓库
Awwwards - 设计灵感
Dribbble - UI 设计参考

本文档基于 frontend-design 插件 v1.0.0 编写

Frontend Design 前端设计插件 ​

概述 ​

核心理念 ​

设计原则概览 ​

安装与配置 ​

插件安装 ​

目录结构 ​

配置文件 (plugin.json) ​

设计理念详解 ​

编码前准备 ​

审美执行原则 ​

1. 排版 ​

2. 色彩与主题 ​

3. 动画 ​

4. 构图 ​

5. 细节 ​

避免的反模式 ​

通用 AI 审美特征 ​

常见错误 ​

实现哲学 ​

复杂性匹配 ​

极简设计示例 ​

丰富设计示例 ​

应用场景 ​

场景 1：音乐平台仪表板 ​

场景 2：科技初创登陆页 ​

场景 3：数据仪表板 ​

使用技巧 ​

触发 Skill ​

提供设计方向 ​

迭代改进 ​

常见问题 ​

Q: 这个插件如何触发？ ​

Q: 可以用于现有项目吗？ ​

Q: 支持哪些技术栈？ ​

Q: 如何保持设计一致性？ ​

总结 ​

参考资源 ​

Frontend Design 前端设计插件

概述

核心理念

设计原则概览

安装与配置

插件安装

目录结构

配置文件 (plugin.json)

设计理念详解

编码前准备

审美执行原则

1. 排版

2. 色彩与主题

3. 动画

4. 构图

5. 细节

避免的反模式

通用 AI 审美特征

常见错误

实现哲学

复杂性匹配

极简设计示例

丰富设计示例

应用场景

场景 1：音乐平台仪表板

场景 2：科技初创登陆页

场景 3：数据仪表板

使用技巧

触发 Skill

提供设计方向

迭代改进

常见问题

Q: 这个插件如何触发？

Q: 可以用于现有项目吗？

Q: 支持哪些技术栈？

Q: 如何保持设计一致性？

总结

参考资源