全部文章

案例研究:Claude 一次生成的电影感餐厅网站

“Ogień i Zioła”(火与香草)是一家位于波兹南的虚构波兰餐厅,它的网站完全由 Claude 根据一条提示词生成,并在 Hostilo 上发布,没有任何修改。与我们的俄罗斯方块案例不同,那个项目需要几轮修正才把逻辑做对,而这个项目一次就成功了。下面是完整的提示词,以及这种差异为何重要。

需求

目标是一个高端、杂志风格的餐厅网站:全屏电影感首屏、固定导航栏、品牌故事区、四个分类的交互式菜单标签、主厨介绍、带真实表单校验的预订组件、纯 CSS 图库、营业时间与地址、精致的邮件订阅和页脚。全部放在一个 HTML 文件中,不使用外部库、不使用图片、没有后端。

完整提示词(复制下来亲自试试)

下面是发送给 Claude 的完整、未经修改的英文原版提示词。之后没有追加任何内容,最终网站就是由它生成的:

Create a visually stunning single-file HTML website for an imaginary modern Polish restaurant in Poznań called “Ogień i Zioła”. The site should feel cinematic, elegant, warm and premium. It will be used as a Hostilo case study to demonstrate that a beautiful restaurant website can be created and published instantly without WordPress, plugins or a backend. Include: - Full-screen hero with a dark editorial design and food-inspired visual composition made with CSS - Sticky navigation with smooth scrolling - Story section about the restaurant and local ingredients - Interactive menu tabs: Starters, Main Courses, Desserts, Drinks - Chef profile section - Reservation widget with date, time, guest count and confirmation state - Image gallery using CSS-generated visual placeholders - Opening hours, location and contact area - Elegant newsletter signup - Premium footer Technical requirements: - Return only one fully working HTML file - All CSS and JavaScript must be embedded in the file - Do not use external libraries, images or APIs - Use CSS gradients, shapes and layout techniques to create rich visual placeholders - Add subtle motion, reveal animations, hover effects and a mobile-friendly menu - The reservation form must validate required fields and show a realistic success message - Use polished English copy and avoid lorem ipsum - Include “Published with Hostilo” discreetly in the footer

在线示例

查看效果:restauracja.hostilo.page

为什么一次就成功了

我们的俄罗斯方块案例需要几轮修正:真正的交互逻辑(碰撞检测、旋转、计分)存在许多只有运行代码时才会暴露的边界情况。餐厅网站则是另一类项目:内容和布局多,逻辑少。它仅有的交互部分,即标签切换和表单校验,都是简单、成熟的模式,任何优秀的模型都能稳定实现。

提示词本身也起了很大作用。它明确列出了每个板块,而不是笼统地描述网站;一开始就说明技术限制(单文件、无外部库、无图片、无 API);并且指定了风格基调(“电影感、优雅、温暖、高端”),而不是让风格靠猜。内容充实的需求、明确的限制和清晰的基调,这一组合正是我们的单文件提示词指南中介绍的模式。

从 Claude 到在线链接

无论生成的页面多么复杂,发布步骤都与本博客中其他示例完全相同:从 Claude 复制完整 HTML,粘贴到 Hostilo 编辑器,点击保存。网站立即上线,动画、标签逻辑和表单校验都不需要构建步骤或额外的托管配置,因为它们都只是同一个文件中的 HTML、CSS 和 JavaScript。

结论

并非所有 AI 生成的项目都需要迭代,也并非都能免于迭代,这取决于你的需求。视觉丰富、以内容为主、交互简单标准(标签、表单、平滑滚动)的页面,通常一次就能成功,尤其是在提示词详细且结构清晰的情况下。带有真实逻辑的项目,如游戏、计算器以及任何有状态和边界情况的东西,更可能需要几轮修改。无论哪种情况,只要代码能正常运行,发布本身都只是一个快速的步骤。

常见问题

这个餐厅网站是用哪个 AI 工具做的?
Claude,仅凭一条详细的提示词。完整提示词见本文。

需要修改吗?
不需要。与俄罗斯方块案例不同,这个网站第一次就运行正常,没有追加任何提示词。

Ogień i Zioła 是真实的餐厅吗?
不是。这是一家虚构的餐厅,用来展示一条 AI 提示词能为视觉丰富、内容充实的网站做到什么程度。

预订表单真的能订座吗?
不能。它会校验必填字段并显示逼真的成功提示,全部在浏览器中完成。背后没有后端或真实的预订系统,因为提示词没有要求。

为什么这个一次成功,而俄罗斯方块需要多次迭代?
这个项目以内容和布局为主,交互很简单(标签切换、表单校验);而俄罗斯方块涉及真正的游戏逻辑,有碰撞检测等边界情况。逻辑复杂的项目通常比视觉类项目需要更多迭代。

准备好让你的 AI 网站上线了吗?

粘贴 AI 生成的代码,点击保存,不到一分钟即可获得带 HTTPS 的在线链接。免费开始,无需信用卡。

免费发布你的网站

更多博客文章