SuperAPI AI 工具集

kumo-design

前端与建站

查看项目

更新于 10-15 19:50

技能介绍

用途:这是一套 Cloudflare 产品界面设计规范,适用于设计、实现或审查 Cloudflare 仪表盘界面、Kumo UI、响应式样式与对话框等场景。使用时遵循推荐示例,避免被标记为反例的写法。

主要能力(规则要点):

  • 内容文字统一使用 14px,16px 及以上仅限标题与副标题。
  • 标题使用句子式大小写,产品名用标题式大小写。
  • 不修改字体字距,不使用 tracking-* 类。
  • 不使用 font-bold,标题用 font-semibold,行内加粗用 font-medium。
  • 相关文字间距应小于其所属内容的间距。
  • 文字周围间距按行高做视觉对齐,通常垂直间距略小于水平间距。
  • 悬停状态的颜色变化必须即时,不做颜色过渡。
  • 不使用边框加投影,改用 ring ring-kumo-line 形成透明边框。
  • 边框或环间距在 8px 以内时,圆角需同心:外半径 = 内半径 + 内边距。
  • 行内图标与文字首行对齐,多行时用 h-lh flex items-center。
  • 行内等宽文字字号略小(约 0.9em)。
  • 粘性元素用边框与内容分隔。
  • 折叠动画期间保持内容尺寸,避免内容位移。
  • 不叠加 LayerCard。
  • 对话框不做条件渲染,用 open 属性控制显隐以保留动画。

使用方式:在编写或评审界面代码时对照上述规则,采用资料中的推荐写法,替换反例写法。

适用场景:Cloudflare 仪表盘及 Kumo UI 相关的前端界面开发与设计审查。

限制:资料仅给出设计规则与代码示例,未提供安装命令、收费、价格或平台支持等信息,这些内容暂未提供。