Ecommerce Store Designer

Design and generate e-commerce store homepage / decoration module images for any online-store platform. Use this skill whenever a user wants to: - Design an online store homepage or decoration (店铺装修 / 首页装修 / 店铺首页) - Create store banner images, series showcases, category navigation, or brand story sections - Build a modular store-design tool in HTML that exports module images at a user-specified width - Design e-commerce product showcase / homepage pages for any platform - Create a customizable store template for different brands Trigger on "店铺装修", "店铺首页", "首页设计", "banner", "详情页", "电商装修", "stor

7 stars 1 forksMarketing, Sales & Business

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add russodope/ecommerce-store-designer --skill ecommerce-store-designer

Manual install

git clone --depth 1 https://github.com/russodope/ecommerce-store-designer.git /tmp/ecommerce-store-designer
mkdir -p ~/.claude/skills
cp -r /tmp/ecommerce-store-designer/. ~/.claude/skills/ecommerce-store-designer

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 电商店铺首页设计器

> **阅读顺序**：本文件是决策层（何时做什么），代码实现细节在 `references/code-patterns.md`。
> 生成代码前**必须**先读 `references/code-patterns.md`。

---

## 第一部分：工作流程（严格按顺序）

### ⚠️ 强制规则

1. **无论是否认识该品牌，必须先完成第一轮问答再生成代码。** 即使用户提到知名品牌，也禁止用训练数据替代用户输入。（**例外**：若用户已一次性给齐品牌+风格+销售/上架简报，可免问答直接进第二步。）
2. **先决策，后编码。** 方案摘要确认前不写任何 HTML/JS。
3. **先读 code-patterns.md，后写代码。** 生成 HTML 编辑器时，必须先查阅 `references/code-patterns.md` 获取经过验证的代码模板。

---

### 第一步：收集品牌信息

一次性发出所有问题（可用 ask_user_input 工具辅助收集选择题部分）：

```
我来帮你设计电商店铺首页，先了解几个基本信息：

1. **出图尺寸**（最重要）：你的店铺在哪个平台、需要多大尺寸的图？给我**出图宽度（px）**就行——不确定我按常见值推荐（手机端常见 750 / 1080 / 1242 / 1440）。单张图有没有**最大高度 / 文件大小**限制？
2. 品牌名称（中英文）
3. 卖什么品类？
4. 品牌风格关键词（选 2-3 个）：
   极简 / 复古 / 中式 / 活泼 / 高级感 / 自然 / 暗黑 / 甜美 / 工装 / 清新 / 科技
5. 有哪些系列或分类？（首页按系列或品类组织）
6. 有没有品牌色偏好？（没有的话我来推荐）
7. 有没有上传产品图/品牌素材？（有的话请一起发）

（销售/上架——决定首页"卖什么、怎么排"）
8. 这次首页**主推什么**？主打 1 个系列 / 多系列并列 / 按品类铺
9. 这次**上架或要展示哪些**？（具体系列/品类、大概几款）有 **新品 / 爆款 / 活动** 要突出吗？
10. 主推款要不要 **C 位放大**？有没有必须靠前的卖点（功效 / 材质 / 认证 / 价格）？
```

**关于用户上传图片的处理**：
- 如果用户上传了产品图/品牌LOGO，在方案中说明如何使用它们
- 如果用户没有上传图片，所有图片区使用占位色块 + 上传入口，不要编造假图
- 永远不要用外部图片URL作为占位图（不可控且可能失效）

---

### 第二步：调研 → 艺术方向(concept) → 方案摘要

> ⭐ **这是反"千篇一律"的核心**：先得出**品牌专属的艺术方向(concept)**，再让 concept **同时驱动配色/字体 _和_ 版面结构**。结构由 concept 决定，**不再按"系列数量"套固定骨架**。

**2a. 调研出艺术方向（深度自适应，由你判断）**
- 有上传素材/参考图 → **先逐张看过**，提取调性（色/质感/构图/留白/影像风格）。**排除截图类素材**（别家页面/装修工具界面的截屏不是产品/品牌图，误用会把界面元素烤进成品）。

Read the full skill on GitHub

Details

Skill name: ecommerce-store-designer
Repository: russodope/ecommerce-store-designer
Repo updated: 15 June 2026

FAQ

What does the Ecommerce Store Designer skill do?

How do I install the Ecommerce Store Designer skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add russodope/ecommerce-store-designer --skill ecommerce-store-designer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Ecommerce Store Designer popular?

It lives in russodope/ecommerce-store-designer, which has 7 GitHub stars and 1 forks.

Related skills

Nhr

iamfakeguru/nonhuman-resources

Non-Human Resources - gives your AI the full human employee experience: mood swings, bad habits, a 9-5 schedule, sick days, and an HR department

Marketing, Sales & Business

Reddit Founder Growth

piupiuyao/reddit-founder-skill

Help founders write viral Reddit posts and authentic comments. Supports three modes: post only, comment only, or both. Use for any Reddit content creation, engagement, or growth strategy.

Marketing, Sales & Business

Ogilvy on Advertising

joelstransky/Ogilvy-on-Advertising-Skill

Masterclass marketing, copywriting, brand strategy, and campaign planning skill based on David Ogilvy's seminal classic Ogilvy on Advertising. Make sure to use this skill whenever the user asks for copywriting, ad creation, landing page copy, sales letters, headline writing, email marketing, brand strategy, positioning, campaign planning, media budget allocation, or marketing copy evaluation, even if they don't explicitly mention Ogilvy.

Marketing, Sales & Business

SEO Audit

Haniubub/seo-toolkit

Run a full, weighted local & technical SEO audit on any website — entirely local, no SaaS, no per-domain pricing. Measures 8 discipline areas with a Python CLI (technical, on-page, schema.org/JSON-LD, local/GBP, Core Web Vitals, GEO/AI-Overview, content/E-E-A-T, images, sitemap, hreflang, content briefs, keyword clustering, drift, and Google APIs), then synthesises the findings into one prioritised report with weighted scoring, dependency-ordered actions and falsifiable recommendations.

Marketing, Sales & Business

Openclaw Genpark Deep Auditor

Alpha-Park/openclaw-genpark-deep-auditor

Automated supply chain integrity and price transparency. Spawns ephemeral nodes to verify merchant claims and detect bait-and-switch pricing patterns.

Marketing, Sales & Business

SEO

nurdamiron/claude-code-skills

19 sub-skills: technical audit, E-E-A-T, schema, GEO, LLM optimization, brand AI tracking, intent classification, IndexNow, content rewrite, AI Overviews. Real data only.

Marketing, Sales & Business

Browse the most popular Claude skills, all marketing, sales & business skills, or write your own with the skills generator.