Back to Details

ui-analyzer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Analyzer

UI分析器

This skill provides a systematic approach to analyzing UI design screenshots and translating them into production-ready React components using TypeScript and Tailwind CSS.
本技能提供了一套系统化的方法，用于分析UI设计截图，并将其转换为基于TypeScript和Tailwind CSS的可用于生产环境的React组件。

Purpose

用途

Transform UI design screenshots into well-structured, accessible, and maintainable React components. The skill guides through analyzing layouts, extracting design tokens, identifying components, and generating clean code that matches the design while following best practices.
将UI设计截图转换为结构清晰、可访问且易于维护的React组件。该技能会引导你完成布局分析、设计令牌提取、组件识别，并生成符合设计要求且遵循最佳实践的简洁代码。

When to Use This Skill

适用场景

Use this skill when:
  • The user provides a UI design screenshot, mockup, or Figma export
  • The user requests "implement this design" or "build this UI"
  • The user asks to "analyze this screenshot"
  • The user wants to convert a design to code
  • The user needs help understanding a UI's structure
  • The user requests matching an existing design
在以下场景中使用本技能：
  • 用户提供UI设计截图、原型或Figma导出文件
  • 用户要求"实现这个设计"或"构建这个UI"
  • 用户请求"分析这个截图"
  • 用户希望将设计转换为代码
  • 用户需要帮助理解UI的结构
  • 用户要求匹配现有设计

Analysis Workflow

分析工作流

Follow these steps systematically when analyzing a UI screenshot:
分析UI截图时，请系统遵循以下步骤：

Step 1: Initial Observation and Screenshot Reading

步骤1：初步观察与截图读取

Read the provided screenshot first using the Read tool if a file path is provided, or if the user has shared an image in the conversation.
After viewing the screenshot:
  1. Describe what you see in the UI
  2. Identify the screen/page type (login, dashboard, form, etc.)
  3. Determine the target device (desktop, mobile, responsive)
  4. Note the overall aesthetic (modern, minimal, colorful, etc.)
  5. Confirm understanding with the user before proceeding
首先读取提供的截图，如果提供了文件路径，使用读取工具；如果用户在对话中分享了图片，直接查看。
查看截图后：
  1. 描述你在UI中看到的内容
  2. 识别屏幕/页面类型（登录页、仪表盘、表单等）
  3. 确定目标设备（桌面端、移动端、响应式）
  4. 记录整体风格（现代、极简、多彩等）
  5. 在继续之前，与用户确认你的理解是否正确

Step 2: Layout Analysis

步骤2：布局分析

Identify the high-level layout structure:
  1. Main layout type - Consult 
    references/layout-patterns.md
    to identify:
    • Single column
    • Sidebar layout
    • Header + content
    • Grid layout
    • Split screen
    • Dashboard
    • Master-detail
    • Other patterns
  2. Layout hierarchy - Break down into sections:
    • Header/navigation
    • Main content area
    • Sidebar (if present)
    • Footer (if present)
    • Nested structures
  3. Responsive considerations:
    • How should layout adapt to mobile?
    • Which elements stack or hide?
    • Breakpoint strategy
Reference 
references/layout-patterns.md
for Tailwind implementation patterns.
识别高层级的布局结构：
  1. 主要布局类型 - 参考
    references/layout-patterns.md
    来识别：
    • 单列布局
    • 侧边栏布局
    • 头部+内容布局
    • 网格布局
    • 分屏布局
    • 仪表盘布局
    • 主从布局
    • 其他模式
  2. 布局层级 - 拆分为多个部分：
    • 头部/导航栏
    • 主内容区域
    • 侧边栏（如果存在）
    • 页脚（如果存在）
    • 嵌套结构
  3. 响应式考量：
    • 布局应如何适配移动端？
    • 哪些元素会堆叠或隐藏？
    • 断点策略
参考
references/layout-patterns.md
获取Tailwind实现模式。

Step 3: Component Identification

步骤3：组件识别

Systematically identify all UI components using 
references/ui-analysis-checklist.md
:
Navigation Components:
  • Top nav, sidebar nav, breadcrumbs, tabs, etc.
Data Display Components:
  • Cards, tables, lists, stats, badges, avatars, icons, etc.
Input Components:
  • Text inputs, selects, checkboxes, radios, switches, date pickers, etc.
Action Components:
  • Buttons (primary, secondary, etc.), icon buttons, links, etc.
Feedback Components:
  • Alerts, toasts, progress bars, loading states, etc.
Overlay Components:
  • Modals, drawers, tooltips, popovers, dropdowns, etc.
List all identified components with:
  • Component type and purpose
  • Location in the layout
  • Approximate size and styling
  • Interactive states (if visible)
使用
references/ui-analysis-checklist.md
系统识别所有UI组件：
导航组件：
  • 顶部导航、侧边栏导航、面包屑、标签页等
数据展示组件：
  • 卡片、表格、列表、统计数据、徽章、头像、图标等
输入组件：
  • 文本输入框、选择器、复选框、单选框、开关、日期选择器等
操作组件：
  • 按钮（主要、次要等）、图标按钮、链接等
反馈组件：
  • 提示框、消息提示、进度条、加载状态等
覆盖层组件：
  • 模态框、抽屉、工具提示、弹出框、下拉菜单等
列出所有识别出的组件，包含：
  • 组件类型与用途
  • 在布局中的位置
  • 大致尺寸与样式
  • 交互状态（如果可见）

Step 4: Design Token Extraction

步骤4：设计令牌提取

Extract design system values using 
references/design-tokens.md
:
Color Palette:
  1. Identify all unique colors in the design
  2. Categorize by usage:
    • Primary brand color
    • Secondary/accent colors
    • Background colors (main, secondary)
    • Text colors (primary, secondary, muted)
    • Border colors
    • State colors (success, warning, error, info)
  3. Map each color to nearest Tailwind color or note custom color needed
  4. Create a color reference table
Typography:
  1. Identify font family (serif, sans-serif, monospace)
  2. List all text sizes observed
  3. Map to Tailwind typography scale (
    text-xs
    to 
    text-6xl
    )
  4. Note font weights used (normal, medium, semibold, bold)
  5. Identify heading hierarchy (H1-H6)
Spacing:
  1. Observe padding patterns (card padding, button padding, etc.)
  2. Observe margin/gap patterns (between sections, between items)
  3. Map to Tailwind spacing scale (p-4, m-6, gap-8, etc.)
  4. Note the spacing unit (usually 4px or 8px base)
Other Tokens:
  • Border radius (rounded-none to rounded-full)
  • Shadows (shadow-sm to shadow-2xl)
  • Border widths
  • Icon sizes
Reference 
references/design-tokens.md
for complete mapping tables.
使用
references/design-tokens.md
提取设计系统值：
调色板：
  1. 识别设计中所有独特的颜色
  2. 按用途分类：
    • 主品牌色
    • 次要/强调色
    • 背景色（主、次要）
    • 文本颜色（主、次要、弱化）
    • 边框颜色
    • 状态颜色（成功、警告、错误、信息）
  3. 将每种颜色映射到最接近的Tailwind颜色，或记录需要自定义的颜色
  4. 创建颜色参考表
排版：
  1. 识别字体族（衬线、无衬线、等宽）
  2. 列出所有观察到的文本尺寸
  3. 映射到Tailwind排版刻度（
    text-xs
    到 
    text-6xl
    ）
  4. 记录使用的字重（常规、中等、半粗体、粗体）
  5. 识别标题层级（H1-H6）
间距：
  1. 观察内边距模式（卡片内边距、按钮内边距等）
  2. 观察外边距/间隙模式（区块之间、元素之间）
  3. 映射到Tailwind间距刻度（p-4、m-6、gap-8等）
  4. 记录间距单位（通常为4px或8px基准）
其他令牌：
  • 边框圆角（rounded-none 到 rounded-full）
  • 阴影（shadow-sm 到 shadow-2xl）
  • 边框宽度
  • 图标尺寸
参考
references/design-tokens.md
获取完整映射表。

Step 5: Detailed Component Analysis

步骤5：详细组件分析

For each major component identified:
  1. Component boundaries - Where does it start/end?
  2. Props/data - What data does it receive?
  3. Internal structure - Sub-components and elements
  4. Styling details:
    • Background color
    • Text color and size
    • Padding and margins
    • Border and radius
    • Shadow
  5. Interactive states (if visible or inferable):
    • Hover
    • Active/pressed
    • Focused
    • Disabled
    • Loading
    • Error
  6. Accessibility needs:
    • ARIA labels
    • Semantic HTML
    • Keyboard navigation
针对每个识别出的主要组件：
  1. 组件边界 - 组件的起止位置在哪里？
  2. 属性/数据 - 它接收哪些数据？
  3. 内部结构 - 子组件与元素
  4. 样式细节：
    • 背景色
    • 文本颜色与尺寸
    • 内边距与外边距
    • 边框与圆角
    • 阴影
  5. 交互状态（如果可见或可推断）：
    • 悬停
    • 激活/按下
    • 聚焦
    • 禁用
    • 加载
    • 错误
  6. 无障碍需求：
    • ARIA标签
    • 语义化HTML
    • 键盘导航

Step 6: Implementation Strategy

步骤6：实现策略

Plan the implementation approach:
  1. Component hierarchy - Which components to build first?
  2. Reusability - Which patterns repeat? Extract to reusable components
  3. State management - Does any component need Zustand or just local state?
  4. Integration with react-component-generator - Can existing templates be used?
  5. File structure - Where should components live?
If the react-component-generator skill is available:
  • Reference its templates for common components (forms, cards, buttons, modals, etc.)
  • Use its best practices for component structure
  • Follow its naming conventions
规划实现方案：
  1. 组件层级 - 先构建哪些组件？
  2. 可复用性 - 哪些模式重复出现？提取为可复用组件
  3. 状态管理 - 组件是否需要Zustand还是仅需本地状态？
  4. 与react-component-generator集成 - 是否可以使用现有模板？
  5. 文件结构 - 组件应存放在哪里？
如果react-component-generator技能可用：
  • 参考其通用组件模板（表单、卡片、按钮、模态框等）
  • 遵循其组件结构的最佳实践
  • 遵循其命名规范

Step 7: Code Generation

步骤7：代码生成

Generate React components following these principles:
Structure:
  1. Start with TypeScript interfaces for props
  2. Use functional components with React.FC
  3. Include JSDoc comments
  4. Export both named and default exports
Styling:
  1. Use Tailwind CSS exclusively for styling
  2. Apply extracted design tokens
  3. Organize classes logically (layout → spacing → colors → effects → states)
  4. Use responsive classes where needed (sm:, md:, lg:, xl:)
Best Practices:
  1. Use semantic HTML elements
  2. Include ARIA attributes for accessibility
  3. Handle loading and error states
  4. Support keyboard navigation
  5. Use proper TypeScript types (no 
    any
    )
  6. Keep components focused and composable
Example Component Template:
tsx
import React from 'react';

interface ComponentNameProps {
  // Props based on analysis
  title: string;
  description?: string;
  onClick?: () => void;
  className?: string;
}

/**
 * ComponentName - Brief description based on UI purpose
 *
 * @param props - Component props
 * @returns JSX.Element
 */
export const ComponentName: React.FC<ComponentNameProps> = ({
  title,
  description,
  onClick,
  className = ''
}) => {
  return (
    <div className={`/* Tailwind classes from design */ ${className}`}>
      {/* Implementation based on screenshot */}
    </div>
  );
};

export default ComponentName;
遵循以下原则生成React组件：
结构：
  1. 从TypeScript属性接口开始
  2. 使用带React.FC的函数式组件
  3. 包含JSDoc注释
  4. 导出命名导出与默认导出
样式：
  1. 仅使用Tailwind CSS进行样式设置
  2. 应用提取的设计令牌
  3. 逻辑组织类名（布局 → 间距 → 颜色 → 效果 → 状态）
  4. 必要时使用响应式类（sm:、md:、lg:、xl:）
最佳实践：
  1. 使用语义化HTML元素
  2. 包含用于无障碍的ARIA属性
  3. 处理加载与错误状态
  4. 支持键盘导航
  5. 使用正确的TypeScript类型（避免使用
    any
    ）
  6. 保持组件聚焦且可组合
组件模板示例：
tsx
import React from 'react';

interface ComponentNameProps {
  // Props based on analysis
  title: string;
  description?: string;
  onClick?: () => void;
  className?: string;
}

/**
 * ComponentName - Brief description based on UI purpose
 *
 * @param props - Component props
 * @returns JSX.Element
 */
export const ComponentName: React.FC<ComponentNameProps> = ({
  title,
  description,
  onClick,
  className = ''
}) => {
  return (
    <div className={`/* Tailwind classes from design */ ${className}`}>
      {/* Implementation based on screenshot */}
    </div>
  );
};

export default ComponentName;

Step 8: Verification and Refinement

步骤8：验证与优化

After generating code:
  1. Review against screenshot - Does it match the design?
  2. Check responsiveness - Will it work on different screen sizes?
  3. Verify accessibility - Are ARIA labels and semantic HTML present?
  4. Validate design tokens - Are colors, spacing, typography correct?
  5. Consider edge cases - Long text, empty states, loading states
  6. Note assumptions - Clearly state what was assumed vs confirmed
生成代码后：
  1. 与截图对比 - 是否匹配设计？
  2. 检查响应式 - 是否能在不同屏幕尺寸下正常工作？
  3. 验证无障碍性 - 是否包含ARIA标签与语义化HTML？
  4. 验证设计令牌 - 颜色、间距、排版是否正确？
  5. 考虑边缘情况 - 长文本、空状态、加载状态
  6. 记录假设 - 明确标记哪些是假设，哪些是已确认的细节

Step 9: Deliverables

步骤9：交付物

Provide the user with:
  1. Analysis Summary:
    • Layout description
    • Component breakdown
    • Design tokens extracted
  2. Generated Code:
    • Complete React component(s)
    • TypeScript interfaces
    • Tailwind classes applied
  3. Implementation Notes:
    • Installation requirements (if any packages needed)
    • Usage examples
    • Customization suggestions
    • Responsive behavior notes
  4. Next Steps:
    • Suggest improvements or variations
    • Note areas that might need refinement
    • Offer to generate additional related components
向用户提供以下内容：
  1. 分析摘要：
    • 布局描述
    • 组件拆分
    • 提取的设计令牌
  2. 生成的代码：
    • 完整的React组件
    • TypeScript接口
    • 已应用的Tailwind类
  3. 实现说明：
    • 安装要求（如果需要任何包）
    • 使用示例
    • 自定义建议
    • 响应式行为说明
  4. 后续步骤：
    • 建议改进或变体
    • 记录可能需要优化的区域
    • 提供生成其他相关组件的服务

Common Scenarios

常见场景

Scenario 1: Simple Form Screenshot

场景1：简单表单截图

User: "Implement this login form design [screenshot]"
Approach:
  1. Read screenshot
  2. Identify: Centered card layout with form inputs and button
  3. Extract: Colors, input styling, button styling, spacing
  4. Reference 
    layout-patterns.md
    → "Centered Modal/Card" pattern
  5. Reference 
    react-component-generator
    → FormComponent template
  6. Generate: LoginForm.tsx with proper validation structure
  7. Apply Tailwind classes matching the design
用户：“实现这个登录表单设计 [截图]”
方案：
  1. 读取截图
  2. 识别：带表单输入框和按钮的居中卡片布局
  3. 提取：颜色、输入框样式、按钮样式、间距
  4. 参考
    layout-patterns.md
    → “居中模态框/卡片”模式
  5. 参考
    react-component-generator
    → FormComponent模板
  6. 生成：带有正确验证结构的LoginForm.tsx
  7. 应用与设计匹配的Tailwind类

Scenario 2: Dashboard Screenshot

场景2：仪表盘截图

User: "Build this dashboard UI [screenshot]"
Approach:
  1. Read screenshot
  2. Identify: Header + sidebar layout with grid of stat cards
  3. Break down into components:
    • Header component
    • Sidebar navigation
    • StatCard component (repeated)
    • Main dashboard layout
  4. Extract design tokens for consistency
  5. Reference 
    layout-patterns.md
    → "Dashboard Layout" pattern
  6. Generate components starting with reusable StatCard
  7. Compose into main Dashboard component
用户：“构建这个仪表盘UI [截图]”
方案：
  1. 读取截图
  2. 识别：头部+侧边栏布局，搭配统计卡片网格
  3. 拆分为组件：
    • 头部组件
    • 侧边栏导航
    • StatCard组件（重复使用）
    • 主仪表盘布局
  4. 提取设计令牌以保持一致性
  5. 参考
    layout-patterns.md
    → “仪表盘布局”模式
  6. 从可复用的StatCard开始生成组件
  7. 组合成主Dashboard组件

Scenario 3: Complex Page with Multiple Sections

场景3：包含多个区块的复杂页面

User: "Implement this landing page [screenshot]"
Approach:
  1. Read screenshot
  2. Identify sections: Hero, features grid, testimonials, CTA
  3. Analyze each section separately using checklist
  4. Extract shared design tokens
  5. Generate section components one by one
  6. Show how sections compose into the full page
  7. Provide responsive behavior notes
用户：“实现这个落地页 [截图]”
方案：
  1. 读取截图
  2. 识别区块：Hero区、功能网格、客户评价、CTA区
  3. 使用检查表分别分析每个区块
  4. 提取共享的设计令牌
  5. 逐个生成区块组件
  6. 展示如何将区块组合成完整页面
  7. 提供响应式行为说明

Scenario 4: Component Library Screenshot

场景4：组件库截图

User: "Create components from this design system screenshot [screenshot]"
Approach:
  1. Read screenshot
  2. Identify: Multiple variations of buttons, inputs, cards shown
  3. Extract design tokens for the system
  4. Generate each component variant
  5. Document the prop variations
  6. Create a usage guide
  7. Suggest how to organize in the project
用户：“从这个设计系统截图创建组件 [截图]”
方案：
  1. 读取截图
  2. 识别：展示的多种按钮、输入框、卡片变体
  3. 提取系统的设计令牌
  4. 生成每个组件的变体
  5. 记录属性变体
  6. 创建使用指南
  7. 建议如何在项目中组织这些组件

Reference Files Usage

参考文件使用说明

references/ui-analysis-checklist.md

references/ui-analysis-checklist.md

  • When to use: During Step 3 (Component Identification) and as a comprehensive analysis guide
  • Purpose: Ensures no components or details are missed
  • How: Work through checklist sections systematically
  • 使用时机：步骤3（组件识别）期间，以及作为全面分析指南
  • 用途：确保不会遗漏任何组件或细节
  • 使用方法：系统地完成检查表的各个部分

references/layout-patterns.md

references/layout-patterns.md

  • When to use: During Step 2 (Layout Analysis) and Step 7 (Code Generation)
  • Purpose: Quickly identify common patterns and get implementation code
  • How: Match observed layout to pattern, adapt provided code
  • 使用时机：步骤2（布局分析）和步骤7（代码生成）期间
  • 用途：快速识别常见模式并获取实现代码
  • 使用方法：将观察到的布局与模式匹配，调整提供的代码

references/design-tokens.md

references/design-tokens.md

  • When to use: During Step 4 (Design Token Extraction) and Step 7 (Code Generation)
  • Purpose: Map visual elements to Tailwind classes accurately
  • How: Use color tables, spacing scale, and component size guides
  • 使用时机：步骤4（设计令牌提取）和步骤7（代码生成）期间
  • 用途：准确地将视觉元素映射到Tailwind类
  • 使用方法：使用颜色表、间距刻度和组件尺寸指南

Tips for Accurate Analysis

准确分析的技巧

  1. Be systematic - Follow the workflow steps in order, don't skip ahead
  2. Take measurements - Estimate sizes and spacing carefully
  3. Look for patterns - Repeated elements indicate design system consistency
  4. Note uncertainties - Clearly mark assumptions vs confirmed details
  5. Think responsive - Always consider mobile behavior
  6. Prioritize accessibility - Include ARIA labels and semantic HTML from the start
  7. Stay DRY - Extract reusable components when patterns repeat
  8. Consult references - Use the reference files liberally for accuracy
  9. Verify with user - Confirm understanding before extensive code generation
  10. Iterate - Expect refinement based on user feedback
  1. 系统化 - 按顺序遵循工作流步骤，不要跳过
  2. 测量 - 仔细估算尺寸和间距
  3. 寻找模式 - 重复出现的元素表明设计系统的一致性
  4. 记录不确定性 - 明确标记假设与已确认的细节
  5. 考虑响应式 - 始终考虑移动端行为
  6. 优先无障碍性 - 从一开始就包含ARIA标签和语义化HTML
  7. 保持DRY原则 - 当模式重复时提取可复用组件
  8. 参考文档 - 大量使用参考文件以确保准确性
  9. 与用户验证 - 在进行大量代码生成之前确认理解正确
  10. 迭代 - 根据用户反馈进行优化

Integration with Other Skills

与其他技能的集成

With react-component-generator skill

与react-component-generator技能集成

When both skills are available:
  1. Use ui-analyzer to understand the design and extract requirements
  2. Reference react-component-generator templates for similar components
  3. Apply ui-analyzer's extracted design tokens to the templates
  4. Follow react-component-generator's naming and structure conventions
This creates a powerful workflow: analyze → identify template → customize → implement.
当两个技能都可用时：
  1. 使用ui-analyzer理解设计并提取需求
  2. 参考react-component-generator的类似组件模板
  3. 将ui-analyzer提取的设计令牌应用到模板中
  4. 遵循react-component-generator的命名和结构规范
这形成了一套强大的工作流：分析 → 识别模板 → 自定义 → 实现。

Example Full Workflow

完整工作流示例

User provides login page screenshot
  1. ✅ Read screenshot and describe the UI
  2. ✅ Identify: Centered card layout, split-screen with image
  3. ✅ Extract design tokens:
    • Primary blue: #3B82F6 → 
      bg-blue-500
    • Text: #1F2937 → 
      text-gray-800
    • Background: #F9FAFB → 
      bg-gray-50
    • Card padding: ~32px → 
      p-8
    • Input height: ~40px → 
      h-10
    • Button: blue background, white text, rounded-md
  4. ✅ Identify components:
    • Logo/brand element
    • Heading and subheading
    • Email input (with label)
    • Password input (with label, show/hide icon)
    • "Remember me" checkbox
    • "Forgot password?" link
    • Submit button
    • Sign up link at bottom
  5. ✅ Reference layout-patterns.md → Split Screen + Centered Card patterns
  6. ✅ Generate LoginForm.tsx:
    • TypeScript interfaces for props
    • Form validation structure
    • Tailwind classes matching design
    • Accessibility attributes
    • Responsive behavior (stacked on mobile)
  7. ✅ Provide usage example and notes
  8. ✅ Offer to generate the accompanying image section or adjust styling
用户提供登录页截图
  1. ✅ 读取截图并描述UI
  2. ✅ 识别：居中卡片布局，带图片的分屏
  3. ✅ 提取设计令牌：
    • 主蓝色：#3B82F6 → 
      bg-blue-500
    • 文本：#1F2937 → 
      text-gray-800
    • 背景：#F9FAFB → 
      bg-gray-50
    • 卡片内边距：约32px → 
      p-8
    • 输入框高度：约40px → 
      h-10
    • 按钮：蓝色背景、白色文本、圆角md
  4. ✅ 识别组件：
    • Logo/品牌元素
    • 标题与副标题
    • 邮箱输入框（带标签）
    • 密码输入框（带标签、显示/隐藏图标）
    • “记住我”复选框
    • “忘记密码？”链接
    • 提交按钮
    • 底部的注册链接
  5. ✅ 参考layout-patterns.md → 分屏+居中卡片模式
  6. ✅ 生成LoginForm.tsx：
    • TypeScript属性接口
    • 表单验证结构
    • 与设计匹配的Tailwind类
    • 无障碍属性
    • 响应式行为（移动端堆叠）
  7. ✅ 提供使用示例与说明
  8. ✅ 提供生成配套图片区域或调整样式的服务

Notes

注意事项

  • Always read the screenshot first before any analysis
  • Prioritize user confirmation of understanding before extensive code generation
  • When in doubt about colors or spacing, choose the closest Tailwind default
  • Document all assumptions clearly
  • Provide complete, runnable code, not pseudocode
  • Consider suggesting improvements while matching the design
  • Be prepared to iterate based on user feedback
  • 进行任何分析之前，务必先读取截图
  • 在进行大量代码生成之前，优先与用户确认理解正确
  • 如果对颜色或间距有疑问，选择最接近的Tailwind默认值
  • 清晰记录所有假设
  • 提供完整、可运行的代码，而非伪代码
  • 在匹配设计的同时，可建议改进方案
  • 准备好根据用户反馈进行迭代