用同一句提示词，看 383 位画家风格的差异。

这是一个画家风格对照网站：所有图片都使用同一个场景提示词，只替换画家名字，方便直观看到不同艺术家的构图、色彩、笔触和情绪差异。

当前从 /Users/joe/Downloads/1260位绘图艺术家名单.md 中筛选 500 位画家尝试生成，并只保留已生成本地 WebP 图片的 383 位画家。页面不展示无图作者。

统一提示词：

远处是山，近处是深林和小溪，{画家名字}风格的一幅画

Alphonse Mucha	Claude Monet	Katsushika Hokusai	Andy Warhol
装饰线条、海报构图、精致插画感	光色变化、可见笔触、空气感	东方线条、留白、平面构图	高识别符号、强烈色块

• 搜索画家英文名、中文名和风格标签
• 按流派筛选
• 收藏喜欢的风格，保存在本地浏览器
• 点击缩略图进入 lightbox 查看
• 用方向键左右切换图片
• 一键复制画家名称提示词
• 每张图片展示中文翻译、原始风格名和属性信息

页面是移动端友好的：小屏下会切成单列图片流，筛选标签横向滑动，lightbox 会把大图和详情上下排列，避免横向溢出。

部署说明：

1. 点击按钮。
2. 登录 Vercel 并选择你的 GitHub 账号。
3. 保持默认配置，直接 Deploy。

部署时不需要环境变量，因为当前页面直接读取仓库内的静态 WebP 图片。

npm install
npm run dev

这个项目的核心是“同一个场景 + 不同艺术家风格”。要改成其他主题，只需要先改一行配置：

// data/site-config.ts
promptTemplate: "一只在窗台睡觉的加菲猫，{artist}风格的一幅画"

然后重新生成图片：

export HIAPI_API_KEY="your_key"
npm run generate:images -- --limit=12 --force=true

说明：

• {artist} 是占位符，脚本会替换成每位画家的英文名。
• 不加 --force=true 时，脚本会跳过已有 WebP。
• 想保留旧图，请先备份 public/generated/，再强制重生成。

README 顶部的产品截图由 Playwright 自动生成。先启动本地服务，再运行截图脚本：

npm run build
npm run start
SCREENSHOT_URL=http://127.0.0.1:3000 npm run capture:screenshots

截图会写入：

• docs/assets/product-screenshot.png
• docs/assets/artist-card-sample.png
• docs/assets/mobile-screenshot.png

图片由 HiAPI 生成后保存为静态资源。只有重新补图时才需要本地配置 API key；部署和浏览不需要。

export HIAPI_API_KEY="your_key"
npm run generate:images -- --limit=12

脚本会跳过已经存在的 WebP 文件。生成结果位于 public/generated/。建议分批生成，避免 HiAPI 单次批量超时：

npm run generate:images -- --offset=12 --limit=25
npm run generate:images -- --offset=37 --limit=25

可选参数：

• --limit=25：本批最多处理多少位画家
• --offset=50：从第几个画家开始
• --quality=82：WebP 压缩质量
• --force=true：覆盖已有 WebP，适合改了统一场景后重生成
• --stop-on-error=true：单个画家失败时立即停止，默认会记录失败并继续后面的队列

最终站点数据只包含有本地 WebP 图片的作者，不展示无图占位卡。无图作者已备份到 docs/generated-artists.md，后续补图后可重新收口数据。

重新从原始名单生成 500 人数据：

npm run build:artists

当前筛选规则：

1. 固定保留最初测试的 6 位画家。
2. 优先选择已经归类到明确风格分类的艺术家。
3. 优先保留名单中带中文名或加粗标注的艺术家。
4. 最后按原始名单顺序补足到 500 位。

最终上线名单：

• 原始筛选：500 位
• 已生成并保留：383 位
• 未生成并备份：117 位，见 docs/generated-artists.md