analysis-screenshot

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Screenshot Analysis

截图分析

Overview

概述

Extract precise, implementation-ready design tokens, components, and layout structure from screenshot images through a systematic eight-phase process. Every extraction must trace back to something observed in the screenshot, and every gap must be explicitly acknowledged.

通过系统化的八阶段流程，从截图中提取精准、可直接用于开发的Design Tokens、组件和布局结构。所有提取内容必须能追溯到截图中可见的元素，所有无法确定的信息必须明确标注为缺口。

When to Use

适用场景

Analyzing a screenshot image to extract a design system
Building a color palette from an existing interface
Cataloging components visible in a UI screenshot
Identifying typography scale and hierarchy from a reference app
Measuring spacing patterns and grid structure from a screenshot
Producing implementation-ready tokens from visual inspiration

分析截图以提取设计系统
从现有界面构建调色板
对UI截图中可见的组件进行分类整理
从参考应用中识别排版比例和层级
从截图中测量间距模式和网格结构
从视觉灵感中生成可直接用于开发的令牌

When NOT to Use

不适用场景

Designing from scratch without reference screenshots
Working from design files (Figma, Sketch) where tokens are already exported
Pure interaction design without visual analysis
When the user provides a design system spec and needs implementation only

无参考截图的从零开始设计
处理已导出令牌的设计文件（Figma、Sketch）
无需视觉分析的纯交互设计
用户提供设计系统规范仅需实现的场景

Phase 1: Initial Assessment

阶段1：初始评估

Before extracting any tokens, establish the context of the interface.

Identify and document:

Attribute	What to Determine
Platform	Mobile (iOS/Android), web (desktop/responsive), desktop app
Design language	Material, iOS HIG, custom, hybrid
Layout approach	Single column, multi-column, sidebar+content, dashboard grid
Density	Compact (data-heavy), comfortable (standard), spacious (marketing)
Color mode	Light, dark, or mixed
Apparent era	Current design trends vs. dated patterns

Output format:

PLATFORM: [platform]
DESIGN LANGUAGE: [language]
LAYOUT: [approach]
DENSITY: [level]
COLOR MODE: [mode]
NOTES: [anything notable about the overall approach]

在提取任何令牌之前，先确定界面的上下文。

识别并记录：

属性	需确定的内容
平台	移动端（iOS/Android）、网页端（桌面/响应式）、桌面应用
设计语言	Material、iOS HIG、自定义、混合
布局方式	单列、多列、侧边栏+内容区、仪表板网格
密度	紧凑（数据密集型）、舒适（标准）、宽松（营销类）
色彩模式	浅色、深色、混合
设计风格年代	当前设计趋势 vs 过时模式

输出格式：

PLATFORM: [platform]
DESIGN LANGUAGE: [language]
LAYOUT: [approach]
DENSITY: [level]
COLOR MODE: [mode]
NOTES: [关于整体设计方式的任何值得注意的信息]

Phase 2: Color Extraction

阶段2：颜色提取

Extract every distinguishable color. Organize by role, not by where it appears.

提取所有可区分的颜色。按功能角色而非出现位置进行分类。

Extraction Process

提取流程

Backgrounds first -- Identify every distinct background color. Number them from darkest to lightest (or lightest to darkest in dark mode).
Text colors -- Identify primary text, secondary text, muted/placeholder text, and any colored text.
Interactive elements -- Buttons, links, toggles, active states. Separate primary actions from secondary.
Semantic colors -- Success (green), warning (amber/yellow), error/destructive (red), info (blue). Note which are present and which are absent.
Accent and brand -- The dominant brand color. Any secondary accent.
Borders and dividers -- Often subtle. Zoom in mentally. Note opacity if borders appear semi-transparent.

先提取背景色——识别所有不同的背景色。按从深到浅排序（深色模式下按从浅到深排序）并编号。
文本颜色——识别主文本、次要文本、弱化/占位文本以及任何彩色文本。
交互元素——按钮、链接、开关、激活状态。区分主操作和次要操作元素。
语义颜色——成功色（绿色）、警告色（琥珀色/黄色）、错误/破坏性颜色（红色）、信息色（蓝色）。记录哪些存在，哪些缺失。
强调色与品牌色——主导品牌色。任何次要强调色。
边框与分隔线——通常较细微。需仔细观察。若边框为半透明，需记录透明度。

Output Format

输出格式

PRIMARY PALETTE:
  Brand Primary:    #XXXXXX  (observed in: [element])
  Brand Secondary:  #XXXXXX  (observed in: [element])

NEUTRAL PALETTE:
  Background Base:  #XXXXXX  (observed in: [element])
  Background Elevated: #XXXXXX  (observed in: [element])
  Surface:          #XXXXXX  (observed in: [element])
  Border Default:   #XXXXXX  (observed in: [element])
  Text Primary:     #XXXXXX  (observed in: [element])
  Text Secondary:   #XXXXXX  (observed in: [element])
  Text Muted:       #XXXXXX  (observed in: [element])

SEMANTIC PALETTE:
  Success:          #XXXXXX  (observed in: [element])
  Warning:          #XXXXXX  (observed in: [element])
  Error:            #XXXXXX  (observed in: [element])
  Info:             #XXXXXX  (observed in: [element])

ACCENT PALETTE:
  [role]:           #XXXXXX  (observed in: [element])

Every color entry MUST include the

(observed in: ...)

attribution. If a semantic color is not visible in the screenshot, omit it and note its absence in the gaps section.

PRIMARY PALETTE:
  Brand Primary:    #XXXXXX  (observed in: [element])
  Brand Secondary:  #XXXXXX  (observed in: [element])

NEUTRAL PALETTE:
  Background Base:  #XXXXXX  (observed in: [element])
  Background Elevated: #XXXXXX  (observed in: [element])
  Surface:          #XXXXXX  (observed in: [element])
  Border Default:   #XXXXXX  (observed in: [element])
  Text Primary:     #XXXXXX  (observed in: [element])
  Text Secondary:   #XXXXXX  (observed in: [element])
  Text Muted:       #XXXXXX  (observed in: [element])

SEMANTIC PALETTE:
  Success:          #XXXXXX  (observed in: [element])
  Warning:          #XXXXXX  (observed in: [element])
  Error:            #XXXXXX  (observed in: [element])
  Info:             #XXXXXX  (observed in: [element])

ACCENT PALETTE:
  [role]:           #XXXXXX  (observed in: [element])

每个颜色条目必须包含

(observed in: ...)

的来源标注。若某语义颜色在截图中不可见，需省略该条目并在缺口部分记录其缺失。

Phase 3: Typography Identification

阶段3：排版识别

Identify every distinct typographic treatment visible in the screenshot.

识别截图中所有不同的排版样式。

Extraction Process

提取流程

Scan top to bottom -- Note every text element, grouping by apparent visual hierarchy level.
Font family -- Identify the typeface. If uncertain, provide the closest match (e.g., "appears to be Inter or similar geometric sans-serif").
Size scale -- Measure relative sizes. Anchor to body text and express other sizes as ratios or estimated pixel values.
Weight scale -- Note distinct weights visible (regular, medium, semibold, bold).
Line height -- Estimate for body text and headings. Note whether headings use tighter line height than body.
Letter spacing -- Note any visible tracking differences (tight headings, wider labels, uppercase with extra tracking).
Special treatments -- Monospace for code, tabular numbers for data, italic for emphasis.

从上到下扫描——记录所有文本元素，按视觉层级分组。
字体族——识别字体。若不确定，提供最接近的匹配（例如：“看起来是Inter或类似的几何无衬线字体”）。
字号比例——测量相对大小。以正文字号为基准，其他字号以比例或估算像素值表示。
字重比例——记录可见的不同字重（常规、中等、半粗体、粗体）。
行高——估算正文和标题的行高。记录标题行高是否比正文更紧凑。
字间距——记录任何可见的字距差异（紧凑的标题、较宽的标签、带额外字距的大写文本）。
特殊样式——代码用等宽字体、数据用表格数字、强调用斜体。

Output Format

输出格式

FONT FAMILIES:
  Primary:    [family] (confidence: high/medium/low)
  Secondary:  [family] (confidence: high/medium/low)
  Monospace:  [family] (if present)

TYPE SCALE:
  Display:    ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 1:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 2:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 3:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Body:       ~[size]px / weight [N] / leading [N] (observed in: [element])
  Caption:    ~[size]px / weight [N] / leading [N] (observed in: [element])
  Label:      ~[size]px / weight [N] / leading [N] (observed in: [element])
  Overline:   ~[size]px / weight [N] / leading [N] (observed in: [element])

LETTER SPACING:
  Headings: [value or "normal"]
  Labels:   [value or "normal"]
  Overline: [value or "normal"]

Mark all pixel values with

(approximate) unless the screenshot provides enough context for exact measurement. Note confidence level for font family identification.

FONT FAMILIES:
  Primary:    [family] (confidence: high/medium/low)
  Secondary:  [family] (confidence: high/medium/low)
  Monospace:  [family] (if present)

TYPE SCALE:
  Display:    ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 1:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 2:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Heading 3:  ~[size]px / weight [N] / leading [N] (observed in: [element])
  Body:       ~[size]px / weight [N] / leading [N] (observed in: [element])
  Caption:    ~[size]px / weight [N] / leading [N] (observed in: [element])
  Label:      ~[size]px / weight [N] / leading [N] (observed in: [element])
  Overline:   ~[size]px / weight [N] / leading [N] (observed in: [element])

LETTER SPACING:
  Headings: [value or "normal"]
  Labels:   [value or "normal"]
  Overline: [value or "normal"]

所有像素值需标记

（表示近似值），除非截图提供足够上下文以进行精确测量。记录字体族识别的置信度。

Phase 4: Spacing Measurement

阶段4：间距测量

Extract the spacing system by identifying the base unit and its multipliers.

通过识别基础单位及其倍数来提取间距系统。

Extraction Process

提取流程

Find the base unit -- Examine the smallest repeated spacing value. Common bases: 4px, 8px. Look at icon-to-text gaps, input padding, and tight element pairs.
Internal component spacing -- Padding inside buttons, cards, inputs, list items.
Between-element spacing -- Gaps between sibling elements (button groups, form fields, list items).
Section spacing -- Distance between major content sections.
Page margins -- Outer padding of the main content area.
Consistent vs. inconsistent -- Note whether spacing follows a strict scale or varies.

找到基础单位——检查最小的重复间距值。常见基础单位：4px、8px。查看图标与文本的间隙、输入框内边距、紧密元素对的间距。
组件内部间距——按钮、卡片、输入框、列表项的内边距。
元素间间距——同级元素之间的间隙（按钮组、表单字段、列表项）。
区块间距——主要内容区块之间的距离。
页面边距——主内容区域的外边距。
一致性检查——记录间距是否遵循严格的比例或存在变化。

Output Format

输出格式

BASE UNIT: [N]px

SPACING SCALE:
  2xs:  [N]px  ([base] x [multiplier]) — used for: [context]
  xs:   [N]px  ([base] x [multiplier]) — used for: [context]
  sm:   [N]px  ([base] x [multiplier]) — used for: [context]
  md:   [N]px  ([base] x [multiplier]) — used for: [context]
  lg:   [N]px  ([base] x [multiplier]) — used for: [context]
  xl:   [N]px  ([base] x [multiplier]) — used for: [context]
  2xl:  [N]px  ([base] x [multiplier]) — used for: [context]

COMPONENT PADDING PATTERNS:
  Buttons:     [top] [right] [bottom] [left]
  Cards:       [top] [right] [bottom] [left]
  Inputs:      [top] [right] [bottom] [left]
  List items:  [top] [right] [bottom] [left]

GAP PATTERNS:
  Form fields:    [N]px between fields
  Button groups:  [N]px between buttons
  Section gap:    [N]px between major sections

BASE UNIT: [N]px

SPACING SCALE:
  2xs:  [N]px  ([base] x [multiplier]) — used for: [context]
  xs:   [N]px  ([base] x [multiplier]) — used for: [context]
  sm:   [N]px  ([base] x [multiplier]) — used for: [context]
  md:   [N]px  ([base] x [multiplier]) — used for: [context]
  lg:   [N]px  ([base] x [multiplier]) — used for: [context]
  xl:   [N]px  ([base] x [multiplier]) — used for: [context]
  2xl:  [N]px  ([base] x [multiplier]) — used for: [context]

COMPONENT PADDING PATTERNS:
  Buttons:     [top] [right] [bottom] [left]
  Cards:       [top] [right] [bottom] [left]
  Inputs:      [top] [right] [bottom] [left]
  List items:  [top] [right] [bottom] [left]

GAP PATTERNS:
  Form fields:    [N]px between fields
  Button groups:  [N]px between buttons
  Section gap:    [N]px between major sections

Phase 5: Component Cataloging

阶段5：组件分类

Identify and document every distinct UI component visible in the screenshot.

识别并记录截图中所有不同的UI组件。

Extraction Process

提取流程

For each component:

Name it -- Use standard terminology (button, input, card, badge, avatar, tab, etc.).
Count variants -- How many visual variants are visible? (primary/secondary/ghost button, filled/outlined input).
Identify states -- Which states are visible? (default, hover, active, disabled, focused, selected, error).
Measure it -- Height, padding, border-radius, font size, icon size.
Note composition -- What sub-elements does it contain? (icon + label, avatar + name + subtitle).

针对每个组件：

命名——使用标准术语（按钮、输入框、卡片、徽章、头像、标签页等）。
统计变体——可见多少种视觉变体？（主按钮/次要按钮/幽灵按钮、填充式/轮廓式输入框）。
识别状态——可见哪些状态？（默认、悬停、激活、禁用、聚焦、选中、错误）。
测量尺寸——高度、内边距、圆角半径、字号、图标大小。
记录组成——包含哪些子元素？（图标+标签、头像+名称+副标题）。

Output Format

输出格式

For each component:

COMPONENT: [Name]
  Variants observed: [list]
  States visible: [list]
  States NOT visible: [list — mark as gap]
  Dimensions:
    Height: ~[N]px
    Padding: [values]
    Border radius: [N]px
    Font size: ~[N]px
    Font weight: [N]
    Icon size: [N]px (if applicable)
  Colors:
    Background: #XXXXXX
    Text: #XXXXXX
    Border: #XXXXXX (if applicable)
    Icon: #XXXXXX (if applicable)
  Composition: [sub-elements]
  Notes: [anything unusual or distinctive]

针对每个组件：

COMPONENT: [Name]
  Variants observed: [list]
  States visible: [list]
  States NOT visible: [list — mark as gap]
  Dimensions:
    Height: ~[N]px
    Padding: [values]
    Border radius: [N]px
    Font size: ~[N]px
    Font weight: [N]
    Icon size: [N]px (if applicable)
  Colors:
    Background: #XXXXXX
    Text: #XXXXXX
    Border: #XXXXXX (if applicable)
    Icon: #XXXXXX (if applicable)
  Composition: [sub-elements]
  Notes: [anything unusual or distinctive]

Common Component Checklist

常见组件检查清单

Phase 6: Layout Structure

阶段6：布局结构

Document the spatial organization and visual hierarchy of the interface.

记录界面的空间组织和视觉层级。

Extraction Process

提取流程

Grid system -- Identify columns, gutters, and margins. Note whether a standard grid (12-column) or custom layout is used.
Content hierarchy -- Rank content areas by visual prominence (size, position, contrast, whitespace).
Section mapping -- Divide the interface into named sections (header, sidebar, main content, footer, etc.).
Visual weight -- Note where the eye is drawn first, second, third. Identify what creates that hierarchy (size, color, contrast, position).
Alignment axes -- Identify the dominant alignment pattern (left-aligned, center-aligned, mixed).

网格系统——识别列、Gutter和边距。记录使用的是标准网格（12列）还是自定义布局。
内容层级——按视觉突出度（大小、位置、对比度、留白）对内容区域排序。
区块映射——将界面划分为命名区块（头部、侧边栏、主内容区、页脚等）。
视觉权重——记录视线首先、其次、第三聚焦的位置。识别形成层级的因素（大小、颜色、对比度、位置）。
对齐轴——识别主导对齐模式（左对齐、居中对齐、混合）。

Output Format

输出格式

GRID:
  Type: [fixed/fluid/hybrid]
  Columns: [N]
  Gutter: ~[N]px
  Margin: ~[N]px
  Max width: ~[N]px (if constrained)

SECTION MAP:
  [Section name]: [position, approximate dimensions, role]
  [Section name]: [position, approximate dimensions, role]
  ...

VISUAL HIERARCHY (reading order):
  1. [Element/area] — draws attention via [mechanism]
  2. [Element/area] — secondary focus via [mechanism]
  3. [Element/area] — tertiary via [mechanism]

ALIGNMENT:
  Primary axis: [left/center/mixed]
  Notable breaks: [any deliberate alignment breaks]

CONTENT DENSITY:
  [Section]: [sparse/moderate/dense]

GRID:
  Type: [fixed/fluid/hybrid]
  Columns: [N]
  Gutter: ~[N]px
  Margin: ~[N]px
  Max width: ~[N]px (if constrained)

SECTION MAP:
  [Section name]: [position, approximate dimensions, role]
  [Section name]: [position, approximate dimensions, role]
  ...

VISUAL HIERARCHY (reading order):
  1. [Element/area] — draws attention via [mechanism]
  2. [Element/area] — secondary focus via [mechanism]
  3. [Element/area] — tertiary via [mechanism]

ALIGNMENT:
  Primary axis: [left/center/mixed]
  Notable breaks: [any deliberate alignment breaks]

CONTENT DENSITY:
  [Section]: [sparse/moderate/dense]

Phase 7: Border and Elevation

阶段7：边框与层级

Document the depth strategy, border treatments, and shadow system.

记录深度策略、边框样式和阴影系统。

Extraction Process

提取流程

Border radii -- Measure distinct radius values. Note which components use which radius.
Border colors and widths -- Document border treatments. Note opacity if semi-transparent.
Shadow values -- Identify distinct shadow levels. Estimate offset, blur, spread, and color.
Elevation hierarchy -- Map which elements sit above which. Number the levels.
Divider patterns -- How are sections separated? (borders, spacing, background shifts, shadows).
Depth strategy -- Classify the overall approach: borders-only, subtle shadows, layered shadows, or surface shifts.

圆角半径——测量不同的圆角值。记录哪些组件使用哪些半径。
边框颜色与宽度——记录边框样式。若为半透明，需记录透明度。
阴影值——识别不同的阴影层级。估算偏移量、模糊度、扩散度和颜色。
层级结构——记录哪些元素位于其他元素之上。为层级编号。
分隔模式——区块如何分隔？（边框、间距、背景变化、阴影）。
深度策略——对整体方法进行分类：仅边框、细微阴影、分层阴影、表面变化。

Output Format

输出格式

DEPTH STRATEGY: [borders-only / subtle-shadows / layered-shadows / surface-shifts]

BORDER RADII:
  Small (buttons, inputs):  [N]px
  Medium (cards, panels):   [N]px
  Large (modals, sheets):   [N]px
  Full (avatars, pills):    [N]px (9999px / 50%)

SHADOWS:
  Level 1 (subtle):   [offset-x] [offset-y] [blur] [spread] [color]
  Level 2 (medium):   [offset-x] [offset-y] [blur] [spread] [color]
  Level 3 (elevated): [offset-x] [offset-y] [blur] [spread] [color]

BORDER TREATMENTS:
  Default: [width] [style] [color]
  Subtle:  [width] [style] [color]
  Strong:  [width] [style] [color]

ELEVATION MAP:
  Level 0: [elements at base level]
  Level 1: [elements floating above base]
  Level 2: [elements above level 1]
  Level 3: [highest elevation elements]

DIVIDER PATTERN: [description of how sections are separated]

DEPTH STRATEGY: [borders-only / subtle-shadows / layered-shadows / surface-shifts]

BORDER RADII:
  Small (buttons, inputs):  [N]px
  Medium (cards, panels):   [N]px
  Large (modals, sheets):   [N]px
  Full (avatars, pills):    [N]px (9999px / 50%)

SHADOWS:
  Level 1 (subtle):   [offset-x] [offset-y] [blur] [spread] [color]
  Level 2 (medium):   [offset-x] [offset-y] [blur] [spread] [color]
  Level 3 (elevated): [offset-x] [offset-y] [blur] [spread] [color]

BORDER TREATMENTS:
  Default: [width] [style] [color]
  Subtle:  [width] [style] [color]
  Strong:  [width] [style] [color]

ELEVATION MAP:
  Level 0: [elements at base level]
  Level 1: [elements floating above base]
  Level 2: [elements above level 1]
  Level 3: [highest elevation elements]

DIVIDER PATTERN: [description of how sections are separated]

Phase 8: Output Assembly

阶段8：输出整合

Compile all phase outputs into a single structured extraction document.

将所有阶段的输出整合为一份结构化的提取文档。

Assembly Process

整合流程

Compile all phases -- Gather outputs from Phases 1-7 into a single document.
Cross-reference -- Verify color references in components match the color palette. Verify spacing values in components match the spacing scale.
Resolve conflicts -- If a component's measured padding does not match the spacing scale, note the discrepancy.
Document gaps -- Compile all acknowledged gaps into a single section.
Add implementation notes -- For each token category, add CSS custom property suggestions or Tailwind config hints.

汇总所有阶段——将阶段1-7的输出收集到一份文档中。
交叉验证——验证组件中的颜色引用与调色板匹配，验证组件中的间距值与间距比例匹配。
解决冲突——若组件测量的内边距与间距比例不匹配，记录差异。
记录缺口——将所有已确认的缺口整理到单独的章节中。
添加实现提示——针对每个令牌类别，添加CSS自定义属性建议或Tailwind配置提示。可参考references/implementation-templates.md获取起始模板。

Gaps Section (Required)

缺口章节（必填）

Every extraction MUST end with an honest gaps section:

KNOWN GAPS:
  Cannot determine from static screenshot:
  - [ ] Hover states for [components]
  - [ ] Focus ring styles
  - [ ] Animation/transition properties
  - [ ] Responsive breakpoint behavior
  - [ ] Touch target sizes (if mobile)
  - [ ] Scroll behavior
  - [ ] [Other gaps specific to this screenshot]

  Low confidence extractions:
  - [ ] [Item] — reason for low confidence
  - [ ] [Item] — reason for low confidence

Never fabricate values for gaps. State what is unknown and suggest how to obtain the missing information (e.g., "inspect the live app," "request additional screenshots at different viewport widths").

所有提取内容必须以真实的缺口章节结尾：

KNOWN GAPS:
  Cannot determine from static screenshot:
  - [ ] Hover states for [components]
  - [ ] Focus ring styles
  - [ ] Animation/transition properties
  - [ ] Responsive breakpoint behavior
  - [ ] Touch target sizes (if mobile)
  - [ ] Scroll behavior
  - [ ] [Other gaps specific to this screenshot]

  Low confidence extractions:
  - [ ] [Item] — reason for low confidence
  - [ ] [Item] — reason for low confidence

切勿为缺口编造值。明确说明未知内容，并建议如何获取缺失信息（例如：“检查实时应用”“请求不同视口宽度的额外截图”）。

Implementation Hints (Optional)

实现提示（可选）

When the user intends to implement the extracted system, include a CSS custom properties mapping or Tailwind configuration snippet. See references/implementation-templates.md for starter templates.

当用户打算实现提取的系统时，可包含CSS自定义属性映射或Tailwind配置代码片段。可参考references/implementation-templates.md获取起始模板。

Common Mistakes

常见错误

Mistake	Fix
Guessing hex values instead of acknowledging approximation	Prefix all color values with context; use `~` for uncertain sizes
Extracting colors without assigning roles	Every color must have a named role (primary, secondary, border, etc.)
Listing components without measuring them	Every component needs dimensions, padding, and radius values
Ignoring the spacing system	Identify the base unit first; express all spacing as multiples
Skipping the gaps section	Always document what cannot be determined from a static image
Treating all text sizes as a flat list	Organize into a hierarchical scale with named levels
Extracting shadows without noting the depth strategy	Classify the overall approach before listing individual shadow values
Providing vague font identification	State confidence level; suggest closest known match

错误	修复方法
猜测十六进制颜色值而非承认近似	为所有颜色值添加上下文前缀；对不确定的尺寸使用 `~`
提取颜色但未分配角色	每个颜色必须有命名角色（主色、次要色、边框色等）
列出组件但未测量尺寸	每个组件需包含尺寸、内边距和圆角半径值
忽略间距系统	先识别基础单位；所有间距以倍数表示
跳过缺口章节	始终记录静态图像无法确定的内容
将所有字号视为扁平列表	按层级组织为带命名级别的比例
提取阴影但未记录深度策略	在列出单个阴影值之前对整体方法进行分类
字体识别模糊	记录置信度；建议最接近的已知匹配

Quality Checklist

质量检查清单

Before delivering any screenshot analysis:

Completeness:

All 8 phases addressed
Initial assessment establishes platform and context
Color palette organized by role with attributions
Typography scale uses named hierarchy levels
Spacing scale identifies base unit and multipliers
Every visible component cataloged with measurements
Layout structure includes grid, hierarchy, and alignment
Border and elevation system documented

Precision:

All colors include hex values
All sizes include pixel estimates (with
```
~
```
where approximate)
Font families include confidence level
Component specs include dimensions, padding, radius, and colors
Spacing values traceable to base unit

Honesty:

Gaps section present and populated
No fabricated hover/animation/responsive values
Low-confidence extractions flagged
Missing component states explicitly noted

交付任何截图分析之前：

完整性：

所有8个阶段均已处理
初始评估确定了平台和上下文
调色板按角色分类并带有来源标注
排版比例使用命名层级
间距比例识别了基础单位和倍数
所有可见组件均已分类并带有测量值
布局结构包含网格、层级和对齐方式
边框与层级系统已记录

精准度：

所有颜色包含十六进制值
所有尺寸包含像素估算值（不确定的标记
```
~
```
）
字体族包含置信度
组件规范包含尺寸、内边距、圆角半径和颜色
间距值可追溯到基础单位

真实性：

缺口章节存在且已填写
未编造悬停/动画/响应式值
低置信度提取已标记
缺失的组件状态已明确记录