網站與 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 與原始碼下載依所列權益開放。