design-analysis_内容创作 skill-PHP中文网

design-analysis

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

自动分析设计素材文件夹中的图片，生成多章节结构化HTML演示文档，支持自定义布局和页面尺寸。

Design Analysis Skill

功能概述

Design Analysis Skill是一项面向实际任务的技能，主要用于自动化设计分析工具，用于分析设计素材（截图、设计稿）并生成结构化的HTML演示文档；When to Use；

核心要点

需要对设计素材（截图、设计稿）进行结构化分析时；
需要生成图文并茂的HTML演示文档时；
需要按照章节分页展示设计分析内容时；

使用与执行

希望固化「设计分析 + HTML生成」的工作流程时；How to Use；inputFolder。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。

结果检查与注意事项

实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。

Design Analysis Skill

自动化设计分析工具，用于分析设计素材（截图、设计稿）并生成结构化的HTML演示文档。

When to Use

需要对设计素材（截图、设计稿）进行结构化分析时
需要生成图文并茂的HTML演示文档时
需要按照章节分页展示设计分析内容时
希望固化「设计分析 + HTML生成」的工作流程时

How to Use

基本用法

// 分析文件夹中的设计素材并生成HTML
const result = await designAnalysis({
  inputFolder: "~/Desktop/01.DesignAnalysis",
  outputFile: "~/Desktop/design_analysis.html",
  title: "设计分析报告",
  dimensions: { width: 1920, height: 1280 },
  layout: { textWidth: 30, imageWidth: 70 }
});

参数说明

参数	类型	必填	说明
`inputFolder`	string	✅	包含设计素材的文件夹路径
`outputFile`	string	✅	输出的HTML文件路径
`title`	string	❌	演示文档标题（默认：设计分析演示）
`dimensions`	object	❌	页面尺寸 {width, height}（默认：1920×1280）
`layout`	object	❌	布局比例 {textWidth, imageWidth}（默认：30/70）
`sections`	array	❌	自定义章节配置（不传则自动生成）

自定义章节

const result = await designAnalysis({
  inputFolder: "~/Desktop/design",
  outputFile: "~/Desktop/analysis.html",
  sections: [
    {
      title: "设计概览",
      tags: ["UI/UX", "设计系统"],
      content: "项目背景
...",
      image: "screenshot1.png"
    },
    // ... 更多章节
  ]
});

返回值

{
  success: boolean,
  outputPath: string,
  totalPages: number,
  analysis: {
    fileCount: number,
    imageFiles: string[],
    sections: string[]
  }
}

Examples

示例1：基础使用

const result = await designAnalysis({
  inputFolder: "~/Desktop/01.DesignAnalysis",
  outputFile: "~/Desktop/DESIGN_ANALYSIS_DEMO.html"
});

示例2：自定义尺寸和布局

const result = await designAnalysis({
  inputFolder: "~/Desktop/design_materials",
  outputFile: "~/Desktop/presentation.html",
  title: "产品设计方案",
  dimensions: { width: 1920, height: 1080 },
  layout: { textWidth: 25, imageWidth: 75 }
});

Features

✅ 自动扫描文件夹中的图片文件（支持 PNG、JPG、JPEG、GIF）
✅ 智能分析图片内容（基于文件名和时间戳）
✅ 生成多章节HTML演示文档
✅ 30/70 分栏布局（文字/图片）
✅ 侧边导航点和底部控制栏
✅ 键盘方向键支持
✅ 平滑翻页动画
✅ 响应式设计（移动端适配）
✅ 可自定义页面尺寸和布局比例
✅ 支持自定义章节内容

Output Structure

生成的HTML包含：

├── Navigation Dock（右侧导航点）
├── Page Controls（底部翻页控制）
├── Pages Container（页面容器）
│   ├── Page 1（章节1）
│   │   ├── Text Section (30% - 左侧)
│   │   └── Image Section (70% - 右侧)
│   ├── Page 2（章节2）
│   └── ...
└── JavaScript（交互逻辑）