Stylekit Skill
给 AI agent 用的前端风格 Skill —— 让生成的 UI 套用一个具体的、命名的视觉风格，而不是「AI 默认长相」。
Install
npx skills@latest add AnxForever/stylekit-skillclaude mcp add stylekit-skill -- npx skills@latest add AnxForever/stylekit-skill{
"mcpServers": {
"stylekit-skill": {
"command": "npx",
"args": [
"skills@latest",
"add",
"AnxForever/stylekit-skill"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →stylekit-skill
简体中文 · English
给 AI agent 用的前端风格 Skill —— 让生成的 UI 套用一个具体的、命名的视觉风格，而不是「AI 默认长相」。
这是 StyleKit 的 Agent Skill。它读取风格目录、实现规格和公开资产目录，再结合目标项目生成或调整界面。Skill 可以直接读取公开 API，也可以复用已保存的完整 API 规格、CLI brief 或 MCP brief。
为什么需要它
单靠「做得好看点」很难说清希望界面长什么样。
StyleKit 提供有名称的视觉方向、tokens、组件配方和风格规则，给生成过程一个可查看、可检查的起点。结果仍要结合产品需求和实际页面来判断。
工作流
了解项目 → 选定风格 → 读取规格 → 按项目需要实现 → 检查结果
| 步骤 | 做什么 |
|---|---|
| 1. 检测上下文 | 查看目标项目的框架、Tailwind 和现有组件 |
| 2. 选风格 | 把用户的意图匹配到目录里的某个 slug |
| 3. 读规格 | 获取当前可用的风格说明、tokens、配方和检查规则 |
| 4. 实现与检查 | 让风格特征服务于产品，再检查代码和实际页面 |
任务分流
按用户实际要的东西走不同路径：
- 新建 UI（页面、组件、看板、落地页）→ 走完整工作流
- 改样式 / 修现有 UI（「太丑了」「想要 Stripe 那种感觉」）→ 调整相关视觉细节，保留原有行为、数据和路由；结构变化以实际需求为准
- 风格迁移 → 对比两份规格，把相关视觉选择映射到项目已有的语义 tokens，保留用户明确要求的品牌与交互
- 审查 / 审计一致性 → 取风格规格，把每个组件对着 doList / dontList 和 token 表核一遍，报告要具体到文件和元素
- 移动端设计 / 组件选型 → 先确认 Web、React Native / Expo、SwiftUI 或 Flutter，再选择当前项目可用的实现
移动端与开源组件
技能会区分手机网页和原生应用：ChunUI、ShipSwift 用于 SwiftUI；Ant Design Mobile 和 Radix Dialog 面向 React Web；Vant 面向 Vue；React Native Paper、Bottom Sheet 面向 RN。对于「Next.js 页面想要 ChunUI 那种质感」，应在现有 Web 技术栈中实现视觉适配，不会把 SwiftUI 当成 npm 组件安装。
新增 移动端指导 覆盖组件选择、底部导航和弹层、触控、安全区、键盘遮挡与主题刷新。推荐附官方来源，并要求核对兼容性和许可；这些是外部组件资料，不保证出现在 StyleKit 公开资产目录中。
例如可以直接要求：
- 「优化这个 Next.js 商品页的移动端，保留现有购物车逻辑，参考 ChunUI 的灰阶和按钮层次。」
- 「这是 Expo 项目，先比较合适的底部面板组件，暂时不要安装依赖。」
- 「检查这个 SwiftUI 界面能否采用 ChunUI，说明系统版本和工具链要求。」
脚本
| 脚本 | 做什么 |
|---|---|
detect-project.py |
识别 Web / Expo / React Native / SwiftUI / Flutter 的代码与依赖证据，列出多项目路径和已声明的组件库 |
fetch-style.py |
从公开 API 拉取风格规格，输出面向代码生成的紧凑参考 |
fetch-asset.py |
搜索公开资产目录，读取一项精确资产；可按明确指令物化模板文件或下载 ZIP |
verify-spec.py |
校验 API 规格的内部一致性——数据自相矛盾时，agent 就会编造 tokens、违反风格规则 |
eval-check.py |
验收检测器：喂给它代码 + 风格 slug，逐条报告规则违规（禁用 class、缺失项） |
benchmark.py |
合成模板回归测试，或使用 --llm 运行真实模型对照实验 |
update-skill.py |
按发布清单检查更新；遇到本地改动或文件冲突时跳过 |
eval-check.py 只检查静态可读的 class 规则。默认 benchmark 使用四个固定模板任务检查 evaluator 和样例数据，不能说明真实模型生成质量；--llm 才会调用 OpenAI 兼容接口进行小规模对照。要观察 Agent 是否实际采用 Skill，可在独立消费项目中做一次手工 forward test；流程与证据边界见此。
公开资产目录
风格规格和站点资产是两类数据。资产脚本通过 StyleKit 的 /api/assets 目录搜索公开条目，种类由目录结果提供；可搜索动画、背景、渐变、阴影、字体、组件模式、Prompt、模板和体验包等资产。它显示 availability、contentLevel、来源、许可和依赖，不会把搜索结果误当作可复制源代码。
python3 <skill-root>/scripts/fetch-asset.py search "grain texture" --kind background
python3 <skill-root>/scripts/fetch-asset.py get background ASSET_ID --json > /tmp/stylekit-asset.json
python3 <skill-root>/scripts/fetch-asset.py get template editorial-blog --output-dir ./stylekit-editorial-blog
python3 <skill-root>/scripts/fetch-asset.py get template editorial-blog --download-to /tmp/editorial-blog.zip
用搜索结果里的确切 kind/id 替换示例 ID。模板源文件只写入新的目标目录；模板 ZIP 需要显式指定保存路径。两个动作都不会解压 ZIP、安装依赖或修改应用配置。受限资产只显示元数据，外部资产不会自动跟随来源。详细流程、许可判断和失败边界见 references/assets.md。--spec 支持已保存 API JSON；--from-file 支持符合契约的 MCP 结构化结果或完整 JSON 文本块。本机测试接口可通过 --base-url http://127.0.0.1:3189/api/assets 指定。
规格文件与脚本
脚本需要 Python 3.10 或更新版本。安装后，脚本位于 Skill 自己的 scripts/ 目录；从目标项目运行时，应使用安装目录下的脚本路径，不能假设目标项目也有 scripts/。
可以直接从 API 读取，也可把已有规格保存下来供生成和验收共用。以下占位路径需要替换为真实路径；为每次任务创建单独的工作目录：
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.