第 10 章 · 个人技能可视化：frontend-design实战

第10章第6节个人技能可视化：frontend-design实战

Tip

阅读指南

前面几节我们一直在自己写 Skill。但社区里还有很多别人写好的 Skill，装完就能用。这一节的目的不是教你写 Skill，而是推荐一个非常有用的 Skill——frontend-design。

frontend-design 是一个前端设计 Skill，它的核心能力是帮非专业设计的程序员做出有品质的网页 UI。为了让你直观感受它能做到什么程度，我们拿「个人技能展示页」作为演示案例：准备一份假数据的 JS 文件，写一段 Prompt 调用 frontend-design，让它自动生成一个完整的展示页面。

本节你将完成：

了解 frontend-design 这个 Skill 能做什么
准备一份 19 个技能的假数据（JS 模块）
看一段 Prompt 如何引用 frontend-design 来设计页面

6.1 推荐一个优秀的 Skill：frontend-design

写网页是 AI 最能快速出效果的场景之一。你给它一段描述，它就能生成 HTML。但这里有一个明显的问题——质量不稳定。

直接让 AI 写网页，大概率得到的是这种风格：白底、居中排版、圆角卡片、紫色渐变按钮。它不是不能用，但每个页面都长一个样，一看就知道是 AI 生成的。

社区里有一个专门解决这个问题的 Skill——frontend-design。

frontend-design 不是一个「教 AI 怎么写 HTML」的工具。它的核心是一套经过验证的设计规范和审美标准。当 AI 遵循它的指引生成页面时，会自动避开那些 AI 廉价审美的坑：不会出现莫名其妙的紫色渐变、不会滥用圆角卡片、不会用无聊的居中布局。从字体搭配到配色选择，从动画微交互相到页面构图，它都有明确的主张。

简单说：你不需要自己会设计，你只需要装一个 frontend-design，然后告诉 AI「按它的标准来做」。

6.2 演示案例：个人技能展示页

为了直观感受 frontend-design 的能力，我们准备了一个简单的演示场景。

数据准备

{
  id: 'frontend-design',
  name: 'frontend-design',
  displayName: '前端设计引擎',
  category: '设计创作',
  description: '创建有品质的前端界面...',
  fullDescription: '一个注重设计品质的前端生成技能...',
  tags: ['UI', '设计', '前端', 'CSS', 'HTML'],
  stats: { stars: 934, used: 6200, updated: '2025-04' },
  installCmd: 'qoder install frontend-design',
  icon: 'pencil-ruler',
  version: '2.7.0',
  author: 'Anthropic'
}

我们准备了 19 个技能的假数据，放在一个 JS 文件里。每个技能包含 id、name、displayName、category、description、fullDescription、tags、stats、installCmd 等字段。

完整的数据文件在 samples/chapter10/skill-portfolio/assets/skills-data.js。

Prompt

数据准备好了。怎么让 AI 把这些数据变成一个漂亮的网页？答案是一段 Prompt：

使用 **frontend-design** 技能生成一个高质量的个人技能可视化网页。

## 数据
- 数据文件：assets/skills-data.js
- 导出了 skills（技能列表）和 categories（分类列表）

## 页面
- 首页：卡片网格展示所有技能
- 详情页：点击卡片后切换，展示完整信息

这段 Prompt 比你想象中短得多。没有设计规范、没有样式说明——不是因为不需要，而是因为那些已经写在 frontend-design 的 SKILL.md 里了。你只需要告诉 AI「使用 frontend-design」，它会自己去加载 frontend-design 的设计指引。

完整的 Prompt 文件在 samples/chapter10/skill-portfolio/SKILL.md。

运行

把数据和 Prompt 一起交给 AI：

这里有一份技能数据（assets/skills-data.js），
请按这段 Prompt（SKILL.md）的要求，
用 frontend-design 生成一个个人技能展示页。

AI 收到后，先读取你的 Prompt 了解页面结构，再加载 frontend-design 的设计规范，然后从 skills-data.js 读取数据，开始生成 HTML。

效果

生成的结果有几个值得注意的特点：

完全自主手写样式，不依赖 Bootstrap、Tailwind 等外部 CSS 框架
零 emoji，所有图标用内联 SVG 实现（个人经验，想要好看的UI，必须禁止使用Emoji这种AI超喜欢的东西）
深色主题 + 强调色，没有紫青渐变（AI一般默认会选用紫色，他认为紫色具有赛博朋克的科技感）、没有无聊的居中布局
两视图切换：首页卡片网格带分类筛选，点击后平滑过渡到详情页

19 个技能、5 个分类、一份 JS 数据文件、一段不到 10 行的 Prompt——剩下的 HTML、CSS、交互逻辑全部由 frontend-design 指挥 AI 自动完成。

6.3 ■ 学点英语

中文	English	音标	说明
前端设计技能	frontend-design	/frʌnt end dɪˈzaɪn/	社区推荐的高质量前端设计Skill，提供经过验证的设计规范和审美标准
可缩放矢量图形	SVG	/es viː dʒiː/	用XML描述2D图形的格式，frontend-design用它替代emoji实现高质量图标
主题	Theme	/θiːm/	页面的视觉风格，frontend-design采用深色主题+强调色的方案
CSS框架	CSS Framework	/siː es es ˈfreɪmwɜːrk/	外部样式库（如Bootstrap、Tailwind），frontend-design不使用任何外部框架

◀ 让 AI 帮你创建 Skill

返回目录

▶ Skill 的实战心法：让指令真正生效

第10章 第6节 个人技能可视化：frontend-design实战