30 家上海小店落地页

# 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=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 分配 + 图片来源统计）。