web-design-analyzer

Web Design Analyzer

Task Objectives

• This Skill is used for: automatically extracting a Design System from webpage screenshots, including core elements such as color, typography, and component styles
• Capabilities include:
  • Automatically identify the webpage's visual style (Vibe & Style)
  • Extract a precise color system (Hex Code + Tailwind class names)
  • Analyze the typography system (font type, font weight, line height)
  • Identify component features (border radius, shadows, borders)
  • Generate structured JSON data and ready-to-use Coding Prompts
  • Export as a roadshow video brand style configuration (in coordination with ppt-roadshow-generator)
• Trigger conditions: the user uploads a webpage screenshot and requests analysis of its design, or needs to apply the webpage design style to a roadshow video

Prerequisites

• Dependency description: the dependency packages and versions required by the scripts

  Pillow>=10.0.0
  

• Non-standard file/folder preparation: none

Operation Steps

• Standard process:

  1. Receive image

     • The user uploads a webpage screenshot (supports common formats such as PNG, JPG, JPEG)
     • The agent confirms the image file path

  2. Call the analysis script

     • The agent calls scripts/analyze_design.py --image <图片文件路径> to execute the analysis
     • The script will automatically call the OpenAI GPT-4 Vision API to process the image
     • The script returns the structured analysis result

  3. Display results

     • The agent displays the Design System data in JSON format
     • The agent displays the generated Coding Prompt
     • The agent provides suggestions for further operations (e.g., use the generated Prompt to create a Landing Page)

• Optional branches:

  • When the user wants to use the Gemini API: indicate that the current version only supports OpenAI, and may be extended in the future
  • When the API call fails: provide the error message and possible solutions (e.g., check the API Key, image format, etc.)

Resource Index

• Required scripts:
  • See scripts/analyze_design.py(purpose and parameters: receive the image path, call the OpenAI Vision API, return the Design System analysis result)
  • See scripts/convert_to_roadshow_style.py(purpose and parameters: convert the Design System into a roadshow video brand style, input --input to specify the JSON path,--output to specify the output path)
• Domain references:
  • See references/api-spec.md(when to read: when you need to understand API call details or debug)
  • See references/roadshow-export-guide.md(when to read: when you need to export the Design System as a roadshow video style)
• Output assets: none

Notes

• Only read references when needed to keep the context concise.
• Ensure the image uploaded by the user is clear enough to accurately extract design details.
• The script will automatically handle image encoding and API calls, with no manual intervention required.
• Fully leverage the agent's language understanding and presentation capabilities to present the structured data returned by the API to users in a friendly way.

Usage Examples

Example 1: Analyze a webpage screenshot

• Function description: Upload a webpage screenshot and extract the complete design system
• Execution method: Hybrid (user upload → script analysis → agent presentation)
• Key parameters: image file path
• Simple example：

  # 用户：请分析这张网页截图
  # 智能体调用脚本
  python scripts/analyze_design.py --image ./uploads/landing-page.png
  

Example 2: Generate a Coding Prompt and then create a component

• Function description: First analyze the design, then use the generated Prompt to create a similar Landing Page
• Execution method: Hybrid (script analysis → agent code generation)
• Key points: Ensure that the generated Coding Prompt accurately reflects the design style
• Simple example：

  # 用户：分析这个网页，然后用提取的设计规范创建一个 Hero Section
  # 智能体：
  # 1. 调用脚本分析图片
  # 2. 展示结果
  # 3. 使用生成的 Coding Prompt 指导代码生成
  

Example 3: Export as a roadshow video style

• Function description: Convert a webpage design into a brand style configuration usable for roadshow videos
• Execution method: Hybrid (script analysis → conversion script → export configuration)
• Key parameters: design system JSON path
• Simple example：

  # 用户：分析这个网页，然后导出为路演视频风格
  # 智能体：
  # 1. 调用 analyze_design.py 分析图片，生成 design_system.json
  # 2. 调用 convert_to_roadshow_style.py 转换，生成 brand_style.json
  # 3. 提示用户可以将 brand_style.json 用于路演视频生成
  

  1. Call the script to analyze the image 2. Display the results 3. Use the generated Coding Prompt to guide code generation