用 WorkBuddy 四步做出成都旅游攻略网页

第 1 步：创建完整攻略页

先用「前端美化」技能一次性生成单文件攻略网页，含住宿、美食、行程、预算四大板块。提示词里把板块、约束（响应式、配色、锚点）一次写清，AI 就能一次到位。

R1 发送这条提示词（原样复制）

@skill:"前端美化" 创建一个完整的HTML单页网页，展示成都5天旅游攻略，内容严格包含以下四个板块：1. 住宿：推荐成都适合游客入住的住宿区域（如春熙路、宽窄巷子附近），给出不同类型（经济型、舒适型、高档型）的住宿建议及每晚参考价格区间。2. 吃饭与美食推荐：列出成都必吃美食（如火锅、串串香、担担面、钟水饺、龙抄手等）及对应的知名餐厅或街区推荐，按早中晚三餐给出每日美食路线建议。3. 景点推荐：规划5天每日行程，涵盖大熊猫繁育研究基地、宽窄巷子、锦里、武侯祠、杜甫草堂、都江堰、青城山等经典景点，注明各景点建议游玩时长与交通方式。4. 开销预算：基于5000元总预算，细分住宿、餐饮、门票、市内交通、周边游（都江堰/青城山）往返交通及其他杂费的具体金额分配，确保总额控制在5000元以内。网页要求：响应式布局，适配手机与桌面；使用清晰导航锚点便于板块跳转；视觉风格体现成都休闲文化氛围（绿/暖色调）；各板块信息以卡片或表格形式呈现，数据真实合理。

验收点：AI 生成单文件 成都五日游攻略.html，含住宿、美食、行程、预算四大板块；手机与桌面均可读、导航锚点可跳转、数据真实合理。

第 2 步：新增特色影像图廊

继续在同一对话里让 AI 新增一组展示成都特色的图片，并让图片与现有文案主题呼应、排版整齐。配套用 image-well 从 Wikimedia / Openverse 检索 CC 授权原图。

R2 发送这条提示词（原样复制）

请在当前页面中新增若干展示成都当地特色的图片（如宽窄巷子、锦里、大熊猫、火锅、川剧变脸、都江堰等），所选图片需与页面现有文案内容相契合、主题呼应。图片的排版布局应清晰有条理，可采用网格或分区方式整齐排列，注意与现有视觉风格、间距和配色保持一致，避免破坏原页面整体结构。图片需添加恰当的说明文字或alt信息以补充文案语境。

配套取图：调用 image-well 检索 6 类主题图（宽窄巷子、锦里、大熊猫、火锅、川剧变脸、都江堰），下载到 images/，授权优先 CC0 / CC-BY / CC-BY-SA；页脚补「图片来源」署名。

第 3 步：给各板块补主题图

第三步让 AI 自查每个内容板块、补齐与主题紧密相关的图片，让住宿卡片、美食图条、行程缩略图、预算配图都更丰满，同时保持加载速度与响应式布局。

R3 发送这条提示词（原样复制）

请在网站现有的各个内容板块中，补充添加与各板块主题相关的图片，以提升整体内容的视觉丰富度。具体要求：1) 检查当前所有板块，识别缺少图片或图片不足的部分；2) 为每个内容板块选择与该板块主题紧密相关的高质量图片；3) 确保新增图片在风格、尺寸和排版上与网站现有设计保持一致；4) 图片的添加不应影响页面的加载速度和响应式布局；5) 为每张新增图片添加适当的alt文本，以确保可访问性和SEO优化。目标是让每个板块都有足够的视觉元素来支撑和丰富文本内容，提升用户的浏览体验。

配套取图：再检索 7 张板块图（太古里、武侯祠、串串香、担担面、盖碗茶、杜甫草堂、文殊院）放入 images/。AI 会把这些图嵌入对应板块，并统一加 loading="lazy" 与 alt 文本。

第 4 步：切换暗色模式

最后让 AI 把整站切到暗色模式。优秀的做法是改写 :root 配色令牌（背景转深、文字转亮、统一边框与阴影），而不是重写结构，这样暗色只是「换皮肤」，响应式与内容都不变。

R4 发送这条提示词（原样复制）

请将整个网页调整为暗色模式（Dark Mode），确保所有背景区域使用深色调，同时保证所有文字内容使用亮色以保持良好的可读性。具体要求如下：1. 将页面主体背景、导航栏、侧边栏、卡片、弹窗等所有区域统一切换为暗色背景（如深灰或近黑色）。2. 所有文字（标题、正文、标签、按钮文字、表单占位符等）调整为亮色（如白色或浅灰），确保在暗色背景下清晰可读。3. 检查并处理所有边框、分割线、阴影等视觉元素，使其在暗色模式下协调统一。4. 确保表单输入框、下拉菜单等交互组件在暗色模式下样式一致且可读。5. 如有图片或图标，确保其在暗色背景下不会造成视觉突兀。

验收点：全站背景转深、文字转亮、对比度清晰，原内容与响应式布局不受影响。

取图实操要点

1. 检索命令：uv run scripts/well.py search "关键词" --sources wikimedia openverse --limit 6 --format json --timeout 25
2. 带请求头：下载 Wikimedia 原图必须带 User-Agent 请求头，否则会被拒绝。
3. 限流退避：顺序下载遇到 HTTP 429 限流时，加 4 秒间隔 + 失败重试退避即可恢复。
4. 统一裁切：图片尺寸混乱时，用 CSS aspect-ratio + object-fit:cover 统一裁切，无需逐个处理像素。
5. 版权署名：每张图记录拍摄者与授权协议，写入页脚署名，避免侵权。

复现清单

完成后在 WorkBuddy 内用预览面板打开 成都五日游攻略.html 验收，或浏览器直接打开该文件。

给同学们的复习要点（贯穿全程的方法论）

1. 提示词颗粒度决定产出。 用 @skill 指定技能，再把板块、约束（响应式、配色、锚点）一次写清，AI 就能一次到位，少做返工。颗粒度越细，结果越可控。
2. 图片要走正版授权。 用 image-well 从 Wikimedia / Openverse 检索 CC0 / CC-BY / CC-BY-SA 图片，并在页脚署名，既好看又不踩侵权红线。
3. 渐进式增强。 先产出可运行的骨架，再一步步加图、加暗色，每步都能独立验收。不要指望一条提示词把所有细节一次做完美。
4. 暗色模式靠令牌切换。 改 :root 配色变量即可整体换肤，结构与内容不变；避免为暗色另写一套 HTML，否则两套逻辑迟早分叉。
5. 用工具化解限流与裁切。 下载遇 429 就退避重试；尺寸不一就用 CSS 统一裁切。把重复劳动交给脚本与样式，人只做判断。

交流与共学