mcpField
B
bklit-ui-design

bklit-ui-design

github.com/bklit设计与 UI1.8k95 次安装今天更新
代码仓库

关于 bklit-ui-design

这项设计技能将图表样式需求转化为 Bklit 组件选择，并使图表适配宿主应用的设计系统。它可检测主题信息、选择组合方案，并依据已安装源码核对属性是否受支持。

主要功能

  1. 01检测宿主主题与设计令牌
  2. 02将样式需求映射到组件
  3. 03按应用风格调整图表方案
  4. 04安装注册表组件
  5. 05依据源码核对属性
  6. 06识别不支持的设计

适用场景

  1. 01实现指定的图表风格
  2. 02使图表匹配应用主题
  3. 03实现前检查图表功能支持情况

安装

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

$npx skills add https://github.com/bklit/bklit-ui --skill bklit-ui-design

安装后在 Claude Code 中输入/bklit-ui-design确认已加载。

包含的文件

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

evals/
evals.json
evals/files/tw3-hsl/
components.json
package.json
tailwind.config.ts
evals/files/tw3-hsl/app/
globals.css
evals/files/tw4-oklch/
components.json
package.json
evals/files/tw4-oklch/app/
globals.css
references/
recipes.md
vocabulary.md
rules/
taste.md
theming.md
scripts/
detect-design.mjs

详细介绍

Bklit UI 设计

将人们描述的效果（“边缘渐隐的斜线背景”）映射到 Bklit提供的组件（<Background />），然后让它融入所在应用的原生风格。

Bklit 图表以源码形式安装，使用 npx shadcn@latest add @bklit/<item> （使用项目的运行器：pnpm dlx、bunx --bun 等），并从项目的别名导入，例如 @/components/charts/background。切勿从 @bklitui/ui/charts 导入——这是私有的 monorepo 软件包。

工作流

1. 检测宿主设计

在用户的项目根目录运行捆绑的检测器。<skill-dir> 是包含此 SKILL.md 的文件夹（通常为 .claude/skills/bklit-ui-design、.agents/skills/bklit-ui-design 或 ~/.claude/skills/bklit-ui-design）：

node <skill-dir>/scripts/detect-design.mjs

无依赖，Node ≥ 18，绝不会抛出异常。它会输出 JSON：tailwindVersion、 cssPath、colorFormat、darkMode、tokens（--primary、--radius 等）、 chartVars（浅色／深色的 --chart-*）、themeInline、components（来自 components.json）、primitives、chartLibs、bklit.installed 和 warnings。无法访问 shell 的 Agent：读取 components.json、其中指定的全局 CSS 文件和 package.json，并手动收集相同信息。

先阅读 warnings——其中会标出导致图表显示异常的问题（灰色默认配色、Tailwind v3 裸 HSL 令牌、缺少 @theme 映射）。

2. 将请求解析为设计意图

将句子拆分为多个意图（背景、渐隐、形状、填充、线条、标记、工具提示、网格、图例、加载、动效、注释），并在 references/vocabulary.md 中查找各项。例如：

“圆角方形柱、幽灵轨道，以及悬停时的圆环” → 形状：BarSquares squareRadius={0.5} + BarChart squareSnap · 轨道：BarColumnTrack · 工具提示：ChartTooltip dotVariant="ring" dotRadiusFraction={0.5}

“四周渐隐的斜线背景” → <Background />（默认即为斜线图案和四边渐隐）

3. 选择方案并调整

从 references/recipes.md 中最接近的组合开始，而不是从头拼装——这些方案都是经过验证的图库样式。 然后根据检测结果进行调整：

  • 颜色 → var(--chart-1..5) / chartCssVars，切勿使用字面值；
  • 圆角样式 → 宿主的 --radius（参见 rules/taste.md §4）；
  • 密度 → 减少网格行数／小型仪表盘卡片不使用背景；
  • 配色、深色模式、Tailwind v3 特性 → 参见 rules/theming.md。
4. 安装注册表项目

安装组合中涉及的每个项目（词汇表的导入表会列出每个导出项对应的 slug），例如：

npx shadcn@latest add @bklit/bar-chart @bklit/bar-depth @bklit/chart-tooltip

shadcn 会添加缺失的 CSS 变量，而不会覆盖宿主已有的变量。 如果无法解析 @bklit，请参阅 bklit-ui 技能中的安装说明。

5. 对照已安装的源码确认属性

打开已安装的文件（components/charts/<file>.tsx），检查计划使用的每个属性是否存在且类型符合预期。注册表源码才是准则；此技能可能未及时更新。

6. 遵循审美规则

按照 rules/taste.md 检查：一个装饰层、背景保持微妙、不要叠加效果、圆角匹配 --radius、圆环搭配方形、仅使用令牌、验证深色模式、图案 ID 唯一。

7. 如实说明缺口

如果请求需要 Bklit 不支持的功能（参见词汇表中的“Not supported”——例如六边形 Background 预设、线条发光、堆叠面积图、柱上的标签），请明确说明，然后提供最接近的受支持样式或一个小型自定义组合（方案 15 展示了这种模式）。切勿虚构 pattern="hexagons" 或 glow 之类的属性。

输出清单

  • 使用准确的 @bklit/<item> slug 的安装命令。
  • 完整的 JSX，并从项目别名导入。
  • 以宿主的颜色格式列出所有 CSS 令牌变更，涵盖浅色和深色模式。
  • 每条真实存在的差距或权衡各用一行说明。
  • 适用时提供链接：https://bklit.com/docs/components/<slug>、 https://bklit.com/charts/<slug>、https://bklit.com/studio?chart=<slug>。

文件

文件用途
references/vocabulary.md表述 → JSX/props → 注册表 slug；导入映射；不支持列表
references/recipes.md15 个针对指定视觉风格的完整组合
rules/taste.md设计规则，附错误/正确示例
rules/theming.md宿主信号 → 图表令牌覆盖（v4、v3、深色模式）
scripts/detect-design.mjs设计检测（JSON）
evals/evals.json此技能的行为检查

评论

支持 Markdown