AI工程：AI的来临 与鹅 第8天

Source: Dev.to

解决方案概览

一个供应商目录网页应用，能够将混乱的列表解析为干净的 JSON，验证数据，并呈现可搜索的、超专业的玻璃拟态（glassmorphic）界面。

功能说明

• 解析 混乱的列表为结构化的 JSON（dmitris-sanity-saver.json）。
• 验证 数据中缺失或无效的字段，使用 Python 脚本（verify_json.py）。
• 创建 实时搜索网页应用（winter-festival-vendors.html）。
• 提供专业的玻璃拟态 UI，适用于任何节日或活动。
• 本地运行，使用 Node 或 Python——无需配置，只需打开 HTML 文件。

技术与工具

设计亮点

• 暗翡翠 + 青绿色调的主题，视觉冲击力强。
• 玻璃拟态卡片具备深度、悬停效果和模糊背景。
• 响应式网格/弹性布局，兼容桌面、平板和移动端。
• 统计仪表盘显示供应商总数、菜系分布以及可选的地点热力图。
• 可访问的标签顺序、焦点样式和足够的颜色对比度。
• 打印友好布局，无外部依赖。

我的经验

1. 收集零散的供应商笔记和 CSV 导出文件。
2. 使用 Goose 提示自动将数据结构化为 JSON（即 “sanity saver”）。
3. 运行 Python 验证器，捕获缺失的菜系和拼写错误，节省了数小时的手工工作。
4. 使用纯 HTML、CSS 和 JavaScript 构建 UI——搜索速度极快，过滤无需额外构建工具。
5. 反复调试配色方案，直至页面外观与性能同样出色。
6. 在手机、平板和笔记本上进行测试；纯 CSS 方法确保了完美的响应式表现。

受益对象

• 节日参与者 – 可快速按食物、地点、菜系或场馆地图搜索。
• 工作人员与志愿者 – 再也不需要在信息台手动整理供应商混乱。
• 供应商 – 专业的展示页面，可带来更多客流。
• 其他组织者 – 可复用于学校集市、农贸市场、会议、艺术展等。

教训总结

• Glassmorphism + 暗色主题能瞬间营造现代感。
• 结构化数据解锁响应式 UI、统计和可访问性功能。
• 在不使用重量级框架的情况下也能实现高质量成果。
• 简单的数据验证至关重要——一个错误条目就可能破坏整体体验。
• 为快速搜索/过滤而设计，可显著提升用户满意度。

使用方法

1. 以任意格式收集供应商数据。

2. 使用 Goose 提示或脚本转换为 dmitris-sanity-saver.json。

3. 用 Python 脚本验证 JSON：

   python verify_json.py dmitris-sanity-saver.json

4. 在本地打开 winter-festival-vendors.html，或使用简易服务器提供服务：

   # 使用 Python
   python -m http.server 8000
   # 或使用 Node
   node server.js

5. 浏览、分享并根据需要打印目录。

技术支持

• Goose by Block
• 纯 Python 与 JavaScript 逻辑

最后感想

第 8 天完成：一个美观、实用的目录，让人群保持满意。此帖是 AI Engineering: Advent of AI with Goose 系列的一部分，敬请关注更多 AI 冒险。