md

### 一、 核心视觉语汇、风格定调与模块架构整合体系

这一阶段的目标是将底层的数学规律、整体的视觉观感以及模块的排版封装融为一体，构建出 Agent 对目标界面的“系统级认知”。

#### 1. 设计风格与视觉基调的深度语义化 (Style & Emotional Baseline)
不要停留在表层的风格命名，必须深入提取风格背后的视觉构成逻辑与传递的情感属性。
* **风格流派与情感共鸣**：
    * 细致界定设计流派：不仅要指出是“苹果风（Apple-esque）”、“新拟态（Neumorphism）”、“粗野主义（Brutalism）”或“极简科技风”，还要提取该风格所传递的情绪（如：严谨专业、亲和活泼、前卫探索、极简克制）。
    * 材质与UI隐喻描述：提取界面对现实世界的投射。例如，是否使用了“毛玻璃（Glassmorphism）”来暗示层级的透视与呼吸感？是否使用了“黏土风（Claymorphism）”来增强界面的触觉反馈与亲和力？
* **视觉信噪比与装饰克制原则**：
    * 提取核心内容与装饰元素的占比关系。判断设计语言是倾向于“功能至上”（极少装饰线，依靠留白划分）还是“视觉丰富”（大量运用插画、背景光晕、渐变边框）。
* **几何特征与形态语言**：
    * 提取形态的统一性逻辑：整个系统的边角处理是体现锐利专业感（直角/微圆角），还是体现柔和包裹感（大圆角/全圆角）？
    * 记录模块边界的划分手段：提取各个 UI 模块之间是依靠物理线条、投影深度、还是大面积的空间留白来进行逻辑分割的。

#### 2. 无绝对数值的动态排版与空间体系 (Fluid Typography & Spatial Grid)
提取相对比例和乘数规律，确保 Agent 能在任何屏幕尺寸下进行流式布局。
* **相对排版层级 (Relative Typography Hierarchy)**：
    * 提取字号阶梯比率：基于基础正文字号，提取标题依次递增的缩放因子（如基于 Major Third 或 Perfect Fourth 比例递增）。
    * 动态行高与字距规律：记录并总结“字号越大，字宽越紧凑、行高乘数越小”的排版函数关系。
    * 字体性格映射：提取无衬线体、衬线体或等宽字体在特定业务场景下的使用规律（如：等宽字体专用于数据展示或代码片段以传达极客感）。
* **空间规律与网格底层逻辑 (Spatial Multipliers & Grid Systems)**：
    * 提取基础间距变量：推导支撑全站的底层乘数（如基于基准单元的 1x, 2x, 4x 递增规律），用于定义所有的 Margin 和 Padding。
    * 响应式容器秩序：总结内容安全区的最大相对宽度限制，以及针对不同屏幕断点的流式响应规则（如从多列阵列自动折叠为单列瀑布流）。

#### 3. 业务驱动的模块化封装结构 (Business-Driven Modularization)
将长页面按功能与视觉焦点拆解为可复用的区块模式。
* **模块归类与视觉载体**：
    * 提取并命名具有明确业务目标的区块，如“Hero 首屏高转化区”、“Bento Box 特性展示区”、“瀑布流内容阵列”、“沉浸式背书墙”等。
* **内容与形式的映射策略**：
    * 提炼视觉焦点（Focal Point）的塑造手法。例如：核心模块是如何通过提升色彩对比度、增加容器阴影层级、或引入动态插图来捕获用户注意力的？

### 二、 质感深化与动态生命力提取 (Texture & Dynamics)

捕捉容易被忽视但决定产品“高级感”与“灵魂”的微观细节，赋予 Agent 生成有温度的界面的能力。

#### 1. 隐性底纹与氛围渲染 (Subtle Backgrounds & Ambience)
* **微观纹理剖析**：
    * 寻找并提取页面底层的极低不透明度元素。例如：是否有用于模拟纸张质感的全局噪点（Noise）？是否有用于烘托科技感的发光弥散背景（Glow/Mesh Gradient）或极细的网格线？
    * 提取深浅色模式（Dark/Light Mode）下纹理与阴影色值的非线性反转逻辑（深色模式下的阴影通常需要更深的颜色和更大的模糊半径）。

#### 2. 交互动效与微反馈 (Interaction & Micro-feedback)
* **行为状态的物理反馈**：
    * 系统记录 Hover、Active、Focus 状态下的视觉突变。重点提取“阻尼感”与“物理反馈”，如按钮按下时的相对缩放比例、色彩亮度的暗化程度。
* **演示性动效与节奏 (Motion & Rhythm)**：
    * 提取转场与加载的缓动曲线（Easing Functions）。判断动画节奏是线性平滑、干脆利落的弹簧效果（Spring），还是带有惯性的减速停止。
    * 记录元素入场的错野动画序列（Staggered cascade），即子元素是如何按特定时间差依次浮现的。

### 三、 Agent Skill 规范化与机器可读约束 (Machine-Readable Output)

将上述所有的定性与定量分析，严格转化为 Agent 可以无歧义执行的系统级指令。

#### 1. 参数化与变量化字典 (Tokenization)
* 所有提取的样式必须转化为**结构化的语义变量**（Design Tokens）。
* *反例*：标题字体很大，按钮是深蓝色的。
* *正例*：`heading-primary-size: step-5; button-primary-bg: color-brand-base; border-radius-interactive: radius-md;`

#### 2. 上下文语义绑定 (Contextual Semantics)
* 为每一个被提取的组件或样式明确其**作用域**。
* Agent 必须明确“何时（When）”以及“为何（Why）”使用特定设计。例如：`“高亮卡片（Card-Elevated）”模型仅允许用于推荐列表的 Top 1 元素，以凸显层级`。

#### 3. 严格的负向约束与边界守卫 (Guardrails & Constraints)
* 设立绝对的护城河规则，防止 Agent 产生“设计幻觉”或破坏版面平衡。
* **约束示例**：
    * 禁止在同一视觉层级内混合使用超过两种不同的主色调。
    * 按钮或标签内的文本长度，在任何情况下都不应破坏其左右两侧的最小基础间距单元（Base Padding Unit）的安全留白范围。
    * 在移动端断点下，禁止使用水平滚动的复杂表格组件，必须转为卡片式堆叠展示。

md

根据以下设计原则，提取出 TailwindCSS 官方网站的 **UI设计 agent skill**，以 markdown 的形式输出，被 ```md``` 包裹。
网站地址：https://tailwindcss.com/，我会附上截图以供你参考。

以下是设计原则：
…… （粘贴提取原则）

md

# Tailwind CSS 官方网站 UI 设计 Agent Skill 提取报告

根据对 Tailwind CSS 官网的深度分析，将其设计语言转化为 Agent 可执行的系统级指令规范。

---

## 一、 核心视觉语汇、风格定调与模块架构

### 1. 设计风格与视觉基调 (Style & Emotional Baseline)
- **风格流派与情感共鸣：** 定位为 **“极简主义科技风（Tech-Minimalism）”**。通过极其克制的色彩运用和大量的负空间，传递出“高效、精准、开发者友好”的专业情绪。
- **材质与 UI 隐喻：** 
	- **代码原生隐喻：** 核心 UI 模拟 IDE 界面（语法高亮、深色背景代码块），通过“所见即所得”的视觉反馈建立信任。
	- **分层感：** 使用极细微的 **Ring Offset（环绕偏移阴影）** 而非大面积模糊投影，模拟物理层级的微妙堆叠。
- **视觉信噪比：** 遵循 **“内容即装饰”** 原则。除了必要的逻辑分割线和功能性插图，几乎无纯装饰性元素，确保用户注意力聚焦于功能演示。
- **几何特征：** 
  - **圆角逻辑：** 全站采用标准化的 **8px (lg)** 和 **12px (xl)** 圆角，既保留了科技感的硬朗，又具备现代 Web 应用的亲和力。

### 2. 动态排版与空间体系 (Fluid Typography & Spatial Grid)
- **相对排版层级：**
	- **阶梯比率：** 采用 **$1.25$ (Major Third)** 递增比率。
	- **排版函数：** 标题应用 `font-extrabold` 配合 `tracking-tight`（负字距），增强视觉冲击力；正文保持 `leading-relaxed`（宽行高）以提升长文本阅读体验。
    - **字体映射：**
	    - **Sans-serif (Inter/Geist):** 用于系统导航与功能说明。
	    - **Monospace (Fira Code):** 严禁用于非代码场景，仅限展示数据、API 或类名。
- **空间规律：** 
	- **8px 乘数系统：** 所有间距（Padding/Margin）严格基于 $n \times 4px$ 序列。
    - **容器秩序：** 最大内容宽度限制在 `1280px (max-w-7xl)`，在大屏下通过自动外边距居中。

### 3. 业务驱动的模块化封装结构
- **Hero 转换区：** 采用“左文右图”或“上文下演示”结构，演示区必须是可交互或动态的代码预览。
- **Bento Box（便当盒）特性展示：** 使用非对称网格布局展示底层 CSS 功能（如 Grid, Transforms），每个盒子是一个独立的“功能实验室”。
- **社会化背书墙：** 采用黑白灰单色 Logo 阵列，降低视觉权重，仅作为信任背书。

---

## 二、 质感深化与动态生命力 (Texture & Dynamics)

### 1. 隐性底纹与氛围渲染
- **微观纹理：** 在浅色背景下使用 `bg-grid-slate-100`（极细网格线）作为底层背景，模拟设计草图或绘图纸的质感，呼应“构建（Build）”的主题。
- **模式反转：** 深色模式下，不使用纯黑（#000），而是使用 `slate-900` 或 `zinc-950`，并辅以 `sky-500` 的微弱径向渐变作为氛围光。

### 2. 交互动效与微反馈
- **物理反馈：** 按钮 Hover 时触发 `translate-y-[-1px]` 的微位移和 `shadow-md` 的提升，模拟按键的回弹感。
- **转场节奏：** 使用 `duration-300` 配合 `ease-in-out`。多元素入场时，Agent 需按照 `delay-75`, `delay-150`, `delay-225` 序列进行交错加载。

---

## 三、 Agent Skill 规范化指令 (Machine-Readable Output)

### 1. 变量化字典 (Tokens)
```json
{
  "theme": {
    "primary": "sky-500",
    "background": "white",
    "surface": "slate-50",
    "text-primary": "slate-900",
    "text-secondary": "slate-500"
  },
  "scale": {
    "base-padding": "1rem",
    "radius-main": "0.75rem",
    "border-width": "1px"
  }
}
```
### 2. 上下文语义绑定
- **Rule:** 所有的代码展示块必须强制开启 `antialiased`，并使用 `rounded-xl` 容器包裹。
- **Context:** 当 Agent 生成“特性介绍”时，必须自动套用 `Bento Box` 模板，且容器间距固定为 `gap-8`。
  
### 3. 严格负向约束 (Guardrails)
- **禁止：** 严禁在同一模块内混合使用 `blue` 和 `indigo` 两类邻近主色。
- **边界：** 任何交互组件的点击区域（Hit Area）高度不得低于 `44px`。
- **平衡：** 在 `max-w-screen-md` 以下断点，必须强制隐藏复杂的代码演示侧栏，转为垂直堆叠的卡片模式。

md

根据以下设计 skill 帮我设计一个个人主页，包含内容：导航栏、个性签名、个人作品列表、推荐作品、最新博客卡片/列表、个人介绍、页尾

以下是设计 skill：
……（粘贴提取的 agent skill）

提示

变量化字典 可根据个人风格调整，或者在 Stitch 生成后，在主题里调整颜色。