
效果预览
相似 Skill
查看全部 Skills你将获得
- 一个自包含网站文件,字体和图片已内嵌,任何浏览器打开、离线可用;已有框架项目时则移植进该项目。
- 可用的电商流程:带规格的商品页、订阅箱搭配器、购物袋抽屉、带配送范围校验的结账预览和门店地图。
- 标志性的首屏、飘带、波浪和照片拼贴见于 28 个页面、17 张图片的示例,另含故事、果农、日志、配送、FAQ 和政策页。
适合
- 在线销售、想要一个阳光明快店面的果汁、咖啡、茶饮和零食品牌。
- 按固定区域配送或经营订阅箱的本地手作品牌。
- 能把商店改成菜单、把门店查找改成单店到访信息的咖啡馆和面包店。
不适合
- 真实收款或订单履约;结账只校验信息,不会扣款。
- 需要深色、极简或企业感,而不是渐变和飘带风格的品牌。
- 售卖虚构的 Halcy 商品,或把它的瓶身插画当作自己的。
品牌建立与视觉规范网站与数字体验Build Brand Site风格锁定成果可编辑Juice CollageJuice HeroJuice RibbonJuice Wave
关于此 Skill

Gradient Juice Brand Site 用来为饮品、食品或生活方式品牌搭建一个明快的品牌兼商店网站:满屏渐变背景的广告大片里有人正举着你的瓶子喝饮料,奶油色文字飘带沿曲线缓缓流动,区块之间以波浪边衔接,再配上鲜亮的照片拼贴。示例是虚构的冷压果汁品牌 Halcy,位于加州文图拉,共 28 个互相连通的页面,商店、订阅箱搭配器和结账预览都能操作。

你将获得
- 一个自包含的网站文件,字体和图片都已内嵌,任何浏览器直接打开,离线也能用。如果你已有框架项目,则把设计移植进该项目。
- 完整的商店:六个带规格和实时价格的商品页、系列页、每周订阅箱搭配器、购物袋抽屉、带配送范围校验的结账预览,以及如实的完成页。
- 品牌页面:品牌故事、可按月份切换的果农页、四篇文章的日志、带地图的门店查找、配送与回收、可搜索的 FAQ、联系、通讯订阅、政策条款和精心设计的 404 页。
- 全站统一的配图方向:同一瓶型、同一光线的商品静物图,以及阳光明媚的生活场景。
- 飘带文字缓慢流动、首屏快速入场、区块平静显现,开启减少动态时全部暂停。

如何使用
- 提供品牌、商品及价格和规格、配送区域和时间、品牌故事和联系方式。缺少的文案会先写成合理的占位内容,并列出请你确认。
- 让 Agent 生成一张瓶身印着你品牌名的新首屏大片,以及每款商品在同一光线下的静物图,或发来你自己的照片。包里两张中性的饮品场景图可以保留。
- 在桌面和手机上逐页打开,加购商品、搭配订阅箱、试一遍结账预览,再提出修改。

字体为 Bricolage Grotesque、Figtree 和 DM Serif Display,已内嵌进文件。新图片由你的 Agent 自带的图像工具生成,可能产生该工具的使用费;结账流程不会真的收款。
开始前需要准备什么
- 你需要提供
- 品牌名、商品及价格和规格,以及一段品牌故事 · 市场信息:货币、配送区域或快递方式,以及联系方式 · 你自己的商品和团队照片,或同意生成新图片
- 依赖项
- Agent 所在电脑需要 Node.js 18 或更高版本,用来运行随附脚本,生成单个离线网页文件 · 生成文件时需要联网,字体只下载一次并嵌入文件 · Agent 自带的图像工具或你自己的照片,用于首屏大片和商品图
- 外部成本
- 首屏大片和商品静物图由你的 Agent 自带的图像工具生成,可能产生使用费。没有图像工具时可用自己的照片;两张中性饮品场景图可以保留。浏览示例不产生费用,结账也不会扣款。
- 最近实测
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…








