products-page-generator
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePages: Products
页面：商品
Guides product listing and category page content for e-commerce. For individual product detail pages, structure varies by platform.
When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
指导电商的商品列表和分类页面内容。单个商品详情页的结构因平台而异。
调用规则：首次使用时，如果有帮助，可以先用1-2句话介绍本技能覆盖的范围及其价值，再提供核心输出。后续调用或用户要求跳过介绍时，直接输出核心内容即可。
Initial Assessment
初步评估
Check for product marketing context first: If or exists, read it for product catalog and positioning.
.claude/product-marketing-context.md.cursor/product-marketing-context.mdIdentify:
- Page type: Category, collection, or product grid
- Products: Count, filters, sorting
- Audience: Browsers, researchers, buyers
优先核查商品营销上下文：如果存在 或 ，请读取其中的商品目录和定位信息。
.claude/product-marketing-context.md.cursor/product-marketing-context.md需要确认的信息：
- 页面类型：分类页、合集页或商品网格页
- 商品信息：数量、筛选条件、排序规则
- 目标受众：浏览者、调研用户、购买用户
Best Practices
最佳实践
Category/Listing Page
分类/列表页
| Element | Purpose |
|---|---|
| Category title | Clear H1; target keyword |
| Description | SEO copy; benefits of category |
| Filters | Price, size, brand, etc. |
| Product cards | Image, name, price, CTA |
| Pagination | Crawlable; rel prev/next |
| 元素 | 用途 |
|---|---|
| 分类标题 | 清晰的H1标题；匹配目标关键词 |
| 描述文案 | SEO文案；说明该分类下商品的优势 |
| 筛选器 | 价格、尺寸、品牌等维度 |
| Product cards | 图片、名称、价格、CTA |
| 分页 | 可被爬虫抓取；配置rel prev/next属性 |
Product Card
Product Card
- Image: Alt text; multiple angles
- Name: Descriptive; keyword
- Price: Clear; sale/compare-at
- CTA: Add to cart, view details
- 图片：添加Alt文本；提供多角度展示
- 名称：描述清晰；包含关键词
- 价格：展示清晰；标注促销价/划线价
- CTA：加入购物车、查看详情
SEO
SEO
- Category pages: Unique titles, descriptions
- Schema: ItemList, Product
- Internal links: Cross-category; breadcrumbs
- 分类页：配置唯一的标题、描述
- Schema：ItemList、Product类型
- 内部链接：跨分类跳转；面包屑导航
Output Format
输出格式
- Structure for listing page
- Product card elements
- Filter/sort approach
- SEO metadata and schema
- 列表页的结构
- 商品卡片的组成元素
- 筛选/排序方案
- SEO元数据和Schema
Related Skills
相关技能
- card: Card layout structure; product card anatomy, grid design
- grid: Product grid layout; responsive columns
- landing-page-generator: Product-focused landing pages send to products; product launch LP destination
- pricing-page-generator: Product cards link to pricing
- url-slug-generator: URL slug for product pages; 3-5 words, primary keyword
- url-structure: Product URL hierarchy (e.g. /products/category/product)
- features-page-generator: For SaaS feature pages
- schema-markup: Product, ItemList schema
- internal-links: Category linking
- breadcrumb-generator: Breadcrumb trail for product hierarchy
- card：卡片布局结构；商品卡片构成、网格设计
- grid：商品网格布局；响应式列设计
- landing-page-generator：以商品为核心的落地页引流至商品页；产品发布落地页跳转目标
- pricing-page-generator：商品卡片跳转至定价页
- url-slug-generator：商品页面的URL slug；3-5个词，包含主关键词
- url-structure：商品URL层级（例如 /products/category/product）
- features-page-generator：适用于SaaS功能页
- schema-markup：Product、ItemList类型的Schema
- internal-links：分类页关联跳转
- breadcrumb-generator：商品层级的面包屑导航路径