
效果预览
相似 Skill
查看全部 Skills你将获得
- 一个自包含商店文件,字体和图片已内嵌,任何浏览器打开、离线可用;已有框架项目时则移植进该项目。
- 可用的商店:带实时计数的筛选、会改价的商品规格、带免运费进度的迷你购物车、优惠码、演示结账和订单确认。
- 39 个页面、22 张图片的示例,含复购计划器、宠物床推荐、收藏夹、养护指南和商店政策页。
适合
- 在线销售、想要一个安静可信店面的独立宠物店和宠物品牌。
- 兼卖商品、能把复购改成会员计划的宠物美容店或宠物诊所。
- 以订阅为主、想突出复购计划器的宠物食品品牌。
不适合
- 真实收款、库存或订单履约;结账只校验信息,不会扣款。
- 想要深色、俏皮或大量插画风格,而不是皇家蓝外框的商店。
- 售卖虚构的 Dunmere 商品,或把它的商品图当作自己的。
品牌建立与视觉规范电商商品上架与转化网站与数字体验Build Ecommerce Storefront风格锁定成果可编辑PetPet HeroSpringWishlist
关于此 Skill

Royal Blue Pet Store 用来搭建一个高级、完整的宠物用品商店:皇家蓝外框包住的白色站点、蓝色衬线标题、配金毛肖像的安静分栏首屏、六个分类方块、一条皇家蓝季节横幅,以及风格统一的商品抠图目录。示例是虚构的社区宠物店 Dunmere Pet Supply,共 39 个互相连通的页面,从筛选到下单确认的购物流程都能走通。

你将获得
- 一个自包含的商店文件,字体和图片都已内嵌,任何浏览器直接打开,离线也能用。如果你已有框架项目,则把设计移植进该项目。
- 可用的商店:带实时计数的分类、宠物和价格筛选,搜索与排序,切换规格会改价并显示售罄尺码的商品页,带免运费进度的迷你购物车、优惠码、演示结账和订单确认页。
- 显示下次配送日期和节省金额的复购计划器、按睡姿推荐的宠物床、收藏夹、带文章的养护指南和评价轮播。
- 关于、配送与退换、FAQ、联系、隐私、条款,以及友好的 404 页。
- 可设置货币、税费、邮编规则和配送条款,让商店适配你所在的市场。

如何使用
- 提供店名、商品及价格和尺码、分类、配送条款、营业时间和联系方式。缺少的信息会先写成合理的占位内容,并列出请你确认。
- 让 Agent 用统一光线重新拍出一套商品抠图,或发来你自己的商品照片。金毛肖像、猫咪肖像和居家场景图可以保留。
- 在桌面和手机上逐页打开,筛选商品、加入购物袋、走一遍演示结账,再提出修改。

字体为 Newsreader 与 Instrument Sans,已内嵌进文件。新的商品图由你的 Agent 自带的图像工具生成,可能产生该工具的使用费;结账流程不会真的收款。
开始前需要准备什么
- 你需要提供
- 店名、商品及价格和尺码,以及分类 · 配送条款、营业时间、联系方式和所在市场 · 你自己的商品照片,或同意生成一套新的商品目录
- 依赖项
- Agent 所在电脑需要 Node.js 18 或更高版本,用来运行随附脚本,生成单个离线网页文件 · 生成文件时需要联网,字体只下载一次并嵌入文件 · Agent 自带的图像工具或你自己的照片,用于商品抠图和店铺图片
- 外部成本
- 新的商品抠图和店铺照片由你的 Agent 自带的图像工具生成,可能产生使用费。没有图像工具时可用自己的照片;金毛、猫咪和居家场景图可以保留。浏览示例不产生费用,结账也不会扣款。
- 最近实测
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…









