Quartz 是一套设计系统规则，适用于 AI 支持产品和智能体控制台的界面开发。其视觉基调为黑白底盘，搭配五种低饱和度的类型色和暖色调的异常提示色。
用途：当需要构建或修改屏幕、组件、表单或样式时，应遵循该规则。它也适用于将现有屏幕迁移到该系统，或对整个应用运行 migrate-design-system。
主要能力：
- 规定全局安装方式：在根布局的 body 或 UI 根元素上添加 quartz 类，并在其内部放置 QuartzPortalProvider，使菜单、对话框、弹出层和提示消息等门户组件保留在设计令牌作用域内。
- 提供组件优先规则：优先使用系统内组件，而非手写标记；组件需从索引中给出的路径导入。
- 要求仅使用设计令牌：按角色引用令牌，禁止使用十六进制、rgb 或任意像素值。
- 提供页面外壳（Page shell）结构：包括 SidebarProvider、Sidebar、SidebarInset、顶栏、列表页布局以及全高度聊天或智能体运行布局等具体类名与结构。
- 定义智能体对话轮次结构：在 Conversation 内使用 AgentTurn、ToolCallList、Response 和 ConversationTail，PromptQueue 位于 PromptInput 之上。
- 规定破坏性操作前需经 ToolCall 等待许可，并提供 Deny 与 Allow 按钮。
- 包含大量反模板化（anti-slop）规则：禁止全大写文本、禁止使用破折号表示空值、禁止点分隔符连接事实、禁止装饰性动效、禁止毛玻璃效果、禁止图标配彩色底块等。
- 提供 ESLint 检查：通过 npx shadcn@latest add https://design.how/r/quartz/lint.json 安装，然后运行 npx eslint -c quartz.eslint.config.mjs .。
使用方式：
- 在根布局中设置 <body className="quartz"><QuartzPortalProvider>{children}</QuartzPortalProvider></body>。
- 若整个屏幕有匹配的区块（Blocks），先安装区块，再替换示例数据和文案。
- 从组件索引中挑选所需组件，使用前先查阅该组件页面以了解其属性、变体和规则。
- 使用 Page shell 构建页面框架。
- 暗色模式：在 quartz 元素或任意祖先元素上添加 data-theme="dark" 或 dark 类；主题不会自动跟随系统设置。
- 迁移现有屏幕时，逐件替换为对应组件，保留行为与文案，删除未使用的旧样式。
- 完成前运行 lint 并修复所有错误，在 390 和 1280 宽度下渲染检查，对照全局规则和反模板化列表修复最严重缺陷。
适用场景：AI 支持产品、智能体控制台、运行列表、密钥管理、智能体对话界面、表单与各类屏幕的构建和改造。
限制：
- 当组件或令牌缺失时，必须停止并说明，不得自行发明。
- 需要凭据、环境、破坏性操作对象或审批策略时，必须询问用户，不得编造密钥、端点或审批工具。
- 不得编造设计令牌。
- 规则冲突时按优先级处理：无障碍与键盘行为优先，其次令牌、现有组件、布局间距、细节打磨。
- 部分组件和区块的具体清单暂未提供。