最近我在做前端相关工作时，越来越明显地感受到一件事：
AI 不是不能用，而是很多时候"直接让它写"太容易跑偏。
所以我整理了一些前端相关的 AI Skills，把我在实际工作里反复用到的流程固化下来。
它们不是那种"泛泛而谈的提示词"，而是针对具体场景设计好的工作流：有的负责把模糊需求整理成规格，有的负责从 0 搭网站，有的负责按设计稿还原静态页面，还有的负责按既有风格体系生成前端界面。
目前我整理出来的主要是这 4 个：
req-to-ai-specwebsite-creatorstatic-page-builderstyle-vault
我会把 GitHub 地址放在文末，大家可以直接看仓库结构和说明。
为什么我会整理这套 Skills
因为我发现前端开发里最浪费时间的，往往不是写代码本身，而是这些环节：
- 需求说得太散，AI 一上来就开始猜
- 想从零开一个项目，目录结构每次都要重新想
- 有设计稿，但页面还原总是不够准
- 页面越来越多，视觉风格开始散掉
- 项目里有一些高频套路，每次都要重复讲一遍
所以我就把这些高频场景拆开，做成了几个可以直接复用的 Skill。
它们不是"取代思考"，而是帮我把重复劳动变少，把每一步都变得更可控。
这 4 个 Skills 分别做什么
1. req-to-ai-spec
把零散需求整理成 AI 能执行的规格文档。
这个我用得非常频繁，基本上是前置第一步。
适用场景
- 只有产品聊天记录，没有正式需求文档
- 只有截图、草稿、口头描述
- 想先把功能边界、页面结构、验收标准写清楚
- 准备把需求交给 AI 编码之前，先让它更"懂题"
它的作用
它会把散乱的描述整理成结构化 spec，帮助我把：
- 背景
- 目标
- 功能范围
- 页面结构
- 交互边界
- 验收标准
这些东西先说清楚。
我的使用方式
我通常会直接把需求描述扔给它，比如：
text
帮我把这个需求整理成 AI 可执行的规格文档：
- 用户可以创建项目
- 支持列表页和详情页
- 需要搜索、筛选、分页
- 移动端也要能用如果有原型图或者截图，我也会一起给它。
2. website-creator
从 0 创建一个网站或应用。
这个 Skill 适合新项目起步阶段，我自己也会经常用。
适用场景
- 从零开始做一个前端站点
- 想快速搭一个产品原型
- 需要先把项目骨架和目录结构定下来
- 想在创建项目时就把很多约定一次性固定好
它的作用
它会先通过提问把需求问清楚，然后再给出项目规划，最后按对应的技术路线生成项目骨架。
如果是纯前端，就走前端方向；
如果是全栈，也可以把后端一起规划进去。
我的使用方式
比如我会直接说：
text
帮我做一个团队任务管理网站，先搭前端骨架。或者：
text
我要做一个 SaaS 登录页 + Dashboard 系统，帮我从 0 开始规划项目。它会帮我确认：
- 项目名称
- 是纯前端还是全栈
- 放在哪个目录
- 核心页面和功能
- 有没有特殊技术约束
这一步很适合拿来"把项目起盘"。
3. static-page-builder
把设计稿或截图还原成静态页面。
这个 Skill 特别适合 UI 落地。
适用场景
- 我有一张设计图，要尽量还原成页面
- 想先做静态页，交互后面再补
- 页面结构已经明确，只差实现
- 需要对齐字体、间距、颜色、按钮位置这些细节
它的作用
它的核心原则是：先确认清楚，再写代码。
它不会一上来就猜布局，而是会先把页面结构拆出来，再确认哪些视觉细节已经明确，哪些需要补充。
我的使用方式
比如我会直接说：
text
根据这张截图帮我还原一个静态页面，先不要加交互。或者：
text
我要做一个和这个设计稿一致的登录页，先还原布局和视觉。它会重点关注这些内容：
- 背景是纯色还是图片
- 图标和图片的位置
- 字体大小、颜色、字重
- 按钮样式、圆角、边框
- 卡片阴影和间距
- 移动端和桌面端的响应式行为
这个 Skill 的好处是：
它很适合静态先行，先把视觉做准，再进入业务逻辑。
4. style-vault
让前端风格保持统一。
这个是我自己很喜欢的一个方向，因为它解决的是"页面越做越散"的问题。
适用场景
- 我已经有一套偏好的 UI 风格
- 想让新页面继续沿用同一套视觉体系
- 做中后台、SaaS、落地页时，希望风格更统一
- 不想每次生成出来的页面都像另一个项目
它的作用
style-vault 更像一个风格资产库。
它不是单纯输出"好看的界面"，而是把风格拆成了不同层级：
- product
- style
- page
- block
- component
- token
这样生成出来的页面会更容易保持一致性，不容易每次都跑偏。
我的使用方式
如果我要做一个后台页，或者一个统一风格的产品页，我会直接按某个 style ID 去调用它。
它会按照对应风格的规则去组合页面和组件，而不是每次都从零自由发挥。
这对我来说特别重要，因为我自己平时要做的页面不少，风格统一比"每次都新鲜"更有价值。
这套 Skills 我现在是怎么搭配用的
如果是一个完整的前端项目，我通常会按这个顺序来：
第一步：req-to-ai-spec
先把需求整理清楚，避免后面返工。
第二步：website-creator
再把项目骨架搭起来，把技术结构和目录先定住。
第三步：static-page-builder
如果有设计稿，先把静态页面还原出来。
第四步：style-vault
需要统一视觉的时候，就用它来保持整个项目的风格一致。
仓库地址
如果你也在用 AI 做前端，或者你也想把自己常用的流程固化成可复用的 Skill，可以看看这个仓库，欢迎一起交流。