在專案開發初期，最耗時的部分往往是建構使用者介面（UI）和程式架構。今天，我們將探討如何善用 Cursor 的 AI 功能，來加速這個過程，快速建立起專案的骨架，讓你把心力集中在核心功能上。

為什麼原型開發需要 AI？

傳統上，當你需要一個新的 UI 頁面或功能時，你可能得從零開始：

• 搜尋範例程式碼： 在 Stack Overflow 或 GitHub 上大海撈針，尋找相似的程式碼片段。
• 手動編寫： 從頭手寫 HTML、CSS 和 JavaScript，或者依賴框架提供的樣板。
• 調整與整合： 花大量時間調整樣式、整合 API 呼叫，並確保所有元件都能順暢運作。

Cursor 的 AI 功能，例如 AI Chat 和 Code Generation，能夠大幅簡化這些步驟。你只需要用自然語言描述你的需求，AI 就能幫你產生結構清晰、功能完整的程式碼，省去繁瑣的手動編寫過程。

實戰演練：產生一個登入頁面

我們將以一個常見的登入頁面為例，展示如何用 AI 來快速建立 UI 骨架。

步驟 1：提出需求

打開 Cursor，在 AI Chat 面板中，輸入你的需求。越具體越好，這樣 AI 產生的結果會更精確。

幫我用 React 和 Tailwind CSS 寫一個現代感的登入頁面。它應該包含：
1. 兩個輸入框，分別用於「電子郵件」和「密碼」。
2. 一個「登入」按鈕。
3. 在頁面中央顯示，並有簡單的陰影效果。
4. 輸入框和按鈕要有 hover 效果。

2. AI 生成程式碼

提交你的請求後，AI 會快速生成 HTML（或 JSX）和 CSS 程式碼。你可能會得到類似以下的程式碼：

JavaScript

// App.js
import React, { useState } from 'react';

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = (e) => {
    e.preventDefault();
    console.log('Email:', email);
    console.log('Password:', password);
    // 這裡可以加入 API 呼叫的邏輯
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="w-full max-w-sm p-8 space-y-6 bg-white rounded-xl shadow-lg">
        <h2 className="text-2xl font-bold text-center text-gray-800">登入</h2>
        <form onSubmit={handleLogin} className="space-y-4">
          <div>
            <label htmlFor="email" className="sr-only">電子郵件</label>
            <input
              type="email"
              id="email"
              name="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="電子郵件"
              required
              className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 hover:border-blue-400 transition-all"
            />
          </div>
          <div>
            <label htmlFor="password" className="sr-only">密碼</label>
            <input
              type="password"
              id="password"
              name="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="密碼"
              required
              className="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 hover:border-blue-400 transition-all"
            />
          </div>
          <button
            type="submit"
            className="w-full p-3 text-white bg-blue-500 rounded-md font-semibold hover:bg-blue-600 transition-colors"
          >
            登入
          </button>
        </form>
      </div>
    </div>
  );
};

export default LoginPage;

3. 調整與優化

AI 生成的程式碼通常已經可用，但可能還需要根據你的專案風格進行微調。你可以在 Cursor 中直接修改這些程式碼，或者繼續用 AI 進行優化。例如，你可以再次在 AI Chat 中提出：

幫我在登入頁面中加入一個「忘記密碼」的連結。

AI 會在現有的程式碼基礎上，幫你插入新的功能，節省你手動尋找合適位置和編寫程式碼的時間。

簡單產生統一 UI 樣式提示 (Prompts)

除了單獨的 UI 元件，你還可以透過提供更具體的「風格提示」，讓 AI 產生符合專案整體視覺風格的程式碼。這能幫助你在一開始就建立統一的設計語言，避免後續花時間進行樣式重構。

你可以透過Cursor去讓他根據網站內容去產生一個適合的UI Prompt，或者是色系去做調整，總之建議是先用AI產生UI風格Prompt，再透過此Prompt同步整個專案樣式，並做成規範。

例如（我每次下的都不一樣，但大概是這樣）

根據此專案內容，產生適合的UI樣式Prompt

以下是一些實用的 UI/UX 風格提示範例，你可以直接在 Cursor 的 AI Chat 中使用。請注意，這些提示僅供參考，你可以根據實際需求調整。

1. 極簡單色設計 (Minimalist Monochrome Design)

適用於設計極簡、專業的網站或應用程式介面。

Design a clean, minimalistic UI/UX for a modern web application. The website should use a monochromatic color scheme ranging from deep black (#000000) to pure white (#FFFFFF), incorporating various shades of gray for depth and contrast. Focus on a sleek and elegant visual hierarchy with plenty of white space, clear typography (preferably sans-serif), and intuitive navigation. The layout should be responsive and optimized for both desktop and mobile experiences.

Key Features:
- Monochrome palette: black, white, and grayscale only
- Flat design with subtle shadows or borders to separate elements
- Minimal iconography, avoiding color unless for status indicators (optional: soft gray or pure white icons)
- Use clean lines, grid-based layouts, and balanced spacing
- Prioritize usability and user flow — every element should have a clear purpose
- Avoid unnecessary visual clutter or gradients
- Typography: modern, sans-serif (e.g., Inter, Helvetica Neue, or SF Pro Text)
- Button states should be clearly indicated via contrast changes (e.g., black background with white text for hover)
- Include sections such as header, hero area, content blocks, card components, and footer
- Use Apple-like minimalism and Swiss design principles as inspiration. Ensure the design feels professional, spacious, and readable.

2. 自然風格設計 (Natural & Organic Design)

適用於設計環保、有機或自然主題的品牌網站。

Plaintext

Create an eco-friendly and natural-themed website UI. The design should use an organic color palette of earthy tones, such as soft browns, muted greens, and warm off-whites. Implement rounded corners and a soft, inviting feel to the components. The typography should be friendly and readable, using a blend of serif and sans-serif fonts. Use textures or subtle background patterns that evoke a natural feel.

Key Features:
- Earthy color palette: warm browns, muted greens, terracotta, beige
- Rounded edges and soft, organic shapes for UI elements
- Subtle use of texture or natural patterns in the background
- Typography: friendly, readable fonts (e.g., Lora for headings, Lato for body text)
- Incorporate natural imagery (e.g., leaves, wood grain, or soft light)
- Use smooth transitions and subtle animations to enhance the user experience
- Emphasize sustainability and calm in the overall design

3. 炫酷效果 UI/UX 設計 (Futuristic & Dynamic UI/UX)

適用於創建具有未來感和視覺衝擊力的界面設計。

Design a futuristic and high-tech UI with a focus on visual impact. The design should use a dark theme, a deep navy or black background, and vibrant neon accent colors (e.g., electric blue, magenta, or lime green). Incorporate subtle glowing effects, particle animations, and geometric shapes to create a sense of depth and motion. The typography should be bold and technological.

Key Features:
- Dark theme with a black or deep navy background
- Bright, neon accent colors for key elements (buttons, highlights)
- Use of glow effects, linear gradients, and subtle blurs
- Geometric shapes and sharp lines for a techy feel
- Bold, futuristic fonts (e.g., Orbitron, Montserrat)
- Animated elements: particles, pulsing glows, subtle motion effects
- Prioritize visual hierarchy with contrasting colors and dynamic layouts

4. 極簡網站著陸頁設計 (Minimalist Landing Page)

適用於創建簡潔有效的產品著陸頁。

Generate a minimalist landing page focused on a single product. The design should be extremely clean and simple, with a large, centered hero section that includes a compelling headline, a brief one-sentence description, and a single, prominent Call-to-Action (CTA) button. Use a clean sans-serif font and a color palette with plenty of white space.

Key Features:
- Focused layout with minimal distractions
- Centralized hero section with headline and CTA
- Ample white space around all elements
- Clean, readable typography
- A single, bright accent color for the CTA button to make it stand out
- No unnecessary sections, navigation, or visual clutter

可以從此網站獲得各個Prompt

快速建立專案架構（Project Scaffolding）

除了 UI 元件，你也可以用 Cursor 的 AI 來建立整個專案的檔案架構。當你開始一個新專案時，可以向 AI 描述你的專案需求：

我需要建立一個後端 API 專案，使用 Node.js、Express 和 MongoDB。
請幫我建立基本的資料夾結構：
- `controllers`
- `models`
- `routes`
- `services`
並在每個資料夾內建立一個基本的檔案，例如在 `routes` 資料夾中建立 `authRoutes.js`。

Cursor AI 可以根據你的描述，自動創建這些資料夾和檔案，並在其中填入基本的樣板程式碼。這一步能讓你從一開始就遵循良好的架構，避免事後重構的麻煩。

總結

Cursor 的 AI 輔助開發，在原型階段就像是你的專屬開發助手。 它能夠：

• 快速生成 UI 元件： 幾秒鐘內產生功能完整的 UI 程式碼，省下手動編寫的時間。
• 建立專案骨架： 根據你的需求，自動生成符合良好實踐的檔案和資料夾結構。
• 即時修改與優化： 你可以不斷地與 AI 互動，進行微調和新增功能，而無需離開你的開發環境。

善用這些功能，能讓你將原本需要數小時甚至數天的工作，壓縮到短短幾分鐘內完成。從明天開始，我們將深入探討如何利用 Cursor 的其他強大功能，來處理更複雜的程式碼邏輯和專案管理。