主题 · 公司网站 · 入门

餐厅网站

餐厅网站 = 带预订按钮的导航、温暖的品牌主视觉、菜单分类胶囊，以及含价格与描述的菜品卡。

直达修改 Prompt →

Modern Mediterranean

Dinner, served slow.

Wood-fired plates and natural wine in the old town.

StartersMainsDessertsWine

Burrata & Peach$16★ 4.9Creamy burrata, white peach, basil oil

Wood-fired Branzino$34★ 4.8Whole fish, lemon, charred fennel

Pistachio Tart$12★ 4.9Sicilian pistachio, honey, sea salt

Heirloom Tomato$14★ 4.7Tomato, stracciatella, olive

Lamb Shoulder$38★ 4.9Slow braise, mint, yogurt

Olive Oil Cake$11★ 4.8Lemon, ricotta, berry

Date

Sep 24, 2026

Time

19:30

Party

2 guests

怎么向 AI 描述它

Build a warm restaurant website for a modern Mediterranean bistro called "Olive & Vine".

STYLE
- Warm off-white #faf6f1 page, ink #1d1d1f text, terracotta accent #c8642a
- Soft 10px radii, hairline #ececf0 borders, generous whitespace
- System sans; the accent appears only on the primary button and prices

LAYOUT
- Top bar: "Olive & Vine" wordmark left, links Menu / Reservations / About, a pill "Book a table" button right
- [tall] Hero: kicker "Modern Mediterranean", headline "Dinner, served slow.", one supporting line, and a "Reserve a table" button
- A single row of menu category pills: Starters (active), Mains, Desserts, Wine
- A dish grid (3 across desktop): each card has a dish name, a price, and a one-line description
  - Burrata & Peach — $16 — Creamy burrata, white peach, basil oil
  - Wood-fired Branzino — $34 — Whole fish, lemon, charred fennel
  - Pistachio Tart — $12 — Sicilian pistachio, honey, sea salt
- [tall] A reservation panel: Date, Time, Party size fields and a "Confirm" button
- [tall] Footer: "© 2026 Olive & Vine" + Hours · Location · Menu

COMPONENTS
- Navbar, button, card, input
- Dish card: name, price (accent), description (2-line clamp)

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the menu category pills and the dish grid.

CHANGES
- Rename categories to Antipasti, Primi, Secondi, Dolci
- Add two more dishes so the grid shows five across on desktop
- Mark one dish as "Chef's pick" with a small badge

DO NOT
- Do not touch the hero or the reservation panel
- Do not change the column count behaviour

Build a warm, accessible restaurant website for "Olive & Vine" (modern Mediterranean bistro).

STYLE
- Off-white #faf6f1 base, #1d1d1f ink, terracotta #c8642a accent, hairline #ececf0
- 10px radii; system sans; type scale 9/10/11/12/14/18px
- The accent is reserved for the primary button and prices

LAYOUT
- Sticky top bar: wordmark, Menu / Reservations / About, pill "Book a table"
- Hero (tall pages): kicker, headline "Dinner, served slow.", subline, "Reserve a table"
- Menu category pills: Starters (active), Mains, Desserts, Wine
- Dish grid (3 across desktop, 2 tablet, 1 mobile): name, price, 2-line description
  - Burrata & Peach $16 / Wood-fired Branzino $34 / Pistachio Tart $12
  - Heirloom Tomato $14 / Lamb Shoulder $38 / Olive Oil Cake $11
- Reservation panel: Date, Time, Party size + Confirm
- Footer: copyright + Hours · Location · Menu

COMPONENTS
- Navbar, button, card, input, badge, link
- The whole dish card is a button, not a nested link

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Full keyboard focus rings; every icon-only control has an aria-label
- prefers-reduced-motion: hovers settle instantly

MOTION
- Card hover: 120ms ease-out lift (translateY -2px) + soft shadow
- No autoplaying carousels on a restaurant page

修改类 Prompt 只动目标，不碰页面其余部分。

提示

强调色只用在「预订」动作和价格上，其余交给照片与留白。菜品描述限两行，保证卡片等高。

另见

组件

导航栏→按钮→卡片→输入框→

风格

极简→有机→新拟态→

主题

SaaS 定价页→Spotify 风音乐播放器→

餐厅网站

Dinner, served slow.

提示

另见

组件

动画

风格

主题

Prompt

术语

反模式