“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
无论生成的页面多么复杂,发布步骤都与本博客中其他示例完全相同:从 Claude 复制完整 HTML,粘贴到 Hostilo 编辑器,点击保存。网站立即上线,动画、标签逻辑和表单校验都不需要构建步骤或额外的托管配置,因为它们都只是同一个文件中的 HTML、CSS 和 JavaScript。
结论
并非所有 AI 生成的项目都需要迭代,也并非都能免于迭代,这取决于你的需求。视觉丰富、以内容为主、交互简单标准(标签、表单、平滑滚动)的页面,通常一次就能成功,尤其是在提示词详细且结构清晰的情况下。带有真实逻辑的项目,如游戏、计算器以及任何有状态和边界情况的东西,更可能需要几轮修改。无论哪种情况,只要代码能正常运行,发布本身都只是一个快速的步骤。
常见问题
这个餐厅网站是用哪个 AI 工具做的?
Claude,仅凭一条详细的提示词。完整提示词见本文。
需要修改吗?
不需要。与俄罗斯方块案例不同,这个网站第一次就运行正常,没有追加任何提示词。
Ogień i Zioła 是真实的餐厅吗?
不是。这是一家虚构的餐厅,用来展示一条 AI 提示词能为视觉丰富、内容充实的网站做到什么程度。