产品页面设计师

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install product-page-designer
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 product-page-designer。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

产品页面设计师是 Openclaw Skills 工作流，用于为耳机、入耳式耳机、音箱、智能手表和其他消费电子产品设计具有国际品牌品质的产品详情页。它会生成完整的页面结构，涵盖首屏区域、以利益为导向的功能、生活方式场景、产品详情、规格、包装内容、FAQ 和行动号召。

应用场景

为新的耳机、入耳式耳机、音箱、智能手表或其他电子产品发布高级产品详情页。

工作原理

收集产品名称、产品类别、关键规格、目标价格区间和首选品牌语调。

配置指南

基本工作流

数据架构

产品页面内容模型

高级特性

使用抽象前缀和后缀创建原创产品命名系统。

name: product-page-designer description: Design and generate international-brand-quality product detail pages for cross-border e-commerce. Generates complete product page content (Hero, Features, Lifestyle, Specs, FAQ) plus AI image prompts and visual assets for any consumer electronics product. Output meets Apple/Nothing brand standards. category: creative

Product Page Designer Skill

Generate complete, conversion-optimized product detail pages for consumer electronics that meet international brand standards (Apple, Nothing, Sonos level).

Workflow

Step 1: Gather Product Info

Ask the user for:

Product name (e.g., "Bluetooth Earbuds", "Smart Watch")
Product category (headphones, earbuds, speaker, watch, etc.)
Key specs (battery, connectivity, waterproof rating, etc.) — if unknown, use standard industry specs for the category
Target price range (budget/mid/premium) — affects copy tone
Brand voice preference (minimalist, energetic, technical, lifestyle) — default: minimalist
Step 2: Generate Product Page Content

Create a complete product detail page with these sections:

A. Hero Section
Product name (original, no brand infringement)
One-line slogan (max 5 words, punchy)

CTA with price

Visual direction: product on dark background, dramatic lighting, no clutter
B. Key Features (4-6 points)

Each feature card needs:

Icon suggestion

Title (2-4 words, benefit-driven)
One-line description (max 20 words)

Image concept description

Standard features to consider (pick 4-6 relevant):

ANC / Sound isolation

Hi-Res / Audio quality

Battery life

Connectivity (Bluetooth version, multipoint)

Latency / Gaming mode

Waterproof rating

Comfort / Fit

Smart features (app, EQ, spatial audio)
C. Lifestyle Showcase (4 scenes)

Pick scenes relevant to the product category. Each needs:

Scene name

Image style description

Photography direction

Overlay copy (headline + subheadline)

Common scenes: Office/Work, Travel, Fitness/Outdoors, Relax/Home

D. Product Details

Three paragraphs:

Introduction (what it is, why it matters)
Experience (how it feels to use)
Why buy (differentiators, warranty, trial)
E. Specifications

Markdown table with standard specs for the category.

F. What's in the Box

Standard packaging list.

G. FAQ

8-10 questions covering: calls, compatibility, charging, returns, app, special features.

Step 3: Generate AI Image Prompts

For EVERY image in the page, create a prompt following this template:

[Shot type] of [product description] in [setting/background],
[lighting description],
[composition notes],
[style keywords]:
professional commercial product photography, minimalist composition, clean studio lighting, modern aesthetic, premium feel, photorealistic, high-end consumer electronics, no visible branding, no text, no logos

Critical rules for image prompts:

ALWAYS append no visible branding, no text, no logos to every prompt
ALWAYS include professional commercial product photography as style anchor

ALWAYS specify aspect ratio and resolution

Product must be described generically (matte black, premium build) — never use real brand names
For lifestyle shots, describe the person/product relationship, not the person's identity
Step 4: Generate Images with WaveSpeed

Use wavespeed skill to generate all images:

Hero + Lifestyle images → google/nano-banana-2/text-to-image at 2K resolution
Feature cards → google/nano-banana-2/text-to-image at 2K resolution
Brand removal (if AI generates fake logos) → bytedance/seedream-v4.5/edit

Common pitfall: AI models love to generate fake brand names on products ("SONY", "Bose", "Razer", etc.) — expect 10-30% of images to need cleaning. Always:

Add no visible branding, no text, no logos, unbranded, generic design to every prompt
After generation, check each image with vision_analyze for brand text

If found, use bytedance/seedream-v4.5/edit to remove it (~$0.04/edit)

Budget extra time and credits for the brand removal pass

Step 5: Quality Review Checklist

Before delivering, verify:

All copy is original (no brand infringement)
Slogan is ≤ 5 words and memorable
Feature descriptions are benefit-driven, not spec-driven

Lifestyle copy matches the scene emotion

All images are unbranded (no text, no logos)

Image style is consistent across all shots

Specs table is complete and accurate

FAQ covers real customer concerns

Overall tone matches the chosen brand voice

Step 6: Deliver

Output as a single comprehensive Markdown document with:

Complete product page content (ready for web developers)

All image prompts organized by section

Generated image URLs (if wavespeed was used)

Layout suggestions for each section

Product Category Templates

Headphones / Earbuds

Standard specs: Bluetooth 5.x, ANC, 20-60h battery, IPX4-IPX7, 32Ω impedance, USB-C charging, multipoint, companion app

Bluetooth Speakers

Standard specs: Bluetooth 5.x, 10-30h battery, IPX7, 10-40W output, stereo pairing, USB-C, built-in mic

Smart Watches

Standard specs: AMOLED display, heart rate, SpO2, GPS, NFC, 5-14 day battery, IP68, smartphone notifications, sleep tracking

Wireless Earbuds (TWS)

Standard specs: Bluetooth 5.x, ANC, 6-8h + case 24-32h total, IPX4-IPX5, touch controls, spatial audio, fast charge, wireless charging case

Naming Convention

When generating product names, use this pattern:

Brand prefix: Abstract, tech-sounding (AURA, NOVA, PULSE, VELO, ORBIT, LUMA, ZEN, CORE, FLUX, NEXUS)
Product type: Pro, Ultra, Air, Lite, Max, SE
Number: X1, Z3, S2 (optional, adds specificity)

Examples: AURA Pro X1, NOVA Ultra S2, PULSE Air SE

Tone Guidelines

Minimalist (Apple/Nothing style)
Short sentences. Period. Like this.

Numbers speak louder than adjectives

"40 hours. Not 39. Not 41."
Focus on feeling, not features
Energetic (Nike/Adidas style)
Action verbs. Movement. Energy.
"Push harder. Go further."

Emojis in social copy only

Bold claims, backed by specs
Technical (Sony/Bose style)
Precise language. Measurements. Certifications.
"40mm custom neodymium drivers"
"Hybrid ANC with 45dB reduction"

Data-driven comparisons

Output Format

Always deliver in this structure:

# [Product Name] — Product Detail Page

Brand Style

[Tone selected]

1. Hero Section

• Name: [product name]
• Slogan: [tagline]
• CTA: [button text]
• Visual: [description]

2. Key Features

3. Lifestyle Showcase

Scene 1: [Name]

• Copy: [headline + subheadline]
• Image style: [description]
• Photography: [direction]

...

4. Product Details

[Introduction paragraph]
[Experience paragraph]
[Why buy paragraph]

5. Specifications

6. What's in the Box

• Item 1
• Item 2

7. FAQ

Q: ... A: ...

8. Image Prompts

[All prompts organized by section, ready for wavespeed]

Implementation Notes

Next.js Product Page Pattern

When implementing in a Next.js project:

Create route at /product/[slug]/page.tsx

Use ScrollReveal component for scroll animations

Use Tailwind CSS with custom nav-* color tokens (defined in globals.css)
Hero: 2-column grid, product image + CTA
Features: 3-column grid with image overlay cards
Lifestyle: alternating 2-column blocks (image left/right, use lg:[&>*:nth-child(1)]:order-2 for even items)
Specs: table with alternating row styling (use divs instead of table for better Tailwind control)
FAQ: accordion pattern with React useState

Sticky bottom bar for CTA

All images should be generated via wavespeed and hosted on CDN (cloudfront)
Use "use client" directive on product pages (needed for interactive FAQ/cart)
Move interactive state (useState) to the top-level component, not sub-components, to avoid "Cannot find name" errors
Toast notifications: create DOM element dynamically rather than relying on global functions

Brand Removal Workflow

When AI generates brand text on product images (very common — expect 10-30% of images to need cleaning):

Prevention: Always append no visible branding, no text, no logos, unbranded, generic design to every product prompt.

Detection: After generation, check each image with vision_analyze for brand text before integrating into the page.

Fix (use bytedance/seedream-v4.5/edit — cheapest at $0.04/edit, strongest prompt adherence):

# 1. Upload original

URL=$(npx @wavespeed/cli upload ./generated.png --json | jq -r .url)

# 2. Edit to remove branding

PROMPT="Remove all text and brand logos from the image. Keep everything else identical — same lighting, pose, composition, colors. Clean unbranded surface."

npx @wavespeed/cli run bytedance/seedream-v4.5/edit \

-i prompt="$PROMPT"
-i images="["$URL"]"
--json --download "./clean-{index}.{ext}"

Budget: ~$0.04/edit. Allow 2-3 edits per image if needed. Total brand-removal cost typically $0.10-$0.30 per product page.

Common hallucinations observed: "SONY", "Bose", "Razer", "AXIS AUDIO", "Sennheiser", "NIKE", "LEICA", "ANALOG VIBRATIONS" — on headphones, mice, vinyl sleeves, and other products.

Proven prompt for brand removal: Write the prompt to a file and read with PROMPT=$(cat ...). Be specific about WHICH object to clean (e.g., "the gaming mouse should have no visible logo", "vinyl record sleeves should have no readable text"). Generic "remove all branding" prompts are less effective than targeted ones.

End-to-End Session Pattern (Validated)

This workflow was tested end-to-end in a real session and proven to work:

Design product page content in Markdown → 2. Write image prompts to files → 3. Generate images in parallel batches (8-10 at a time) using background mode → 4. Evaluate images with vision_analyze → 5. Fix branded images with seedream-v4.5/edit → 6. Build Next.js product page → 7. Deploy to Netlify
FlightGear 的 PropertyList XML
工作邮件起草