Web Design Analyzer Agent Skill

by anbeime

分析网页截图，提取设计系统（Design System）并生成结构化数据和可用的 AI Coding Prompt。适用于 UI/UX 设计师和前端工程师需要从现有网页设计中提取设计规范、配色方案、排版系统和组件风格的场景。

8k tokens

context cost

the whole folder, loaded on every use

files

ships runnable scripts

copies elsewhere

how many repositories repackaged it

4658

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/anbeime/skill --skill web-design-analyzer

What comes with it

28 439 bytes besides the instruction

references/api-spec.md

references/roadshow-export-guide.md

scripts/analyze_design.py

scripts/convert_to_roadshow_style.py

The instruction itself

7 sections, as written by the author

Web Design Analyzer

任务目标

本 Skill 用于：从网页截图中自动提取设计系统（Design System），包括色彩、排版、组件风格等核心要素
能力包含：
自动识别网页视觉风格（Vibe & Style）
提取精确的色彩系统（Hex Code + Tailwind 类名）
分析排版系统（字体类型、字重、行高）
识别组件特征（圆角、阴影、边框）
生成结构化 JSON 数据和可直接使用的 Coding Prompt
导出为路演视频品牌风格配置（与 ppt-roadshow-generator 协同）
触发条件：用户上传网页截图并要求分析其设计，或需要将网页设计风格应用于路演视频

前置准备

依赖说明：scripts 脚本所需的依赖包及版本

  Pillow>=10.0.0

非标准文件/文件夹准备：无

操作步骤

标准流程：
接收图片
用户上传网页截图（支持 PNG、JPG、JPEG 等常见格式）
智能体确认图片文件路径

调用分析脚本
智能体调用 scripts/analyze_design.py --image <图片文件路径> 执行分析
脚本将自动调用 OpenAI GPT-4 Vision API 处理图片
脚本返回结构化的分析结果

展示结果
智能体展示 JSON 格式的设计系统数据
智能体展示生成的 Coding Prompt
智能体提供进一步操作建议（如：使用生成的 Prompt 创建 Landing Page）

可选分支：
当用户希望使用 Gemini API：提示当前版本仅支持 OpenAI，未来可能扩展
当 API 调用失败：提供错误信息和可能的解决方案（如检查 API Key、图片格式等）

资源索引

必要脚本：
见 scripts/analyze_design.py（用途与参数：接收图片路径，调用 OpenAI Vision API，返回设计系统分析结果）
见 scripts/convert_to_roadshow_style.py（用途与参数：将设计系统转换为路演视频品牌风格，输入 --input 指定 JSON 路径，--output 指定输出路径）
领域参考：
见 references/api-spec.md（何时读取：需要了解 API 调用细节或调试时）
见 references/roadshow-export-guide.md（何时读取：需要将设计系统导出为路演视频风格时）
输出资产：无

注意事项

仅在需要时读取参考，保持上下文简洁。
确保用户上传的图片清晰度足够，以便准确提取设计细节。
脚本会自动处理图片编码和 API 调用，无需手动干预。
充分利用智能体的语言理解和展示能力，将 API 返回的结构化数据以友好的方式呈现给用户。

使用示例

示例 1：分析网页截图

功能说明：上传一张网页截图，提取完整的设计系统
执行方式：混合（用户上传 → 脚本分析 → 智能体展示）
关键参数：图片文件路径
简单示例：

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

示例 2：生成 Coding Prompt 后创建组件

功能说明：先分析设计，然后使用生成的 Prompt 创建类似的 Landing Page
执行方式：混合（脚本分析 → 智能体生成代码）
关键要点：确保生成的 Coding Prompt 准确反映设计风格
简单示例：

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

示例 3：导出为路演视频风格

功能说明：将网页设计转换为路演视频可用的品牌风格配置
执行方式：混合（脚本分析 → 转换脚本 → 导出配置）
关键参数：设计系统 JSON 路径
简单示例：

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

1. 调用脚本分析图片

2. 展示结果

3. 使用生成的 Coding Prompt 指导代码生成

Other skills for the same job

different authors, same section of the catalogue

Theme Factory

by anthropics

vendor ×16

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

11k tokens scripts

Web Artifacts Builder

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

3k tokens

How to use it

Copy the folder

Take anbeime/web-design-analyzer from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.