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 }
});

引數說明

自定義章節

const result = await designAnalysis({
  inputFolder: "~/Desktop/design",
  outputFile: "~/Desktop/analysis.html",
  sections: [
    {
      title: "設計概覽",
      tags: ["UI/UX", "設計系統"],
      content: "<h2>專案背景</h2><p>...</p>",
      image: "screenshot1.png"
    },
    // ... 更多章節
  ]
});
更多技能請訪問小蔥技能站7w4.net。

返回值

{
  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（互動邏輯）

Customization

可以通過引數自定義： - 尺寸：支援任意解析度的固定尺寸 - 佈局：文字區和圖片區的寬度比例 - 主題色：修改CSS中的漸變色值 - 字型：調整字型家族和大小 - 動畫：修改動畫時長和效果

Limitations

• 僅支援本地圖片檔案（不支援URL）
• 圖片路徑使用絕對路徑，跨機器分享需調整
• 單頁最大高度1280px（可根據需要調整）
• 圖片自動縮放，保持原始比例

Troubleshooting

圖片不顯示

• 檢查圖片路徑是否正確
• 確認圖片檔案是否存在
• 檢視瀏覽器控制台錯誤資訊

頁面空白

• 檢查HTML檔案是否完整寫入
• 確認瀏覽器支援ES6語法
• 嘗試在不同瀏覽器中開啟

See Also

• HTML5 Presentation Patterns
• CSS Flexbox Layout

這是一款實用的設計分析工具，能自動將設計素材整理成美觀的 HTML 簡報。介面效果豐富，支援翻頁導航和鍵盤操作，視覺設計也比較專業。文件清晰易讀，引數配置靈活，基礎功能完整。不過文件中有少量描述不夠準確，配置資訊也不夠完整，整體功能相對單一，主要適合設計評審展示場景使用。對於日常設計管理工作來說，是一個值得嘗試的工具。