AI 写网页总有“模板味”?这 5 款 Skills,值得放进你的工具箱

鬼影重重  /  工具札记

鬼影重重 · 工具札记 001

用 AI 写代码，最让人头疼的，往往发生在“它已经写完”之后。

网页打开了，功能也有，但标题、卡片、按钮和渐变背景放在一起，总透着一股熟悉的模板味。让它再改改，颜色换了，圆角变了，页面却还是缺少自己的气质。

Python 脚本也有类似的问题。这份数据能处理，换一份就报错；小文件跑得挺快，文件一多，进度就像停住了一样。你让 AI 优化，它改了一大段，却没有说清楚，究竟慢在哪里。

于是，我们不断补充相同的要求：先看项目结构，别急着重写；设计要有层次，别只会堆卡片；优化之前先定位问题，修改之后记得验证。

这些反复交代的做事方法，可以整理成 AI 能够按需参考的 Skills。

你可以把一款 Skill 看作放在 AI 案头的一册工作手札：什么时候用、先看什么、按什么原则处理，以及怎样检查结果。它提供章法，模型与开发工具负责执行，具体效果还要放回任务里判断。

这一期「鬼影重重」，挑了五款各有所长的 Skills：从前端审美，到 React 性能，再到 Python 测试与优化。选它们，是因为每一款都对应一个清楚的问题。

01 / frontend-design：先给页面一种气质

图片来源：Anthropic Skills 官方仓库的 GitHub 分享图，用于识别项目；图中统计为图片生成时的快照。

很多 AI 页面的问题，并不在于少了某个组件，而在于缺少整体判断。

大标题、数据卡片、渐变按钮，单独看都没错。但如果没有内容轻重，没有视觉重心，也没有与主题相符的字体和色彩，最后就容易变成一份元素齐全、个性模糊的页面。

Anthropic 的 frontend-design，值得关注的就是这部分设计判断。

它为界面设计提供指导，强调有意图地选择视觉方向，让字体、配色、空间、布局与动效相互配合。对于新页面或需要重新梳理视觉的界面，它能给 AI 增加更具体的设计要求。

比如，给「鬼影重重」做一个工具分享主页，就可以从账号的内容气质出发：纸白、墨黑、少量朱砂，标题疏朗，信息清楚。首页先呈现本期推荐，再安排分类和往期文章，让读者知道该看哪里、往哪里走。

中式美学也可以很当代。留白、字距、色彩的节制，往往比满屏山水和印章，更适合一个需要长时间阅读的工具网站。

鬼影重重原创示意：层级、留白与配色共同组织内容，不是 frontend-design 的实测输出。

这款 Skill 比较适合个人主页、产品介绍页、作品集等需要辨识度的任务。尤其是页面已经能用，却让人觉得“到处都见过”的时候，可以先从设计方向入手。

推荐理由：让“做得好看一点”，变成有依据的视觉选择。

项目地址：anthropics/skills · frontend-design 原文

02 / UI UX Pro Max：把配色、字体与组件放到同一套规则里

图片来源：UI UX Pro Max 官方 README。这是项目提供的展示图，图中资源数量与命令可能属于较早版本，不作为本文的当前规格说明。

做界面时，还有一种常见的困境：知道自己不喜欢什么，却说不清应该换成什么。

觉得太空，就加卡片；觉得不够高级，就加阴影；看到别的网站有动效，又想给自己的按钮加一点。页面越来越丰富，统一感却越来越弱。

UI UX Pro Max 提供了可以检索参考的设计资料，涉及界面风格、配色、字体搭配与 UX 指导。

它的价值，在于帮助 AI 把分散的选择组织起来。一个面向中文读者的知识工具站，标题需要辨识度，正文需要易读，代码需要清楚区分，按钮需要让人知道下一步做什么。每个部分都应该与整体目标相符。

同样是朱砂红，用在整段正文、提示标记和主要按钮上，效果完全不同。颜色分工明确，页面才能既有气质，又不妨碍使用。

它和 frontend-design 有重叠。我的选择是：一个具体页面缺少视觉方向，先看 frontend-design；需要整理一整套配色、字体和界面规范，再看 UI UX Pro Max。先解决问题，不必为凑齐工具箱而重复安装。

推荐理由：当设计选择没有依据时，它能提供一套值得查阅的参考。

项目地址：nextlevelbuilder/ui-ux-pro-max-skill

03 / vercel-react-best-practices：页面漂亮之后，还要跑得顺

图片来源：Vercel Agent Skills 官方仓库的 GitHub 分享图；图中统计为图片生成时的快照。

视觉问题容易看到，性能问题却经常藏在“功能都正常”的代码里。

页面需要几份数据，其中一些并不互相依赖，却被安排成一个接一个等待；首屏暂时用不到的内容，也随着页面一起加载；一处局部变化，带动了过多组件重新渲染。

Vercel 的这款 Skill，为 React 和 Next.js 提供了性能方面的指导，涉及数据请求、包体积和渲染等问题。

其中一个适合用来理解性能工作的例子，是“请求瀑布”。

假设一个页面要展示作者资料、文章列表和推荐工具。如果三份数据独立获取，逐个等待可能造成不必要的延迟。但如果后一个请求确实需要前一个请求的结果，就不能简单地全部并行。

鬼影重重原创示意：只解释独立请求的安排方式，无真实时间轴，不代表固定提速幅度。存在依赖关系的请求需要另行分析。

这款 Skill 的意义，就是给 AI 审查代码时增加一组具体的关注点。相比一句笼统的“帮我优化”，它更接近围绕实际实现寻找原因。

如果你已经在维护 React 或 Next.js 项目，尤其是页面和功能不断增加时，它会更有使用价值。优化仍要以实际问题为起点，不能因为规则里提到了某种方法，就机械地加到所有组件上。

推荐理由：让性能修改有明确的检查方向，减少凭感觉重写。

项目地址：vercel-labs/agent-skills

04 / python-testing-patterns：让代码经得起换一种输入

图片来源：wshobson/agents 原始仓库的 GitHub 分享图。本文推荐的是其中两款 Python Skills；图片中的仓库统计不是单款 Skill 的使用量。

一个清洗表格的函数，在样例文件上运行成功，并不能说明它已经处理好所有情况。

某一列缺失、日期格式变化、文件为空，或者出现重复记录，都可能让原本顺利的流程中断。如果测试只覆盖正常样例，问题就容易留到真正使用时才出现。

python-testing-patterns 围绕 pytest、测试夹具、Mock、参数化与异步测试等方法展开，适合帮助 AI 更系统地组织 Python 验证。

拿表格清洗来说，测试可以分别检查正常输入、空数据、缺少字段和重复记录。但在动手之前，还需要回答：这些情况应该得到什么结果？

重复记录要删除、合并还是保留，需要由业务目标决定。测试不是替项目做决定，而是把已经确定的要求变成可重复检查的依据。

鬼影重重原创示意：三个常见验证方向，不是 pytest 实际运行记录，也不表示项目已经通过测试。

对于经常处理文件、数据和接口的人，这款 Skill 很实用。脚本开始反复使用，或者频繁修改时，有价值的测试能让后续调整更有底气。

也不必为了完整而堆砌测试。先守住容易出错、影响较大的部分，通常更值得。

推荐理由：给“这次应该没问题”，增加可以反复核对的依据。

项目地址：wshobson/agents · python-testing-patterns 原文

05 / python-performance-optimization：先找出慢在哪里

“帮我优化一下这个 Python 脚本。”

如果没有运行记录和测量依据，这个要求很容易演变成一次大范围改写：换写法、加缓存、引入并发，动了很多地方，却未必碰到真正的瓶颈。

python-performance-optimization 包含性能分析与优化的工作方法，可以用于检查 CPU、内存和 I/O 等方面的问题。

批量处理文件时，时间可能花在重复读取；调用外部服务时，可能主要在等待网络；计算任务中，也可能是某一步反复做了同样的工作。

这些问题需要不同的处理方法。比较稳妥的顺序，是先用有代表性的输入建立基准，定位主要耗时，再做有针对性的调整。改完后，使用相同条件比较，同时确认输出仍然正确。

鬼影重重原创示意：性能分析的基本思路，没有使用虚构的耗时或提速数据。

它适合运行时间较长的数据脚本、批量任务和接口流程。值得推荐的原因，也不在于承诺“装完快十倍”，而在于提醒 AI 先给出证据，再讨论修改。

推荐理由：把“优化”从换一种写法，推进到解释问题、验证变化。

项目地址：wshobson/agents · python-performance-optimization 原文

五款工具，先挑哪一款？

页面总有模板味
优先关注：frontend-design

配色、字体和组件不统一
优先关注：UI UX Pro Max

React / Next.js 页面存在性能问题
优先关注：vercel-react-best-practices

Python 换一种输入就容易出错
优先关注：python-testing-patterns

Python 跑得慢，却找不到原因
优先关注：python-performance-optimization

第一次尝试，不妨选一个范围清楚的小任务：调整一个首页，补齐一个函数的关键测试，或者分析一段批量脚本的运行表现。任务越明确，越容易判断工具是否帮上了忙。

如果使用支持 Skills CLI 的本地开发环境，可以参考以下单项安装入口。目标助手、安装范围与后续步骤，以命令行提示和项目最新说明为准。

npx skills add https://github.com/anthropics/skills --skill frontend-design

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

npx skills add https://github.com/wshobson/agents --skill python-testing-patterns

npx skills add https://github.com/wshobson/agents --skill python-performance-optimization

UI UX Pro Max 请按项目 README选择对应平台的安装方式。不要照搬展示图片中的旧命令。

案头有章法，动手见真知

这五款 Skills，各自整理了一部分专业经验：设计时考虑整体气质，开发时留意性能，修改之后验证行为，发现变慢先查原因。

工具可以提供参考，具体任务仍需要判断。页面是否好读，要看真实显示；性能是否改善，要看测量记录；测试是否有用，要看它守住了哪些要求。

一本手札，先翻到需要的那一页。

我是鬼影重重。翻开工具，看清用处，再动手一试。