设计技能 Design skill
@cloudflare/kumo

设计技能 Design skill

构建与审查 Kumo 界面的 Cloudflare 产品设计指引。

安装

npx skills add cloudflare/kumo@kumo-design

规则

正文使用 14px 字号

所有内容文本——正文、按钮、数据及其他可交互元素——必须使用 14px 字号。16px 及以上仅限标题与副标题使用。
Recommended example

API tokens

Production token expires in 30 days.

Example to avoid

API tokens

Production token expires in 30 days.

标题始终使用句式大小写

标题绝不全大写或词首大写。产品名称必须使用词首大写(Title Case)。
Recommended example
Recent requests
Example to avoid
Recent Requests
Example to avoid
Recent Requests

绝不修改字体的字距

不要使用 tracking-* 类改变字符间距。
Recommended example
Worker Metrics
Example to avoid
Worker Metrics

绝不使用 font-bold

标题使用 font-semibold,行内加粗文本使用 font-medium。
Recommended example

Account settings

This action is required.

Example to avoid

Account settings

This action is required.

相关文本之间靠得更近

相关文本之间的间距,应小于它们与周围其他内容的间距。
Recommended example

Web Analytics

Measure site traffic without changing your code.

Example to avoid

Web Analytics

Measure site traffic without changing your code.

文本周围的间距做视觉对齐

文本周围的间距应考虑其行高。通常这意味着垂直间距应略小于水平间距。
Recommended example

Production

Example to avoid

Production

悬停状态绝不做颜色过渡

悬停时的颜色变化必须立即生效。快速交互上的过渡会让 UI 显得迟钝。
Recommended example
Example to avoid

绝不将边框与投影同时使用

使用 ring ring-kumo-line 创建能保持边缘锐利的透明边框。
Recommended example

Workers API

Last deployed 4 minutes ago

Example to avoid

Workers API

Last deployed 4 minutes ago

使用同心圆角

当边框或 ring 的间距在 8px 及以内时,圆角必须在数学上同心:外圆角 = 内圆角 + 间距。
Recommended example
Example to avoid

图标与首行文本对齐

行内图标必须在视觉上与文本等大,并与文本垂直居中对齐。多行对齐请使用 h-lh flex items-center。
Recommended example

API token permissions cannot be changed after creation.

Example to avoid

API token permissions cannot be changed after creation.

Example to avoid

API token permissions cannot be changed after creation.

缩小行内等宽文本的字号

等宽文本与普通文本混排时,字号应略小(约 0.9em)。
Recommended example

Edit wrangler.toml to continue.

Example to avoid

Edit wrangler.toml to continue.

用 border 分隔吸顶元素与内容

Recommended example

API tokens

Production token

Preview token

Staging token

Development token

Testing token

Production token

Preview token

Staging token

Development token

Testing token

Example to avoid

API tokens

Production token

Preview token

Staging token

Development token

Testing token

Production token

Preview token

Staging token

Development token

Testing token

折叠动画期间保持内容尺寸

可折叠内容在收起过程中必须保持自身尺寸,避免内容在动画期间发生位移。
Recommended example

Web Analytics

Measure traffic without changing your code.

Example to avoid

Web Analytics

Measure traffic without changing your code.

绝不将 LayerCard 直接堆叠

Recommended example

Recent Requests

Time

Status

Query

00:50 UTC

Error

kumo

Example to avoid

Recent Requests

Time

Status

Query

00:50 UTC

Error

kumo

绝不条件渲染对话框

条件渲染对话框会使其开/关动画失效。请使用 open 属性控制对话框是否可见。
Recommended example
<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog>
    <Dialog.Title>Edit Worker</Dialog.Title>
    <Dialog.Description>Update this Worker's settings.</Dialog.Description>
  </Dialog>
</Dialog.Root>
Example to avoid
{open && (
  <Dialog.Root open>
    <Dialog>
      <Dialog.Title>Edit Worker</Dialog.Title>
    </Dialog>
  </Dialog.Root>
)}