← 返回提示詞庫
創意靈感 難度:入門

设计系统提取提示工具包

Design System Extraction Prompt Kit

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

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

## 项目背景
- **框架:** [Next.js / React / 等]
- **样式方法:** [Tailwind / CSS Modules / Styled Components / 等]
- **组件库:** [shadcn/ui / custom / MUI / 等]
- **代码库位置:** [路径或“已上传文件”]

## 提取范围

分析整个代码库,并将以下内容提取到结构化的 JSON 报告中:

### 1. 颜色系统
- 使用的每个颜色值(hex, 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)
- 响应式排版规则(移动端与桌面端大小)

### 3. 间距与布局
- 间距比例(使用的每个 margin/padding/gap 值)
- 容器宽度和最大宽度
- 网格系统(列、间距、断点)
- 断点定义
- Z-index 层及其用途
- 边框半径值

### 4. 组件清单
对于找到的每个可复用组件:
- 组件名称和文件路径
- Props 接口(如果可用,TypeScript 类型)
- 视觉变体(大小、颜色、状态)
- 使用的内部间距和尺寸 token
- 对其他组件的依赖关系
- 在代码库中的使用次数(大约)

### 5. 动效与动画
- 过渡持续时间和缓动函数
- 动画关键帧
- 悬停/焦点/激活状态过渡
- 页面过渡模式
- 基于滚动的动画(如果使用了 Framer Motion, GSAP 等库)

### 6. 图标与资产
- 图标系统(Lucide, Heroicons, 自定义 SVG 等)
- 使用的图标大小
- Favicon 和 Logo 变体

### 7. 不一致报告
- 应该作为 token 的重复值(例如,`#1a1a1a` 使用了 47 次但不是变量)
- 冲突模式(例如,一些按钮使用基于 padding 的尺寸,另一些使用固定高度)
- 缺失状态(组件没有悬停/焦点/禁用状态)
- 可访问性差距(缺失焦点环、颜色对比度不足)

## 输出格式

返回一个具有以下结构的 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" } ]
}

请勿尝试组织或改进任何内容。
请勿建议 token 名称或重构。
只需提取现有内容,原样呈现。