crazy-ecommerce-builder-skill

Crazy Ecommerce Builder

将一份简短的公司简介转化为连贯的创意理念、定制图像世界和可用的电商体验。让结果出人意料，是因为它表达了产品本质，而不是因为用了随机效果。

必需的配套技能

使用可用的 sites-building 技能进行实现和验证，使用 imagegen 制作原创栅格素材，并使用 sites-hosting 发布，除非用户要求网站仅在本地运行。执行操作前，先阅读每项选定技能的说明。如果某项技能不可用，请遵循最接近的本地工作流，并简要说明这一限制。

输入

提取或推断以下信息：

• 公司或产品名称；
• 销售的产品，以及它有何实质性差异；
• 客户群体和价格定位；
• 商品目录规模或代表性产品；
• 品牌个性、禁忌，以及期望的视觉冒险程度；
• 现有素材、文案、网站、技术栈和发布偏好。

不要要求用户提供完整简介。只有在缺失的信息会实质性改变商业或创意方向时，才最多提出两个简短问题。否则，请标明假设并继续。将用户提供的产品事实、价格、主张和材料视为事实依据；绝不要编造受监管、医疗、可持续性、性能或认证方面的主张。

工作流

1. 检查并保护工作区

确定这是新网站还是现有项目。保留现有包管理器、架构、可用功能、用户更改和托管配置。编辑前先检查当前产品界面。不要仅仅为了使用偏好的框架而替换可正常运行的项目。

2. 撰写创意理念

开始设计前，将简介提炼为：

1. 产品张力 — 产品内部令人意外的矛盾或转变。
2. 客户感受 — 首屏应营造的情绪。
3. 视觉世界 — 一套具体的艺术指导系统，涵盖配色、字体表现、构图、摄影、动效和纹理。
4. 电商主线 — 从引发兴趣到理解产品再到购买的最短路径。
5. 标志性元素 — 一个与产品相关、令人难忘的视觉母题，例如接缝、分割、轨道、撕裂、样本标签、热力图或不可能的比例变化。

选择方向时，请阅读 creative-system.md。创意理念尚未形成连贯整体前，不要开始实现。

如果用户明确要求在多个方向中选择，或适用的 Sites 工作流要求提供选择器，请创建三个真正不同的概念，并遵循该工作流。否则，选出最有力的方向并直接构建，不要停下来等待确认。

3. 规划小型图像系统

阅读 image-system.md。生成一组经过精心规划的素材，而不是彼此无关的漂亮图片。默认制作：

• 一张留有可用文案空间的横向主视觉图片；
• 两到四张风格统一的商品卡片图片；
• 仅在有助于传达信息时，制作一张流程或编辑类图片；
• 网站配色、标题和视觉母题稳定后，恰好制作一张最终版社交媒体卡片。

默认使用内置的 ImageGen 模式。将项目使用的所有最终素材保存在工作区内。检查生成结果的产品准确性、文字错误、不需要的物体、材料是否一致、几何形状是否异常以及光线是否匹配。仅在有针对性地修正问题时才重试。

4. 打造购物体验

阅读 commerce-checklist.md。围绕产品打造首屏，而不是使用通用导航或仪表盘外壳。加入具体的品牌文案和真实可信的产品数据。

通过层级、构图、裁切、字体、色彩关系、文案风格以及一两处有目的的交互，让网站显得与众不同。同时确保内容易读、产品易于理解、行动号召醒目、支持键盘操作和触屏使用、具备响应式表现，并支持减少动态效果设置。

至少实现以下内容：

• 有鲜明特色且清晰阐明产品价值的主视觉；
• 可浏览的产品，包含名称、价格、实用详情和加入购物车控件；
• 可见的购物车状态和易用的购物车界面；
• 可信的品牌、流程或证明内容版块；
• 移动端表现和无障碍标签；
• 对结账、库存、新闻简报及其他集成作出如实说明。

如果没有接入支付、库存、电子邮件或履约服务，请实现完善的演示状态，并在交付说明中如实说明。若实际并未处理付款、订阅或订单，绝不能暗示这些操作已在处理。

5. 按比例进行验证

实现完成后运行生产构建。修复实际错误并重新构建。检查生成的资源是否能正常加载、关键产品内容是否存在、交互是否能通过编译，以及旧的入门模板品牌形象是否已移除。遵循 Sites 预览规则；除非用户要求或明确需要，否则不要添加浏览器 QA。

6. 发布并交付

成功构建后，通过 sites-hosting 发布，除非用户要求仅在本地完成。首先提供线上网址。简要总结设计概念、可用的购物交互、生成的图片集，以及结账等有意未接入的生产服务。

质量标准

• 设计不能直接套用到无关公司，否则就会失去其独特含义。
• 即使采用实验性设计，用户仍能在首屏理解产品。
• 所有生成图片都应符合相同的产品逻辑和艺术指导。
• 移动端经过精心编排，而不是简单堆叠。
• 动效应服务于设计概念，并尊重减少动态效果偏好。
• 文案风格鲜明，但不应妨碍用户获取重要购买信息。
• 用户获得的是可用的网站，而不只是情绪板或静态样稿。

避免

• 通用的奢华米色、默认 SaaS 渐变、无谓的玻璃拟态效果和模板化卡片网格；
• 随机扭曲、光标噱头或妨碍购物的动画；
• 虚假评价、虚假稀缺性计数器、虚假认证或无依据的宣传；
• 在 HTML 文本应保持可选取和响应式时，仍生成文字密集的图片；
• 用生成图片掩盖缺失的产品实情；
• 将项目资源仅留在 ImageGen 的默认输出目录中；
• 未完成构建验证就结束工作，或隐瞒未完成的集成。