主题 · 公司网站 · 入门

房产列表

房产列表 = 带筛选的搜索栏、含价格与规格的房源卡网格，以及地图与经纪面板。

直达修改 Prompt →

Find your next place

Homes you'll actually want to come back to.

Verified listings, virtual tours, and a local agent in every neighborhood.

City, neighborhood, or ZIP… HouseApartmentLand

$685,0003 bd · 2 ba · 1,420 sqft14 Maple St

$1.2M4 bd · 3 ba · 2,300 sqft88 Cedar Ave

$540,0002 bd · 1 ba · 980 sqft5 Birch Ln

$920,0003 bd · 2 ba · 1,760 sqft21 Oak Dr

$465,0001 bd · 1 ba · 720 sqft3 Elm Ct

$1.45M5 bd · 4 ba · 3,100 sqft9 Pine Hill

●

JJordan ReyesListing agent

怎么向 AI 描述它

Build a clean real-estate listings site for a brokerage called "Haven".

STYLE
- Airy #f4f6f8 page, ink #1d1d1f text, green accent #1f7a5c
- White cards, hairline #ececf0 borders, 10px radii, generous whitespace
- System sans; the accent appears on the primary button and the active filter

LAYOUT
- Top bar: "Haven" wordmark left, links Buy / Rent / Sell, a pill "List property" button right
- A search row: a rounded search field ("City, neighborhood, or ZIP…") and filter pills House (active), Apartment, Land
- A property grid (3 across desktop): each card has a photo block, a price, a specs line (beds · baths · sqft), and an address
  - $685,000 — 3 bd · 2 ba · 1,420 sqft — 14 Maple St
  - $1.2M — 4 bd · 3 ba · 2,300 sqft — 88 Cedar Ave
  - $540,000 — 2 bd · 1 ba · 980 sqft — 5 Birch Ln
- [tall] A map panel (with a location pin) beside an agent card: avatar "J", "Jordan Reyes", "Listing agent", and a "Contact" button
- [tall] Footer: "© 2026 Haven" + Search · Saved · Mortgage

COMPONENTS
- Navbar, search, button, card
- Property card: photo, price (bold), meta line, address

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the property grid and the filter pills.

CHANGES
- Add a "Price" sort control to the search row
- Add two more property cards (six total on desktop)
- Show a small "New" badge on one card

DO NOT
- Do not touch the map or the agent panel
- Do not change the card anatomy (photo, price, specs, address)

Build a clean, accessible real-estate listings site for "Haven".

STYLE
- #f4f6f8 base, #1d1d1f ink, green #1f7a5c accent, white cards, hairline #ececf0, 10px radii
- System sans; type scale 9/10/11/12/14px

LAYOUT
- Sticky top bar: wordmark, Buy / Rent / Sell, pill "List property"
- Search row: search field + filter pills House (active), Apartment, Land
- Property grid (3 across desktop, 2 tablet, 1 mobile): photo, price, specs, address
  - $685,000 3bd·2ba·1,420sqft 14 Maple St / $1.2M 4bd·3ba·2,300sqft 88 Cedar Ave / $540,000 2bd·1ba·980sqft 5 Birch Ln
  - $920,000 3bd·2ba·1,760sqft 21 Oak Dr / $465,000 1bd·1ba·720sqft 3 Elm Ct / $1.45M 5bd·4ba·3,100sqft 9 Pine Hill
- Map panel + agent card (avatar, name, role, Contact)
- Footer: copyright + Search · Saved · Mortgage

COMPONENTS
- Navbar, search, button, card, link
- Property card is keyboard-focusable; the whole 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 + soft shadow
- No autoplaying map motion

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

提示

照片先用安静渐变占位，待真图到位再换。每张卡以价格起头——买家第一眼扫的就是它。

另见

组件

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

风格

极简→Material 设计→Fluent 设计→

主题

餐厅网站→SaaS 定价页→

房产列表

Homes you'll actually want to come back to.

提示

另见

组件

动画

风格

主题

Prompt

术语

反模式