使用 Agent Skills 打造赛博极简风格前端

你是否想过，让 AI 不只是写代码，还能像一个专业设计师一样帮你打造独特的视觉风格？今天，我用 Agent Skills 完成了一次博客的 "赛博朋克" 风格改造，分享一下完整过程。

什么是 Agent Skills？

Agent Skills（技能） 是一种扩展 AI Agent 能力的机制。你可以把它理解为：

给 AI 安装"专业插件"，让它在特定领域变得更强。

每个 Skill 是一个文件夹，包含：

当你告诉 AI 使用某个技能时，它会阅读 SKILL.md 中的指令，按照里面的规则来完成任务。

Skills 有什么用？

想象一下这些场景：

• 🎨 前端设计 —— 让 AI 按照"拒绝平庸 AI 审美"的原则，打造独特界面
• 📝 代码规范 —— 让 AI 遵循你公司的编码风格
• 🔧 部署流程 —— 教 AI 如何按标准步骤发布项目
• 📊 数据分析 —— 让 AI 用特定库和方法处理数据

Skills 让 AI 从"通用助手"变成"领域专家"。

如何安装 Skills？

以 Anthropic 官方的 Skills 库为例：

1. 创建技能目录

mkdir -p .agent/skills

2. 克隆技能仓库

git clone https://github.com/anthropics/skills .agent/skills/anthropics

3. 查看可用技能

ls .agent/skills/anthropics/skills/

你会看到多个技能目录，比如：

• frontend-design/ —— 前端设计专家
• code-review/ —— 代码审查
• 等等...

如何使用 Skills？

使用技能非常简单，只需在对话中提到技能路径：

@[.agent/skills/anthropics/skills/frontend-design] 帮我美化这个博客的样式

AI 会：

1. 读取 SKILL.md 中的指令
2. 按照技能定义的原则和方法工作
3. 产出符合技能标准的结果

实战案例：博客美化改造

下面是我使用 frontend-design 技能改造博客的真实过程。

设计方向：Neo-Tokyo 赛博风格

frontend-design 技能的核心理念是：拒绝平庸的 AI 审美。它会引导 AI：

• ❌ 不用 Inter、Roboto 等"万金油"字体
• ❌ 不用烂大街的紫色渐变
• ✅ 选择有个性的配色和动效
• ✅ 追求"让人过目不忘"的设计

基于这个理念，我确定了 Neo-Tokyo 风格：深邃虚空背景 + 霓虹青色强调 + 赛博故障效果。

改造内容

1. 全局动画样式

在 globals.css 中添加了一套完整的动效系统：

/* 霓虹脉冲动画 */
@keyframes neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 5px var(--primary),
      0 0 10px var(--primary);
  }
  50% {
    box-shadow:
      0 0 20px var(--primary),
      0 0 40px var(--primary);
  }
}
 
/* 玻璃态卡片 */
.glass-card {
  background: oklch(0.15 0.03 260 / 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid oklch(0.7 0.15 190 / 0.2);
}

2. 导航栏升级

• 玻璃态毛玻璃背景
• 霓虹底部边框
• 链接悬浮时的发光下划线

3. Hero 区域

• 扫描线动画效果
• 浮动装饰元素
• 脉冲发光按钮
• 打字机光标

4. 博客卡片

• 渐变边框（悬浮时显现）
• 霓虹发光标签
• 入场动画

改造结果

改造前：普通的技术博客 改造后：像在操作未来终端的体验

总结

Agent Skills 是让 AI 变得更专业的关键：

1. 安装简单 —— 克隆仓库到 .agent/skills/ 目录
2. 使用方便 —— 在对话中 @[技能路径] 即可激活
3. 效果显著 —— AI 会严格按照技能定义的专业标准工作

你也可以创建自己的 Skills，把团队的最佳实践沉淀下来，让 AI 成为你团队的"领域专家"。

本文通过 Agent 辅助生成，使用了 frontend-design 技能。