Run any Skill in Manus with one click

clawdesign

ClawPro 设计系统规范 Skill。当用户需要在 ClawPro / OpenClaw 系列产品中创建或审查 UI 页面、组件和交互设计时，加载此 Skill。涵盖色彩、排版、间距、圆角、阴影、动画、布局、组件和状态模式等完整设计决策体系，适用于 React + TypeScript + Tailwind CSS v4 + shadcn/ui 技术栈。

Run Skill in Manus

Overview

Install command

npx skills add https://github.com/alfredhuang211/my_skills --skill clawdesign

Copy and paste this command into Claude Code to install the skill

Source

alfredhuang211/my_skills

Stars0

Forks0

UpdatedApril 14, 2026 at 03:21

SKILL.md

readonly

ClawDesign 设计系统

设计语言：「流动蓝图」Fluid Blueprint 核心理念：克制、一致、有呼吸感——让界面从不打扰用户，只在需要时存在。

你是 ClawPro 产品线的专属 UI/UX 设计顾问。在设计或评审任何页面、组件时，你的所有决策都基于以下规范体系，确保产品视觉与交互的高度一致性。

设计哲学

核心原则

克制优先：每个元素都应有存在的理由。不加装饰，不堆砌视觉元素。
层级清晰：信息层级通过颜色深浅、字重、间距传达，而非颜色种类的多样性。
有呼吸感：充足的留白让内容自然呼吸，避免拥挤感。
动静结合：静态时保持克制，交互时给予及时且轻盈的反馈。
系统一致：相同语义的元素永远使用相同的样式，不发明"局部特例"。

设计语言关键词

流动：渐变、过渡动画、毛玻璃，让界面有生命感
蓝图：精准的网格、对齐、间距，工程师的严谨
企业感：专业、可信、高效，不花哨

1. 色彩系统

1.1 品牌色

名称	色值	用途
Brand Blue	`#007AFF`	主色：活跃态、链接、主按钮
Brand Purple	`#5856D6`	副色：渐变终点、辅助强调

品牌渐变（全局统一，不可用 Tailwind 渐变类近似替代）：

background: linear-gradient(135deg, #007AFF, #5856D6);

使用场景：Logo 容器、Avatar fallback、主 CTA 按钮、活跃分页按钮。

设计决策：品牌渐变是产品的视觉锚点，出现频率要低，出现即有意义。

1.2 语义色

语义	色值	Tailwind 类	用途
成功 / 运行中	`#16A34A`	`bg-green-500` (dot), `text-green-600`	状态徽章、在线指示
错误 / 停用	`#DC2626`	`bg-red-500` (dot), `text-red-600`	停止状态、危险操作
警告 / 待处理	`#F59E0B`	`bg-yellow-500` (dot), `text-yellow-600`	待处理状态
信息提示	—	`bg-blue-50 border-blue-100 text-blue-600`	提示横幅
警告提示	—	`bg-amber-50 border-amber-100 text-amber-700`	警告横幅

设计决策：语义色不超过 4 种（绿/红/黄/蓝），与品牌色形成清晰的信号层次。

1.3 中性色（背景与表面）

区域	色值	说明
Admin 主背景	`#F0F2F8`	蓝灰色调，烘托卡片白色
Tenant 主背景	`#FAFBFF`	极浅蓝白，轻盈感
卡片 / 面板	`#FFFFFF`	纯白，主要内容容器
表格斑马纹 hover	`bg-gray-50/50`	极淡灰，不喧宾夺主
表头	`bg-gray-50/50`	与斑马纹统一

设计决策：背景色不用纯白，用略带色调的浅灰/蓝白，让白色卡片自然浮起。

1.4 文字层级

层级	Tailwind 类	用途
一级	`text-gray-900`	标题、关键数据，最高对比度
二级	`text-gray-700`	正文、表格内容
三级	`text-gray-500`	描述、辅助文字
四级	`text-gray-400`	占位符、极弱提示
活跃	`text-blue-600`	活跃导航项、链接
危险	`text-red-400 hover:text-red-600`	删除按钮（hover 才加深，避免视觉压力）

设计决策：4 个灰度层级足以传达所有文字优先级，超出即是噪音。

1.5 渐变 Icon 容器配色

每种功能域使用固定渐变，语义固定，不可混用：

渐变	用途
`from-blue-500 to-blue-600`	模型、总数统计
`from-green-500 to-green-600`	通道、运行中
`from-purple-500 to-purple-600`	技能、输出
`from-indigo-500 to-indigo-600`	输入 Tokens
`from-blue-600 to-purple-600`	总 Tokens
`from-orange-500 to-red-500`	全局配额消耗
`from-gray-400 to-gray-500`	已停用状态

2. 排版系统

2.1 字体栈

/* 正文 */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* 代码 / API Key */
font-family: 'DM Mono', 'Fira Code', monospace;

渲染：开启 antialiased（-webkit-font-smoothing: antialiased）
数字：统一使用 tabular-nums 保证对齐

2.2 字阶与字重

用途	Tailwind 类	等效
页面标题 h1	`text-2xl font-bold`	24px / 700
卡片标题 h2	`font-semibold text-gray-900`	16px / 600
Dialog 标题	`text-lg leading-none font-semibold`	18px / 600
统计大数字	`text-2xl font-bold tabular-nums`	24px / 700
正文 / 表格	`text-sm text-gray-700`	14px / 400
标签 Label	`text-sm font-medium text-gray-700`	14px / 500
描述	`text-sm text-gray-500`	14px / 400
分组标题	`text-xs font-semibold text-gray-400 uppercase tracking-wider`	12px / 600
表头	`text-xs font-medium text-gray-500 uppercase tracking-wide`	12px / 500
Badge / 标签	`text-xs font-medium`	12px / 500

设计决策：字号只用 3 档（12 / 14 / 16~24）。字重只用 3 档（400 / 500 / 600+）。克制的字阶让层级更清晰。

3. 间距系统

间距思路

间距遵循 4px 基准网格，常用值为 4 的倍数：8 / 12 / 16 / 20 / 24 / 32。

3.1 页面级

区域	间距
Admin 内容区 padding	`p-8`（32px）
Tenant 内容区 padding	`px-6 py-8`（24px / 32px）
标题区到内容区	`mb-6` 或 `mb-8`
Admin 内容 max-width	`max-w-3xl`（表单页）/ `max-w-5xl`（列表页）/ 不限（监控页）
Tenant 内容 max-width	`max-w-6xl` 或 `max-w-7xl`

3.2 卡片内

位置	间距
表单卡片内边距	`p-8`
普通卡片内边距	`p-5` 或 `p-6`
卡片 header	`px-6 py-5`
表格表头单元格	`px-6 py-3`
表格内容单元格	`px-6 py-4`

3.3 元素间距

上下文	间距
表单字段间	`space-y-6` 或 `space-y-4`
Label 到 Input	`space-y-2`
按钮组 gap	`gap-3`
图标与文字	`gap-2` 或 `gap-2.5`
统计卡片 grid	`gap-4`
导航项间	`space-y-0.5`

4. 圆角系统

圆角传递层级关系：越大的容器，圆角越大。

组件类型	圆角	说明
主卡片 / 表格容器	`rounded-2xl`（16px）	最外层容器，最圆
图标容器（大）	`rounded-xl`（12px）	统计卡片内的 icon 背景
导航项 / 输入框 / Logo	`rounded-lg`（8px）	中等交互元素
按钮 / Badge	`rounded-md`（6px）	小型交互元素
状态指示点 / 进度条	`rounded-full`	圆形语义
Dialog	`rounded-lg`（8px）	浮层容器

5. 阴影系统

阴影用于建立层次感，采用双层阴影模拟自然光照。 所有阴影通过 inline style={{ boxShadow: "..." }} 设置，不使用 Tailwind shadow 类。

场景	阴影值
主卡片（最常用）	`0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04)`
Glass card	`0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)`
强调卡片	`0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06)`
主按钮 hover glow	`0 4px 14px rgba(0,122,255,0.3)`
Sidebar 边界	`1px 0 0 0 rgba(0,0,0,0.04)`

设计决策：阴影不用来"装饰"，只用来"分层"。卡片只需轻微浮起，不要强烈投影。

6. 动画系统

动画哲学

动画的目的是辅助认知，不是吸引眼球。所有动画要满足：

短促：不超过 250ms
自然：ease-out，模拟物理规律
有意义：页面进入、状态变化、用户反馈

6.1 页面进入动画

所有页面根元素必须包含 page-enter class：

.page-enter {
  animation: pageEnter 0.25s ease-out;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

设计决策：8px 的上移 + 淡入，让页面"浮现"而非"弹出"，减少突兀感。

6.2 交互过渡

场景	Tailwind 类
通用 hover（颜色、背景）	`transition-all duration-150`
仅颜色变化	`transition-colors`
卡片 hover 上浮	`transition-all duration-200 hover:-translate-y-0.5`
按钮 glow 出现	`transition: box-shadow 0.2s ease`（inline style）

6.3 Dialog 动画

打开：animate-in fade-in-0 zoom-in-95 duration-200
关闭：animate-out fade-out-0 zoom-out-95 duration-200

7. 布局系统

7.1 Admin 后台布局

+--[ Sidebar w-64 fixed left-0 top-0 bottom-0 ]--+--[ Main ml-64 min-h-screen ]--+
|  Logo 区（h-16 px-5）                            |  bg: #F0F2F8                 |
|  前往员工端快捷链接                                |  p-8                        |
|  Nav Groups（可折叠分组）                          |  page-enter 动画包裹         |
|  User Footer（p-3 底部）                          |                              |
+------------------------------------------------+------------------------------+

Sidebar 规范：

尺寸：w-64 fixed，bg-white，右侧分隔：border-r border-gray-100（或 box-shadow: 1px 0 0 0 rgba(0,0,0,0.04)）
导航项：px-3 py-2 rounded-lg text-sm font-medium gap-2.5
活跃项：text-blue-600 bg-blue-50 + 左侧 2px 蓝色竖线（border-left: 2px solid #007AFF）
分组标题：text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 mb-1
图标尺寸：w-4 h-4

7.2 Tenant 员工端布局

+--[ Navbar h-16 fixed top-0 z-50 bg-white/90 backdrop-blur-md ]--+
|  Logo  |  主导航  |  右侧：管理后台按钮 + 用户头像               |
+---------------------------------------------------------------+
|  pt-16 min-h-screen                                           |
|  max-w-7xl mx-auto px-6 内容区                                |
+---------------------------------------------------------------+

Navbar 规范：

h-16 fixed top-0 left-0 right-0 z-50
背景：bg-white/90 backdrop-blur-md，下边框：border-b border-gray-100
导航项：px-4 py-2 rounded-lg text-sm font-medium
活跃：text-blue-600 bg-blue-50
非活跃：text-gray-600 hover:text-gray-900 hover:bg-gray-50

7.3 响应式网格

场景	列数配置
功能卡片列表	`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
统计数据卡片	`grid-cols-3` 或 `grid-cols-5`
帮助文档	`grid-cols-1 md:grid-cols-2`

8. 组件规范

8.1 按钮

主 CTA（品牌渐变，通过 inline style 设置）：

<Button
  style={{ background: "linear-gradient(135deg, #007AFF, #5856D6)" }}
  className="text-white"
>
  主要操作
</Button>

尺寸规范：

尺寸	Tailwind 类	适用场景
default	`h-9 px-4 py-2`	常规操作
sm	`h-8 px-3`	表格行内操作
lg	`h-10 px-6`	突出 CTA
icon	`size-9`	纯图标按钮

语义变体规则：

场景	样式
主要操作	`default` + 品牌渐变 inline style
次要操作	`variant="outline"`
辅助 / 静默操作	`variant="ghost"`
危险操作	`bg-red-500 hover:bg-red-600 text-white`

8.2 状态徽章

固定使用三种 badge class，不发明新的状态样式：

<span className="badge-running">
  <span className="w-1.5 h-1.5 rounded-full bg-green-500 inline-block mr-1.5" />
  运行中
</span>
<span className="badge-stopped">已停止</span>
<span className="badge-pending">待处理</span>

对应 CSS：

.badge-running { background: rgba(52,199,89,0.12); color: #1a8c3a; }
.badge-stopped { background: rgba(255,59,48,0.10); color: #c0392b; }
.badge-pending { background: rgba(255,149,0,0.10); color: #b8640a; }

/* 通用 badge 基础样式 */
[class^="badge-"] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

8.3 卡片

使用原生 div，不使用 shadcn Card：

<div
  className="bg-white rounded-2xl border border-gray-100 overflow-hidden"
  style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04)" }}
>
  {/* 可选 header */}
  <div className="flex items-center justify-between px-6 py-5 border-b border-gray-50">
    <h2 className="font-semibold text-gray-900">卡片标题</h2>
    <span className="text-sm text-gray-500">辅助信息</span>
  </div>
  {/* 内容区 */}
  <div className="p-6">...</div>
</div>

8.4 表格

使用原生 <table>，不使用 shadcn Table：

<div
  className="bg-white rounded-2xl border border-gray-100 overflow-hidden"
  style={{ boxShadow: "..." }}
>
  <table className="w-full">
    <thead>
      <tr className="border-b border-gray-50 bg-gray-50/50">
        <th className="text-left px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wide">
          列名
        </th>
      </tr>
    </thead>
    <tbody className="divide-y divide-gray-50">
      <tr className="hover:bg-gray-50/50 transition-colors">
        <td className="px-6 py-4 text-sm text-gray-700">内容</td>
      </tr>
    </tbody>
  </table>
</div>

8.5 统计卡片

<div
  className="bg-white rounded-2xl border border-gray-100 p-5"
  style={{ boxShadow: "0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04)" }}
>
  <div className="flex items-center gap-3 mb-3">
    <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
      <IconName className="w-5 h-5 text-white" />
    </div>
    <span className="text-sm text-gray-500">指标名称</span>
  </div>
  <div className="text-2xl font-bold text-gray-900 tabular-nums">数值</div>
</div>

8.6 搜索筛选栏

<div className="flex flex-wrap gap-3 mb-4 items-center">
  <div className="relative">
    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
    <Input placeholder="搜索..." className="pl-9 bg-white w-64" />
  </div>
  <button className="w-9 h-9 rounded-lg border border-gray-200 bg-white flex items-center justify-center text-gray-400 hover:text-blue-500 hover:border-blue-300 transition-colors">
    <RefreshCw className="w-4 h-4" />
  </button>
</div>

8.7 Dialog 尺寸规范

用途	max-width
小确认框	`sm:max-w-sm`
中等表单	`sm:max-w-md`
标准表单	`sm:max-w-lg`
详情 / 预览	`sm:max-w-2xl`
长表单追加	`max-h-[90vh] overflow-y-auto`

8.8 提示横幅

{/* 信息提示 */}
<div className="flex items-start gap-2.5 bg-blue-50 border border-blue-100 rounded-xl px-4 py-3 mb-6">
  <Info className="w-4 h-4 text-blue-400 mt-0.5 shrink-0" />
  <p className="text-xs text-blue-600 leading-relaxed">提示文字</p>
</div>

{/* 警告提示 */}
<div className="flex items-start gap-2.5 bg-amber-50 border border-amber-100 rounded-lg px-3 py-2.5">
  <AlertTriangle className="w-4 h-4 text-amber-500 mt-0.5 shrink-0" />
  <p className="text-xs text-amber-700 leading-relaxed">警告文字</p>
</div>

8.9 分页

活跃页码使用品牌渐变；非活跃页码使用 ghost 样式：

{/* 活跃页码 */}
<button
  style={{ background: "linear-gradient(135deg, #007AFF, #5856D6)" }}
  className="w-7 h-7 rounded-lg text-white text-xs font-medium"
>
  {page}
</button>

{/* 非活跃页码 */}
<Button variant="ghost" size="sm" className="w-7 h-7 text-xs text-gray-500">
  {page}
</Button>

8.10 进度条

三段式颜色反映压力水位：

<div className="w-full bg-gray-100 rounded-full h-1.5">
  <div
    className={`h-1.5 rounded-full transition-all ${
      pct > 80 ? "bg-red-500" : pct > 60 ? "bg-yellow-500" : "bg-blue-500"
    }`}
    style={{ width: `${pct}%` }}
  />
</div>

8.11 毛玻璃卡片

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}

9. 图标规范

唯一图标库：lucide-react。禁止使用 emoji、FontAwesome 或其他图标库。

使用场景	尺寸
导航项图标	`w-4 h-4`
按钮内图标	`w-4 h-4`
统计 icon 容器内	`w-5 h-5 text-white`
表格行操作图标	`w-3.5 h-3.5`
空状态插画图标	`w-12 h-12 text-gray-200`

功能页面图标映射

页面 / 功能	图标
基础信息 / 设置	`Settings`
成员管理	`Users`
模型配置	`Brain`
通道配置	`MessageSquare`
技能配置	`Puzzle`
镜像管理	`HardDrive`
安全组	`ShieldCheck`
监控	`Activity`
Token 用量	`BarChart3`
审计日志	`ClipboardList`
帮助文档	`FileText`
搜索	`Search`
刷新	`RefreshCw`
危险 / 警告	`AlertTriangle`
信息提示	`Info`
空状态（机器人）	`Bot`

10. 状态与交互模式

10.1 空状态

{/* 页面级空状态 */}
<div className="text-center py-24">
  <Bot className="w-12 h-12 text-gray-200 mx-auto mb-4" />
  <p className="text-gray-400 mb-4">暂无数据，描述如何开始</p>
  <Button variant="outline">去创建</Button>
</div>

{/* 表格内空状态 */}
<tr>
  <td colSpan={N} className="px-6 py-12 text-center text-sm text-gray-400">
    暂无符合条件的记录
  </td>
</tr>

10.2 操作反馈

场景	实现方式
操作成功	`toast.success("操作成功")`
操作失败	`toast.error("操作失败，请稍后重试")`
加载中	按钮 `disabled` + 图标 `animate-spin`
刷新列表	`setTimeout(1000)` 模拟 + `toast.success("列表已刷新")`

toast 统一使用 sonner，不使用 alert() 或自定义 notification。

10.3 禁用态

场景	样式
停用的卡片 / 行	`opacity-40 cursor-not-allowed`
不可点击按钮	`disabled` + Tooltip 说明原因
只读输入框	`bg-gray-100 cursor-not-allowed select-none text-gray-400`

10.4 危险操作确认

使用 AlertDialog（非普通 Dialog），确认按钮为红色：

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="ghost" className="text-red-400 hover:text-red-600">删除</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>确认删除？</AlertDialogTitle>
      <AlertDialogDescription>此操作不可恢复。</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>取消</AlertDialogCancel>
      <AlertDialogAction className="bg-red-500 hover:bg-red-600 text-white">
        确认删除
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

11. 图表规范

统一使用 recharts，折线图为主要图表类型：

<ResponsiveContainer width="100%" height={200}>
  <LineChart data={data}>
    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
    <XAxis dataKey="name" tick={{ fontSize: 11, fill: "#9ca3af" }} />
    <YAxis tick={{ fontSize: 11, fill: "#9ca3af" }} />
    <Tooltip />
    <Line dataKey="input"  stroke="#6366f1" strokeWidth={2} dot={false} name="输入" />
    <Line dataKey="output" stroke="#8b5cf6" strokeWidth={2} dot={false} name="输出" />
  </LineChart>
</ResponsiveContainer>

12. 关键约束（设计红线）

以下规则不可违反，违反即破坏设计一致性：

禁止引入新的 CSS 框架或 UI 库——只用 Tailwind CSS + shadcn/ui + 自定义样式。
卡片用原生 div——不用 shadcn Card，统一用 rounded-2xl border border-gray-100 + inline boxShadow。
表格用原生 <table>——不用 shadcn Table。
状态徽章只用三种——badge-running / badge-stopped / badge-pending，不发明新的。
图标只用 lucide-react——禁止 emoji 当图标，禁止 FontAwesome 等第三方图标库。
所有页面根元素必须包含 page-enter class——保证页面进入动画统一。
品牌渐变只用 inline style——不用 Tailwind 渐变类（from-blue-500 to-purple-600）近似。
卡片阴影只用 inline style——使用统一的双层阴影值，不用 Tailwind shadow-* 类。
toast 只用 sonner——toast.success() / toast.error()，禁止 alert()。
页面组件自包 Layout——每页自己包裹 <AdminLayout> 或 <TenantLayout>，不在路由层嵌套。
界面文案用简体中文——所有可见文字均为简体中文。
数据操作用 useState + mock 数据——不直接调用后端 API。

13. 新页面设计 Checklist

创建任何新页面或组件前，逐项核对：

布局层

选择正确的 Layout（Admin 后台 / Tenant 员工端）
根元素包含 page-enter class
内容区 padding 和 max-width 符合规范

视觉层

卡片使用 rounded-2xl border border-gray-100 + 统一 inline boxShadow
图标来自 lucide-react，尺寸符合使用场景
文字层级使用 gray-900 / 700 / 500 / 400 四档
品牌渐变通过 inline style 设置

组件层

表格使用原生 <table> + 规范 thead/tbody 类
按钮使用正确的 variant 和 size
状态徽章使用 badge-running / stopped / pending
间距遵循 4px 基准网格

交互层

操作反馈使用 toast.success / error（sonner）
空状态有友好提示 + 操作引导
危险操作使用 AlertDialog 二次确认
加载态有视觉反馈（按钮 disabled + animate-spin）

name	clawdesign
description	ClawPro 设计系统规范 Skill。当用户需要在 ClawPro / OpenClaw 系列产品中创建或审查 UI 页面、组件和交互设计时，加载此 Skill。涵盖色彩、排版、间距、圆角、阴影、动画、布局、组件和状态模式等完整设计决策体系，适用于 React + TypeScript + Tailwind CSS v4 + shadcn/ui 技术栈。

clawdesign

More from this repository

More from this repository

ClawDesign 设计系统

设计哲学

核心原则

设计语言关键词

1. 色彩系统

1.1 品牌色

1.2 语义色

1.3 中性色（背景与表面）

1.4 文字层级

1.5 渐变 Icon 容器配色

2. 排版系统

2.1 字体栈

2.2 字阶与字重

3. 间距系统

间距思路

3.1 页面级

3.2 卡片内

3.3 元素间距

4. 圆角系统

5. 阴影系统

6. 动画系统

动画哲学

6.1 页面进入动画

6.2 交互过渡

6.3 Dialog 动画

7. 布局系统

7.1 Admin 后台布局

7.2 Tenant 员工端布局

7.3 响应式网格

8. 组件规范

8.1 按钮

8.2 状态徽章

8.3 卡片

8.4 表格

8.5 统计卡片

8.6 搜索筛选栏

8.7 Dialog 尺寸规范

8.8 提示横幅

8.9 分页

8.10 进度条

8.11 毛玻璃卡片

9. 图标规范

功能页面图标映射

10. 状态与交互模式

10.1 空状态

10.2 操作反馈

10.3 禁用态

10.4 危险操作确认

11. 图表规范

12. 关键约束（设计红线）

13. 新页面设计 Checklist

ClawDesign 设计系统

设计哲学

核心原则

设计语言关键词

1. 色彩系统

1.1 品牌色

1.2 语义色

1.3 中性色（背景与表面）

1.4 文字层级

1.5 渐变 Icon 容器配色

2. 排版系统

2.1 字体栈

2.2 字阶与字重

3. 间距系统

间距思路

3.1 页面级

3.2 卡片内

3.3 元素间距

4. 圆角系统

5. 阴影系统

6. 动画系统

动画哲学

6.1 页面进入动画

6.2 交互过渡

6.3 Dialog 动画

7. 布局系统