TokenToSea提示词广场
English 控制台

CLAUDE.md 汇编

编程开发·任务模板

在聊天中使用

把 token 架构和组件文档汇编成项目根目录的 CLAUDE.md 设计系统参考。

填写变量

填写后，下方提示词与复制内容会同步替换。

你正在汇编权威的 CLAUDE.md 设计系统参考文件。  
该文件将存放于项目根目录，作为在此代码库上工作的任何 AI 助手（或人类开发者）的唯一事实来源。

## 输入
- **Token 架构：** [第 2 阶段输出]
- **组件文档：** [第 3 阶段输出]
- **项目元数据：**
  - 项目名称：{{project_name}}
  - 技术栈：[Next.js 14+ / React 18+ / Tailwind 3.x / 等]
  - Node 版本：{{node_version}}
  - 包管理器：[npm / pnpm / yarn]

## CLAUDE.md 结构

按以下顺序汇编最终文件：

### 1. 项目标识
- 项目名称、描述、定位
- 技术栈摘要（一个表格）
- 目录结构概览（src/ 布局）

### 2. 快速参考卡
一张简洁的速查表 —— 一眼即可获取最常用的信息：
- 主要颜色及其十六进制值（最多 6 种）
- 字体栈
- 间距比例（视觉表示：4, 8, 12, 16, 24, 32, 48, 64）
- 断点
- 边框半径值
- 阴影值
- z-index 映射

### 3. 设计 Token — 完整参考
按层级组织（基础 → 语义 → 组件）。  
每个 Token 条目：名称、值、CSS 变量、对应的 Tailwind 类。  
使用表格以提高可扫描性。

### 4. 字体排版系统
- 字号比例表（名称、大小、字重、行高、字母间距、用途）
- 响应式规则
- 字体加载策略

### 5. 颜色系统
- 完整调色板及色块描述（名称、十六进制值、使用场景）
- 语义颜色映射表
- 暗色模式映射（如适用）
- 对比度合规说明

### 6. 布局系统
- 网格规范
- 容器宽度
- 间距系统（含视觉比例）
- 断点行为

### 7. 组件库
[插入第 3 阶段输出的每个组件]

### 8. 动效与动画
- 命名预设表（名称、持续时间、缓动函数、用途）
- 规则：何时动画，何时不动画
- 性能限制

### 9. 编码规范
- 文件命名模式
- 导入顺序
- 组件文件结构模板
- CSS 类排序规范（如使用 Tailwind）
- 使用的状态管理模式

### 10. 规则与约束
绝不能违反的硬性规则：
- “禁止使用内联十六进制颜色 — 必须引用 Token”
- “所有交互元素必须具有可见的焦点状态”
- “最小触控目标：44x44px”
- “所有图片必须包含 alt 文本”
- “禁止使用定义范围之外的 z-index 值”
- [添加项目特定规则]

## 格式要求
- 所有 Token/值映射必须使用 Markdown 表格
- 所有代码示例必须使用代码块
- 每个章节必须自包含（无需滚动到其他章节即可阅读）
- 在顶部包含带锚点链接的目录
- 最大行长度：100 字符，以提高可读性
- 优先使用显式值，而非“参见上文”类引用

## 关键规则
此文件必须具有**权威性**。若 CLAUDE.md 与实际代码之间存在歧义，则应更新 CLAUDE.md 以匹配现实 —— 而非相反。此文件记录的是**现状**，而非**理想状态**（后者属于单独的路线图）。

相关推荐

更多