visant-skills-public

# visant-skills-public

提供 Claude Code 技能，用来决定界面、动效和文案，在提交拉取请求前审查屏幕是否有千篇一律的 AI 设计，还能剪辑视频。适合前端开发者和设计师。

由 pedrojaques99 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：visant-skills-public 是 Visant 出品的一组 Claude Code 技能。它们的主题是界面、动效和文案的决策，在屏幕进入拉取请求之前检查它，以及视频剪辑。每个技能都会先检查你的仓库已有什么，比如关卡、基础组件和设计令牌，然后才动手。这些检查是真正的脚本，npm test 会用测试样本从正反两面运行每条规则。

适合谁：它适合使用 Claude Code 的前端开发者和设计师，他们希望界面、动效和文案工作遵循清晰的规则。

```table
行业 | 谁在用 | 怎么用 | 例子
软件产品 | 前端开发者 | 在拉取请求前审查屏幕 | 扫描一张定价卡片，得到关于调色板类、文案毛病和视觉杂乱的发现
产品设计 | 在代码里工作的设计师 | 按每个界面元素推动的业务变量来决定取舍 | 不推动任何业务变量的元素会被删掉
营销 | 产品文案作者 | 检查文案里有没有 AI 写作的痕迹 | 在落地页文字里抓出破折号或夸大用词
视频制作 | 产品演示的剪辑师 | 剪辑录制好的网站画面 | 把一段网站录屏变成可导入 Premiere 的粗剪
```

没有网页前端的团队可以跳过它，不使用智能体技能的人也可以跳过。

用在哪里：Claude Code 是唯一测试过的智能体。支持情况取决于项目类型。

- Claude Code，在你的请求匹配时加载这些技能
- 带有 .tsx 和 .jsx 文件的 React 和 Next 项目，所有工具都能用
- Vue、Svelte、Astro 和 HTML 项目，可用判断类技能、开屏扫描和 copy-lint
- 其他能读取 SKILL.md 的智能体，可能可以用，但没有测试过

```table
使用场景 | 谁 | 得到什么
反套路审查 | 前端开发者 | 按关卡列出的发现，附文件和行号，然后是一个判断后的分数
动效调整 | 开发者 | 适用于 CSS 和 framer-motion 的缓动和时长令牌
指标和图表 | 开发者 | 共用同一种结构的图表、仪表盘、迷你折线图、滑块和指标卡片
葡萄牙语文案 | 文案作者 | 口语化的巴西葡萄牙语文案，由 copy-lint 检查
```

如何设置：你需要 Claude Code，大多数技能还需要 Node.js 20 或更高版本。

- Claude Code
- Node.js 20 或更高版本，除 visant-frontend 之外的每个技能都需要
- 可选：用 Playwright 做屏幕检查，用 axe-core 做点击目标大小和名称检查

1. 运行下面第一条命令，从列表里挑选技能。
2. 要添加单个技能，运行第二条命令。要添加界面套装，运行第三条。
3. 你也可以自己把某个技能的文件夹放进 ~/.claude/skills/ 目录。

```bash
npx skills add pedrojaques99/visant-skills-public                       # pick from the list
npx skills add pedrojaques99/visant-skills-public --skill visant-killer # just one
npx skills add pedrojaques99/visant-skills-public --skill visant-design visant-killer visant-frontend visant-motion visant-refine visant-copy # the interface set
```

如何使用：用英语或葡萄牙语向 Claude Code 提问。下面这些请求都可以，第二句的意思是它看起来像 AI 做的。

```text
audit this screen
tá com cara de IA
make this smoother
edit this lesson
```

审查技能也可以在终端里对源代码文件夹运行，使用下面的命令。

```bash
node visant-killer/scripts/killer-scan.mjs demo/src
```

```table
工具 | 作用
visant-design | 起点。它读取你的请求，并加载合适的手册
visant-killer | 审查界面是否千篇一律的 AI 设计。检测器是硬关卡，随后是一轮反方论证和一个分数
visant-frontend | 指导界面决策。只有说得出自己推动哪个业务变量的元素才能留下
visant-motion | 提供适用于 CSS 和 framer-motion 的缓动和时长令牌，另有 motion-lint 和从 URL 进行的测量
visant-refine | 涵盖指标卡片、仪表盘、图表、迷你折线图和滑块，全都基于同一种结构
visant-copy | 用口语化的语气写巴西葡萄牙语文案，copy-lint 会标出葡萄牙语和英语文字里的 AI 痕迹
```

示例：你打开一个 React 项目，说 audit this screen。在示例定价卡片上，扫描运行四道关卡，并标出一个绕过项目令牌的 Tailwind 调色板类。它还标出文案里的破折号和夸大用词、标题里的一个斜体词，以及字距收得很紧的展示衬线体。之后技能会在浏览器里加载这个屏幕，质疑自己的结论，并给出分数。

新手与专家：技能是一个说明文件夹，在你的请求合适时由 Claude Code 加载。这些技能用来指导和检查界面工作。可以先安装这一套，打开一个 React 或 Next 屏幕，让 Claude Code 去审查它。

检测器脚本构成一道关卡。已确认的发现算作缺陷，而不是品味问题，所以智能体会列出它，并在修改前先询问。代码检测器会以退出码 2 拒绝非 React 项目，因此它们从不报告自己没读过的零。作者在三个公开的 Next.js 项目上校准了检测器，直到剩下的结果站得住脚。

```flow
你让 Claude Code 审查一个屏幕
技能找出你仓库里的关卡和令牌
检测脚本扫描代码并运行关卡
技能判断检测器漏掉的部分并打分
它列出发现，并在修改前询问
```

注意事项：

- 只在 Claude Code 上测试过，其他能读取 SKILL.md 的智能体没有测试过
- killer 扫描和代码检测器会以退出码 2 拒绝 Vue、Svelte、Astro 和 HTML 项目
- 大多数技能需要 Node.js 20 或更高版本，visant-frontend 什么都不需要
- Playwright 和 axe-core 是屏幕检查的可选附加项
- 技能文档里的命令用一个 skill-dir 占位符，代表放着 SKILL.md 的文件夹
- 文案技能面向巴西葡萄牙语，copy-lint 也检查英语

## GitHub 上的数据（2026年11月7日）

- 星标：84
- 复刻：2
- 未关闭的议题和拉取请求：1
- 语言：JavaScript
- 许可证：MIT
- 话题：claude-code, claude-skills, design-system, ui-audit

## 链接

- 代码：https://github.com/pedrojaques99/visant-skills-public
- 发布版本：https://github.com/pedrojaques99/visant-skills-public/releases
- 议题：https://github.com/pedrojaques99/visant-skills-public/issues
- 星标历史：https://www.star-history.com/#pedrojaques99/visant-skills-public&Date

## 获取代码

```
git clone https://github.com/pedrojaques99/visant-skills-public.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  7 KB