mcpField
S
stylekit

stylekit

github.com/anxforever设计与 UI3766 次安装3 周前更新
代码仓库

关于 stylekit

用于指导前端 UI 设计与实现的技能，会结合用户目标和现有项目结构选择视觉方向，并用样式规范指导实现和检查。它要求保留既有行为，并区分 Web 与原生移动端。

主要功能

  1. 01搜索并获取样式规范
  2. 02识别项目技术栈并复用现有组件
  3. 03按目标实现或调整 UI
  4. 04保留行为、路由与数据
  5. 05依据规范检查样式并运行项目检查

适用场景

  1. 01为新前端界面选择视觉方向
  2. 02在不改变既有功能的前提下调整界面
  3. 03对照保存的规范检查界面一致性
  4. 04确认移动端目标平台后选择组件方案

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/anxforever/stylekit-skill --skill stylekit

安装后在 Claude Code 中输入/stylekit确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.gitattributes
README.en.md
LICENSE
.gitignore
README.md
.github/workflows/
regression-gate.yml
references/
forward-test.md
assets.md
design-principles.md
mobile-ui.md
updates.md
style-signatures.md
spec-workflow.md
scripts/
generate-release-manifest.py
fetch-style.py
benchmark.py
detect-project.py
eval-check.py
fetch-asset.py
release-manifest.json
verify-spec.py
update-skill.py
spec_input.py
tests/
test_assets.py
test_detect_project.py
test_scripts.py
test_update_skill.py
tests/fixtures/
style-lint-contract.json

详细介绍

StyleKit

使用 StyleKit 为前端 UI 赋予鲜明的视觉方向。从用户目标和目标项目的现有结构出发；风格规范用于指导设计，但不能取代产品决策。

从已安装的副本开始

<skill-root> 是包含此文件的目录，而不是目标项目的 scripts/ 目录。脚本需要 Python 3.10+。将占位符替换为实际路径，并为路径加上引号。将任务产物保存在新的任务专属目录（下文中的 <work-dir>）中；不要复用其他任务的规范文件。

对于固定到某个标签或提交的安装，请在首次检查前禁用更新。否则运行：

python3 "<skill-root>/scripts/update-skill.py" --auto

如果状态为 UPDATED，请重新阅读此文件。其他状态则按已安装的说明继续操作；离线检查不会阻碍工作。更新会以 GitHub main 为准，每 24 小时最多检查一次；如果托管文件存在本地更改或路径冲突，则跳过整个更新。固定版本、控制、迁移和恢复方法请参阅更新；不要为了让检查通过而移除本地保护。

确定实际任务的处理方式

请求处理方式
构建新的 UI选择一个方向，加载其规范，并实现实际内容和状态。
重新设计或修复现有 UI保留行为、路由和数据；调整相关的视觉设计决策。
比较或推荐库确定平台，参照官方资料比较合适的候选项；仅在用户要求时实现。
检查一致性根据已保存的规范检查现有成果；报告具体发现。
获取资源或模板按照资源中的说明操作；使用准确返回的 kind/id、可用性和许可证。

对于移动屏幕、响应式交互或 ChunUI 等库，请阅读移动 UI。选择组件前，先确定使用 Web/H5、React Native/Expo、SwiftUI 还是 Flutter。外观像移动端的浏览器页面仍然是 Web 实现。

了解并选择

检查目标应用并复用其已安装的基础组件。如果技术栈不明确：

python3 "<skill-root>/scripts/detect-project.py" "<project-root>"

检测结果只是参考，并不能保证兼容性。依赖项声明的是版本范围；涉及具体版本或工作区边界时，请检查锁文件和应用子目录。不要为了匹配推荐的库而迁移框架。

如果用户明确指定了风格，请使用其准确的 slug。否则，根据用户上下文搜索并选择合适的方向；只有尚未解决的选择会实质性影响结果时才提问。仅推荐库时，无需获取风格规范。

python3 "<skill-root>/scripts/fetch-style.py" --search "frosted glass"
python3 "<skill-root>/scripts/fetch-style.py" "<slug>" --json > "<work-dir>/spec.json"

实现和评估时使用同一份已保存的规范。_stylekitSource.degraded 表示这是可能缺少精选 lint 规则的旧版数据；请说明这一限制。如果获取失败，请复用已识别的已保存规范，或说明当前目录无法验证；不要虚构成功的获取结果、slug 或规则。

对于已保存的 CLI/API/MCP 输入或本地 API，请阅读规范来源和检查。此 Skill 不会安装 MCP 包，也不会编辑客户端配置。

在上下文中实现

在符合产品需求的前提下运用设计理念、设计 token、标志性元素和配方。如果它们与用户明确的选择、现有交互或无障碍要求冲突，则优先保留这些要求。配方仅供起步参考。对于原生目标，请将视觉意图转化为平台组件；DOM 标记和 Tailwind 类不是原生 API。

让改动聚焦。对于新 UI，请包含必需的加载、空白、错误和成功状态。使用设计原则进行视觉审查；仅对其涵盖的风格使用风格特征。

将 globalCss 集成到现有层叠样式中。在 Tailwind v4 中，应将需要让位于工具类的通用重置样式放入 @layer base，或为其明确限定作用域；未分层的选择器可能覆盖工具类样式。

验证构建结果

对于兼容的 Web 类规则，请根据已保存的规范检查隔离控件：

python3 "<skill-root>/scripts/eval-check.py" "<slug>" "<component-file>" --spec "<work-dir>/spec.json" --component button --strict

必需类会在整个输入文件中匹配，而不是逐个元素匹配。整页严格检查通过，并不能证明每个控件都已通过。缺失规则或动态类可能导致结果为 inconclusive；请检查这些情况。此评估器不是 SwiftUI、React Native、Flutter、资源或无障碍验证器。有关扫描模式和冲突的规范规则，请参阅规范来源和检查。

运行目标项目的相关检查，以合适的尺寸渲染，并测试已更改的状态。检查计算后的颜色和焦点行为，而不只是类名。对于原生开发，请区分源码审查、构建、模拟器和设备检查。请分别报告实现情况和实际验证结果，包括任何不可用的运行时。有关可重复的 Agent 评估，请参阅前向测试。

评论

支持 Markdown