Vibe Coding Adobe 边缘配送块与人工智能：让机器人来做饭

style

border-bottom-glow

现在开发领域正在发生一件大事。

人工智能的布道者们要求一个模型将他们笨拙的 WordPress 网站转换成 React，现在他们认为自己已经大彻大悟了。你已经让那些 "末日潮人 "相信，5 年后没人会写代码，互联网也会内爆。还有一些沉默寡言的人，利用人工智能在 12 分钟内瞒天过海地发布内部工具，然后早早回家。

我不属于任何一个阵营。我的立场是人工智能是一种工具。使用它。它就是一个花哨的自动完成工具，还自以为很有能力。

这篇文章展示了我是如何使用人工智能对一个新的Adobe Edge Delivery Services(EDS) 代码块进行振动编码的，更重要的是，我是如何修复它的错误的。

向农民学习

我在农场长大。农场的逻辑很简单：

如果有东西坏了，你就去修。

没有亚马逊，只有堆满东西的旧谷仓，都快倾斜了。您没有时间去订购替代品，也没有时间去学习如何制作一个完美的复制品。你随手拿起金属碎片、一把比南北战争还要古老的锤子，也许还有一些胶带。你让它发挥作用。随机应变，适应环境，克服困难。

这就是为什么谷仓里积攒了 150 年的工具和"潜在有用的" 物品。我爸爸会说"你永远不知道什么时候会用到它"

问题就在这里：

你不需要知道如何从头开始锻造一件器具。但是，当它坏掉时，你需要知道足够的知识来修理它。

人工智能生成的代码也是如此。

人工智能可以生成执行。您只需要足够了解它，就能对其进行修复、调整和升级。

什么是 Vibe Coding？

Vibe 编码是我们慢慢承认的工作流程：

大致描述你想要什么 -> 让人工智能做饭 -> 解决混乱 -> 船。

这不是"提示工程。"这不是"人工智能推动的发展。"这就是字面上的氛围 + 背景 + 味道 + 你。

我把它称为"vibe coding" ，因为这就是它的感觉--你不是在写规范，也不是在遵循死板的测试大纲。你在与人工智能交流，在那里获得一些东西 80% ，然后利用你的判断力和经验让它真正好起来。这是与一个非常自信但偶尔会出错的搭档（我们俩都是）合作的即兴表演。

我的 Vibe 编码三原则

就像教一个懂 HTML 但记忆力像金鱼的人一样解释工作。
啰嗦一点。过度解释。假装你在写宜家家居的说明书。
让模特进行粗剪。
形状已经有了，只需打磨即可。
用你的实际技能来修补粗略的部分。
该模型最终会做出被诅咒的事情。

我的模型和代码生成经验

我是在Windsurf 中完成这些工作的，因为在同一个工作区中进行提示和编写代码简直就是 厨师之吻。 还有其他一些集成开发环境内置了人工智能，如 Cursor 或带有 GitHub Copilot 的 VSCode ，你可以根据自己的喜好选择。Windsurf 公司的价格很有竞争力，而且很适合我。

克洛德《十四行诗 4.5》：在不脱离现实的情况下给出可用的初稿之王。我没有对 Opus 进行太多测试，因为 Sonnet 更快，而且能满足我的需要。

GPTs：非常适合自然语言任务，如解释事物和撰写文档，但根据我的经验，需要的时间太长，而且不能很好地按照提示操作。

DeepSeek我相信它，就像我相信厨房里的浣熊一样。

Grok：很有希望，但 Windsurf 还没有图像输入，所以暂时搁置。

Gemini 2.5: 尝试过。"我将把这项任务添加到我的 TODO 列表中，以便随时向您汇报进展情况。我将从创建文件开始。我将首先创建 blog-featured-hero.js 文件。之后，我将创建 blog-featured-hero.css 文件。" 。在写这篇文章的时候，双子座 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)。虽然没有集成开发环境的所有功能，但至少你知道数据的去向。不，这不是广告。

为什么 EDS& AI 如同 PB&J

EDS 图块是人工智能绘图的理想选择，因为

区块就是 HTML + CSS + 香草 JS。
这就是法学硕士的培训内容。向他们提供原始的 HTML 和上下文？它们会发出刺耳的声音。
EDS 有明显的模式。
模型就是用来发现模式的。这就是他们的工作。
您（是的，您）可以控制最终的抛光效果。
人工智能为您提供 80% 。你的大脑会给你最后 20 个% ，让你不再尴尬。

好的提示加上清晰的例子 = 更好的产出。

好了，让我们来建造这个英雄积木吧

我想为我们的博客制作一个新的博客特色英雄区块：

全宽背景图像
左侧的图像旋转木马
带有标题 + 副标题 + 说明 +"阅读更多" 按钮的模糊玻璃卡片
反应灵敏 + 无障碍
遵循 EDS 模式，让未来的我不恨过去的我

下面是原始文档制作块的样子：

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>

提示

这是我给克劳德提供的经过清理的内容（包括 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.

人工智能初稿

克劳德踢掉了两份文件。说实话呢？它非常坚固。

美好的事物

布局基本正确
旋转木马工作
背景图像逻辑：已处理
响应式堆叠：已处理

什么需要人手

不过，它还是有问题：

视觉抛光：颜色不匹配，排版有待更新
用户体验问题：旋转木马不能自动播放，链接或按钮上没有悬停过渡效果
性能：背景图像加载不当
布局：左栏垂直对齐到 div 顶部

于是我开始工作。

打磨街区（你真正赚取薪水的地方）

覆盖全局样式

我注意到一件事克劳德对你的级联没有记忆它所产生的规则是完全合理的--直到你的全球风格出现并将其瓦解。

EDS 具有全局最大宽度 + 填充，可将各部分限制在 1200px 左右。克劳德的初稿没有考虑到这一点，所以男主角实际上并没有满血复活。我没有用!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;
}

英雄 = 满血。级联 = 无污染。

视觉抛光：颜色、排版、按钮

我更换了我们的品牌绿色，加强了排版，并再次修正了 "更多信息 "按钮的一些特殊性问题。我希望按钮看起来比全局选项更简洁一些。我还按照上帝的旨意，在悬停时添加了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);
}

用户体验修复：旋转木马计时

为了解决旋转木马不能自动播放的问题，我在以下内容中添加了逻辑：

每 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();

性能

制作完图块后，我在灯塔中运行了页面。性能得分是 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 的垂直对齐问题，因为容器使用了柔性，子代需要垂直居中。

.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 区分开来。"

最终结果

看起来很干净。

人工智能给我带来了 80% 。经过调整后，% 。

想亲自尝试一下吗？

从小事做起选择一个简单的区块，也许是卡片网格或推荐滑块。为克劳德（或您选择的模型）提供这种结构：

让人工智能从你的代码库中查看 2-4 个类似区块的示例
粘贴您正在使用的原始 HTML 代码
用通俗易懂的英语描述布局变换
要求使用纯 JS 和 CSS（无框架）

然后打开浏览器控制台，进行实际测试。寻找：

定时问题（检查堆叠超时）
布局偏移/性能问题（Lighthouse（兆光科技）会发现这些问题
颜色/间距不匹配（你的眼睛会发现这些问题）

把坏的修好发货。重复。

侧记

说到 Javascript，我不是棚里最锋利的工具，但你知道谁是吗？互联网，这就是人工智能所接受的训练。因此，如果你遇到困难或不知道发生了什么事，可以让人工智能来教你。但切记要仔细检查过去是否有真实的人解决过这个问题，或者他们是如何解决这个问题的。你可能只是过度设计了一把铲子。如果觉得人工智能解决方案非常复杂，那很可能就是这样。

最终想法

人工智能代码生成不会止步不前，每个新模型都会变得更快更好。这对运输日常工作非常有利。深入了解系统的工作原理比以往任何时候都更加重要。

人工智能是一种工具。不是魔法把它当一个人使用。

了解拖拉机的工作原理。让机器人制造零件来修复它。

想深入了解边缘交付服务？
查看我们的博客 "面向边缘交付的文档撰写 "或收听我们在 YouTube 上的播客讨论，了解它如何改变您的内容交付。

关于作者

弗兰克-汤森

前端开发员& A/V Ninja at Arbory Digital

弗兰克拥有深厚的网站开发和设计背景。在加入雅保利之前，他曾在 InstantOrder 从事设计和开发工作，积累了丰富的经验，后来成为自由职业者。弗兰克渴望获得新的机会，于是他加入了亚博瑞数字公司，在这里，他非常欣赏协作和充满活力的工作氛围。工作之余，弗兰克的业余爱好包括木工、摄影、摄像、务农、管理 Always Loretta Show 的巡演以及其他副业。

通过 Linkedin 与弗兰克联系