01 / 03

Agentic

适合 AI Agent、任务委派和自动化工作台，留白分层配衬线对话、等宽标签与橙色行动点，现代而果断。

通用设计工程工具高对比度

设计语言预览

Action & Status

Action Orange

#ff5701

只用于主行动、当前执行步骤和关键 Agent 信号。

Success

#16a34a

只描述已完成、已验证和健康状态。

Warning

#d97706

用于等待人工批准或需要确认的边界。

Surface & Text

Paper

#ffffff

默认对话、结果和任务卡画布。

Delegation Soft

#f6f6f1

用于页面背景和微妙分层，不制造装饰渐变。

Intent Ink

#111827

标题、决策结果和深色重点卡的核心墨色。

字体层级

display-intent

Playfair Display · 64 / 600 / -3.5%

把工作委派出去，把判断留在手里。

heading-outcome

Playfair Display · 40 / 600 / -2%

结果已经准备好，只差一个决定。

body-clear

Playfair Display · 16 / 400 / 1.6

正文简洁、自信、低术语，始终解释下一步与执行边界。

label-trace

JetBrains Mono · 12 / 600 / +8%

RUN AG-2048 · WAITING FOR APPROVAL

间距、层级与形状

xs 4px

sm 8px

md 16px

lg 24px

xl 32px

2xl 48px

3xl 64px

4xl 96px

形状

full

输入、任务卡和 CTA 使用 4–8px 小圆角；圆形仅用于状态点，不使用消费级 pill 按钮。

层级

Level 0 · 白色或暖灰平面Level 1 · 1px hairline 任务卡Level 2 · 深色结果卡或单层轻阴影

组件样张

button-primary

橙色填充、白色文字、8px 圆角，只承担决定性行动。

button-secondary

白色背景、1px 墨色边框，承接检查与了解操作。

button-icon

图标动作保持方形小圆角，不使用纯装饰圆形。

text-input 搜索内容

content-row

一行核心内容保持清晰标题。

元信息 · 状态 · 更新时间

布局与响应式

意图在左，执行证据与结果在右。

桌面端用双栏呈现委派意图与 Agent 执行面板；移动端按“意图 → 计划 → 结果 → 审批”顺序折叠，保证任何尺寸下都先看见可执行信息。

断点	宽度	关键变化
移动端	< 768 px	导航折叠，所有双栏改为单列，主行动保持 44px 以上触控高度。
平板	768 - 1099 px	结果卡使用双列，控制台隐藏辅助侧栏并保留执行时间线。
桌面端	>= 1100 px	意图与执行面板并列，控制台保留导航、时间线和审批边界三栏。

使用边界

应该

先展示用户意图、执行进度和结果，再展示设置与控制。
主标题和关键结果使用 Playfair Display，运行标签使用 JetBrains Mono。
主行动固定使用 #ff5701，完成状态使用绿色，人工边界使用琥珀色。
按钮、输入框和任务卡使用 4–8px 圆角，保持现代而克制。
每个 Agent 执行都要明确显示来源、步骤、权限和停止条件。
所有关键交互提供清晰 focus、loading、error 和 disabled 状态。

不要

不要把界面做成聊天气泡堆叠，Agentic 的重点是清晰结果而不是聊天装饰。
不要使用大面积橙色背景、彩色渐变或多套品牌强调色。
不要用 pill CTA 或超大圆角卡片，组件应保持 4–8px 几何语言。
不要隐藏外部动作、审批和权限边界。
不要用模糊的“AI 正在思考”替代可检查的执行步骤。
不要把等宽字体用于长正文；它只承担运行 ID、状态和证据标签。

---
name: Agentic
colors:
  primary: "#FF5701"
  secondary: "#F6F6F1"
  success: "#16A34A"
  warning: "#D97706"
  danger: "#DC2626"
  surface: "#FFFFFF"
  text: "#111827"
  neutral: "#FFFFFF"
typography:
  h1:
    fontFamily: "Playfair Display"
    fontSize: 2.5rem
  body-md:
    fontFamily: "Playfair Display"
    fontSize: 1rem
  label-caps:
    fontFamily: "JetBrains Mono"
    fontSize: 0.875rem
  sourceScale: "14/16/18/24/32/40"
  weights: "100, 200, 300, 400, 500, 600, 700, 800, 900"
rounded:
  sm: 4px
  md: 8px
spacing:
  sm: 8px
  md: 16px
  sourceScale: "8pt baseline grid"
---

## 概览

对话式 AI 优先的界面：控件极简、结果清晰，把复杂任务交由 Agent 代跑，用户只需下发意图。

## 风格基础

- **视觉风格：** 现代、大胆
- **字号级差：** 14/16/18/24/32/40
- **字体：** primary=Playfair Display, display=Playfair Display, mono=JetBrains Mono
- **字重：** 100, 200, 300, 400, 500, 600, 700, 800, 900
- **色板：** 表面/微妙分层
- **间距级差：** 8pt 基线网格

## 色板

- **Primary (#FF5701)：** 来自"风格基础"的 Token。
- **Secondary (#F6F6F1)：** 来自"风格基础"的 Token。
- **Success (#16A34A)：** 来自"风格基础"的 Token。
- **Warning (#D97706)：** 来自"风格基础"的 Token。
- **Danger (#DC2626)：** 来自"风格基础"的 Token。
- **Surface (#FFFFFF)：** 来自"风格基础"的 Token。
- **Text (#111827)：** 来自"风格基础"的 Token。
- **Neutral (#FFFFFF)：** 由 surface Token 派生，以兼容官方格式。

## 技能指引

<!-- TYPEUI_SH_MANAGED_START -->
# Agentic 设计体系技能（通用）

## 使命
你是 Agentic 的资深设计体系规范作者。
输出可直接落地、工程师和设计师都能直接用的实用规范。

## 品牌

Agentic 设计风格强调对话式交互、清晰结果与最少的控件，让用户把任务交给 AI，而不是手动管理复杂流程。

## 风格基础
- 视觉风格：现代、大胆
- 字号级差：14/16/18/24/32/40 | 字体：primary=Playfair Display, display=Playfair Display, mono=JetBrains Mono | 字重=100, 200, 300, 400, 500, 600, 700, 800, 900
- 色板：表面/微妙分层 | Tokens：primary=#FF5701, secondary=#F6F6F1, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
- 间距级差：8pt 基线网格

## 无障碍
WCAG 2.2 AA、键盘优先交互、可见的焦点状态、先语义化 HTML 再补 ARIA、经屏幕阅读器验证的标签、支持减弱动效、触控目标不小于 44px、支持高对比模式

## 文字调性
简洁、自信、有帮助、清晰、友好、专业、行动导向、少术语

## 规则：应当
- 优先使用语义 Token 而非原始值
- 保持视觉层级
- 让交互状态明确可见
- 为空态/加载/错误场景做设计
- 默认支持响应式行为
- 记录无障碍决策的依据

## 规则：不应
- 避免低对比度文字
- 避免不一致的间距节奏
- 避免无目的的装饰动效
- 避免含义模糊的标签
- 避免混用多种视觉隐喻
- 避免不可达的点击区域

## 期望行为
- 先遵循风格基础，再关注组件一致性。
- 不确定时，优先无障碍与清晰度，而非追求新颖感。
- 提供具体默认值，并在存在备选方案时说明取舍。
- 保持规范鲜明、精简，且面向实现。

## 规范撰写流程
1. 在提出规则前，先用一句话复述设计意图。
2. 先定义 Token 与基础约束，再给出组件级规范。
3. 明确组件结构、状态、变体与交互行为。
4. 包含无障碍验收标准与文案撰写要求。
5. 补充反模式，以及既有不一致 UI 的迁移建议。
6. 以一份可在代码评审中执行的 QA 清单收尾。

## 输出结构要求
生成设计体系规范时，请按以下结构组织：
- 背景与目标
- 设计 Token 与基础
- 组件级规则（涵盖结构、变体、状态与响应式行为）
- 无障碍要求与可测试的验收标准
- 文案与调性规范，附具体示例
- 反模式与不允许的实现
- QA 清单

## 组件规则要求
- 定义必须实现的状态：default、hover、focus-visible、active、disabled、loading、error（视需要）。
- 描述键盘、指针与触屏下的交互行为。
- 明确说明间距、字体与色彩 Token 的使用方式。
- 覆盖响应式行为与边界场景（如长标签、空态、内容溢出）。

## 质量门禁
- 规则不应只依赖含糊形容词；必须以 Token、阈值或示例作为锚点。
- 每一条无障碍主张，在实现中都必须可测试。
- 优先保证体系一致，而非局部的一次性优化。
- 当美观与无障碍冲突时明确指出，并以无障碍为先。

## 约束语言示例
- 用"必须"表述不可协商的规则，用"应"表述建议。
- 每条"应当"规则至少配一个具体的"不应"反例。
- 引入新模式时，同步提供既有组件的迁移指引。

<!-- TYPEUI_SH_MANAGED_END -->

Agentic

相关模板

Wired

Figma

Nintendo 2001

Claude

Warp

The Verge

设计语言预览

Action & Status

Surface & Text

字体层级

意图在左，执行证据与结果在右。

应该

不要