30 家上海小店落地页
一次部署生成画廊首页和 30 个独立小店落地页。跨大众点评、高德、小红书抓真实门店，8 种版式各不相同，每家配真照片、逐字评论和可点拨的高德地图。
正在加载预览…
# 30 家上海小店落地页 — 中文最终版
构建**一次部署**：画廊首页 + 30 个子路径，每个子路径是一家上海本地无官网小店的完整独立落地页。**不要尝试 30 次独立部署**（沙盒会覆盖只剩 1 个）。
---
## 阶段一 · 发现 30 家店（并行抓取）
跨 **大众点评 / 高德 / 小红书 / 抖音地点页** 找 30 家：
- 上海实体小店，覆盖 9 个区（徐汇 / 静安 / 长宁 / 黄浦 / 虹口 / 杨浦 / 普陀 / 闵行 / 浦东），每区 2-5 家
- 评分 ≥ 4.3、评论 ≥ 30 条
- **无独立官网**（公众号/小红书账号不算）
- **严禁连锁 / 网红打卡**：海底捞、星巴克、瑞幸、Manner、% Arabica、喜茶、奈雪、外婆家、太二、绿茶、Lululemon、ZARA 等全部排除
- 品类多样：本帮小馆 / 独立咖啡 / 面馆 / 烘焙 / 理发 / 宠物美容 / 修鞋修包 / 洗衣 / 花店 / 纹身 / 独立书店 / 汽修 / 配钥匙 / 推拿 / 茶馆 / 古着 / 老字号 / 私房菜
每家抓：`name, category, neighborhood, district, address, phone, hours, rating, review_count, top_3_reviews(原话+昵称+平台+日期), signature_offering, signature_price_cny, neighborhood_vibe, years_in_business, amap_lat_lng (lng,lat), source_urls`。
输出 `businesses.json`。**禁止编造**——找不到的字段写 `null`，凑不齐 30 家就继续搜。
---
## 阶段二 · 30 家店并行构建（30 个子代理 + 1 个 design lead）
目录结构：
```
/mnt/agents/output/sites/
├── 01_slug/ ├── index.html ├── hero.jpg ├── portfolio_01.jpg ...
├── 02_slug/ ...
└── 30_slug/
```
### 图像（关键，反 broken image）
**所有图必须本地下载**，HTML 用相对路径 `./hero.jpg`。**禁止 hotlink Unsplash / 大众点评 CDN**（会 404 / 防盗链）。
获取优先级：
1. 大众点评 / 高德 / 小红书真照片 → `requests.get()` 下载存为 `hero.jpg`
2. Unsplash / Pexels 精准品类英文关键词搜 → **下载到本地**
3. AI 生图（`generate_image`），prompt 含品类+街区+招牌+摄影风格，**仅 photorealistic 禁卡通/插画**，≥ 1600px 宽
4. 排印海报兜底（纯色 + 96-160px 黑体店名），30 家最多 3 家用
### 8 种 archetype（每种 ≤ 5 家，按品类气质选）
菜单优先（餐饮）· 杂志长文（书店/咖啡/茶馆）· 电话优先（汽修/修锁）· 作品网格（纹身/美甲/理发/花艺）· 价目表（美发/洗衣/推拿）· 地图优先（弄堂深处）· 故事优先（≥20 年老店）· 产品瀑布流（花店/烘焙/古着）
**相邻三家**不允许 archetype + Header + Hero 高度三者同时相同。**字体对各不相同**（中文衬线推荐：思源宋体、霞鹜文楷、方正悠宋；中文无衬线：思源黑体、苹方）。**配色从该店真实门头照取色**，禁止默认暖橙黄。
### 必含模块
1. Hero（店名 + 一句话 + 真照片）
2. 3 条逐字真实评论（含用户昵称+平台+日期）
3. 地址 + 营业时间 + 电话（手机端电话可点拨）
4. 高德地图嵌入（**格式见下**）
5. 移动端底部常驻 CTA 栏（< 768px 显示）：「打电话」+「查路线」
6. `<title>` = 店名 + 副标题
7. favicon = 店名首字（**禁 AI / swarm 标识**）
### 高德地图嵌入（不要用 Google Maps `pb=` 格式，国内打不开）
```html
<iframe src="https://uri.amap.com/marker?position=121.4571,31.2155&name=店名&coordinate=gaode&callnative=0"
width="100%" height="320" frameborder="0" style="border:0; border-radius:4px;"
loading="lazy"></iframe>
```
「查路线」按钮：`https://uri.amap.com/navigation?to=121.4571,31.2155,店名&mode=car&coordinate=gaode`
⚠️ `position` 顺序是**经度在前、纬度在后**，部署后实测对了再继续。
### 设计语言
对标 Sightglass / Tartine / Aesop / % Arabica / 单向街书店 / 衡山·和集。**禁**：渐变 hero、box-shadow、≥12px 圆角、emoji、彩虹分类、Material 卡片堆叠。**用**：1px 薄边框、低饱和、大字标题、克制留白。
TailwindCSS CDN + 移动端优先 + WCAG AA + 单页 ≤ 200KB 不算图。
---
## 阶段三 · 合并 + 部署（1 个合并代理 + 1 次部署）
### 步骤 1 · 重组到 `/mnt/agents/output/final/`
把 30 个子目录原样复制进 `final/01_slug/` ... `final/30_slug/`（**零修改**子页设计）。
### 步骤 2 · 给每家子页底部注入"返回画廊"链接（在 `</body>` 前）
```html
<a href="/" style="display:block; text-align:center; padding:14px 16px;
font-family:inherit; font-size:13px; color:inherit; text-decoration:none;
opacity:0.6; background:rgba(0,0,0,0.025);
border-top:1px solid rgba(0,0,0,0.06); letter-spacing:0.05em;"
onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6">
← 返回 30 家小店
</a>
```
`color:inherit` 让链接颜色自适应每家配色。
### 步骤 3 · 生成画廊首页 `/mnt/agents/output/final/index.html`
- **Hero**：标题「30 家上海小店」（衬线展示体 72-96px）+ 一句话副标题 + 时间戳「2026 年 X 月」（**当前年份**）
- **分类筛选条**：「全部 (30)」+ 14 个左右品类 chip（多选，选中高亮）+ 9 个区 chip。`data-category` + `data-district` 属性 + JS `filterCategory()` 函数 show/hide + 实时计数
- **30 张卡片网格**（桌面 3 列 / 平板 2 列 / 手机 1 列）：4:3 比例真照片 + 品类·街区小字 + 店名 + 一句话氛围 + ⭐评分。卡片整张可点击进入子路径
- **页脚**：「30 家小店 · made in Shanghai · 2026」（**禁 2024 / 2025**）+ 30 家店名按拼音排序
画廊配色：米白 #FAFAF7 + 墨色 #1A1A1A + 暖墨棕 #5A4A3A（节制）。字体：思源宋体 Heavy + 思源黑体。文案 ≤ 300 字。**禁 emoji 装饰 / 彩虹分类色 / 阴影 / ≥12px 圆角**。
### 步骤 4 · 一次部署
```python
deploy_website(source_dir="/mnt/agents/output/final/", site_name="30-shanghai-stores")
```
---
## 阶段四 · QA + 交付（1 个 QA 子代理）
| 检查 | 通过条件 |
|---|---|
| 画廊首页 | 3 秒加载 + 30 卡片完整 + 分类筛选可用 + 计数正确 |
| 8 家子页深链 | 完整加载，所有图实测不死链 |
| 返回画廊链接 | 30 家全部存在，颜色自适应 |
| 高德地图 | 抽 5 家验证位置正确（不是上海中心广角） |
| Footer 年份 | 全部 2026，**不能出现 2024 / 2025** |
| 视觉差异 | 任意 5 家子页像 5 家不同工作室作品 |
| AI 痕迹 | 全站任何位置零「AI / Swarm / Kimi」字样 |
**交付**：1 个部署 URL + 30 个子路径清单（编号+店名+一句话）+ `businesses.json` + `README.md`（数据来源 + archetype 分配 + 图片来源统计）。# 30 家北京小店落地页 — 中文最终版 构建**一次部署**：画廊首页 + 30 个子路径，每个子路径是一家北京本地无官网小店的完整独立落地页。**不要尝试 30 次独立部署**（沙盒会覆盖只剩 1 个）。 --- ## 阶段一 · 发现 30 家店（并行抓取） 跨 **大众点评 / 高德 / 小红书 / 抖音地点页** 找 30 家： - 北京实体小店，覆盖 9 个区（东城 / 西城 / 朝阳 / 海淀 / 丰台 / 石景山 / 通州 / 昌平 / 大兴），每区 2-5 家 - 评分 ≥ 4.3、评论 ≥ 30 条 - **无独立官网**（公众号/小红书账号不算） - **严禁连锁 / 网红打卡**：海底捞、星巴克、瑞幸、Manner、% Arabica、喜茶、奈雪、外婆家、太二、绿茶、Lululemon、ZARA 等全部排除 - 品类多样：本帮小馆 / 独立咖啡 / 面馆 / 烘焙 / 理发 / 宠物美容 / 修鞋修包 / 洗衣 / 花店 / 纹身 / 独立书店 / 汽修 / 配钥匙 / 推拿 / 茶馆 / 古着 / 老字号 / 私房菜 每家抓：`name, category, neighborhood, district, address, phone, hours, rating, review_count, top_3_reviews(原话+昵称+平台+日期), signature_offering, signature_price_cny, neighborhood_vibe, years_in_business, amap_lat_lng (lng,lat), source_urls`。 输出 `businesses.json`。**禁止编造**——找不到的字段写 `null`，凑不齐 30 家就继续搜。 --- ## 阶段二 · 30 家店并行构建（30 个子代理 + 1 个 design lead） 目录结构： ``` /mnt/agents/output/sites/ ├── 01_slug/ ├── index.html ├── hero.jpg ├── portfolio_01.jpg ... ├── 02_slug/ ... └── 30_slug/ ``` ### 图像（关键，反 broken image） **所有图必须本地下载**，HTML 用相对路径 `./hero.jpg`。**禁止 hotlink Unsplash / 大众点评 CDN**（会 404 / 防盗链）。 获取优先级： 1. 大众点评 / 高德 / 小红书真照片 → `requests.get()` 下载存为 `hero.jpg` 2. Unsplash / Pexels 精准品类英文关键词搜 → **下载到本地** 3. AI 生图（`generate_image`），prompt 含品类+街区+招牌+摄影风格，**仅 photorealistic 禁卡通/插画**，≥ 1600px 宽 4. 排印海报兜底（纯色 + 96-160px 黑体店名），30 家最多 3 家用 ### 8 种 archetype（每种 ≤ 5 家，按品类气质选） 菜单优先（餐饮）· 杂志长文（书店/咖啡/茶馆）· 电话优先（汽修/修锁）· 作品网格（纹身/美甲/理发/花艺）· 价目表（美发/洗衣/推拿）· 地图优先（弄堂深处）· 故事优先（≥20 年老店）· 产品瀑布流（花店/烘焙/古着） **相邻三家**不允许 archetype + Header + Hero 高度三者同时相同。**字体对各不相同**（中文衬线推荐：思源宋体、霞鹜文楷、方正悠宋；中文无衬线：思源黑体、苹方）。**配色从该店真实门头照取色**，禁止默认暖橙黄。 ### 必含模块 1. Hero（店名 + 一句话 + 真照片） 2. 3 条逐字真实评论（含用户昵称+平台+日期） 3. 地址 + 营业时间 + 电话（手机端电话可点拨） 4. 高德地图嵌入（**格式见下**） 5. 移动端底部常驻 CTA 栏（< 768px 显示）：「打电话」+「查路线」 6. `<title>` = 店名 + 副标题 7. favicon = 店名首字（**禁 AI / swarm 标识**） ### 高德地图嵌入（不要用 Google Maps `pb=` 格式，国内打不开） ```html <iframe src="https://uri.amap.com/marker?position=116.4074,39.9042&name=店名&coordinate=gaode&callnative=0" width="100%" height="320" frameborder="0" style="border:0; border-radius:4px;" loading="lazy"></iframe> ``` 「查路线」按钮：`https://uri.amap.com/navigation?to=116.4074,39.9042,店名&mode=car&coordinate=gaode` ⚠️ `position` 顺序是**经度在前、纬度在后**，部署后实测对了再继续。 ### 设计语言 对标 Sightglass / Tartine / Aesop / % Arabica / 单向街书店 / 衡山·和集。**禁**：渐变 hero、box-shadow、≥12px 圆角、emoji、彩虹分类、Material 卡片堆叠。**用**：1px 薄边框、低饱和、大字标题、克制留白。 TailwindCSS CDN + 移动端优先 + WCAG AA + 单页 ≤ 200KB 不算图。 --- ## 阶段三 · 合并 + 部署（1 个合并代理 + 1 次部署） ### 步骤 1 · 重组到 `/mnt/agents/output/final/` 把 30 个子目录原样复制进 `final/01_slug/` ... `final/30_slug/`（**零修改**子页设计）。 ### 步骤 2 · 给每家子页底部注入"返回画廊"链接（在 `</body>` 前） ```html <a href="/" style="display:block; text-align:center; padding:14px 16px; font-family:inherit; font-size:13px; color:inherit; text-decoration:none; opacity:0.6; background:rgba(0,0,0,0.025); border-top:1px solid rgba(0,0,0,0.06); letter-spacing:0.05em;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6"> ← 返回 30 家小店 </a> ``` `color:inherit` 让链接颜色自适应每家配色。 ### 步骤 3 · 生成画廊首页 `/mnt/agents/output/final/index.html` - **Hero**：标题「30 家北京小店」（衬线展示体 72-96px）+ 一句话副标题 + 时间戳「2026 年 X 月」（**当前年份**） - **分类筛选条**：「全部 (30)」+ 14 个左右品类 chip（多选，选中高亮）+ 9 个区 chip。`data-category` + `data-district` 属性 + JS `filterCategory()` 函数 show/hide + 实时计数 - **30 张卡片网格**（桌面 3 列 / 平板 2 列 / 手机 1 列）：4:3 比例真照片 + 品类·街区小字 + 店名 + 一句话氛围 + ⭐评分。卡片整张可点击进入子路径 - **页脚**：「30 家小店 · made in Beijing · 2026」（**禁 2024 / 2025**）+ 30 家店名按拼音排序 画廊配色：米白 #FAFAF7 + 墨色 #1A1A1A + 暖墨棕 #5A4A3A（节制）。字体：思源宋体 Heavy + 思源黑体。文案 ≤ 300 字。**禁 emoji 装饰 / 彩虹分类色 / 阴影 / ≥12px 圆角**。 ### 步骤 4 · 一次部署 ```python deploy_website(source_dir="/mnt/agents/output/final/", site_name="30-beijing-stores") ``` --- ## 阶段四 · QA + 交付（1 个 QA 子代理） | 检查 | 通过条件 | |---|---| | 画廊首页 | 3 秒加载 + 30 卡片完整 + 分类筛选可用 + 计数正确 | | 8 家子页深链 | 完整加载，所有图实测不死链 | | 返回画廊链接 | 30 家全部存在，颜色自适应 | | 高德地图 | 抽 5 家验证位置正确（不是北京中心广角） | | Footer 年份 | 全部 2026，**不能出现 2024 / 2025** | | 视觉差异 | 任意 5 家子页像 5 家不同工作室作品 | | AI 痕迹 | 全站任何位置零「AI / Swarm / Kimi」字样 | **交付**：1 个部署 URL + 30 个子路径清单（编号+店名+一句话）+ `businesses.json` + `README.md`（数据来源 + archetype 分配 + 图片来源统计）。
# 30 家上海小店落地页 — 中文最终版 构建**一次部署**：画廊首页 + 30 个子路径，每个子路径是一家上海本地无官网小店的完整独立落地页。**不要尝试 30 次独立部署**（沙盒会覆盖只剩 1 个）。 --- ## 阶段一 · 发现 30 家店（并行抓取） 跨 **大众点评 / 高德 / 小红书 / 抖音地点页** 找 30 家： - 上海实体小店，覆盖 9 个区（徐汇 / 静安 / 长宁 / 黄浦 / 虹口 / 杨浦 / 普陀 / 闵行 / 浦东），每区 2-5 家 - 评分 ≥ 4.3、评论 ≥ 30 条 - **无独立官网**（公众号/小红书账号不算） - **严禁连锁 / 网红打卡**：海底捞、星巴克、瑞幸、Manner、% Arabica、喜茶、奈雪、外婆家、太二、绿茶、Lululemon、ZARA 等全部排除 - 品类只收独立咖啡馆 / 精品咖啡 / 手冲馆 / 意式浓缩馆 / 烘焙咖啡——30 家全是咖啡店 每家抓：`name, category, neighborhood, district, address, phone, hours, rating, review_count, top_3_reviews(原话+昵称+平台+日期), signature_offering, signature_price_cny, neighborhood_vibe, years_in_business, amap_lat_lng (lng,lat), source_urls`。 输出 `businesses.json`。**禁止编造**——找不到的字段写 `null`，凑不齐 30 家就继续搜。 --- ## 阶段二 · 30 家店并行构建（30 个子代理 + 1 个 design lead） 目录结构： ``` /mnt/agents/output/sites/ ├── 01_slug/ ├── index.html ├── hero.jpg ├── portfolio_01.jpg ... ├── 02_slug/ ... └── 30_slug/ ``` ### 图像（关键，反 broken image） **所有图必须本地下载**，HTML 用相对路径 `./hero.jpg`。**禁止 hotlink Unsplash / 大众点评 CDN**（会 404 / 防盗链）。 获取优先级： 1. 大众点评 / 高德 / 小红书真照片 → `requests.get()` 下载存为 `hero.jpg` 2. Unsplash / Pexels 精准品类英文关键词搜 → **下载到本地** 3. AI 生图（`generate_image`），prompt 含品类+街区+招牌+摄影风格，**仅 photorealistic 禁卡通/插画**，≥ 1600px 宽 4. 排印海报兜底（纯色 + 96-160px 黑体店名），30 家最多 3 家用 ### 8 种 archetype（每种 ≤ 5 家，按品类气质选） 菜单优先（餐饮）· 杂志长文（书店/咖啡/茶馆）· 电话优先（汽修/修锁）· 作品网格（纹身/美甲/理发/花艺）· 价目表（美发/洗衣/推拿）· 地图优先（弄堂深处）· 故事优先（≥20 年老店）· 产品瀑布流（花店/烘焙/古着） **相邻三家**不允许 archetype + Header + Hero 高度三者同时相同。**字体对各不相同**（中文衬线推荐：思源宋体、霞鹜文楷、方正悠宋；中文无衬线：思源黑体、苹方）。**配色从该店真实门头照取色**，禁止默认暖橙黄。 ### 必含模块 1. Hero（店名 + 一句话 + 真照片） 2. 3 条逐字真实评论（含用户昵称+平台+日期） 3. 地址 + 营业时间 + 电话（手机端电话可点拨） 4. 高德地图嵌入（**格式见下**） 5. 移动端底部常驻 CTA 栏（< 768px 显示）：「打电话」+「查路线」 6. `<title>` = 店名 + 副标题 7. favicon = 店名首字（**禁 AI / swarm 标识**） ### 高德地图嵌入（不要用 Google Maps `pb=` 格式，国内打不开） ```html <iframe src="https://uri.amap.com/marker?position=121.4571,31.2155&name=店名&coordinate=gaode&callnative=0" width="100%" height="320" frameborder="0" style="border:0; border-radius:4px;" loading="lazy"></iframe> ``` 「查路线」按钮：`https://uri.amap.com/navigation?to=121.4571,31.2155,店名&mode=car&coordinate=gaode` ⚠️ `position` 顺序是**经度在前、纬度在后**，部署后实测对了再继续。 ### 设计语言 对标 Sightglass / Tartine / Aesop / % Arabica / 单向街书店 / 衡山·和集。**禁**：渐变 hero、box-shadow、≥12px 圆角、emoji、彩虹分类、Material 卡片堆叠。**用**：1px 薄边框、低饱和、大字标题、克制留白。 TailwindCSS CDN + 移动端优先 + WCAG AA + 单页 ≤ 200KB 不算图。 --- ## 阶段三 · 合并 + 部署（1 个合并代理 + 1 次部署） ### 步骤 1 · 重组到 `/mnt/agents/output/final/` 把 30 个子目录原样复制进 `final/01_slug/` ... `final/30_slug/`（**零修改**子页设计）。 ### 步骤 2 · 给每家子页底部注入"返回画廊"链接（在 `</body>` 前） ```html <a href="/" style="display:block; text-align:center; padding:14px 16px; font-family:inherit; font-size:13px; color:inherit; text-decoration:none; opacity:0.6; background:rgba(0,0,0,0.025); border-top:1px solid rgba(0,0,0,0.06); letter-spacing:0.05em;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6"> ← 返回 30 家小店 </a> ``` `color:inherit` 让链接颜色自适应每家配色。 ### 步骤 3 · 生成画廊首页 `/mnt/agents/output/final/index.html` - **Hero**：标题「30 家上海小店」（衬线展示体 72-96px）+ 一句话副标题 + 时间戳「2026 年 X 月」（**当前年份**） - **分类筛选条**：「全部 (30)」+ 14 个左右品类 chip（多选，选中高亮）+ 9 个区 chip。`data-category` + `data-district` 属性 + JS `filterCategory()` 函数 show/hide + 实时计数 - **30 张卡片网格**（桌面 3 列 / 平板 2 列 / 手机 1 列）：4:3 比例真照片 + 品类·街区小字 + 店名 + 一句话氛围 + ⭐评分。卡片整张可点击进入子路径 - **页脚**：「30 家小店 · made in Shanghai · 2026」（**禁 2024 / 2025**）+ 30 家店名按拼音排序 画廊配色：米白 #FAFAF7 + 墨色 #1A1A1A + 暖墨棕 #5A4A3A（节制）。字体：思源宋体 Heavy + 思源黑体。文案 ≤ 300 字。**禁 emoji 装饰 / 彩虹分类色 / 阴影 / ≥12px 圆角**。 ### 步骤 4 · 一次部署 ```python deploy_website(source_dir="/mnt/agents/output/final/", site_name="30-shanghai-stores") ``` --- ## 阶段四 · QA + 交付（1 个 QA 子代理） | 检查 | 通过条件 | |---|---| | 画廊首页 | 3 秒加载 + 30 卡片完整 + 分类筛选可用 + 计数正确 | | 8 家子页深链 | 完整加载，所有图实测不死链 | | 返回画廊链接 | 30 家全部存在，颜色自适应 | | 高德地图 | 抽 5 家验证位置正确（不是上海中心广角） | | Footer 年份 | 全部 2026，**不能出现 2024 / 2025** | | 视觉差异 | 任意 5 家子页像 5 家不同工作室作品 | | AI 痕迹 | 全站任何位置零「AI / Swarm / Kimi」字样 | **交付**：1 个部署 URL + 30 个子路径清单（编号+店名+一句话）+ `businesses.json` + `README.md`（数据来源 + archetype 分配 + 图片来源统计）。
# 30 家上海小店落地页 — 中文最终版 构建**一次部署**：画廊首页 + 30 个子路径，每个子路径是一家上海本地无官网小店的完整独立落地页。**不要尝试 30 次独立部署**（沙盒会覆盖只剩 1 个）。 --- ## 阶段一 · 发现 30 家店（并行抓取） 跨 **大众点评 / 高德 / 小红书 / 抖音地点页** 找 30 家： - 上海实体小店，覆盖 9 个区（徐汇 / 静安 / 长宁 / 黄浦 / 虹口 / 杨浦 / 普陀 / 闵行 / 浦东），每区 2-5 家 - 评分 ≥ 4.3、评论 ≥ 30 条 - **无独立官网**（公众号/小红书账号不算） - **严禁连锁 / 网红打卡**：海底捞、星巴克、瑞幸、Manner、% Arabica、喜茶、奈雪、外婆家、太二、绿茶、Lululemon、ZARA 等全部排除 - 品类多样：本帮小馆 / 独立咖啡 / 面馆 / 烘焙 / 理发 / 宠物美容 / 修鞋修包 / 洗衣 / 花店 / 纹身 / 独立书店 / 汽修 / 配钥匙 / 推拿 / 茶馆 / 古着 / 老字号 / 私房菜 每家抓：`name, category, neighborhood, district, address, phone, hours, rating, review_count, top_3_reviews(原话+昵称+平台+日期), signature_offering, signature_price_cny, neighborhood_vibe, years_in_business, amap_lat_lng (lng,lat), source_urls`。 输出 `businesses.json`。**禁止编造**——找不到的字段写 `null`，凑不齐 30 家就继续搜。 --- ## 阶段二 · 30 家店并行构建（30 个子代理 + 1 个 design lead） 目录结构： ``` /mnt/agents/output/sites/ ├── 01_slug/ ├── index.html ├── hero.jpg ├── portfolio_01.jpg ... ├── 02_slug/ ... └── 30_slug/ ``` ### 图像（关键，反 broken image） **所有图必须本地下载**，HTML 用相对路径 `./hero.jpg`。**禁止 hotlink Unsplash / 大众点评 CDN**（会 404 / 防盗链）。 获取优先级： 1. 大众点评 / 高德 / 小红书真照片 → `requests.get()` 下载存为 `hero.jpg` 2. Unsplash / Pexels 精准品类英文关键词搜 → **下载到本地** 3. AI 生图（`generate_image`），prompt 含品类+街区+招牌+摄影风格，**仅 photorealistic 禁卡通/插画**，≥ 1600px 宽 4. 排印海报兜底（纯色 + 96-160px 黑体店名），30 家最多 3 家用 ### 8 种 archetype（每种 ≤ 5 家，按品类气质选） 菜单优先（餐饮）· 杂志长文（书店/咖啡/茶馆）· 电话优先（汽修/修锁）· 作品网格（纹身/美甲/理发/花艺）· 价目表（美发/洗衣/推拿）· 地图优先（弄堂深处）· 故事优先（≥20 年老店）· 产品瀑布流（花店/烘焙/古着） **相邻三家**不允许 archetype + Header + Hero 高度三者同时相同。**字体对各不相同**（中文衬线推荐：思源宋体、霞鹜文楷、方正悠宋；中文无衬线：思源黑体、苹方）。**配色从该店真实门头照取色**，禁止默认暖橙黄。 ### 必含模块 1. Hero（店名 + 一句话 + 真照片） 2. 3 条逐字真实评论（含用户昵称+平台+日期） 3. 地址 + 营业时间 + 电话（手机端电话可点拨） 4. 高德地图嵌入（**格式见下**） 5. 移动端底部常驻 CTA 栏（< 768px 显示）：「打电话」+「查路线」 6. `<title>` = 店名 + 副标题 7. favicon = 店名首字（**禁 AI / swarm 标识**） ### 高德地图嵌入（不要用 Google Maps `pb=` 格式，国内打不开） ```html <iframe src="https://uri.amap.com/marker?position=121.4571,31.2155&name=店名&coordinate=gaode&callnative=0" width="100%" height="320" frameborder="0" style="border:0; border-radius:4px;" loading="lazy"></iframe> ``` 「查路线」按钮：`https://uri.amap.com/navigation?to=121.4571,31.2155,店名&mode=car&coordinate=gaode` ⚠️ `position` 顺序是**经度在前、纬度在后**，部署后实测对了再继续。 ### 设计语言 对标 Sightglass / Tartine / Aesop / % Arabica / 单向街书店 / 衡山·和集。**禁**：渐变 hero、box-shadow、≥12px 圆角、emoji、彩虹分类、Material 卡片堆叠。**用**：1px 薄边框、低饱和、大字标题、克制留白。 TailwindCSS CDN + 移动端优先 + WCAG AA + 单页 ≤ 200KB 不算图。 --- ## 阶段三 · 合并 + 部署（1 个合并代理 + 1 次部署） ### 步骤 1 · 重组到 `/mnt/agents/output/final/` 把 30 个子目录原样复制进 `final/01_slug/` ... `final/30_slug/`（**零修改**子页设计）。 ### 步骤 2 · 给每家子页底部注入"返回画廊"链接（在 `</body>` 前） ```html <a href="/" style="display:block; text-align:center; padding:14px 16px; font-family:inherit; font-size:13px; color:inherit; text-decoration:none; opacity:0.6; background:rgba(0,0,0,0.025); border-top:1px solid rgba(0,0,0,0.06); letter-spacing:0.05em;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.6"> ← 返回 30 家小店 </a> ``` `color:inherit` 让链接颜色自适应每家配色。 ### 步骤 3 · 生成画廊首页 `/mnt/agents/output/final/index.html` - **Hero**：标题「30 家上海小店」（衬线展示体 72-96px）+ 一句话副标题 + 时间戳「2026 年 X 月」（**当前年份**） - **分类筛选条**：「全部 (30)」+ 14 个左右品类 chip（多选，选中高亮）+ 9 个区 chip。`data-category` + `data-district` 属性 + JS `filterCategory()` 函数 show/hide + 实时计数 - 首页顶部加一张高德总览地图,30 家店标成可点点位、点击跳对应落地页;下方 **30 张卡片网格**（桌面 3 列 / 平板 2 列 / 手机 1 列）：4:3 比例真照片 + 品类·街区小字 + 店名 + 一句话氛围 + ⭐评分。卡片整张可点击进入子路径 - **页脚**：「30 家小店 · made in Shanghai · 2026」（**禁 2024 / 2025**）+ 30 家店名按拼音排序 画廊配色：米白 #FAFAF7 + 墨色 #1A1A1A + 暖墨棕 #5A4A3A（节制）。字体：思源宋体 Heavy + 思源黑体。文案 ≤ 300 字。**禁 emoji 装饰 / 彩虹分类色 / 阴影 / ≥12px 圆角**。 ### 步骤 4 · 一次部署 ```python deploy_website(source_dir="/mnt/agents/output/final/", site_name="30-shanghai-stores") ``` --- ## 阶段四 · QA + 交付（1 个 QA 子代理） | 检查 | 通过条件 | |---|---| | 画廊首页 | 3 秒加载 + 30 卡片完整 + 分类筛选可用 + 计数正确 | | 8 家子页深链 | 完整加载，所有图实测不死链 | | 返回画廊链接 | 30 家全部存在，颜色自适应 | | 高德地图 | 抽 5 家验证位置正确（不是上海中心广角） | | Footer 年份 | 全部 2026，**不能出现 2024 / 2025** | | 视觉差异 | 任意 5 家子页像 5 家不同工作室作品 | | AI 痕迹 | 全站任何位置零「AI / Swarm / Kimi」字样 | **交付**：1 个部署 URL + 30 个子路径清单（编号+店名+一句话）+ `businesses.json` + `README.md`（数据来源 + archetype 分配 + 图片来源统计）。