web-design-studio

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This skill combines frontend design expertise with AI image generation to create complete, production-ready web pages with all visual elements included.

该技能结合了前端设计专业知识与AI图片生成能力，可创建包含所有视觉元素的完整、可投入生产的网页。

When to Use This Skill

何时使用此技能

Use this skill when the user asks for:

Complete websites or landing pages
Web dashboards or applications
Product pages or portfolios
Marketing pages with banners/hero sections
Blog or content layouts with featured images
Any web interface that needs visual assets

当用户提出以下需求时，可使用此技能：

完整网站或着陆页
Web仪表板或应用程序
产品页面或作品集
包含横幅/英雄区的营销页面
带特色图片的博客或内容布局
任何需要视觉资产的Web界面

How This Skill Works

技能工作原理

This skill performs a two-step process:

该技能执行两步流程：

Step 1: Frontend Design

步骤1：前端设计

Follow the frontend-design aesthetic principles to create a distinctive, production-grade interface:

Design Thinking:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick a bold aesthetic direction (minimalist, maximalist, retro-futuristic, organic, luxury, playful, brutalist, etc.)
Constraints: Technical requirements (framework, performance, accessibility)
Differentiation: What makes this UNFORGETTABLE?

Frontend Aesthetics:

Typography: Choose distinctive, beautiful fonts (avoid Inter, Roboto, Arial, system fonts)
Color & Theme: Commit to a cohesive aesthetic with CSS variables
Motion: Use animations for effects and micro-interactions
Spatial Composition: Unexpected layouts, asymmetry, overlap, diagonal flow
Backgrounds & Visual Details: Gradient meshes, noise textures, geometric patterns, dramatic shadows

遵循前端设计美学原则，打造独特的、可投入生产的界面：

设计思路：

目标：该界面解决什么问题？面向哪些用户？
风格：选择鲜明的美学方向（极简主义、极繁主义、复古未来主义、自然风、奢华风、趣味风、粗野主义等）
约束：技术要求（框架、性能、可访问性）
差异化：什么让这个界面令人过目不忘？

前端美学：

排版：选择独特、美观的字体（避免使用Inter、Roboto、Arial及系统字体）
色彩与主题：通过CSS变量打造连贯的美学风格
动效：使用动画实现特效和微交互
空间布局：采用出人意料的布局、不对称设计、元素重叠、斜向流动
背景与视觉细节：渐变网格、噪点纹理、几何图案、富有层次感的阴影

Step 2: Image Generation

步骤2：图片生成

Identify all images needed in the design and generate them using the image generation script:

Note: The script paths below use
~/.claude/skills/
as the default installation location. If you installed this skill via
npx skills add
, the actual path may be different (e.g.,
~/.local/share/npx/skills/
or similar). Adjust the path according to your setup.

Identify Image Needs:

Hero/banner images
Product/portfolio images
Illustrations or icons
Background images
Section dividers or decorative elements

Generate Images: Run the image generation script for each image needed. Images are automatically saved to the project's

images/

directory for better organization:

bash

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

Resolution Guidelines:

1K (default) - ~1024px for small images, icons, thumbnails
2K - ~2048px for standard images, product shots
4K - ~4096px for hero banners, large backgrounds

Filename Format:

{timestamp}-{descriptive-name}.png

Timestamp:
```
yyyy-mm-dd-hh-mm-ss
```
(24-hour format)
Name: lowercase descriptive text with hyphens

Image Organization:

Images are automatically saved to the project's
```
images/
```
directory
The script detects git repository roots and places images at the project level
When referencing images in code, use:
```
images/filename.png
```

识别设计中所需的所有图片，并使用图片生成脚本生成：

注意： 以下脚本路径默认使用
~/.claude/skills/
作为安装目录。如果你通过
npx skills add
安装此技能，实际路径可能不同（例如
~/.local/share/npx/skills/
或类似路径）。请根据你的安装环境调整路径。

识别图片需求：

英雄/横幅图片
产品/作品集图片
插图或图标
背景图片
区域分隔符或装饰元素

生成图片： 为每个需要的图片运行图片生成脚本。图片会自动保存到项目的

images/

目录，以便更好地管理：

bash

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（默认）- 约1024px，适用于小图片、图标、缩略图
2K - 约2048px，适用于标准图片、产品照片
4K - 约4096px，适用于英雄横幅、大型背景

文件名格式：

{timestamp}-{descriptive-name}.png

时间戳：
```
yyyy-mm-dd-hh-mm-ss
```
（24小时制）
名称：小写描述性文本，使用连字符分隔

图片管理：

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

Step 3: Complete Implementation

步骤3：完整实现

After generating all needed images, create the final code with:

All generated images properly referenced using
```
images/filename.png
```
Optimized image attributes (alt text, loading, sizes)
Responsive image handling
Complete styling matching the aesthetic vision

IMPORTANT: After creating the HTML file, you MUST verify that all images load correctly:

bash

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

This script checks:

All image references in HTML files
Whether the referenced image files exist
Common path issues (missing
```
images/
```
prefix, etc.)

Do not proceed to the next step until all images are verified successfully.

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

使用
```
images/filename.png
```
正确引用所有生成的图片
优化的图片属性（替代文本、加载方式、尺寸）
响应式图片处理
符合美学构想的完整样式

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

bash

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

该脚本会检查：

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

在所有图片验证通过前，请勿进行下一步。

Step 4: Design Documentation (REQUIRED)

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

After image verification, you MUST generate a professional design specification document for client delivery. This is a mandatory final step.

Basic Usage:

bash

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

Auto-Extraction from HTML (RECOMMENDED):

bash

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"

The

--html-file

parameter automatically extracts:

Page sections with their actual content summaries
Color scheme from CSS variables
All images with filenames and resolutions
CTA button count

This is the recommended approach as it saves time and ensures accuracy by analyzing the actual HTML code.

Advanced Usage (Manual Parameters):

bash

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"

With Image List:

bash

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"

Document Contents (6 Major Sections):

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

Output: A professionally formatted HTML document with sticky navigation, comprehensive sections, and beautiful styling - perfect for client presentations and design handoffs.

Key Parameters:

```
--html-file
```
: (RECOMMENDED) Auto-extract sections, colors, images, CTAs from HTML
```
--design-concept
```
,
```
--target-audience
```
: Project description

--primary-color

--secondary-color

--accent-color

--bg-color

: Custom color scheme

```
--page-sections
```
: Comma-separated section list

--image-list

: Format:

filename1|resolution1|purpose1,filename2|resolution2|purpose2

```
--cta-count
```
: Number of CTA buttons
```
--author
```
: Design team/author name
```
--project-type
```
: landing-page, website, dashboard, etc.
```
--version
```
: Document version number

图片验证通过后，你必须生成专业的设计规范文档用于客户交付。这是强制性的最终步骤。

基础用法：

bash

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

从HTML自动提取（推荐）：

bash

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代码节省时间并确保准确性。

高级用法（手动参数）：

bash

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"

带图片列表：

bash

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
```
：文档版本号

Complete Workflow Example

完整工作流示例

User Request: "Create a landing page for a coffee shop"

Process:

Design Phase: Choose a warm, organic aesthetic with earth tones, rustic typography
Image Planning: Identify needs for:
- Hero banner with coffee atmosphere
- Product shots for coffee cups
- Background textures for sections

Generate Images:

bash

# Hero banner (auto-saved to 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

# Product shot (auto-saved to 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

# Background texture (auto-saved to 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

Create Code: Build complete HTML/CSS with all images integrated using
```
images/filename.png
```
Verify Images: (CRITICAL STEP)
bash
```
python ~/.claude/skills/web-design-studio/scripts/verify_images.py
```
This ensures all image paths are correct and files exist. Fix any issues before proceeding.

Generate Design Doc: (REQUIRED FINAL STEP)

bash

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"

The script will automatically extract:

Page sections with content summaries
Color scheme from CSS
All images and their resolutions
CTA button count

Optional: Add custom parameters for more control:

bash

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 "设计团队"

用户需求： "为咖啡店创建一个着陆页"

流程：

设计阶段： 选择温暖自然的美学风格，采用大地色系、质朴的排版
图片规划： 识别以下图片需求：
- 带有咖啡氛围的英雄横幅
- 咖啡杯的产品照片
- 区域背景纹理

生成图片：

bash

# Hero banner (auto-saved to 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

# Product shot (auto-saved to 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

# Background texture (auto-saved to 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

创建代码： 构建完整的HTML/CSS代码，使用
```
images/filename.png
```
整合所有图片
验证图片：（关键步骤）
bash
```
python ~/.claude/skills/web-design-studio/scripts/verify_images.py
```
这会确保所有图片路径正确且文件存在。在继续下一步前修复所有问题。

生成设计文档：（必填最终步骤）

bash

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按钮数量

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

bash

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 Key

API密钥

The script requires a Gemini API key:

Pass via
```
--api-key
```
argument if user provides one
Otherwise uses
```
GEMINI_API_KEY
```
environment variable

脚本需要Gemini API密钥：

如果用户提供密钥，可通过
```
--api-key
```
参数传入
否则使用
```
GEMINI_API_KEY
```
环境变量

Best Practices

最佳实践

Design First, Images Second: Plan the complete design before generating images
Match Aesthetics: Ensure generated images match the chosen design aesthetic
Optimize Resolution: Use appropriate resolution for each image's purpose
Descriptive Prompts: Write detailed, aesthetic-specific prompts for better results
Organize Filenames: Use clear, descriptive filenames matching the design context
Verify Images: ALWAYS run the verification script after creating HTML to catch path issues early
Generate Documentation: Design documentation is MANDATORY - never skip this final step

先设计，后生成图片：在生成图片前规划完整的设计方案
匹配美学风格：确保生成的图片符合选定的设计美学
优化分辨率：根据图片用途选择合适的分辨率
描述性提示词：编写详细、符合美学风格的提示词以获得更好的结果
规范文件名：使用清晰、符合设计场景的描述性文件名
验证图片：创建HTML后务必运行验证脚本，尽早发现路径问题
生成文档：设计文档是必填项 - 切勿跳过这一最终步骤

Output

输出成果

This skill produces the following complete deliverables:

Complete HTML/CSS/JS Code: Production-ready, responsive, fully functional
Generated Images: All images saved to
```
images/
```
directory with proper naming
Verified Image References: All image paths validated and working (via verify_images.py)
Design Documentation: MANDATORY professional spec document (design-doc-{project}.html)
Clean Project Structure: Organized files ready for deployment

Verification Checklist Before Completion:

All images generated and in
```
images/
```
directory
HTML file created with image references as
```
images/filename.png
```
Verification script passes:
```
python verify_images.py
```
Design documentation generated:
```
python generate_design_doc.py
```
All deliverables are present and accessible

Remember: The goal is to create COMPLETE web experiences where every visual element is thoughtfully designed and generated - no placeholder images, no "image goes here" sections. Real, finished work.

该技能可生成以下完整交付物：

完整HTML/CSS/JS代码：可投入生产、响应式、功能完整
生成的图片：所有图片保存至
```
images/
```
目录，命名规范
已验证的图片引用：所有图片路径均已验证可正常加载（通过verify_images.py）
设计文档：必填的专业规范文档（design-doc-{project}.html）
清晰的项目结构：文件组织有序，可直接部署

完成前的验证清单：

所有图片已生成并存放在
```
images/
```
目录
已创建HTML文件，图片引用格式为
```
images/filename.png
```
验证脚本运行通过：
```
python verify_images.py
```
已生成设计文档：
```
python generate_design_doc.py
```
所有交付物均已准备就绪且可访问

请记住：我们的目标是创建完整的Web体验，每个视觉元素都经过精心设计和生成 - 无占位图片，无“此处放置图片”的区域。交付真正的、成品级的作品。