AI网页设计工作室：结合前端美学与AI图像生成，创建完整可生产网页

识别图像需求：

• 主视觉/横幅图像
• 产品/作品集图像
• 插图或图标
• 背景图像
• 区域分隔线或装饰元素

生成图像： 为每个需要的图像运行图像生成脚本。图像会自动保存到项目的 images/ 目录以便更好地组织：

uv run ~/.claude/skills/web-design-studio/scripts/generate_image.py \
  --prompt "detailed image description matching the design aesthetic" \
  --filename "yyyy-mm-dd-hh-mm-ss-descriptive-name.png" \
  --resolution 1K|2K|4K

分辨率指南：

• 1K (默认) - 约 1024 像素，适用于小图像、图标、缩略图
• 2K - 约 2048 像素，适用于标准图像、产品图
• 4K - 约 4096 像素，适用于主视觉横幅、大型背景

文件名格式： {timestamp}-{descriptive-name}.png

• 时间戳：yyyy-mm-dd-hh-mm-ss (24 小时制)
• 名称：小写描述性文本，用连字符连接

图像组织：

• 图像自动保存到项目的 images/ 目录
• 脚本检测 git 仓库根目录，并将图像放置在项目级别
• 在代码中引用图像时，使用：images/filename.png

步骤 3：完整实现

生成所有需要的图像后，创建最终代码，包含：

1. 使用 images/filename.png 正确引用的所有生成图像
2. 优化的图像属性（替代文本、加载、尺寸）
3. 响应式图像处理
4. 符合美学愿景的完整样式

重要提示： 创建 HTML 文件后，您必须验证所有图像是否正确加载：

python ~/.claude/skills/web-design-studio/scripts/verify_images.py

此脚本检查：

• HTML 文件中的所有图像引用
• 引用的图像文件是否存在
• 常见路径问题（缺少 images/ 前缀等）

在所有图像验证成功之前，不要进行下一步。

步骤 4：设计文档（必需）

图像验证后，您必须为客户交付生成一份专业的设计规格文档。这是强制性的最后一步。

基本用法：

python ~/.claude/skills/web-design-studio/scripts/generate_design_doc.py \
  --project-name "Coffee Shop Landing Page" \
  --output "design-doc-coffee-shop.html"

从 HTML 自动提取（推荐）：

python ~/.claude/skills/web-design-studio/scripts/generate_design_doc.py \
  --project-name "Coffee Shop Landing Page" \
  --output "design-doc-coffee-shop.html" \
  --html-file "index.html"

--html-file 参数自动提取：

• 页面区块及其实际内容摘要
• 来自 CSS 变量的配色方案
• 所有图像及其文件名和分辨率
• CTA 按钮数量

这是推荐的方法，因为它通过分析实际的 HTML 代码来节省时间并确保准确性。

高级用法（手动参数）：

python ~/.claude/skills/web-design-studio/scripts/generate_design_doc.py \
  --project-name "Coffee Shop Landing Page" \
  --output "design-doc-coffee-shop.html" \
  --design-concept "温暖有机的咖啡文化体验，采用大地色系和质朴风格" \
  --target-audience "咖啡爱好者、年轻职场人士、追求品质生活的消费者" \
  --primary-color "#8B4513" \
  --secondary-color "#A0522D" \
  --accent-color "#D4AF37" \
  --typography "标题：Playfair Display，正文：Lato" \
  --page-sections "Hero区,产品展示,品牌故事,客户评价,联系信息,页脚" \
  --cta-count "8" \
  --tech-stack "HTML5,CSS3,JavaScript,响应式设计" \
  --features "图片懒加载,平滑滚动,表单验证,移动优化" \
  --author "设计团队名称" \
  --project-type "landing-page" \
  --version "1.0"

带图像列表：

python ~/.claude/skills/web-design-studio/scripts/generate_design_doc.py \
  --project-name "Coffee Shop" \
  --output "design-doc.html" \
  --image-list "2026-01-26-10-30-01-hero.png|4K|Banner区背景,2026-01-26-10-30-02-product.png|2K|产品展示" \
  --primary-color "#0a2540" \
  --secondary-color "#1e3a5f" \
  --accent-color "#ff6b2c"

文档内容（6 个主要部分）：

• 01 设计概述 - 核心理念、设计目标、目标受众
• 02 视觉设计策略 - 色彩系统、字体设计、图片策略
• 03 页面结构设计 - 完整页面布局和区块说明
• 04 用户体验设计 - 交互设计、响应式设计、性能优化
• 05 技术实现 - 技术栈、代码特点、浏览器兼容
• 06 交付清单 - 已交付内容、图片清单、建议后续工作

输出： 一份专业格式化的 HTML 文档，带有粘性导航、全面的部分和精美的样式 - 非常适合客户演示和设计交接。

关键参数：

• --html-file：（推荐）从 HTML 自动提取区块、颜色、图像、CTA
• --design-concept, --target-audience：项目描述
• --primary-color, --secondary-color, --accent-color, --bg-color：自定义配色方案
• --page-sections：逗号分隔的区块列表
• --image-list：格式：filename1|resolution1|purpose1,filename2|resolution2|purpose2
• --cta-count：CTA 按钮数量
• --author：设计团队/作者名称
• --project-type：landing-page, website, dashboard 等
• --version：文档版本号

完整工作流程示例

用户请求： "为一家咖啡店创建一个落地页"

流程：

1. 设计阶段： 选择温暖、有机的美学风格，采用大地色系、质朴的排版

2. 图像规划： 识别以下需求：

   • 具有咖啡氛围的主视觉横幅
   • 咖啡杯的产品图
   • 区块的背景纹理

3. 生成图像：

   # 主视觉横幅 (自动保存到 images/)
   uv run ~/.claude/skills/web-design-studio/scripts/generate_image.py \
     --prompt "warm rustic coffee shop interior, golden hour lighting" \
     --filename "2026-01-24-10-30-15-coffee-shop-hero.png" \
     --resolution 4K
   
   # 产品图 (自动保存到 images/)
   uv run ~/.claude/skills/web-design-studio/scripts/generate_image.py \
     --prompt "artisan coffee cup on wooden table, latte art, top view" \
     --filename "2026-01-24-10-32-45-coffee-cup-product.png" \
     --resolution 2K
   
   # 背景纹理 (自动保存到 images/)
   uv run ~/.claude/skills/web-design-studio/scripts/generate_image.py \
     --prompt "subtle coffee bean pattern texture, warm brown gradient" \
     --filename "2026-01-24-10-35-20-coffee-texture-bg.png" \
     --resolution 2K
   

4. 创建代码： 构建完整的 HTML/CSS，使用 images/filename.png 集成所有图像

5. 验证图像：（关键步骤）

   python ~/.claude/skills/web-design-studio/scripts/verify_images.py
   

这确保所有图像路径正确且文件存在。在继续之前修复任何问题。

1. 生成设计文档：（必需的最终步骤）

   python ~/.claude/skills/web-design-studio/scripts/generate_design_doc.py \
     --project-name "Coffee Shop Landing Page" \
     --output "design-doc-coffee-shop.html" \
     --html-file "index.html"
   

脚本将自动提取：

 * 带有内容摘要的页面区块
 * CSS 中的配色方案
 * 所有图像及其分辨率
 * CTA 按钮数量

可选：添加自定义参数以获得更多控制：

python ~/.claude/skills/web-design-studio/scripts/generate_design_doc.py \
  --project-name "Coffee Shop Landing Page" \
  --output "design-doc-coffee-shop.html" \
  --html-file "index.html" \
  --design-concept "温暖有机的咖啡文化体验，采用大地色系和质朴风格" \
  --target-audience "咖啡爱好者、年轻职场人士" \
  --author "设计团队"

API 密钥

脚本需要 Gemini API 密钥：

• 如果用户提供，则通过 --api-key 参数传递
• 否则使用 GEMINI_API_KEY 环境变量

最佳实践

1. 先设计，后图像：在生成图像之前规划完整的设计
2. 匹配美学：确保生成的图像符合所选的设计美学
3. 优化分辨率：为每个图像的用途使用适当的分辨率
4. 描述性提示：编写详细、特定于美学的提示以获得更好的结果
5. 组织文件名：使用清晰、描述性的文件名，与设计上下文匹配
6. 验证图像：创建 HTML 后始终运行验证脚本，及早发现路径问题
7. 生成文档：设计文档是强制性的 - 切勿跳过此最后一步

输出

此技能产生以下完整的交付物：

1. 完整的 HTML/CSS/JS 代码：可用于生产、响应式、功能齐全
2. 生成的图像：所有图像以正确的命名保存到 images/ 目录
3. 已验证的图像引用：所有图像路径经过验证且有效（通过 verify_images.py）
4. 设计文档：强制性的专业规格文档 (design-doc-{project}.html)
5. 清晰的项目结构：组织好的文件，随时可以部署

完成前的验证清单：

• 所有图像已生成并位于 images/ 目录
• HTML 文件已创建，图像引用为 images/filename.png
• 验证脚本通过：python verify_images.py
• 设计文档已生成：python generate_design_doc.py
• 所有交付物都存在且可访问

请记住：目标是创建完整的网页体验，其中每个视觉元素都经过深思熟虑的设计和生成 - 没有占位符图像，没有“此处放置图像”的部分。真实、完成的作品。

每周安装数

108

仓库

xiaodong-wu/web…n-studio

GitHub 星标数

12

首次出现

Jan 24, 2026

安全审计

Gen Agent Trust HubPassSocketPassSnykFail

安装于

opencode95

cursor81

claude-code78

gemini-cli75

codex75

github-copilot64