AI Engineering：AI的来临 与鹅 第2天

Source: Dev.to

第 2 天：说书人摊位 📖✨

挑战升级

冬季节日的说书人得了声带炎，我需要一个交互式的“自行选择冒险”网页应用，具备分支路径、多个结局以及魔幻的冬季美感。

升级：Goose Desktop + 开发者扩展

第 1 天全部是 CLI 提示。第 2 天我开始使用 Goose Desktop 配合 Developer Extension，它提供了以下超能力：

• 📝 text_editor – 创建、查看和编辑文件
• 🖥️ shell – 执行终端命令
• 🔍 analyze – 理解代码结构
• 📸 screen_capture – 可视化调试
• 🖼️ image_processor – 处理图像

这些功能让 Goose 真正为我构建项目。

我构建的内容

一个完整交互的 雪境奇幻冒险，包括：

🏠 姜饼屋

• 用 CSS 绘制的建筑，屋顶覆雪
• 发光的窗户显示壁炉
• 动画漂浮效果
• 点击交互伴随星光特效

🐻‍❄️ 雪球（小北极熊）

• 完全使用 CSS 绘制（无图片）
• 圆润的毛绒身体，可爱的小耳朵和鼻子
• 摆臂动画
• 点击播放 → 生成爱心和星光

🎀 蝴蝶结形糖果拐杖

• 紫红与浅粉渐变的“花朵”散落在雪地中
• 纯 CSS 魔法

❄️ 玻璃态雪花

• 持续下落动画，尺寸和速度各异
• 半透明并带有光晕效果
• 主题自适应颜色

🎴 新拟态卡片

• 柔和阴影营造层次感
• 悬停时卡片上升的效果
• 主题自适应样式，平滑过渡

📖 交互式故事

• 8 个交互场景，拥有分支路径
• 整个过程有 3+ 次选择点
• 2 种不同结局：
  • 💖 永久留在奇幻世界
  • 🌟 承诺带着魔法蝴蝶结再来访
• 进度追踪与重新开始功能

🎨 三种主题模式

• 亮色模式 ☀️ – 明亮的冬季仙境
• 暗色模式 🌙 – 神秘的夜间场景
• 混合模式 🌓 – 暮光渐变
• 键盘快捷键 (1, 2, 3) 切换

我的技术栈

• JavaScript（原生）
• 单个 HTML 文件，内嵌：
  • HTML5 结构
  • CSS3（动画、渐变、新拟态、玻璃态）
  • Google Fonts（Pacifico、Dancing Script）

AI 工程过程

我的收获

• AI 配对编程是真实存在的。
• 精准的提示可以解锁更高质量的输出。
• 单文件应用的威力出乎意料。
• CSS 艺术可以取代大量图片资源。
• 开发者扩展显著加快了开发速度。

技术深度解析

• 新拟态实现 – 软阴影层与内嵌效果。
• 玻璃态雪花 – 使用 backdrop-filter 模糊配合半透明渐变。
• CSS 北极熊 – 通过 border-radius 百分比创建有机形状。
• 分支故事逻辑 – 纯 DOM 操作，无需任何框架。

实际应用场景

• 互动营销活动（品牌体验）
• 教育内容（游戏化学习）
• 入职引导流程（用户旅程）
• 快速原型（在完整开发前测试想法）
• 作品集展示（展示创意 + 技术）

成果

• 完全可用，具备分支路径
• 冬季美学精致，移动端响应式
• 交互性强，体验如梦似幻
• 单文件部署，易于分享
• 结合 UI 设计与 AI 辅助完成

接下来计划

第 3 天将聚焦 热可可锦标赛的数据可视化——复杂度持续上升，我也在不断学习 AI 辅助开发。

亲自尝试

1. 从 Goose Desktop 下载
2. 启用 Developer Extension（设置 → 扩展）
3. 在 获取免费积分（代码：ADVENTDAY2）
4. 从类似的提示开始：“创建一个关于 … 的自行选择冒险故事”
5. 通过对话迭代并完善

三种可选的实现方式

• 一次性提示 – 一次性描述全部需求（快速但控制力较弱）。
• 迭代式 – 先简单开始，再通过对话逐步细化（推荐）。
• 先规划 – 让 Goose 先生成计划再执行（适合复杂项目）。

最后感想

AI 辅助开发并不是要取代开发者，而是放大创意。整个过程中，我专注于设计决策、用户体验和叙事，而 Goose 负责实现细节。最终呈现的是一个需要数天手工编码才能完成的魔幻冬季仙境。

第 2 天完成。 说书人已保存。北极熊萌翻。 🐻‍❄️✨

你会用 AI 构建怎样的故事？在下方分享你的想法吧！

此贴是我的 Advent of AI 系列的一部分 – AI Engineering: Advent of AI with Goose, Day 2.