昨天我們從「我想做一個收藏網站的網頁」這句簡單的想法出發，讓 AI 幫忙整理出新增、刪除、搜尋、分類和資料保存等基本需求。

既然需求已經確定，今天終於可以開始寫程式了。

不過這次的目標不是一口氣完成所有功能，而是先讓 AI 幫我們做出第一版看得見的網頁介面（UI）。

畢竟如果連畫面都還沒確定，就急著把所有功能寫完，之後想調整版面時，反而可能要修改更多東西。

先把需求交給 Agent

這次使用前面介紹過的 Coding Agent，建立一個名為 BookmarkManager 的資料夾，然後直接交給它以下 Prompt：

請幫我建立一個簡單的網站收藏管理器，使用 HTML、CSS 和原生 JavaScript，不使用任何框架。

今天先完成網頁 UI，不需要實作新增、刪除、搜尋等功能。

畫面需要包含網站標題、網站名稱與網址輸入框、分類選單、新增按鈕、搜尋欄位，以及顯示收藏網站的卡片區域。

整體使用簡潔的卡片式設計，並支援手機與電腦畫面。請將 HTML、CSS、JavaScript 分成不同檔案，不要加入後端或第三方套件。

這次特別強調「先完成 UI」，就是希望 Agent 不要太熱心，一口氣把後面幾天的功能也全部寫完。

看看 AI 產生了什麼

按照需求，專案預計會有三個檔案：

BookmarkManager/
├── index.html
├── style.css
└── script.js

其中 index.html 負責網頁結構，例如新增收藏的表單：

<section class="add-bookmark">
    <h2>新增收藏</h2>

    <input type="text" id="siteName"
           placeholder="網站名稱">

    <input type="url" id="siteUrl"
           placeholder="https://example.com">

    <select id="category">
        <option value="工作">工作</option>
        <option value="學習">學習</option>
        <option value="娛樂">娛樂</option>
    </select>

    <button id="addButton">新增收藏</button>
</section>

接著再準備搜尋欄位和收藏卡片區域：

<input type="text" id="searchInput"
       placeholder="搜尋收藏網站...">

<div id="bookmarkList">
    <div class="bookmark-card">
        <h3>GitHub</h3>
        <p>分類：學習</p>
        <a href="https://github.com"
           target="_blank" rel="noopener noreferrer">
            前往網站
        </a>
        <button>刪除</button>
    </div>
</div>

這裡先放一張 GitHub 的範例卡片，讓畫面不會空空的。至於真正新增或刪除收藏的功能，就留到明天再處理。

CSS 的部分也不用自己從零慢慢調整，可以讓 Agent 先產生基本樣式：

body {
    font-family: Arial, sans-serif;
    background: #f5f6fa;
    margin: 0;
    padding: 30px;
}

.bookmark-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

上面只節錄幾個比較重要的部分，完整的版面配置、按鈕樣式和響應式設計都可以交給 Agent 處理。

第一版不滿意，就繼續調整

產生完成後，直接用瀏覽器開啟 index.html，就能查看第一版畫面。

如果覺得卡片太擠、按鈕太小，或是整體顏色不太喜歡，也不用急著自己打開 CSS 一行一行修改。

可以繼續告訴 Agent：

目前的版面有點擁擠，請增加卡片之間的間距，並讓新增按鈕更明顯。只修改畫面樣式，不要新增功能。

這其實就是 Day 6 介紹過的迭代式 Prompt：先做出一個能看的版本，再慢慢調整成自己想要的樣子。

今天完成後，雖然畫面上已經有輸入框和按鈕，但它們還沒有真正的功能。按下「新增收藏」也不會發生什麼事。

不過這正是我們今天預期的結果。