# AI Agent Prompt: 生产级报纸组件库开发

## 任务目标
开发一个浏览器端生产级报纸布局组件库，参考 InDesign，组件少而精、职责明确、无冗余、无歧义，支持全局 24 列栅格、跨栏、视觉权重和主题系统，提供文档网站（内嵌 demo，无需 storybook）。

---

## 1. 项目 setup 与架构

- **Monorepo 管理**（pnpm workspace / Turborepo）
  - Packages:
    1. `components` → Layout / Section / Article / Layer / Text / Media
    2. `theme` → 全局主题变量、字体、颜色、间距、视觉权重映射
    3. `docs` → 文档网站（shadcn stack + demo）
    4. `utils` → 栅格计算、跨栏逻辑、响应式辅助函数

- **目录结构示例**:
```

/packages
/components
/Layout
/Section
/Article
/Layer
/Text
/Media
/theme
/docs
/utils

```

- **技术栈**:
  - React 18+, TypeScript
  - TailwindCSS + shadcn 文档 stack
  - Vitest + React Testing Library
  - 构建工具：Vite + Rollup

---

## 2. 全局栅格系统

- `<Layout>` 顶层容器：
  - maxWidth, padding, gutter, theme
  - 栅格总列数 24
  - snap-to-grid 支持
- Section 内对象 span ≤ Section.columns
- 响应式调整：小屏 12–16 列

---

## 3. 核心布局组件

1. `<Section>`：
   - columns, breakable, padding/margin, priority
   - 内部对象 span ≤ Section.columns

2. `<Article>`：
   - span, priority/weight, breakable
   - 内含 Headline / Subhead / BodyText / Image / PullQuote

3. `<Layer>`：
   - position, top/left/right/bottom, zIndex
   - 用于浮动广告、拉引、浮动图片

---

## 4. 内容组件

- 文本类：Headline / Subhead / BodyText / Quote / Byline / Caption
- 媒体类：Image / Figure / Video / PullQuote
- 属性：span（跨栏）、weight（High/Medium/Low）、margin/padding
- 所有 span 基于 Section.columns

---

## 5. 视觉权重映射表（24 列）

| 组件 | 权重 | font-size | font-weight | line-height | color | span | margin/padding |
|---|---|---|---|---|---|---|---|
| Headline | High | 36–48px | 700 | 1.1 | #111 | 6–8 | 0 0 1rem 0 |
| Headline | Medium | 28–34px | 600 | 1.2 | #111 | 4–6 | 0 0 0.75rem 0 |
| Headline | Low | 22–26px | 500 | 1.3 | #222 | 2–4 | 0 0 0.5rem 0 |
| Subhead | High | 20–24px | 600 | 1.25 | #222 | 2–3 | 0 0 0.5rem 0 |
| Subhead | Medium | 16–18px | 500 | 1.3 | #333 | 1–2 | 0 0 0.25rem 0 |
| BodyText | High | 16px | 400 | 1.5 | #333 | 1 | 0 0 1rem 0 |
| BodyText | Medium | 14–15px | 400 | 1.5 | #444 | 1 | 0 0 0.75rem 0 |
| BodyText | Low | 12–14px | 400 | 1.4 | #555 | 1 | 0 0 0.5rem 0 |
| Quote | High | 20–24px | 500 | 1.4 | #222 | 2 | 0 0 0.75rem 0 |
| Quote | Medium | 16–18px | 400 | 1.4 | #333 | 1 | 0 0 0.5rem 0 |
| Image Caption | Standard | 12–14px | 400 | 1.3 | #555 | 1 | 0.25rem 0 |
| PullQuote | High | 24–28px | 600 | 1.2 | #111 | 2–3 | 0 0 0.5rem 0 |
| PullQuote | Medium | 18–20px | 500 | 1.25 | #222 | 1–2 | 0 0 0.25rem 0 |
| Byline | Standard | 12–14px | 400 | 1.3 | #555 | 1 | 0 0 0.25rem 0 |

---

## 6. 主题系统

- 全局新闻字体预设
- 颜色变量（黑/灰/强调色）
- 间距变量（gutter, margin, padding）
- 权重映射 Token
- Tailwind + CSS Variables 支持主题切换

---

## 7. 布局规则

- Section 内对象 span ≤ Section.columns
- 高权重对象可跨多栏
- Layer 可浮动/绝对定位
- breakable 控制分页断开
- 响应式：小屏 12–16 列

---

## 8. 文档网站

- 技术栈：shadcn stack + Next.js + Tailwind + MDX
- Demo 内嵌组件，展示属性、span、视觉权重、跨栏效果
- 文档章节：
  1. 概览与目标
  2. 栅格系统与 Layout/Section 说明
  3. 核心组件（Article/Image/Layer）属性说明
  4. 文本组件属性与权重映射
  5. 主题与变量使用指南
  6. 跨栏和浮动 Layer 示例
  7. 响应式布局展示

---

## 9. 实施顺序

1. 初始化 monorepo + Layout / Section 基础组件
2. 配置主题系统、视觉权重映射 CSS / Tailwind Token
3. 开发 Article / Image / Layer / PullQuote / 文本组件
4. 实现 Section 网格跨栏逻辑
5. 测试生产级报纸布局：跨栏、浮动 Layer、breakable、响应式
6. 构建文档网站，内嵌 demo 展示组件属性与效果
7. 确认生产级排版效果符合视觉权重、跨栏、主题、响应式要求