Mmcp.market

web-design-analyzer skill

by anbeime·anbeime/skill·7.3k stars

网页与数字界面设计师和网页开发工程师在需要逆向分析网页截图时，使用本技能一键提取配色、排版及组件特征，自动生成结构化 Design System 数据与 AI Coding Prompt，让设计还原与前端开发更高效。

A100/100content scan

Is the web-design-analyzer skill safe?

Clean: nothing in its files matched our rules. We read 5 files in the folder on 2026-09-28.

No findings.

Install the web-design-analyzer skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/anbeime/skill.git /tmp/skill
mkdir -p ~/.claude/skills
cp -r /tmp/skill/skills/web-design-analyzer/web-design-analyzer ~/.claude/skills/web-design-analyzer
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Web Design Analyzer

任务目标

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

前置准备

  • 依赖说明：scripts 脚本所需的依赖包及版本
Pillow>=10.0.0
  • 非标准文件/文件夹准备：无

操作步骤

  • 标准流程：
  1. 接收图片
  • 用户上传网页截图（支持 PNG、JPG、JPEG 等常见格式）
  • 智能体确认图片文件路径
  1. 调用分析脚本
  • 智能体调用 scripts/analyze_design.py --image <图片文件路径> 执行分析
  • 脚本将自动调用 OpenAI GPT-4 Vision API 处理图片
  • 脚本返回结构化的分析结果
  1. 展示结果
  • 智能体展示 JSON 格式的设计系统数据
  • 智能体展示生成的 Coding Prompt
  • 智能体提供进一步操作建议（如：使用生成的 Prompt 创建 Landing Page）
  • 可选分支：
  • 当用户希望使用 Gemini API：提示当前版本仅支持 OpenAI，未来可能扩展
  • 当 API 调用失败：提供错误信息和可能的解决方案（如检查 API Key、图片格式等）

资源索引

  • 必要脚本：
  • 见 scripts/analyze_design.py（用途与参数：接收图片路径，调用 OpenAI Vision API，返回设计系统分析结果）
  • 见 scripts/converttoroadshow_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 指导代码生成

More skills from anbeime/skill

  • APDF Processing Pro综合办公文员与软件开发工程师当需要批量处理PDF表单、提取表格或进行OCR识别时，使用内置脚本一键完成自动化提取与数据校验，彻底告别繁琐的手动录入，让复杂文档工作流高效、稳健落地。
  • Aagent-team产品经理与项目管理专家在应对复杂项目时，使用此技能可动态组建包含“执行、指挥、评审”的专属AI团队。实时查看多智能体辩论与决策全过程，共享统一上下文记忆，一键完成从会议决策到系统构建的全流程高效协同！
  • Aagentkit-multimedia-shopping电商运营与内容创作者在需要制作带货短视频时，用此技能一键生成9:16竖屏数字人成片。自动编排AI绘画、语音合成与视频生成，快速产出“小省导购员”专属形象与专业配音，让多模态视频制作省时省力。
  • Aantinet-doc-parse软件开发工程师与数据科学家在构建RAG系统时，当需处理PDF/Word/Excel等多格式复杂文档，用此技能可自动触发三级解析降级，一键输出高置信度结构化Markdown与元数据，免去繁琐清洗，直接夯实企业知识库数据底座！
  • Aantinet-four-color-cards财务和投资分析师、律师助理与法律助手在撰写金融研报或分析法律文档时，必用此技能！基于解析文档一键生成事实蓝卡、解释绿卡、风险黄卡与行动红卡。自动完成深度剖析与风险排查，产出100%可溯源的结构化四色报告，让复杂分析高效且严谨。
  • Aantinet-provenance软件开发工程师与信息安全分析师在构建多智能体系统时，当需全链路可观测与安全审计，请用此技能。它自动收集操作日志，生成可追溯证据链与向量索引，开箱即用实现系统审计与精准回放，让Agent运行安全透明。
  • Aantinet-security-scan信息安全分析师与软件开发工程师在搭建文档处理流水线时，当需要拦截违规文件或外部URL，请挂载此技能作为强制前置安检，自动输出 pass/reject 判定与详细合规扫描报告，一键守住零信任安全底线。
  • AarchifyCreate polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
  • Aarticle-illustrator内容创作者与自媒体创作者在撰写长文缺乏视觉辅助时，当需要给文章配图或生成插图请使用。自动分析文章结构，精准识别位置并生成插画插入段落，将抽象概念具象化。一键完成智能图文排版，省去手动找图时间，大幅提升阅读体验！
  • Aarticle-illustrator内容创作者和自媒体创作者在撰写长文时，当需要“给文章配图”或“添加插图”时使用。自动分析文章结构，精准识别需要视觉辅助的位置，生成并插入契合语境的插画，将抽象概念具象化，一键完成高质量图文排版，大幅提升阅读体验。
  • Aatutun-xhs-cover阿囤囤风格小红书封面提示词生成。用于AI工具、效率方法、产品测评、教程部署、个人经验、播客推荐、职场认知类内容的爆款竖版封面设计。特点是真人出镜、超大柔和浅黄（#FDFFA7）/白色中文标题、粗黑描边、人物抠图描边、绿色勾选清单、emoji贴纸、箭头标注、高对比高密度构图。关键词：小红书封面、爆款封面、阿囤囤风格、AI教程封面、产品测评封面、封面提示词。
  • Abaoyu-format-markdown技术写作员与内容创作者在处理纯文本或 Markdown 稿件时，若需优化文章结构、添加 frontmatter 或自动修正中英文排版间距，使用此技能可一键生成专业美观的 {filename}-formatted.md 文件，让文档排版更完美。

All agent skills → · MCP servers