Back to Details

crazy-ecommerce-builder-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Crazy Ecommerce Builder

疯狂电商构建器

Turn a short company brief into a coherent creative thesis, a custom image world, and a working ecommerce experience. Make the result surprising because it expresses the product truth—not because it uses random effects.
将简短的公司简介转化为一套连贯的创意论点、专属图像世界和可实际运行的电商体验。让结果令人惊艳，是因为它表达产品的真实本质，而不是因为堆砌随机效果。

Required companion skills

必需的配套 skill

Use the available 
sites-building
skill for implementation and validation, 
imagegen
for original raster assets, and 
sites-hosting
for publishing unless the user asks to keep the site local. Read each selected skill before taking its actions. If one is unavailable, follow the closest local workflow and state the limitation briefly.
使用可用的 
sites-building
skill 进行实现和验证，使用 
imagegen
生成原创位图素材，并使用 
sites-hosting
发布网站，除非用户要求仅保留在本地。执行相关操作前，先阅读每个选用的 skill。如果其中某个不可用，则采用最接近的本地工作流，并简要说明限制。

Inputs

输入

Extract or infer:
  • company or product name;
  • what is sold and why it is meaningfully different;
  • customer and price position;
  • catalog size or representative products;
  • brand personality, taboos, and desired level of visual risk;
  • existing assets, copy, site, stack, and publishing preference.
Do not demand a complete brief. Ask at most two short questions only when a missing answer would materially change the business or creative direction. Otherwise make labeled assumptions and proceed. Treat supplied product facts, prices, claims, and materials as source of truth; never invent regulated, medical, sustainability, performance, or certification claims.
提取或推断：
  • 公司或产品名称；
  • 商品是什么，以及它为何具有实质性差异；
  • 目标客户与价格定位；
  • 商品目录规模或代表性产品；
  • 品牌个性、禁忌和期望的视觉风险程度；
  • 现有素材、文案、网站、技术栈和发布偏好。
不要要求用户提供完整的需求简介。只有当缺失信息会实质性影响业务或创意方向时，才最多提出两个简短问题。否则应明确标注所作的假设并继续执行。将用户提供的产品事实、价格、声明和材质视为事实来源；绝不能虚构监管、医疗、可持续性、性能或认证相关声明。

Workflow

工作流

1. Inspect and protect the workspace

1. 检查并保护工作区

Determine whether this is a new site or an existing project. Preserve the existing package manager, architecture, working features, user changes, and hosting configuration. Inspect the current product surface before editing. Do not replace a functioning project solely to use a preferred framework.
判断这是全新网站还是现有项目。保留现有包管理器、架构、可用功能、用户改动和托管配置。编辑前检查当前产品界面。不要仅为了采用偏好的框架而替换可正常运行的项目。

2. Write the creative thesis

2. 撰写创意论点

Before designing, condense the brief into:
  1. Product tension — the surprising contradiction or transformation inside the product.
  2. Customer feeling — the emotion the first viewport should create.
  3. Visual world — one specific art-direction system with palette, type behavior, composition, photography, motion, and texture.
  4. Commerce spine — the shortest path from intrigue to product understanding to purchase.
  5. Signature device — one memorable motif tied to the product, such as a seam, split, orbit, tear, specimen label, thermal map, or impossible scale shift.
Read creative-system.md when choosing the direction. Do not start implementation until the thesis is internally coherent.
If the user explicitly asks to choose among directions, or the applicable Sites workflow requires a picker, create three genuinely distinct concepts and follow that workflow. Otherwise choose the strongest direction and build without pausing.
开始设计前，将简介提炼为：
  1. 产品张力——产品内部令人意外的矛盾或转变。
  2. 客户感受——首屏应营造的情绪。
  3. 视觉世界——一套具体的艺术指导系统，涵盖配色、字体表现、构图、摄影、动效和纹理。
  4. 购物转化主线——从引发兴趣到理解产品再到购买的最短路径。
  5. 标志性装置——一个与产品紧密关联、令人难忘的视觉母题，例如接缝、裂口、轨道、撕裂、标本标签、热力图或不可能实现的尺度转换。
选择创意方向时，阅读 creative-system.md。在创意论点内部保持连贯之前，不要开始实现。
如果用户明确要求从多个方向中选择，或适用的 Sites 工作流要求使用选择器，则创建三个真正不同的概念，并遵循该工作流。否则，选择最有力的方向并直接开始构建，不要中途暂停。

3. Plan a small image system

3. 规划小型图像系统

Read image-system.md. Generate a deliberate family of assets rather than unrelated pretty images. Default to:
  • one landscape hero image with usable copy space;
  • two to four consistent product-card images;
  • one process or editorial image only when it adds information;
  • exactly one finished social card after the site's palette, headline, and motifs are stable.
Use built-in ImageGen mode by default. Keep every project-used final asset inside the workspace. Inspect generated results for product accuracy, text errors, unwanted objects, inconsistent materials, malformed geometry, and mismatched lighting. Retry only with a targeted correction.
阅读 image-system.md。生成一组目标明确、相互关联的素材，而不是一堆互不相关的漂亮图片。默认包括：
  • 一张带有可用文案留白空间的横向 hero 图像；
  • 两到四张风格一致的产品卡片图像；
  • 仅在能够补充信息时，添加一张流程图或编辑风格图像；
  • 在网站配色、标题和视觉母题稳定后，生成恰好一张完成的社交媒体卡片。
默认使用内置的 ImageGen 模式。将项目中实际使用的每个最终素材保存在工作区内。检查生成结果中的产品准确性、文字错误、多余物体、材质不一致、几何结构异常和光线不匹配等问题。仅针对具体问题进行重试和修正。

4. Build the commerce experience

4. 构建电商体验

Read commerce-checklist.md. Build the first viewport around the product, not generic navigation or a dashboard shell. Include concrete brand copy and realistic product data.
Make the site feel unconventional through hierarchy, composition, cropping, typography, color relationships, copy voice, and one or two purposeful interactions. Preserve legibility, product comprehension, obvious calls to action, keyboard access, touch usability, responsive behavior, and reduced-motion support.
At minimum, implement:
  • a distinctive hero with a clear product proposition;
  • browseable products with names, prices, useful details, and add-to-cart controls;
  • visible cart state and a usable cart surface;
  • a credible brand/process/proof section;
  • mobile behavior and accessible labels;
  • honest handling of checkout, inventory, newsletter, and other integrations.
If payment, inventory, email, or fulfillment services are not connected, implement a polished demo state and say so in the handoff. Never imply that money, subscriptions, or orders are being processed when they are not.
阅读 commerce-checklist.md。围绕产品构建首屏，而不是围绕通用导航或仪表盘框架。使用具体的品牌文案和真实可信的产品数据。
通过信息层级、构图、裁切、字体排印、色彩关系、文案语气以及一两个有目的的交互，让网站呈现非传统风格。同时保持内容易读、产品易于理解、CTA 清晰可见，并确保键盘可访问性、触控可用性、响应式行为和 reduced-motion 支持。
至少需要实现：
  • 一个具有清晰产品主张、辨识度鲜明的 hero 区域；
  • 可浏览的商品列表，包含名称、价格、有效详情和加入购物车控件；
  • 可见的购物车状态和可操作的购物车界面；
  • 可信的品牌、流程或产品背书区块；
  • 移动端行为和无障碍标签；
  • 对结账、库存、邮件订阅及其他集成进行如实处理。
如果支付、库存、邮件或履约服务尚未接入，则实现精致的演示状态，并在交付说明中明确指出。绝不能暗示系统正在处理付款、订阅或订单。

5. Validate proportionally

5. 进行相称的验证

Run the production build after implementation. Fix actual failures and rebuild. Check that generated assets resolve, key product content is present, interactions compile, and the old starter identity is gone. Follow the Sites preview rules; do not add browser QA unless requested or required.
实现后运行生产构建。修复实际出现的失败问题并重新构建。检查生成素材能否正确加载、关键产品内容是否已呈现、交互是否能够编译，以及原有模板身份是否已彻底移除。遵循 Sites 预览规则；除非用户提出要求或项目确有需要，否则不要添加浏览器 QA。

6. Publish and hand off

6. 发布并交付

Publish through 
sites-hosting
after a successful build unless the user requested local-only work. Lead with the live URL. Briefly summarize the concept, working commerce interactions, generated-image set, and any intentionally unconnected production service such as checkout.
除非用户要求仅在本地工作，否则在构建成功后通过 
sites-hosting
发布。先提供线上 URL。简要总结创意概念、可用的电商交互、生成图像集，以及结账等有意未接入的生产服务。

Quality bar

质量标准

  • The design could not be swapped onto an unrelated company without losing meaning.
  • The product is understandable within the first viewport despite the experimentation.
  • Every generated image depicts the same product logic and art direction.
  • Mobile is composed, not merely stacked.
  • Motion supports the concept and respects reduced-motion preferences.
  • Copy has a recognizable voice without obscuring essential buying information.
  • The user receives a working site, not only a moodboard or static mockup.
  • 该设计无法直接套用到一家无关公司而仍保留原有意义。
  • 尽管进行了实验性设计，用户仍能在首屏内理解产品。
  • 每张生成图像都遵循相同的产品逻辑和艺术指导方向。
  • 移动端经过整体构图，而不是简单堆叠桌面端内容。
  • 动效服务于创意概念，并尊重 reduced-motion 偏好。
  • 文案具有鲜明的品牌语气，同时不会掩盖关键购买信息。
  • 用户得到的是一个可正常工作的网站，而不只是情绪板或静态模型。

Avoid

避免事项

  • generic luxury beige, default SaaS gradients, gratuitous glassmorphism, and template-card grids;
  • random distortion, cursor gimmicks, or animation that blocks shopping;
  • fake reviews, fake scarcity counters, fake certifications, or unsupported claims;
  • generating text-heavy images when HTML text should remain selectable and responsive;
  • using generated imagery as a substitute for missing product truth;
  • leaving project assets only in ImageGen's default output directory;
  • finishing without build validation or hiding incomplete integrations.
  • 千篇一律的奢侈品牌米色调、默认的 SaaS 渐变、无意义的玻璃拟态和模板化卡片网格；
  • 随机扭曲、鼠标指针噱头或阻碍购物的动画；
  • 虚假评价、虚假的稀缺性计数器、虚假认证或无依据的声明；
  • 在本应使用 HTML 文本时生成包含大量文字的图片，因为 HTML 文本能够保持可选和响应式；
  • 使用生成图像替代缺失的产品真实信息；
  • 将项目素材仅留在 ImageGen 的默认输出目录中；
  • 未进行构建验证就完成项目，或隐瞒未完成的集成。