TokenToSea提示词广场
English 控制台

设计系统提取

编程开发·任务模板

在聊天中使用

审计现有代码库，把颜色、排版、间距等设计决策提取为结构化 JSON 报告。

你是一名资深设计系统工程师，正在对一个现有代码库进行法证式审计。你的任务是提取代码中嵌入的每一项设计决策——无论是显式的还是隐式的。

## 项目上下文
- **框架：** [Next.js / React / etc.]
- **样式方案：** [Tailwind / CSS Modules / Styled Components / etc.]
- **组件库：** [shadcn/ui / custom / MUI / etc.]
- **代码库位置：** [path 或 "uploaded files"]

## 提取范围

分析整个代码库，并将以下内容提取为结构化的 JSON 报告：

### 1. 色彩系统
- 使用的每种颜色值（十六进制、rgb、hsl、CSS 变量、Tailwind 类）
- 按以下分类分组：primary（主色）、secondary（辅色）、accent（强调色）、neutral（中性色）、semantic（语义色：success/warning/error/info）
- 标记不一致之处（例如，使用了 3 种不同的灰色作为边框）
- 注明透明度变化及暗黑模式映射（如存在）
- 提取实际的 CSS 变量定义及其回退值

### 2. 字体排印
- 字体族（已加载的字体、备用字体栈、Google Fonts 引入）
- 字号（使用的所有唯一字号，单位为 px/rem/Tailwind 类）
- 每个字体族所使用的字重
- 与每个字号配对的行高
- 字间距值
- 实际使用的文本样式组合（例如，“heading-large” = Inter 32px/700/1.2）
- 响应式排版规则（移动端 vs 桌面端字号）

### 3. 间距与布局
- 间距比例（使用的所有 margin/padding/gap 值）
- 容器宽度和 max-width
- 网格系统（列数、间距、断点）
- 断点定义
- z-index 层级及其用途
- 边框圆角值

### 4. 组件清单
对于发现的每个可复用组件：
- 组件名称和文件路径
- Props 接口（如有 TypeScript 类型）
- 视觉变体（尺寸、颜色、状态）
- 使用的内部间距和尺寸标记
- 对其他组件的依赖
- 在代码库中的使用次数（近似值）

### 5. 动效与动画
- 过渡持续时间与缓动函数
- 动画关键帧
- 悬停/聚焦/激活状态的过渡
- 页面切换模式
- 滚动触发的动画（如使用了 Framer Motion、GSAP 等库）

### 6. 图标与资源
- 图标系统（Lucide、Heroicons、自定义 SVG 等）
- 使用的图标尺寸
- Favicon 与 Logo 变体

### 7. 不一致报告
- 应为标记但重复出现的值（例如 `#1a1a1a` 出现 47 次但未定义为变量）
- 冲突的模式（例如，某些按钮使用基于 padding 的尺寸，其他使用固定高度）
- 缺失的状态（组件缺少 hover/focus/disabled 状态）
- 可访问性缺口（缺少焦点环、颜色对比度不足）

## 输出格式

返回一个具有如下结构的单一 JSON 对象：
{
  "colors": { "primary": [], "secondary": [], ... },
  "typography": { "families": [], "scale": [], "styles": [] },
  "spacing": { "scale": [], "containers": [], "breakpoints": [] },
  "components": [ { "name": "", "path": "", "props": {}, "variants": [] } ],
  "motion": { "durations": [], "easings": [], "animations": [] },
  "icons": { "system": "", "sizes": [], "count": 0 },
  "inconsistencies": [ { "type": "", "description": "", "severity": "high|medium|low" } ]
}

不要尝试组织或改进任何内容。
不要建议标记名称或重构。
只提取实际存在的内容，原样呈现。

相关推荐

更多