本地咖啡店官网

只读案例

适合独立精品咖啡店的门店官网。

AI 对话 · Agent
生成一个咖啡馆官网 需要的图片你自己去生成
图片生成完成
咖啡馆 Hero 图
咖啡馆 Hero 图
A warm and cozy coffee shop interior, rustic wooden tables, soft warm lighting, barista working behind the counter, espresso machine visible, hanging pendant lights, minimal yet inviting atmosphere, photorealistic style, commercial photography quality, 16:9 aspect ratio, suitable for a cafe website hero banner
手冲咖啡特写
手冲咖啡特写
Close-up of a beautifully crafted latte art in a ceramic cup on a wooden table, soft morning sunlight streaming through a window, coffee beans scattered nearby, warm brown tones, shallow depth of field, photorealistic food photography, cozy cafe vibe
咖啡豆与烘焙
咖啡豆与烘焙
Freshly roasted coffee beans spilling from a burlap sack onto a rustic wooden surface, roasting equipment in the blurred background, rich dark brown colors, steam rising subtly, artisan coffee roastery atmosphere, warm lighting, photorealistic product photography
甜点陈列
甜点陈列
A display case filled with assorted fresh pastries and desserts - croissants, cakes, muffins, on a cafe counter, soft natural lighting, inviting and delicious looking, shallow depth of field focusing on the pastries, warm golden tones, commercial food photography style

我来先生成咖啡馆官网所需的图片资产,然后创建项目。先启动图片生成:

图片已生成,现在开始创建项目。

现在来检查项目结构是否完整:

项目结构完整:package.jsonrsbuild.config.tsindex.htmlsrc/main.tsxsrc/App.tsxsrc/styles.css 都已就绪,所有本地 import 均已闭合。

咖啡馆官网已经生成完成,项目已成功启动。你可以在右侧 Preview 中查看和交互。

网站包含以下板块:

  • 导航栏 — 固定顶部,带毛玻璃效果,移动端可展开菜单
  • Hero 首屏 — 全屏大图 + 渐变遮罩,主打文案和双 CTA 按钮
  • 关于我们 — 左图右文,附带产地直供/店内烘焙/专业团队/环保理念四个特色
  • 精选菜单 — 6 款产品卡片,含拿铁、手冲单品、摩卡、抹茶拿铁、冷萃、可颂三明治
  • 空间展示 — 4 格图片画廊,悬停有放大效果
  • 顾客评价 — 3 条真实感评价卡片,带星级和用户头像
  • CTA 号召 — 全宽背景图 + 暗色遮罩,引导预约
  • 页脚 — 品牌信息、快速链接、联系方式、社交媒体

所有图片均为已生成的实拍风格咖啡主题图片,整体采用温暖的大地色系,配合衬线字体标题,营造舒适优雅的咖啡馆氛围。