ui-templates

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Templates — Human-Designed Template Library

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

380 pre-built HTML/CSS/JS templates from 9 professional template libraries. All templates are human-designed with real design quality — NOT AI-generated. The agent MUST use an existing template as the starting point. Never write HTML/CSS/JS from scratch.

来自9个专业模板库的380个预构建HTML/CSS/JS模板。所有模板均为人工设计，具备专业设计水准——绝非AI生成内容。必须以现有模板为起点进行开发，禁止从零编写HTML/CSS/JS代码。

1. How to Find Templates

1. 模板查找方法

Step 1 — Determine the Category

步骤1——确定分类

Match the user's request to one or more categories from §4 Category Reference. Be precise — match the user's actual stated need, not a generalized assumption.

"I want a restaurant website" →
```
restaurant
```
"Build me a portfolio" →
```
portfolio
```
"I need a blog" →
```
blog
```
"Make a landing page for my app" →
```
app
```
or
```
landing
```
Unclear or general request → read 2-3 candidate category catalogs and compare

将用户需求与第4节「分类参考」中的一个或多个分类匹配。务必精准匹配——贴合用户实际需求，而非泛化假设。

"我想要一个餐厅网站" →
```
restaurant
```
"帮我做一个作品集" →
```
portfolio
```
"我需要一个博客" →
```
blog
```
"为我的应用做一个着陆页" →
```
app
```
或
```
landing
```
需求模糊或宽泛时 → 查看2-3个候选分类的目录并对比

Step 2 — Read the Category Catalog

步骤2——阅读分类目录

Each category has a JSON catalog file:

catalogs/{category}.json

(relative to this skill directory).

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

If no specific category matches, use

catalogs/multipurpose.json

. For broad requests, read multiple catalogs (e.g., both

personal

and

portfolio

每个分类都有对应的JSON目录文件：

catalogs/{category}.json

（相对当前技能目录）。

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

若没有匹配的特定分类，使用

catalogs/multipurpose.json

。对于宽泛需求，可阅读多个目录（例如同时查看

personal

和

portfolio

）。

Step 3 — Match Templates Using Catalog Metadata

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

Each catalog entry contains rich metadata for intelligent selection:

Field	Type	How to Use
`matchSignals`	string[]	Primary matching — keyword array. Match against user's request keywords.
`description`	string	150-700 char detailed visual/structural description. Use to evaluate fit and to present to user.
`colorScheme`	`"dark"` / `"light"` / `"mixed"`	Match user's style preference.
`visualStyle`	string	One-line visual atmosphere summary. Use to present to user.
`layout`	string	`"single-page"` / `"multi-page"` / `"sidebar"` / `"fullscreen"` / `"grid"` / `"dashboard"`
`features`	string[]	Functional capabilities (e.g., `"responsive"` , `"search"` , `"accordion"` ).
`sections`	string[]	Page section types (e.g., `"hero"` , `"pricing"` , `"contact"` ).
`colorPalette`	object	Full color system with named roles. Use during customization.
`typography`	object	Font family, weights, sizes, spacing, style. Use during customization.
`source`	string	Template source — indicates quality tier (see §3).

Matching priority:

```
matchSignals
```
keyword overlap with user request
```
features
```
and
```
sections
```
matching user's functional needs
```
colorScheme
```
+
```
visualStyle
```
matching user's aesthetic preference
```
source
```
quality tier (prefer higher tiers)

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

字段	类型	使用方式
`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节）。

匹配优先级：

```
matchSignals
```
与用户需求的关键词重叠度
```
features
```
和
```
sections
```
匹配用户功能需求
```
colorScheme
```
+
```
visualStyle
```
匹配用户审美偏好
```
source
```
质量等级（优先选择高等级）

Step 4 — Download and Use the Template

步骤4——下载并使用模板

Templates are hosted on GCS. Each catalog entry has a

downloadUrl

field pointing to a

.zip

file.

bash

undefined

模板托管在GCS上，每个目录条目包含

downloadUrl

字段，指向对应的

.zip

文件。

bash

undefined

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


After extraction, use the `indexPath` field from the catalog entry to locate the `index.html` within the extracted directory.

---

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. Customization Guide

2. 定制指南

When customizing a template, focus on content replacement while preserving the human-designed structure:

Page title & headings — Update
```
<title>
```
and main headings
Navigation — Adjust nav links to match actual sections
Body text — Replace lorem ipsum with real content
Images — Keep template originals unless user provides their own
Colors — Use
```
colorPalette
```
to understand which CSS properties to modify for brand colors
Fonts — Keep the template's fonts (already well-chosen by human designers)
Sections — Add/remove/reorder sections to match user needs
Responsive — Most templates are already responsive. Check
```
breakpoints
```
field.

定制模板时，重点替换内容，保留人工设计的结构：

页面标题与标题栏 — 更新
```
<title>
```
及主标题
导航栏 — 调整导航链接以匹配实际板块
正文文本 — 替换占位文本为真实内容
图片 — 除非用户提供自有图片，否则保留模板原图
颜色 — 使用
```
colorPalette
```
了解需修改哪些CSS属性以适配品牌色
字体 — 保留模板自带字体（已由专业设计师精心挑选）
板块 — 根据用户需求添加/删除/调整板块顺序
响应式适配 — 大多数模板已适配响应式，可查看
```
breakpoints
```
字段确认

3. Template Sources & Quality Tiers

3. 模板来源与质量等级

Source quality preference:

web3

html5up

styleshout

startbootstrap

tooplate

themefisher

templatemo

来源质量优先级：

web3

html5up

styleshout

startbootstrap

tooplate

themefisher

templatemo

Tier 1 — Premium (prefer these)

一级——优质（优先选择）

Web3 (14 templates): Crypto/DeFi/NFT dashboards and tools. Dark themes, real-time data, Chart.js. Best for blockchain projects.
HTML5 UP (29 templates): Clean, modern, responsive. Best overall design quality. Pure HTML/CSS/JS.
StyleShout (36 templates): Professional, polished. Great for portfolios and personal sites.
Start Bootstrap (12 templates): Bootstrap-based, well-structured. Good for business sites.

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

Tier 2 — Good

二级——良好

Tooplate (88 templates): Large variety, decent quality. Good for specific niches.
ThemeFisher (42 templates): Bootstrap-based, professional.
AdminMart (1 template): Dashboard template.
GitHub (2 templates): Community-contributed templates.

Tooplate（88个模板）：品类丰富、质量尚可，适合特定细分场景。
ThemeFisher（42个模板）：基于Bootstrap、专业风格。
AdminMart（1个模板）：仪表盘模板。
GitHub（2个模板）：社区贡献模板。

Tier 3 — Supplementary

三级——补充

TemplateMo (156 templates): Largest collection, variable quality. Good for niche categories.

TemplateMo（156个模板）：数量最多、质量参差不齐，适合小众分类。

4. Category Reference (36 categories)

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

Category	Description	Count	Example Use Case
`multipurpose`	General-purpose templates	83	Generic websites, quick prototypes
`business`	Business / Corporate / Consulting	56	Company sites, consulting firms
`personal`	Personal pages / Resume / CV	24	Personal resume, self-introduction
`blog`	Blog / Magazine / News	20	Personal blog, news site
`agency`	Creative agency / Studio	21	Design firms, digital marketing
`restaurant`	Restaurant / Cafe / Bakery	15	Restaurants, coffee shops, bakeries
`crypto`	Crypto / DeFi / NFT / Web3	14	Trading platforms, wallets, DeFi
`ecommerce`	E-commerce / Shop / Fashion	11	Online stores, fashion brands
`portfolio`	Portfolio / Showcase	11	Designer portfolios, project showcase
`app`	App landing page	11	Mobile app promotion pages
`dashboard`	Dashboard / Admin panel	11	Backend admin, data panels
`travel`	Travel / Hotel / Vacation	10	Travel agencies, hotel booking
`landing`	Landing page	8	Product landing pages, sign-up pages
`photography`	Photography / Image showcase	7	Photographer portfolios, galleries
`coming_soon`	Coming soon / Countdown	7	Product teasers, launch countdowns
`saas`	SaaS / Hosting services	7	SaaS product pages, cloud services
`event`	Event / Conference	5	Conferences, event registration
`fitness`	Fitness / Sports	5	Gyms, sports brands
`automotive`	Automotive / Taxi / Rental	5	Car dealers, rental services
`other`	Other / Miscellaneous	5	Uncategorized templates
`gallery`	Image gallery	4	Photo galleries, art exhibitions
`nature`	Nature / Eco / Organic	4	Environmental orgs, organic brands
`beauty`	Beauty / Salon / SPA	4	Beauty salons, barber shops
`food`	Food / Recipes	3	Food blogs, recipe sharing
`medical`	Medical / Healthcare	4	Clinics, medical services
`real_estate`	Real estate / Interior design	4	Real estate agencies, interior design
`technology`	Technology / Innovation	4	Tech companies, innovation products
`component`	UI components	4	Forms, admin panel components
`music`	Music / Band	3	Bands, musicians
`education`	Education / Training	3	Schools, online courses
`charity`	Charity / Nonprofit	2	Charity organizations
`wedding`	Wedding	1	Wedding invitations
`construction`	Construction / Building	1	Construction companies
`coworking`	Coworking space	1	Coworking spaces
`job`	Job / Career	1	Job portals
`wellness`	Wellness / Meditation	1	Meditation, mental health

分类	描述	数量	示例场景
`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. Catalog Entry Format

5. 目录条目格式

Full example of an enriched catalog entry:

json

{
  "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"]
}

完整的增强型目录条目示例：

json

{
  "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. Important Notes

6. 重要注意事项

All 380 templates are usable — every template has an
```
index.html
```
file. Use
```
indexPath
```
to find it under
```
ui-templates/
```
.
Category catalogs — read
```
catalogs/{category}.json
```
for enriched metadata.
Keep the human design — these templates look good because humans designed them. Don't over-modify the CSS structure.
Use colorPalette for customization — when the user has brand colors, use
```
colorPalette
```
to understand which CSS colors to replace.
Responsive — most templates are already responsive. Check
```
breakpoints
```
for responsive behavior.

380个模板均可直接使用——每个模板都包含
```
index.html
```
文件，可通过
```
indexPath
```
在
```
ui-templates/
```
目录下找到。
分类目录——查看
```
catalogs/{category}.json
```
获取增强元数据。
保留人工设计——这些模板的美观性来自人工设计，请勿过度修改CSS结构。
使用colorPalette进行定制——当用户有品牌色需求时，通过
```
colorPalette
```
了解需替换哪些CSS颜色。
响应式适配——大多数模板已支持响应式，可查看
```
breakpoints
```
字段了解响应式表现。