创建一个属于自己的分布收敛风格前端开发 SKILL

在使用 claude code 开发前端页面的时候，通常都会遇到一个比较严重的问题——页面有很重的 AI 感——默认的白底紫渐变风格。

在学习了文章借助 Skills 提升前端设计 | Claude 后，了解到可以通过自定义 skill 的方式来完成页面开发。避免 claude code 使用千篇一律的页面风格。如有疑问可以留言交流。

接下来是实操创建属于自己的页面风格模式。

打开 claude code visual code 扩展，输入我们的提示词 prompt (见图1):

https://baoyu.io/translations/improving-frontend-design-through-skills 参考这篇文章，参考项目oauth-redirect-extension-download，提供一个 skill 给我，放置在当前项目目录下的 skills 里 EnterPlan

通过让 claude code 提取文章核心要点，然后读取要参考的项目，了解项目结构，技术栈、代码风格等各方面因素。接着进入我自定义的计划模式（我的计划模式在全局 CLAUDE.md 中进行了特殊申明，感兴趣的可查看我的全局 CLAUDE.md）。

本次项目参考的前端风格的站点是 OAuth 地址重定向助手。

在完成前述步骤后，claude code 很好的理解了文章核心概念、以及当前项目的代码风格和设计风格。通过 thinking 可以查看到 AI 的思考结果，见图2。

最终可以看到 claude code 完成任务的总结报告，很好的实现了我们的意图，见图3。

接下来 claude code 会根据要求在我们指定的位置创建好 SKILL.md 供我们查阅。下方是本次生产的前端开发技能文档——skills/frontend-design.md 的内容:

# 前端设计 Skill

## 设计哲学

避免分布收敛 - 不要生成千篇一律的 Inter 字体 + 白底紫渐变 + 可有可无的动画。每个项目都应该有独特的视觉个性。

## 四个核心维度

### 1. 字体排版

禁止使用通用字体
- 避免: Inter, Roboto, Arial, Helvetica
- 推荐: 高对比度搭配
  - 展示体 (Display Font) + 等宽字体 (Monospace)
  - 极端字重跳跃: 800/900 vs 100/200
  - 示例组合:
    - Bebas Neue (展示) + Fira Code (正文)
    - Space Grotesk (展示) + IBM Plex Mono (正文)
    - DM Serif Display (展示) + JetBrains Mono (正文)

字体加载
```html
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;900&family=IBM+Plex+Mono:wght@200;400&display=swap" rel="stylesheet">

2. 色彩与主题

大胆使用主色调 + 鲜明强调色

灵感来源

IDE 主题: Dracula, Nord, Monokai, Solarized
文化美学: 蒸汽波 (Vaporwave), 赛博朋克, 包豪斯, 新粗野主义

配色示例

/* Dracula 风格 */
--primary: #bd93f9;     /* 紫色 */
--secondary: #50fa7b;   /* 绿色 */
--accent: #ff79c6;      /* 粉色 */
--background: #282a36;  /* 深灰 */
--text: #f8f8f2;        /* 浅灰 */

/* Nord 风格 */
--primary: #88c0d0;     /* 青色 */
--secondary: #81a1c1;   /* 蓝色 */
--accent: #a3be8c;      /* 绿色 */
--background: #2e3440;  /* 深蓝灰 */
--text: #eceff4;        /* 浅灰 */

3. 动效策略

优先级: 页面加载动画 > 零散微交互

技术选择

HTML/CSS: 使用 CSS 动画
React: 使用 Framer Motion

页面加载动画示例

// React + Framer Motion
import { motion } from 'framer-motion';

const PageTransition = ({ children }) => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -20 }}
    transition={{ duration: 0.3, ease: 'easeOut' }}
  >
    {children}
  </motion.div>
);

4. 背景处理

创造深度 - 避免纯色背景

技术手段

层叠 CSS 渐变
几何图案
噪点纹理
SVG 图形

背景示例

/* 层叠渐变 */
.background {
  background:
    linear-gradient(135deg, rgba(189, 147, 249, 0.1) 0%, transparent 50%),
    linear-gradient(225deg, rgba(80, 250, 123, 0.1) 0%, transparent 50%),
    linear-gradient(315deg, rgba(255, 121, 198, 0.1) 0%, transparent 50%),
    #282a36;
}

/* 网格图案 */
.grid-background {
  background-image:
    linear-gradient(rgba(248, 248, 242, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 248, 242, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

实施原则

指导高度: 不高不低

避免过度具体的技术指令
避免模糊的 "你懂的" 式要求
给出明确的设计维度，让 AI 发挥创意潜力

渐进式开发

先实现功能，再优化设计
小步提交，确保编译通过
避免过早抽象

技术栈建议

React 项目

{
  "dependencies": {
    "react": "^19.x",
    "react-dom": "^19.x",
    "framer-motion": "^11.x"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^5.x",
    "tailwindcss": "^4.x",
    "vite": "^5.x"
  }
}

Tailwind 配置

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['Space Grotesk', 'sans-serif'],
        mono: ['IBM Plex Mono', 'monospace'],
      },
      colors: {
        primary: '#bd93f9',
        secondary: '#50fa7b',
        accent: '#ff79c6',
        background: '#282a36',
        text: '#f8f8f2',
      },
    },
  },
};