设计系统提取提示词套件

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

项目背景

框架： [Next.js / React / 等]
样式方案： [Tailwind / CSS Modules / Styled Components / 等]
组件库： [shadcn/ui / 自定义 / 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 类表示）
每个字体族使用的字重
与每个字体大小配对的line height
字距值
作为已使用组合的文本样式（例如，“heading-large” = Inter 32px/700/1.2）
响应式排版规则（移动端与桌面端尺寸）

3. 间距与布局

间距刻度（使用的每一个 margin/padding/gap 值）
容器宽度和 max-width
网格系统（列数、间距、断点）
断点定义
Z-index 层级及其用途
边框圆角值

4. 组件清单

对于找到的每一个可复用组件：

组件名称和文件路径
Props 接口（如果可用，提供 TypeScript 类型）
视觉变体（尺寸、颜色、状态）
使用的内部间距和尺寸 token
对其他组件的依赖
在整个代码库中的使用次数（近似值）

5. 动效与动画

过渡时长与时间函数
动画关键帧
悬停/聚焦/激活状态过渡
页面过渡模式
基于滚动的动画（如果使用了 Framer Motion、GSAP 之类的库）

6. 图标与资源

图标系统（Lucide、Heroicons、自定义 SVG 等）
使用的图标尺寸
Favicon 和 logo 变体

7. 不一致性报告

本应成为 token 的重复值（例如 #1a1a1a 被使用了 47 次却不是变量）
相互冲突的模式（例如有些按钮使用基于内边距的尺寸，另一些使用固定高度）
缺失的状态（没有悬停/聚焦/禁用状态的组件）
无障碍缺口（缺少聚焦环、颜色对比度不足）

输出格式

返回一个具有以下结构的单一 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 名称或重构。只提取已存在的内容，完全照原样。

You are a senior design systems engineer conducting a forensic audit of an existing codebase. Your task is to extract every design decision embedded in the code — explicit or implicit.

Project Context

Framework: [Next.js / React / etc.]
Styling approach: [Tailwind / CSS Modules / Styled Components / etc.]
Component library: [shadcn/ui / custom / MUI / etc.]
Codebase location: [path or "uploaded files"]

Extraction Scope

Analyze the entire codebase and extract the following into a structured JSON report:

1. Color System

Every color value used (hex, rgb, hsl, css variables, Tailwind classes)
Group by: primary, secondary, accent, neutral, semantic (success/warning/error/info)
Flag inconsistencies (e.g., 3 different grays used for borders)
Note opacity variations and dark mode mappings if present
Extract the actual CSS variable definitions and their fallback values

2. Typography

Font families (loaded fonts, fallback stacks, Google Fonts imports)
Font sizes (every unique size used, in px/rem/Tailwind classes)
Font weights used per font family
Line heights paired with each font size
Letter spacing values
Text styles as used combinations (e.g., "heading-large" = Inter 32px/700/1.2)
Responsive typography rules (mobile vs desktop sizes)

3. Spacing & Layout

Spacing scale (every margin/padding/gap value used)
Container widths and max-widths
Grid system (columns, gutters, breakpoints)
Breakpoint definitions
Z-index layers and their purpose
Border radius values

4. Components Inventory

For each reusable component found:

Component name and file path
Props interface (TypeScript types if available)
Visual variants (size, color, state)
Internal spacing and sizing tokens used
Dependencies on other components
Usage count across the codebase (approximate)

5. Motion & Animation

Transition durations and timing functions
Animation keyframes
Hover/focus/active state transitions
Page transition patterns
Scroll-based animations (if any library like Framer Motion, GSAP is used)

6. Iconography & Assets

Icon system (Lucide, Heroicons, custom SVGs, etc.)
Icon sizes used
Favicon and logo variants

7. Inconsistencies Report

Duplicate values that should be tokens (e.g., #1a1a1a used 47 times but not a variable)
Conflicting patterns (e.g., some buttons use padding-based sizing, others use fixed height)
Missing states (components without hover/focus/disabled states)
Accessibility gaps (missing focus rings, insufficient color contrast)

Output Format

Return a single JSON object with this structure: { "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" } ] }

Do NOT attempt to organize or improve anything yet. Do NOT suggest token names or restructuring. Just extract what exists, exactly as it is.