mcpField
D
design-website

design-website

github.com/aiagentwithdhruv设计与 UI20102 次安装15 周前更新
代码仓库

关于 design-website

根据 Google Sheets 中的潜在客户资料生成单页 HTML 网站样稿的技能，适用于网页设计服务提案。输出为自包含文件，并采用明确的编辑式视觉风格。

主要功能

  1. 01读取 Google Sheets 客户资料
  2. 02生成单页 HTML 样稿
  3. 03使用 Unsplash 或占位图片
  4. 04输出自包含 HTML 文件
  5. 05缺少字段时采用默认值

适用场景

  1. 01为销售潜在客户准备网站概念
  2. 02将表格指定行转换为样稿
  3. 03在浏览器中预览生成的 HTML

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aiagentwithdhruv/skills --skill design-website

安装后在 Claude Code 中输入/design-website确认已加载。

附带文件scripts/generate_website.pyscripts/read_prospect.py

详细介绍

设计网站

目标

为潜在客户的业务生成一个精美的单页 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 / categoryUnsplash 图片搜索查询
first_name, last_name所有者署名
title / role所有者职位

脚本

  • scripts/read_prospect.py — 从 Google Sheets 读取单条潜在客户数据 → JSON
  • scripts/generate_website.py — 根据潜在客户 JSON 生成 HTML 网站

流程

第 1 步：读取潜在客户数据
python3 .claude/skills/design-website/scripts/read_prospect.py \
  --url "SHEET_URL" \
  --row ROW_NUMBER \
  --worksheet "WORKSHEET_NAME"  # optional

将 JSON 输出到 stdout。

第 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）

环境

  • .env 中的 UNSPLASH_ACCESS_KEY — 获取图库照片所必需。在 https://unsplash.com/developers 免费获取密钥
  • 如果未设置密钥，则使用 picsum.photos 中精选的占位图片
  • 用于访问 Sheets 的 Google OAuth 凭据（token.json / credentials.json）

设计系统

  • 字体：Inter（Google Fonts CDN）
  • 颜色：米白色 #F2EFE6、黑色 #000、白色 #FFF、陶土色 #C38133
  • 排版：粗体大写展示文字（72-100px）、版块标题（36-48px）、正文（16-18px）
  • 布局：全视口主视觉区、双列关于版块、三列服务网格、2x2 图片库
  • 按钮：带边框、大写字母、字距加宽

边缘情况

  • 缺少列：脚本会使用合理的默认值（例如，没有描述时使用“欢迎”）
  • 没有 Unsplash 密钥：使用 picsum.photos 占位图片
  • 企业名称过长：CSS 会通过响应式字号处理换行
  • 特殊字符：输出时会进行 HTML 转义

架构

输入
名称类型必需描述
sheet_urlstring是包含潜在客户数据的 Google Sheet URL
rowinteger是行号（从 1 开始，不包括表头）
worksheetstring否工作表名称（默认：第一个工作表）
输出
名称类型描述
html_filefile_path位于 .tmp/website_{slug}.html 的独立 HTML 文件
凭据
名称来源
UNSPLASH_ACCESS_KEY.env（可选，未设置时使用 picsum）
可组合使用

与此技能搭配良好的技能：scrape-leads、gmaps-leads

费用

免费（Unsplash 免费套餐）

评论

支持 Markdown