
效果预览
相似 Skill
查看全部 Skills你将获得
- 完整的品牌商店:首页、商品、系列和食谱页、品牌故事、带地图的门店查询、批发、FAQ、配送、联系、订阅、购物袋、结账和法律页面
- 网格纸视觉:带细网格线的暖色纸面、粗重窄体标题、按口味着色的描边卡片、带贴纸的五张照片扇形 Hero,以及钴蓝页脚大字标
- 能用的购物细节:带免运费进度条的购物袋抽屉、规格与订阅定价、搜索、筛选、食谱份量换算,以及带校验的结账
适合
- 想要贴纸加纸盒式欢快个性的燕麦饮、果汁、咖啡、茶、康普茶或零食品牌
- 需要把商店、食谱或使用仪式、门店和支持页面做成一整套的小型消费品牌
- 想在接入真实支付前先有一个可信的店铺演示,或者想把设计移植进自己项目的创始人
不适合
- 安静奢华或偏企业风的品牌:粗窄体字、贴纸和口味配色刻意热闹俏皮
- 现在就需要真实支付、账号或订单配送的店铺:购物袋和结账只在页面内确认,并注明没有扣款
- 单屏预告页:这个 Skill 会搭一整个连通的网站,只做一个落地区块会浪费大半
品牌建立与视觉规范网站与数字体验Build Brand Site风格锁定成果可编辑Oat FanOat HeroOat RecipesOat Story
关于此 Skill

Grid-Paper Beverage Brand Site 在暖色网格纸上搭一个完整、可购物的品牌网站:粗重的窄体标题、描边卡片、贴纸点缀,每种口味一种俏皮配色。每个链接都通向一张设计完整的页面,购物袋、搜索和表单都有真实反馈。示例是虚构的燕麦饮品牌 Oat Parade,共 34 个互相连通的页面。

你将获得
- 构图多样的首页:照片扇 Hero、口味滚动条、带筛选的商品栏、品牌故事分栏、数据便当格、从田间到冰箱的流程、食谱便当格、用户评价、FAQ、门店查询和订阅区
- 每个商品、系列和食谱都有详情页,另有品牌故事、带地图的门店查询、批发、FAQ、配送、联系、购物袋、结账、隐私、条款和 404 页面
- 购物交互:可调数量并显示免运费进度的购物袋抽屉、规格与订阅价格、搜索、收藏、食谱份量换算,以及带校验的结账
- 每个主题一张、统一美术方向的照片,连同字体一起嵌入一个离线可用的文件

如何使用
- 提供品牌名、一句话卖点、带价格和规格的商品、购买方式,以及品牌故事。
- Agent 把口味、食谱和门店映射到你的业务,生成照片,并填满每个页面。
- 打开文件,在电脑和手机上把商店、购物袋和食谱点一遍,用大白话提出修改。

照片由 Agent 自带的生图工具生成(可能产生该工具的用量费用),也可以用你自己的图库。在接入真实服务之前,购物袋和结账不会扣款,也不会发送任何内容。
开始前需要准备什么
- 你需要提供
- 品牌名、一句话卖点和目标用户 · 商品名称、价格、规格,以及每款的不同之处 · 购买方式(线上、门店、批发、订阅)、品牌故事,以及配送和联系信息
- 依赖项
- Agent 所在电脑需要 Node.js 18 或更高版本,用来运行随附脚本,生成单个离线网页文件 · 生成文件时需要联网,字体只下载一次并嵌入文件 · Agent 里的生图工具,用来生成商品、食谱和品牌故事照片(如果你自己提供照片则可不用)
- 外部成本
- 商品、食谱和品牌故事照片由 Agent 自带的生图工具生成,可能产生该工具的用量费用。你也可以直接提供自己的照片。除此之外不使用任何付费服务。
- 最近实测
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
用户评价
评价加载中…








