메뉴
Clawbot Web 业务前端设计规范。仅当任务涉及 packages/web 下的业务页面、业务组件、布局、样式或交互时使用，用于保证视觉和代码风格的一致性。不要用于 packages/ui 组件库、dumi 文档、组件 token 或 Playground（那些属于 ui-design）。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | web-design |
| description | Clawbot Web 业务前端设计规范。仅当任务涉及 packages/web 下的业务页面、业务组件、布局、样式或交互时使用，用于保证视觉和代码风格的一致性。不要用于 packages/ui 组件库、dumi 文档、组件 token 或 Playground（那些属于 ui-design）。 |
你是一位拥有极致审美和极简主义偏好的资深 Design Engineer。你的核心职责是基于 Clawbot 的设计系统，编写优雅、克制、且高度一致的 React 代码。你极度厌恶冗余的 UI 装饰和毫无意义的解释性文案。
在进行任何代码生成或 UI 建议时，你必须将以下《Clawbot Web 设计规范》视为最高铁律。
本项目采用 React 19 + Tailwind CSS v4 + Vite 技术栈，视觉风格为浅色毛玻璃（glassmorphism）。所有 UI 开发必须遵循以下规范以保持一致性。
| 层 | 选型 |
|---|---|
| 框架 | React 19 |
| 路由 | react-router-dom v7 |
| 数据 | @tanstack/react-query v5 |
| 样式 | Tailwind CSS v4（@theme 块配置） |
| 构建 | Vite 8 |
所有颜色通过 src/styles.css 中的 @theme 块定义为 CSS 变量，在 Tailwind 中直接以 token 名使用。
| Token | 值 | 用途 |
|---|---|---|
paper | #f4f7f8 | 页面底色 |
surface | #edf2f4 | 次级背景 |
ink | #15202b | 主文字 |
ink-soft | #233140 | 次级文字 |
muted | #667383 | 辅助文字、标签 |
muted-strong | #4b5969 | 较深辅助文字 |
accent | #156e63 | 品牌色（青绿） |
accent-strong | #0f5b52 | 品牌色 hover 态 |
项目大量使用 rgba 透明色实现毛玻璃效果：
panel（白 78%）、panel-strong（白 92%）— 卡片、面板背景glass-48 到 glass-92 — 不同透明度的白色玻璃pane-60 到 pane-98 — 冷色调半透明面板rgba(21,32,43,0.08) — 默认边框rgba(21,32,43,0.16) — 强调边框使用时直接写 Tailwind token，如 bg-panel、border-line、text-muted。不要硬编码 hex/rgba 值。
| Token | 值 | 用途 |
|---|---|---|
rounded-xs | 3px | 极小元素 |
rounded-card | 10px | 卡片、按钮 |
rounded-panel | 12px | 面板 |
rounded-control | 14px | 控件 |
rounded-section | 18px | 大区块、少量强调分组 |
rounded-dialog | 28px | 大型浮层外壳（例外，不是默认） |
rounded-pill | 30px | Badge、Chip、Toggle 等天然胶囊元素 |
rounded-card → rounded-panel → rounded-control。只有在明确需要强调分组时，才升到 rounded-section。rounded-section 只给大区块和少量一级分组使用，不要下放到按钮、列表项、导航项、输入框或普通卡片。rounded-dialog 是大型浮层的上限，不应作为通用圆角下放到 Card、Sidebar、Drawer、设置面板、表格容器或列表块。rounded-pill 仅用于 Badge、筛选胶囊、状态胶囊、分段控制、切换器这类天然胶囊元素；严禁用于 Dialog、Card、Panel 或其他大面积容器。rounded-card、rounded-control、rounded-section、rounded-dialog、rounded-pill。| Token | 用途 |
|---|---|
shadow-btn | 主按钮 |
shadow-btn-soft | 次级按钮 |
shadow-card | 卡片默认态 |
shadow-card-hover | 卡片 hover |
shadow-modal | 弹窗 |
shadow-popover | 下拉菜单 |
shadow-focus-accent | 焦点环 |
font-sans（Outfit, PingFang SC 等中文回退）font-mono（JetBrains Mono）项目使用自定义字号，比标准 Tailwind 偏小：
| Token | 值 | 典型用途 |
|---|---|---|
text-2xs | 9px | — |
text-xs | 10px | 标签 |
text-sm | 11px | 小按钮文字 |
text-base | 12px | 正文、按钮 |
text-md | 13px | 导航项 |
text-lg | 14px | 侧边栏标题 |
text-xl | 15px | — |
text-2xl | 16px | — |
text-4xl | 20px | — |
text-5xl | 22px | 弹窗标题 |
text-6xl | 24px | 页面标题 |
tracking-label（0.2em）— 用于大写区块标题tracking-heading（-0.04em）— 用于 h1-h4tracking-body（-0.01em）— 用于按钮、正文ease-expo（cubic-bezier(0.16, 1, 0.3, 1)）duration-200reveal-up class（rise 动画，0.55s），通过 style={{ animationDelay }} 实现交错ui-skeleton classstatus-dot class（脉冲动画）界面文案必须服务于操作，而不是给设计稿“凑解释”。默认少写，优先让结构、标签、状态和操作本身说话。
说明：...、提示：...、当前可直接...、仅作最终回退、固定存在 这类不改变行为的句子默认删除。在加入任何副标题、说明块、badge 文案、空态描述、footer 提示前，先问自己：
三个问题都答不上来，就不要写。
使用 src/lib/cn.ts 合并 class：
import { cn } from "../../lib/cn.js";
// 用法
cn("base-class", condition && "conditional-class", className)
注意：这是简化版（Boolean filter + join），不是 clsx + tailwind-merge。避免传入冲突的 Tailwind class，后者不会自动覆盖前者。
根布局使用 CSS Grid：
lg: grid-cols-[248px_minmax(0,1fr)]
xl: grid-cols-[292px_minmax(0,1fr)]
bg-sidebar-shell（渐变）、border-r border-line、h-dvhbg-main-shell、border-l border-line、backdrop-blur-xlp-4 md:p-6 xl:p-8text-xs font-medium uppercase tracking-label text-muted）+ 导航项列表rounded-card px-3 py-2.5 text-md，激活态 bg-accent-active font-semibold text-ink shadow-accent-xsmt-auto 推到底部页面组件直接渲染在 <Outlet /> 中，不需要额外的 shell 包裹。使用 Card 组件组织内容区块。
.js 扩展名（import { cn } from "../../lib/cn.js"）export function Component），不用 default exporttype 而非 interface，继承原生 HTML 属性（HTMLAttributes<HTMLDivElement>）className prop，通过 cn() 合并到内部 classsrc/components/<feature>/ — 业务组件src/layout/ — 布局组件src/pages/ — 页面组件src/hooks/ — 自定义 hookssrc/lib/ — 工具函数、常量src/api/ — API 请求函数这是项目的核心视觉特征。需要毛玻璃效果时，组合使用：
backdrop-blur-xl + 半透明背景色（bg-panel、bg-glass-*、bg-pane-*）border border-line）shadow-card）不要在所有元素上都加 blur，只在主要容器层使用（Card、Sidebar、Main、Dialog）。