网站与 UI 设计 Prompt 示例

包豪斯首屏：信息与行动

Design a Bauhaus-inspired hero for a fictional poster studio called Form Study.
Goal: help visitors understand the studio and follow “View the collection” to #collection.
Use one supplied poster placeholder, a compact geometric heading and a red accent.
Keep the offer readable before introducing decorative circles or rules.
At 390 px, stack the poster and text; keep the action visible and use readable contrast.
Use semantic headings, visible keyboard focus and a reduced-motion alternative.
Do not invent awards, customer logos, order counts or a working checkout.
Return the section structure and explain which parts still need implementation.

瑞士风格定价：清晰比较

Design a Swiss-minimalist pricing comparison for a fictional planning app.
Use this labelled demonstration data only: Draft $12/month and Team $28/month,
both USD. These are fictional example prices, not Neruve prices.
Draft includes personal notes; Team adds shared notes and team comments.
Use aligned labels and a clear type scale; do not rely on color alone for differences.
At 320 px, stack cards and keep every price and feature readable.
Buttons link to #plan-details, not a real checkout. Do not invent discounts,
payment processing, trials or annual prices. Mark the entire section as a demo.

新粗野主义仪表盘：控件与状态

Design a neo-brutalist task dashboard for a fictional studio project.
Use bold outlines and one accent without overwhelming the status information.
Include search, a status filter and a task list with title, owner and due date.
Label the data as fictional. Define loading, empty, filtered-empty and error states.
If this is a concept, annotate how each control should behave instead of claiming
it is connected to an API. If implementing, use the existing project contracts.
At 390 px, retain task names and status labels; do not hide necessary fields.
Check keyboard focus and readable contrast. Do not invent productivity metrics.

奢华风格产品页：保留事实

Design a restrained luxury product page for a fictional ceramic lamp, Still One.
Use warm neutrals, generous spacing and a clearly labelled placeholder photo.
Demonstration facts: $180 USD, matte ceramic base, replaceable LED bulb,
30 cm height. These are fictional facts, not a real offer.
Show dimensions, materials and care near the main product image.
Represent the purchase area as a labelled concept; do not connect payments.
For an existing store, preserve its real price, stock, variants and cart contract.
At 390 px, keep product facts near the image and the action easy to reach.
Do not invent stock urgency, reviews, shipping promises or sustainability claims.

这些示例是免费的、实测结果，还是模板配套 Prompt？

四组 Prompt 都是免费原创输入练习。下方 Form Study Hero 实现附浏览器检查；其余示例仍是建议输入。模板 Prompt 与源码下载按所列权益开放。