Vibe Coding Adobe Edge Delivery Blocks with AI: Let the Robots Cook

style

border-bottom-glow

現在開發領域正在發生一連串的事情。

有一些 AI 傳播者要求模型將他們笨拙的 WordPress 網站轉換成 React，現在他們自以為已經大徹大悟。你有一群末日潮人，他們深信五年後沒人會寫程式，網際網路也會內爆。還有一些沉默寡言的人，他們使用 AI 在 12 分鐘內瞞著任何人出貨內部工具，提早回家。

我不屬於任何一個陣營。我的立場是：AI 是一種工具。使用它。它只是個花俏的自動完成工具，而且自以為很有能力。

這篇文章是我展示如何使用 AI 來 vibe 編碼一個新的Adobe Edge Delivery Services(EDS) 區塊，更重要的是，我如何修正它出錯的地方。

向農民學習

我在農場長大。農場的邏輯很簡單：

如果有東西壞了，你就去修。

沒有 Amazon，只有堆滿許多東西的老舊穀倉，都快傾倒了。您沒有訂購替代品的奢侈，也沒有時間學習如何製作一個完美的複製品。你隨手拿起金屬碎片、一把比內戰時還老的錘子，也許還有一些膠帶。你讓它工作。即興、適應、克服。

這就是為什麼谷倉累積了 150 年的工具和"潛在有用的" 物件。我爸爸會說"你永遠不知道什麼時候會用到"

重點來了

您不需要知道如何從頭鍛造一件器具。但您需要知道足夠的知識，以便在發生故障時修復它。

AI 產生的程式碼也是一樣。

AI 可以產生執行。您只需要對它有足夠的瞭解，就可以進行維修、調整和升級。

什麼是 Vibe Coding？

Vibe 編碼是我們都慢慢承認的工作流程：

大致描述您想要什麼 -> 讓 AI 做菜 -> 修正混亂 -> 船。

這不是"提示工程。"這不是"AI 驅動的發展。"這是字面上的氛圍 + 背景 + 品味 + 您。

我將它稱為"vibe coding" ，因為感覺上就是這樣 - 你不是在撰寫規格或遵循僵化的測試大綱。您與 AI 溝通，在那裡得到一些東西 80% ，然後運用您的判斷力和經驗讓它變得真正好。這是與非常自信但偶爾出錯的夥伴（我們兩人都是）合作的即興表演。

我的三個 Vibe 編碼規則

像教一個懂 HTML 但記憶力像金魚的人一樣解釋工作。
說話要冗長。過度解釋。假裝您正在撰寫 IKEA 說明。
讓模特做粗略的剪裁。
形狀已經存在，只需打磨即可。
使用您的實際技能修復粗略的部分。
模型終究會做出被詛咒的事情。

我在模型和代碼生成方面的經驗

我在Windsurf 中做這些，因為在同一個工作區中提示 + 程式碼是 廚師的親吻。 其他 IDE 也有內建 AI，例如Cursor或VSCode與GitHub Copilot- 挑選你喜歡的吧。Windsurf 的價格很有競爭力，而且很適合我。

Claude Sonnet 4.5：在不迷失現實的情況下，提供可用的初稿之王。由於 Sonnet 速度更快，而且能滿足我的需求，所以我沒有用 Opus 做太多測試。

GPT：非常適合自然語言任務，例如解釋事情和撰寫文件，但根據我的經驗，花費的時間太長，而且無法很好地遵循提示。

DeepSeek我相信它就像我相信廚房裡的浣熊一樣。

Grok：很有希望，但 Windsurf 還沒有圖像輸入，所以暫時擱置。

Gemini 2.5: 已嘗試。得到了這個重複："我會 把任務加入我的 TODO 清單，讓您知道我的最新進展。我會從建立檔案開始。我會先建立 blog-featured-hero.js 檔案。之後，我會建立 blog-featured-hero.css 檔案。" 。在撰寫這篇文章時，Gemini 3 還未上市，但據說它非常搶手，所以我下次一定要試試。

如果您真的想要發揮您內心的 Terry Davis，您可以使用像樣的硬體設備走自助式路線（VRAM 才是王道，但如果需要，您可以將一些處理程序卸載到 RAM 上，雖然速度會慢一點，但還是可行的）。我建議從 Ollama 開始 - CLI 或 GUI (https://ollama.com/)，在上面建立一些自訂模型 (我在使用 gemma3:27b 的自然語言任務時很順利 -https://ollama.com/library/gemma3)，並在 VS Code 中使用外掛程式，例如 Continue (https://github.com/continuedev/continue)。雖然您無法擁有嵌入式 IDE 的所有功能，但至少您知道資料的去向。不，這不是廣告。

為什麼 EDS& AI 會像 PB&J

EDS 區塊是 AI 繪圖的理想選擇，因為：

區塊就是 HTML + CSS + 虛擬 JS。
這就是 LLM 所接受的訓練。餵給他們原始的 HTML 和上下文？他們去 brrrr。
EDS 具有明確的模式。
模型的建立就是為了發現模式。這是他們的工作。
您（是的，您）可以控制最終的拋光效果。
AI 為您提供 80% 。您的大腦會給您最後的 20% ，讓您不覺得尷尬。

好的提示加上清楚的例子 = 更好的輸出。

好了，讓我們來建造這個英雄區塊

我想為我們的部落格製作一個新的部落格特色英雄區塊：

全寬背景圖片
左側的影像旋轉盤
含標題 + 副標題 + 描述 +"閱讀更多" 按鈕的模糊玻璃卡片
回應式 + 無障礙
遵循 EDS 模式，因此「未來的我」不會討厭「過去的我

以下是原始的 Document Authoring 區塊的外觀：

EDS 會將其轉換成原始的預飾 HTML，就像這樣：

<div class="blog-featured-hero block" data-block-name="blog-featured-hero" data-block-status="loaded">
    <div>
        <div>
            <picture>
                <source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                <source type="image/webp" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&amp;format=webply&amp;optimize=medium">
                <source type="image/jpeg" srcset="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                <img loading="eager" alt="" src="./media_121d14bf9bc80053370941b7efb0839f136015366.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="5464" height="3640">
            </picture>
        </div>
    </div>
    <div>
        <div>
            <p>
                <a href="/en/blog/adaptto-2025-recap" title="">
                    <picture>
                        <source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&amp;format=webply&amp;optimize=medium">
                        <source type="image/png" srcset="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
                        <img loading="lazy" alt="" src="./media_1865dd437dcdfad78f768062737744b7e4c24211b.png?width=750&amp;format=png&amp;optimize=medium" width="2862" height="1583">
                    </picture>
                </a>
            </p>
            <h3 id="">
                <picture>
                  <source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                  <source type="image/webp" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&amp;format=webply&amp;optimize=medium">
                  <source type="image/jpeg" srcset="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                  <img loading="lazy" alt="" src="./media_1b53b514e1567d66193ea852fa1dc964427605121.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="1768" height="877">
                </picture>
              </h3>
            <p>
                <picture>
                    <source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
                    <source type="image/webp" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&amp;format=webply&amp;optimize=medium">
                    <source type="image/jpeg" srcset="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=2000&amp;format=jpg&amp;optimize=medium" media="(min-width: 600px)">
                    <img loading="lazy" alt="" src="./media_1bffd036fff3f8aa249bb6d392a905e4557c465bd.jpg?width=750&amp;format=jpg&amp;optimize=medium" width="1776" height="1184">
                </picture>
            </p>
        </div>
    </div>
    <div>
        <div>
            <h3 id="recap-of-adaptto-2025---the-hard-core-aem-developers-conference"><a href="/en/blog/adaptto-2025-recap" title="Recap of adaptTo() 2025 - the hard-core AEM Developers Conference">Recap of adaptTo() 2025 - the hard-core AEM Developers Conference</a></h3>
        </div>
    </div>
    <div>
        <div>
            <p>Highlights, New Releases, and Takeaways</p>
        </div>
    </div>
    <div>
        <div>
            <p>A recap of the top sessions of the adaptTo() 2025 Conference, with everything you should catch up on to further your AEM career.&nbsp; AI refactoring for cloud migrations, Edge Workers for EDS, a replacement for the Groovy console, a deep
                dive on <a href="https://blog.arborydigital.com/en/blog/what-is-document-authoring-for-edge-delivery" title="Document Authoring (DA)">Document Authoring (DA)</a>, as well as a presentation from our own on the <a href="https://blog.arborydigital.com/en/podcast/solving-china-web-performance"
                title="China Web Performance Problem">China Web Performance Problem</a> - what are you waiting for, let's dive in!</p>
        </div>
    </div>
</div>

提示

這是我給 Claude 餵食的清理版本（包括 DA 的螢幕截圖）：

Create an Adobe Edge Delivery Services (EDS) block using vanilla JavaScript and CSS.

## Block Requirements
**Name**: blog-featured-hero
**Purpose**: Featured blog hero with background image and content overlay

## Learn from Existing Blocks
Examine css and js file in /blocks/hero/, /blocks/columns/, /blocks/blog-post-hero/,
and /blocks/carousel/ for EDS patterns.

## Raw HTML from EDS (before our JS/CSS decoration)
[raw html here]

## Your Task
Transform this raw HTML into:
- Row 1 image becomes full-width background
- Overlay container with:
  - LEFT: Row 2 images as carousel with minimal navigation icons, no background just chevrons
  - RIGHT (glass card): Row 3 Title/Link, Row 4 Subtitle, Row 5 Description,
    Button "Read More" linking to Row 3 URL

## JavaScript Requirements
Parse the block's child divs (rows) and reconstruct into the layout above.
Use vanilla JavaScript only - no frameworks.
Handle missing rows gracefully.

## CSS Requirements
- Mobile responsive (stack on small screens)
- glass background on card
- high contrast mode

Generate blog-featured-hero.js and blog-featured-hero.css files.

AI 的初稿

Claude 踢掉了兩個檔案。老實說呢？相當穩固。

好處

佈局基本正確
旋轉木馬工作
背景影像邏輯：已處理
反應堆疊：已處理

什麼需要人手

不過，它還是有問題：

視覺拋光：顏色不協調，排版也有待更新
UX 問題：旋轉盤無法自動播放、連結或按鈕沒有懸停過場效果
效能：背景圖片載入不正確
佈局：左側欄垂直對齊至 div 的頂部

所以我就開始工作了。

打磨區塊（您實際賺取薪水的地方）

覆寫全局樣式

我注意到一件事克勞德對你的連鎖反應沒有記憶它所產生的規則是完全合理的 - 直到你的全球風格來瓦解它們。

EDS 具有全局最大寬度 + 襯墊，可將部分限制在 1200px 左右。Claude 的第一稿沒有考慮到這一點，所以男主角實際上沒有滿血。我沒有使用!important-ing 的方式來解決問題，而是透過在選擇器前加上main 來增加特定性：

/* My fix - higher specificity wins */
main .blog-featured-hero-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

main .blog-featured-hero-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

main .blog-featured-hero {
  position: relative;
  width: 100%;
  min-height: 500px;
  overflow: hidden;
}

英雄 = 全血。Cascade = 未受污染。

視覺拋光：顏色、排版、按鈕

我換上了我們的品牌綠色，收緊了排版，並再次修正了「閱讀全文」按鈕的一些特殊性問題。我希望按鈕看起來比全局選項更簡潔。我也依照上帝的旨意，新增了ease-in-out 懸停時的轉換。

/* Read More button */
.featured-content-card .featured-read-more {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--link-hover-color);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius);
  text-transform: uppercase;
  font-family: var(--heading-font-family);
  letter-spacing: -1px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.featured-content-card .featured-read-more:hover {
  background-color: var(--link-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

UX 修正：旋轉木馬定時

為了解決旋轉木馬無法自動播放的問題，我加入了邏輯：

每 5 秒自動向前滑動一次
在懸停和鍵盤焦點時暫停
手動導航後重新啟動
箭頭鍵導航

自動播放只會在有多張幻燈片時執行，而所有暫停/恢復邏輯都能確保流暢的使用者經驗，不會中斷使用者互動。

let autoplayInterval = null;

const startAutoplay = () => {
  if (autoplayInterval) return;
  
  autoplayInterval = setInterval(() => {
    const currentSlide = parseInt(carousel.dataset.activeSlide || '0', 10);
    showSlide(carousel, currentSlide + 1);
  }, 5000);
};

const stopAutoplay = () => {
  if (autoplayInterval) {
    clearInterval(autoplayInterval);
    autoplayInterval = null;
  }
};

// Pause on hover and focus
carousel.addEventListener('mouseenter', stopAutoplay);
carousel.addEventListener('mouseleave', startAutoplay);
carousel.addEventListener('focusin', stopAutoplay);
carousel.addEventListener('focusout', startAutoplay);

// Arrow key navigation
carousel.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft') handlePrev();
  if (e.key === 'ArrowRight') handleNext();
});

startAutoplay();

效能

建立圖塊後，我透過 Lighthouse 瀏覽頁面。效能分數為 99（我們說的是 EDS），但仍有一些小的優化工作要做。

背景圖片需要先載入，但由於沒有任何優先順序提示，它被推到瀑布下。修復方法是告訴瀏覽器這張圖片很重要：

if (bgPicture) {
  const bgImg = bgPicture.querySelector('img');
  if (bgImg) {
    bgImg.setAttribute('fetchpriority', 'high');
    bgImg.setAttribute('loading', 'eager');
  }
  backgroundContainer.appendChild(bgPicture);
}

fetchpriority="high" 告訴瀏覽器優先處理這張圖片，而不是其他圖片，loading="eager" 確保它會立即載入，而不是等到它即將進入視窗時才載入。

對於旋轉木馬，我的做法剛好相反 - 只有第一張幻燈片是急切載入的，其餘的都是延遲載入的，因為它們不是立即可見的。

佈局

修正了align-items: center 的垂直對齊方式，因為容器使用了 flex，而且子代需要垂直居中。

.featured-carousel .featured-carousel-slides {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  align-items: center;
}

這些細節讓"it works" 與"it's actually good 有所區別。"

最終結果

看起來很乾淨。

AI 讓我得到了 80% 。我的調整讓它達到 100% 。

想要親自嘗試嗎？

從小事做起。挑選一個簡單的區塊，也許是卡片格或推薦滑桿。餵 Claude（或您選擇的模型）這種結構：

告訴 AI 從您的程式碼庫中查看 2-4 個類似區塊的範例
貼上您正在使用的原始 HTML
以簡明的英文描述版面轉換
要求使用 Vanilla JS 和 CSS（無框架）

然後打開瀏覽器主控台並進行實際測試。尋找：

定時問題（檢查堆疊超時）
版面變更/效能問題（Lighthouse 會發現這些問題）
顏色/間距不匹配（您的眼睛會發現這些問題）

修復已損壞的東西。發貨。重複。

附註

說到 Javascript，我並不是最頂尖的工具，但你知道誰最頂尖嗎？網際網路，這就是 AI 所接受的訓練。因此，如果您有任何卡住或不知道發生什麼事的時候，請稍微倚靠 AI 來教您。但請記住要仔細檢查真實的人在過去是否或如何解決問題。您可能只是過度使用鏟子。如果 AI 解決方案感覺怪異複雜，可能就是這樣。

最終想法

AI 程式碼基因不會消失，而且每個新模型都會變得更快更好。這對於運送例行工作來說非常好。深入瞭解系統的運作方式比以往任何時候都重要。

AI 是一種工具。不是魔法使用起來就像一個人。

了解拖拉機如何運作。讓機器人製作零件來修復它。

想要深入瞭解邊界遞送服務嗎？
請查看我們的部落格「邊緣傳輸的文件撰寫」，或收聽我們在 YouTube 上的 Podcast 討論，探索它如何能改變您的內容傳輸。

關於作者

Frank Townsend

前端開發人員& A/V Ninja at Arbory Digital

Frank 擁有深厚的網站開發與設計背景。在加入雅保利之前，他曾在 InstantOrder 從事設計與開發工作，並累積了豐富的經驗，之後開始從事自由職業。由於渴望新的機會，Frank 轉職到 Arbory Digital，在這裡他非常欣賞合作和充滿活力的工作氛圍。工作之餘，Frank 的嗜好包括木工、攝影、錄影、農耕、管理 Always Loretta Show 的巡迴演出，以及其他副業。

在 Linkedin 上聯絡 Frank