设计网站
目标
生成一份精美的单页HTML网站模拟页面，用于潜在客户的业务。该网站匹配buildinamsterdam.com的美学风格：大胆的排版、米白色背景、编辑网格布局、陶土色点缀。用于推销网页设计服务。
输入
- Google Sheet URL 包含潜在客户数据
- 行号（从1开始，不包含表头）选择要处理的潜在客户
- 可选：工作表名称（默认为第一个工作表）
期望的表格列
脚本按以下方式映射列（不区分大小写，灵活匹配）：
| 列名 | 映射到 |
|---|---|
| company_name / company | 公司名称（英雄区、导航、页脚） |
| description / about | 关于部分 + 英雄区副标题 |
| keywords / services | 服务网格（逗号分隔） |
| phone / phone_number | 联系部分 |
| email / contact_email | 联系部分 |
| address / full_address | 联系部分 |
| city, state, country | 位置信息 |
| industry / category | Unsplash图片搜索查询 |
| first_name, last_name | 所有者署名 |
| title / role | 所有者角色 |
脚本
scripts/read_prospect.py— 从Google Sheets读取单行潜在客户数据 → JSONscripts/generate_website.py— 根据潜在客户JSON生成HTML网站
流程
步骤1：读取潜在客户数据
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" \
--row ROW_NUMBER \
--worksheet "WORKSHEET_NAME" # 可选
将JSON输出到标准输出。
步骤2：生成网站
python3 .claude/skills/design-website/scripts/read_prospect.py \
--url "SHEET_URL" --row 1 | \
python3 .claude/skills/design-website/scripts/generate_website.py
或者使用JSON文件：
python3 .claude/skills/design-website/scripts/generate_website.py < prospect.json
步骤3：预览
在浏览器中打开生成的文件：
open .tmp/website_*.html
输出
.tmp/website_{company_slug}.html— 自包含的HTML文件，可在任何浏览器中查看- 所有CSS均为内联，图片为外部URL（Unsplash）
环境
UNSPLASH_ACCESS_KEY位于.env文件中 — 必须用于获取库存图片。免费密钥请访问 https://unsplash.com/developers- 若未设置密钥，则降级使用picsum.photos的占位图片
- 需要Google OAuth凭据（token.json / credentials.json）以访问Sheets
设计系统
- 字体：Inter（Google Fonts CDN）
- 颜色：米白色
#F2EFE6，黑色#000，白色#FFF，陶土色#C38133 - 排版：粗体大写显示（72-100px），章节标题（36-48px），正文（16-18px）
- 布局：全屏英雄区，两列关于区，三列服务网格，2x2画廊
- 按钮：带边框、大写、字母间距
边界情况
- 缺失列：脚本使用合理的默认值（例如，若无描述则默认“Welcome”）
- 无Unsplash密钥：降级使用picsum.photos占位图片
- 长公司名称：CSS通过响应式字体大小处理换行
- 特殊字符：在输出中进行HTML转义