ui-templates

UI 模板 — 人工设计的模板库

来自 9 个专业模板库的 380 个预构建 HTML/CSS/JS 模板。 所有模板均由人工设计，具有出色的设计品质，并非 AI 生成。 Agent 必须以现有模板为起点，绝不能从头编写 HTML/CSS/JS。

---

1. 如何查找模板

步骤 1 — 确定类别

将用户的请求与 §4 类别参考中的一个或多个类别进行匹配。 务必精准匹配用户实际提出的需求，而不是笼统地猜测。

• “我想要一个餐厅网站” → restaurant
• “帮我建一个作品集” → portfolio
• “我需要一个博客” → blog
• “为我的应用制作一个落地页” → app 或 landing
• 请求不明确或比较笼统 → 阅读 2–3 个候选类别目录并进行比较

步骤 2 — 阅读类别目录

每个类别都有一个 JSON 目录文件：catalogs/{category}.json（相对于此技能目录）。

read_file("skills/ui-templates/catalogs/{category}.json")

如果没有匹配的特定类别，请使用 catalogs/multipurpose.json。 对于宽泛的请求，请阅读多个目录（例如，同时阅读 personal 和 portfolio）。

步骤 3 — 使用目录元数据匹配模板

每个目录条目都包含丰富的元数据，可用于智能筛选：

字段	类型	使用方法
matchSignals	string[]	主要匹配依据 — 关键词数组。将其与用户请求中的关键词进行匹配。
description	string	150–700 个字符的详细视觉／结构描述。用于评估匹配度并向用户介绍模板。
colorScheme	"dark" / "light" / "mixed"	匹配用户的风格偏好。
visualStyle	string	用一行概述视觉氛围。用于向用户介绍模板。
layout	string	"single-page" / "multi-page" / "sidebar" / "fullscreen" / "grid" / "dashboard"
features	string[]	功能特性（例如，"responsive"、"search"、"accordion"）。
sections	string[]	页面分区类型（例如，"hero"、"pricing"、"contact"）。
colorPalette	object	包含命名角色的完整配色系统。自定义时使用。
typography	object	字体系列、字重、字号、间距和样式。自定义时使用。
source	string	模板来源 — 表示品质等级（见 §3）。

匹配优先级：

1. matchSignals 与用户请求的关键词重合度
2. features 和 sections 是否符合用户的功能需求
3. colorScheme 和 visualStyle 是否符合用户的审美偏好
4. source 品质等级（优先选择等级更高的来源）

步骤 4 — 下载并使用模板

模板托管在 GCS 上。每个目录条目都有一个 downloadUrl 字段，指向 .zip 文件。

# Download and extract the template
curl -sL "{downloadUrl}" -o /tmp/template.zip
mkdir -p output/website
unzip -o /tmp/template.zip -d output/website/
rm /tmp/template.zip

解压后，使用目录条目中的 indexPath 字段，在解压后的目录中定位 index.html。

---

2. 自定义指南

自定义模板时，应着重替换内容，同时保留人工设计的结构：

1. 页面标题和标题文本 — 更新 <title> 和主要标题
2. 导航 — 调整导航链接，使其与实际分区对应
3. 正文文本 — 用真实内容替换 lorem ipsum
4. 图片 — 保留模板原有图片，除非用户提供了自己的图片
5. 颜色 — 使用 colorPalette 了解应修改哪些 CSS 属性以匹配品牌颜色
6. 字体 — 保留模板字体（这些字体已由人工设计师精心挑选）
7. 分区 — 根据用户需求添加、删除或重新排序分区
8. 响应式布局 — 大多数模板已支持响应式布局。检查 breakpoints 字段。

---

3. 模板来源与品质等级

来源品质优先级：web3 > html5up > styleshout > startbootstrap > tooplate > themefisher > templatemo

第 1 级 — 优质（优先选择）

• Web3（14 个模板）：加密货币/DeFi/NFT 仪表板和工具。深色主题、实时数据、Chart.js。最适合区块链项目。
• HTML5 UP（29 个模板）：简洁、现代、响应式。整体设计质量最佳。纯 HTML/CSS/JS。
• StyleShout（36 个模板）：专业、精致。非常适合作品集和个人网站。
• Start Bootstrap（12 个模板）：基于 Bootstrap，结构清晰。适合商业网站。

第 2 级 — 良好

• Tooplate（88 个模板）：种类繁多，质量不错。适合特定细分领域。
• ThemeFisher（42 个模板）：基于 Bootstrap，专业。
• AdminMart（1 个模板）：仪表板模板。
• GitHub（2 个模板）：由社区贡献的模板。

第 3 级 — 补充

• TemplateMo（156 个模板）：数量最多，质量参差不齐。适合细分品类。

---

4. 分类参考（36 个类别）

Category	描述	数量	示例用途
multipurpose	通用模板	83	通用网站、快速原型
business	商业 / 企业 / 咨询	56	公司网站、咨询公司
personal	个人页面 / 简历 / CV	24	个人简历、自我介绍
blog	博客 / 杂志 / 新闻	20	个人博客、新闻网站
agency	创意机构 / 工作室	21	设计公司、数字营销
restaurant	餐厅 / 咖啡馆 / 面包店	15	餐厅、咖啡店、面包店
crypto	加密货币 / DeFi / NFT / Web3	14	交易平台、钱包、DeFi
ecommerce	电子商务 / 商店 / 时尚	11	网上商店、时尚品牌
portfolio	作品集 / 展示	11	设计师作品集、项目展示
app	应用落地页	11	移动应用推广页面
dashboard	仪表板 / 管理面板	11	后台管理、数据面板
travel	旅行 / 酒店 / 度假	10	旅行社、酒店预订
landing	落地页	8	产品落地页、注册页面
photography	摄影 / 图片展示	7	摄影师作品集、画廊
coming_soon	即将推出 / 倒计时	7	产品预告、上线倒计时
saas	SaaS / 托管服务	7	SaaS 产品页面、云服务
event	活动 / 会议	5	会议、活动报名
fitness	健身 / 体育	5	健身房、体育品牌
automotive	汽车 / 出租车 / 租赁	5	汽车经销商、租赁服务
other	其他 / 杂项	5	未分类模板
gallery	图片画廊	4	照片画廊、艺术展
nature	自然 / 生态 / 有机	4	环保组织、有机品牌
beauty	美容 / 美发沙龙 / SPA	4	美容院、理发店
food	食物 / 食谱	3	美食博客、食谱分享
medical	医疗 / 医护	4	诊所、医疗服务
real_estate	房地产 / 室内设计	4	房地产中介、室内设计
technology	技术 / 创新	4	科技公司、创新产品
component	UI 组件	4	表单、管理面板组件
music	音乐 / 乐队	3	乐队、音乐人
education	教育 / 培训	3	学校、在线课程
charity	慈善 / 非营利	2	慈善组织
wedding	婚礼	1	婚礼请柬
construction	建筑 / 建造	1	建筑公司
coworking	共享办公空间	1	共享办公空间
job	工作 / 职业	1	招聘门户
wellness	身心健康 / 冥想	1	冥想、心理健康

---

5. 目录条目格式

丰富目录条目的完整示例：

{
  "id": "html5up-editorial",
  "source": "html5up",
  "dir": "html5up/editorial",
  "name": "Editorial",
  "title": "Editorial by HTML5 UP",
  "category": "blog",
  "hasIndex": true,
  "hasCss": true,
  "hasJs": true,
  "hasImages": true,
  "sizeKB": 3531,
  "indexPath": "html5up/editorial/index.html",
  "description": "Sidebar-layout blog/magazine template with a persistent left sidebar...",
  "colorScheme": "light",
  "primaryColor": "#f56a6a",
  "colorPalette": {
    "background": "#ffffff",
    "sidebarBg": "#f5f6f7",
    "text": "#7f888f",
    "heading": "#3d4449",
    "accent": "#f56a6a (coral-red)",
    "accentHover": "#f67878",
    "accentActive": "#f45c5c",
    "border": "#eff1f2",
    "muted": "#9fa3a6"
  },
  "typography": {
    "fontFamily": "Open Sans (body) + Roboto Slab (headings)",
    "headingWeight": "700",
    "bodyWeight": "400",
    "bodySize": "13pt",
    "letterSpacing": "wide (0.075em)",
    "style": "Serif+sans-serif dual font pairing. Editorial sophistication."
  },
  "layout": "sidebar",
  "layoutDetails": "Two-column: fixed left sidebar + scrollable main. Sidebar collapses to hamburger on mobile.",
  "visualStyle": "Editorial, magazine-like. Coral-red accent. Serif+sans-serif font pairing.",
  "features": ["responsive", "search", "hamburger-menu", "social-links", "accordion"],
  "sections": ["header", "navigation", "hero", "features", "blog", "contact", "footer"],
  "techStack": ["jquery", "font-awesome", "google-fonts"],
  "breakpoints": [360, 480, 736, 980, 1280, 1680],
  "matchSignals": ["blog", "magazine", "editorial", "sidebar", "search", "articles", "coral", "serif"]
}

---

6. 重要说明

• 所有 380 个模板均可使用——每个模板都有一个 index.html 文件。使用 indexPath 在 ui-templates/ 下查找该文件。
• 分类目录——读取 catalogs/{category}.json 获取丰富的元数据。
• 保留人工设计——这些模板之所以美观，是因为它们由人工设计。不要过度修改 CSS 结构。
• 使用 colorPalette 进行自定义——当用户提供品牌颜色时，使用 colorPalette 了解需要替换哪些 CSS 颜色。
• 响应式——大多数模板已支持响应式布局。查看 breakpoints 了解响应式行为。