qianduan-skill：给编程 Agent 的前端一站式技能包

这是一套把「多页架构 → 视觉方向 → 动效 → 交付前验收」串成一条流水线的前端技能集合。它把 5 个专职技能藏在一个路由入口后面——让 Agent 只看见一个技能，而不是五个技能互相抢触发。

项目简介

这个 skill 包一共包含 11 个 skill 项目，覆盖从自动获取优秀前端 UI、到视觉设计、到页面交互、到动画、再到交付前验收的完整环节，是一套面向编程 Agent 的一站式前端设计技能包。

它的核心思路是：把前端开发中原本分散、且容易互相打架的多个专职技能，统一收敛到一个路由入口后面。Agent 在面对一个建站需求时，不再需要自己判断该调用哪个技能，而是由入口先做一次任务分类，再把对应技能加载进上下文。

为什么要做成集合包

这些技能如果单独平铺放在一起，会出现严重的冲突：

• ui-styling 教的是 Tailwind + shadcn 的写法；
• premium-website 给的却是另一套共享 CSS 架构；
• design、brand、design-system 三个技能，都会去抢同一句「帮我做套设计系统」的指令。

平铺在一起的后果是：普通建站任务会被这些技能同时劫持，输出风格不统一、架构互相矛盾，Agent 自己也不知道该听谁的。

问题不在于每个技能写得不好，而在于它们被同时塞进了上下文。

路由入口如何解决这件事

路由入口只预先加载一段很短的说明，用来判断当前任务到底属于哪一类，然后才打开对应的那个专职技能。其余的技能全程不进上下文，也就不会发生抢触发。

最终效果是：Agent 表面上只看到一个技能入口，后台却已经根据任务类型，按需调度了最合适的那一个。这既保留了每个专职技能的深度，又避免了多技能同时竞争带来的混乱。

能力覆盖

整套技能包覆盖前端从设计到交付的完整链路：

• 多页应用架构规划
• 视觉方向与品牌风格
• 设计系统与组件规范
• 页面交互与动效设计
• 交付前的质量验收

从优秀 UI 的自动选取，到最终验收，全部在这一个包里完成。

开源地址

项目已开源，欢迎 Star 和试用：

https://github.com/xiangwanchen/qianduan-skill

如果在使用过程中有问题或建议，欢迎在 Issue 区交流。