AI建站提示词

请生成一个bt.facesoho.com域名的企业官网，企业名称为示例科技有限公司。

## 网站要求
- 电脑端 移动端 自适应
## 实体页面落地要求

- 必须为模板中提到的全部页面、导航菜单、栏目、列表项、详情内容创建可访问的实体页面/路由，不能只在首页做锚点或 Demo 占位。
- 导航栏、页脚快捷链接、CTA、卡片“了解更多/阅读更多/查看详情”等所有按钮都必须链接到对应实体页面；如涉及产品、服务、案例、文章、活动、课程、菜单等列表，必须同时提供列表页和至少一个对应详情页。
- 博客/新闻必须包含文章列表页与文章详情页；案例/作品必须包含案例列表页与案例详情页；产品/服务必须包含产品或服务列表页与详情页；联系/预约/报名/订阅等表单必须有独立可访问页面或明确落地区块。
- 禁止使用“敬请期待”“Coming Soon”“Demo 页面”“占位链接”“#”等未落地内容；所有路由应具备完整页面结构、真实内容层次、导航返回路径和移动端适配。
- 在提示词中输出清晰的页面路由规划，列出首页、列表页、详情页、表单页和每个导航菜单对应页面的路径与页面目标。

- 风格：清新商务
- 主色调：商务蓝
- 包含模块：首页Banner、关于我们、产品展示、联系我们

<网页模板提示词>

【内容模块】
- 首页Banner：全屏展示，包含企业Logo、核心Slogan、CTA按钮(立即咨询/了解更多)
- 关于我们：企业简介、发展历程、核心价值观、团队介绍
- 产品展示：产品/服务卡片列表，每项包含图标、标题、简述、了解更多链接
- 新闻动态(可选)：新闻列表，包含标题、日期、摘要、阅读更多链接
- 客户案例(可选)：合作客户Logo展示、成功案例卡片
- 联系我们：联系表单(姓名、邮箱、电话、留言)、企业地址、地图、社交媒体链接

【排版逻辑】
- 页面结构：顶部导航栏→首页Banner→核心优势→关于我们→产品展示→客户案例→新闻动态→联系我们→页脚
- 采用线性布局，各模块垂直排列，模块间使用80px间距
- 页面最大宽度1200px居中，两侧留白
- 导航栏固定顶部，包含Logo左侧、导航链接居中、CTA按钮右侧
- 产品/案例使用网格布局(3-4列)，响应式适配移动端单列
- 页脚包含版权信息、快捷链接、联系方式

【UI风格】
- 采用"磨砂亚麻"设计风格，清新商务视觉语言
- 整体使用大面积留白，营造纸张般的静谧感
- 卡片采用圆角设计(8px-40px)，配合轻微阴影营造悬浮感
- 英雄区域使用柔和的蓝紫色径向渐变晕染效果
- 产品截图/图片嵌入圆角卡片内，非全屏铺满
- 图标使用细线条单色风格，与周围文字颜色一致
- 文字主导型设计，图片作为辅助演示而非装饰

【配色方案】
- 主色调遵循商务色系规范：
- 画布底色：#fcfcfc (近白色，减少纯白刺眼感)
- 浅蓝底色：#f0f4fe (用于交替区块背景)
- 午夜墨蓝：#020520 (主标题文字色)
- 深石墨灰：#14141e (次级标题文字)
- 石板灰：#374151 (导航/正文标签)
- 雾灰：#696a72 (辅助文字/时间戳)
- 信号蓝：#145aff (强调色，用于标签/分割线/焦点元素，不作填充按钮背景)
- 主行动色：#0f1f3d (用于按钮边框/链接文字)
- 翡翠绿：#16ca2e (状态指示辅助色)
- 珊瑚红：#f26052 (提醒辅助色)

【交互提示】
- 导航栏悬停效果：导航链接悬停时使用100px圆角背景高亮(#f0f4fe)
- 按钮悬停效果：主按钮边框加深，次级按钮出现轻微背景色变化
- 卡片悬停效果：产品/案例卡片悬停时阴影加深，营造轻微上浮感

</网页模板提示词>

## UI 设计风格详细规范

### 主题：明亮清新

采用明亮的画布，接近白色的 #fcfcfc 底色赋予产品纸张般的静谧感。英雄区域包含柔和的蓝薰衣草径向晕染，逐渐过渡到白色，使产品感觉平易近人而不依赖厚重的渐变效果。

### 配色详细规范

| 名称 | 色值 | 用途角色 |
|------|------|----------|
| 亚麻画布 | #fcfcfc | 主要页面背景和默认卡片表面——接近白色，读起来像纸而不是纯白，减少长文阅读的刺眼感 |
| 天空洗色 | #f0f4fe | 微妙的蓝色调区块背景、次级卡片填充、英雄区渐变终点——画布和纯白之间的一步，创造柔和的深度 |
| 午夜墨蓝 | #020520 | 主要英雄区和展示标题颜色——浅色背景上最深的文字色调，略带紫色偏移防止纯黑的生硬感 |
| 石墨灰 | #14141e | 次级标题和正文文字的高强调度——比午夜墨蓝略浅，用于区块标题和重要正文内容 |
| 石板灰 | #374151 | 产品UI标签、侧边栏导航文字、产品截图内的中等强调度正文内容 |
| 雾灰 | #696a72 | 次要正文、副标题、需要退居主文字之后的说明级内容 |
| 深雾灰 | #95959b | 占位符文字、禁用状态、时间戳标签、三级元数据 |
| 钢灰 | #6b7280 | 产品卡片内的静音辅助文本和客户公司描述 |
| 信号蓝 | #145aff | 标签、分割线和聚焦UI边缘的紫罗兰色轮廓强调色。不要将其提升为主要CTA颜色 |
| 蓝紫光晕 | radial-gradient(97.8% 181.6% at 53.7% 50%, rgb(20, 20, 30) 0%, rgba(88, 107, 141, 0.8) 100%) | 英雄区背景晕染和装饰性阴影扩散——赋予英雄区柔和蓝色氛围的漫射光晕 |
| 英雄蓝渐变 | linear-gradient(rgb(59, 130, 246) 0%, rgb(20, 90, 255) 100%) | 标签、分割线和聚焦UI边缘的蓝色轮廓强调色 |
| 翡翠状态绿 | #16ca2e | 绿色轮廓强调色，用作辅助强调色而非状态色 |
| 珊瑚提醒红 | #f26052 | 红色轮廓强调色，用作辅助强调色而非状态色 |
| 天蓝信息色 | #0099ff | 蓝色装饰细节和低频强调色 |
| 琥珀标签色 | #ffa64d | 橙色轮廓强调色，用于标签和聚焦边缘 |
| 主要行动强调色 | #0f1f3d | 紫罗兰色轮廓行动边框、链接标签和轻量级交互强调色，用作主要的轮廓行动边框和文字 |

### 字体规范

主字体：Inter
- 用于所有标题、正文、导航和按钮
- 字重：400, 500, 600
- 字号：10px, 12px, 14px, 15px, 16px, 18px, 20px, 22px, 40px, 56px, 80px
- 行高：1.00-1.50（展示区更紧凑，正文区更宽松）
- 字间距：80px时-2.96px，56px时-1.51px，40px时-0.76px；10-14px标题/标签级略微正向(+0.09-0.21px)
- 这创造了两种截然不同的视觉层次：密集的展示区和 airy 的正文区

韩文字体：Pretendard
- 用于产品截图和本地化内容中的韩文正文和UI文字
- 略微正向的字间距(0.019-0.03em)以补偿CJK字形密度
- 出现在产品UI卡片中，而非营销文案中
- 替代字体：Noto Sans KR, SUIT

等宽字体：Roboto Mono
- 用于交易值、管道计数和数据标签的等宽强调字体
- 22px时紧密的-0.054em字间距保持数字显示紧凑
- 替代字体：JetBrains Mono, IBM Plex Mono

图标系统：Font Awesome 6 Pro
- 贯穿产品UI和导航的图标系统
- 轻量变体用于8-12px密集UI行，Solid变体用于强调
- 单色，与周围文字颜色匹配
- 替代图标：Heroicons, Lucide Icons

### 字体比例表

| 角色 | 字号 | 行高 | 字间距 |
|------|------|-------------|----------------|
| caption | 10px | 1.2 | 0.13px |
| body | 14px | 1.43 | 0.06px |
| heading-sm | 18px | 1.4 | -0.16px |
| heading | 22px | 1.25 | -0.22px |
| heading-lg | 40px | 1.08 | -0.76px |
| display | 56px | 1.05 | -1.51px |

### 间距与布局

密度：紧凑

- 页面最大宽度： 1200px
- 区块间距： 80px
- 元素间距： 8-12px

圆角规范
- 药丸形： 100px
- 卡片： 8px
- 徽章： 4px
- 图片： 16px
- 输入框： 12px
- 模态框： 32px
- 按钮： 12px
- 大卡片： 40px

### 组件规范

主要轮廓按钮
- 角色： 主要的行动号召导航按钮（预约演示、免费开始 - 轮廓变体）
- 背景 rgba(255,255,255,0.8)，文字 #0f1f3d，边框 1px solid #0f1f3d，圆角 12px，内边距 15px
- Inter 500 14-16px
- 轮廓样式使其成为事实上的CTA，而不使用填充的彩色背景——权威性来自浅色表面上的锐利深色边框

主要填充按钮
- 角色： 高强调度行动（免费开始，填充导航栏变体）
- 背景 linear-gradient(rgb(59,130,246) 0%, rgb(20,90,255) 100%)，文字 #ffffff，圆角 12px，内边距 15px 20px
- Inter 600 14px
- 蓝色渐变填充是页面上唯一的填充按钮，保留给单一最高优先级行动

英雄区幽灵按钮
- 角色： 英雄渐变区内的次要CTA
- 背景 #fcfcfc，文字 #145aff，边框 1px solid 带蓝色调，圆角 50px药丸形，内边距 14px 32px
- 出现在柔和蓝色英雄洗色之上的药丸形
- Inter 500 16px

紧凑产品卡片
- 角色： CRM管道交易行、联系人列表项和收件箱条目
- 背景 #ffffff，圆角 8px，阴影 rgba(0,0,0,0.1) 0px 0px 4px -2px，内边距 上下12px 左右16px
- 包含公司Logo(20px圆形)、公司名称 Inter 500 14px #14141e、交易值 Roboto Mono 500 12px、最后活动说明 Inter 400 12px #6b7280

大型功能区块卡片
- 角色： 营销页面功能展示区块，内嵌产品截图
- 背景 #fcfcfc，圆角 40px，多层阴影(0.082 → 0.07 → 0.016 不透明度级联营造悬浮感)，内边距 上下52px 左右72px
- 容纳圆角16px的产品截图图片

玻璃叠加卡片
- 角色： 叠加在英雄渐变或彩色背景上的浮动UI元素
- 背景 rgba(252,252,252,0.2)，圆角 28px(标准)或48px(大型变体)，无阴影，背景滤镜模糊(5-15px)
- 文字继承自容器
- 用于英雄区和功能区块的磨砂玻璃UI预览

导航栏
- 角色： 顶级网站导航
- 背景 #fcfcfc 带背景滤镜模糊(2px)，全宽，0-90px高度区
- Logo左侧，导航链接居中(Inter 400-500 14px #374151)，行动按钮右侧
- 导航链接悬停状态使用100px药丸半径
- “预约演示” = 轮廓12px圆角按钮，“免费开始” = 填充渐变按钮

侧边栏导航项
- 角色： 产品UI左侧栏导航（人员、管道、视图）
- Inter 400 14px，文字 #374151 默认，激活状态使用 #14141e 字重500带100px药丸背景 #f0f4fe
- 图标通过 Font Awesome 6 Pro Light 12px
- 行高32px，项目间间距2-4px

状态徽章
- 角色： 交易阶段、联系人状态和管道状态指示器
- 背景语义颜色(翡翠绿 #16ca2e 10%不透明度，珊瑚红 #f26052 10%不透明度，天蓝 #3b82f6 10%不透明度)
- 文字使用完整语义颜色，圆角 4px，内边距 2px 6px
- Inter 500 12px
- 紧凑的单词标签：“已丢失”、“潜在”、“活跃”

文本输入框
- 角色： 表单字段和搜索输入
- 背景深色上下文 rgba(255,255,255,0.08) 或浅色 #ffffff
- 边框 1px solid #cfcfcf 默认 / #0099ff 焦点环(box-shadow rgba(0,153,255,1) 0px 0px 0px 3px)
- 圆角 12px，内边距 15px
- Inter 400 14px #14141e，占位符 #95959b

YC信任徽章
- 角色： 英雄标题上方的社交证明标签
- 小型内联药丸：YC橙色方形图标 + “Backed by Y Combinator” 文字 Inter 500 12px #374151
- 背景透明或极浅，无边框，作为微型社交证明元素，在标题着陆前锚定

客户Logo条
- 角色： 灰度社交证明Logo网格
- 客户/合作伙伴Logo以 #696a72 或近黑色以降低不透明度(灰度滤镜)渲染
- 4-5列网格排列
- 无边框，无卡片——Logo悬浮在画布上
- Logo之间间距32-48px

### 注意事项

应该做：
- 使用 Inter 字体，56px时字间距-1.51px，80px时-2.96px 用于所有展示标题——紧密的字间距是标志性特征
- 将 #145aff 仅用作文字强调色或焦点环颜色，从不作为填充按钮背景；品牌蓝是荧光笔，不是油漆
- 紧凑产品UI卡片使用圆角8px，大型营销功能卡片使用40px——同一区块内绝不混用
- 英雄区背景使用柔和蓝色径向洗色 #b6cbfd 和 #f0f4fe 渲染，而不是纯色或照片
- 卡片阴影保持在 rgba(0,0,0,0.1) 0px 0px 4px -2px——近乎不可见的阴影创造提升而不夸张
- 使用 #fcfcfc（而非纯 #ffffff）作为默认页面画布和卡片背景——轻微的米白色保持纸质温暖
- 所有产品UI内的数字交易值和管道计数使用 Roboto Mono 500 12px 带-0.54px字间距

不应该做：
- 不要用实心 #145aff 背景填充任何按钮——该颜色在此系统中仅作为文字、边框和焦点环存在
- 卡片的圆角值不要在8px和40px之间——紧凑(8px)到大型功能(40px)的跳跃是有意设计的；卡片使用16-24px会打破节奏
- 标题不要使用字重700或800——Inter在600是最大字重；更重的字重会对抗负字间距的优雅
- 主要文字和背景不要使用纯 #000000 或纯 #ffffff——文字使用 #020520/#14141e，背景使用 #fcfcfc
- 不要在区块背景中添加彩色装饰渐变——只有英雄区携带蓝色洗色；所有其他区块使用平坦的 #fcfcfc 或 #f0f4fe
- 不要对导航项或侧边栏元素应用阴影——高度仅存在于卡片和产品UI表面
- 不要在状态徽章和交易阶段标签之外使用语义颜色(#16ca2e, #f26052, #ffa64d)——它们是数据状态指示器，不是装饰强调色

### 海拔高度

- 标准产品卡片： rgba(0, 0, 0, 0.1) 0px 0px 4px -2px
- 提升UI元素： rgba(0, 0, 0, 0.25) 0px 0px 4px -2px
- 功能区块卡片： rgba(0, 0, 0, 0.082) 0px 0.36px 1.81px -1.42px, rgba(0, 0, 0, 0.07) 0px 1.37px 6.87px -2.83px, rgba(0, 0, 0, 0.016) 0px 6px 30px -4.25px
- 蓝色强调焦点元素： rgba(20, 90, 255, 0.1) 0px 0px 50px -28px, rgba(0, 0, 0, 0.18) 0px 0px 3px -1px
- 英雄区环境光晕： rgba(20, 90, 255, 0.1) 0px 0px 100px -28px

### 表面

- 画布 (#fcfcfc) — 页面背景 — 所有内容坐落的基础层
- 色调洗色 (#f0f4fe) — 替代区块背景和英雄渐变区 — 比画布高一步，带蓝色调
- 卡片表面 (#ffffff) — 产品UI卡片、功能卡片和提升内容容器，带微妙阴影
- 叠加层 (#fcfcfc) — 大型功能卡片40px圆角(rgba(252,252,252,0.2)用于磨砂玻璃英雄叠加层)

### 图像规范

视觉语言完全围绕产品截图——没有摄影、没有抽象插图、没有生活方式图像。产品UI是主要的视觉英雄：CRM管道看板列、收件箱消息线程和联系人详情面板以高分辨率捕获，嵌入大型圆角卡片(40px圆角)中，带羽毛般轻量的阴影。截图包含在卡片边界内，内圆角16px，从不全出血。产品捕获使用真实数据（公司名称如Figma、Framer、Stripe、Deel）以读起来像真实产品使用而非设计模型。整个UI中的图标使用Font Awesome 6 Pro Light——细描边、单色、与周围文字颜色匹配。整体视觉重量是文字主导型，图像作为产品演示而非装饰；每个区块单个截图承担全部视觉负载。

### 布局

最大宽度约1200px居中于视口，带有 generous 的侧边填充。英雄区是居中堆叠模式：YC徽章 → 大型展示标题（两行，居中）→ 副文本段落 → CTA按钮，全部垂直堆叠在蓝色径向背景洗色之上。英雄区CTA悬浮在部分可见的产品截图之上，该截图流入下一个区块，创造滚动激励。下方区块在纯白带和浅蓝色(#f0f4fe)色调带之间交替。功能区块使用居中标题+副文本在单个大型卡片(40px圆角，52/72px内边距)上方，包含全宽产品截图——没有两列文本+图片分割。客户Logo条是灰度Logo的平坦两行网格。管道演示区块使用3-4列产品看板通过裁剪视口卡片可见。导航是粘性顶部栏，带模糊背景，logo-左，链接-中，行动-右布局。密度交替：导航和产品卡片紧凑(8-12px间隙)，而营销区块在它们之间以80px垂直间隙呼吸。

### 类似品牌

- Linear — 相同的Inter重度字体系统，展示区积极负字间距，近白画布，产品截图作为主要英雄视觉
- Attio — CRM SaaS使用浅画布，单蓝色强调用于交互状态，紧凑管道卡片UI带羽毛般轻量的阴影
- Notion — 近白 #fcfcfc 页面背景，Inter 400-600 带紧密标题字间距，扁平产品UI截图作为营销图像而非生活方式摄影
- Loom — 轮廓深色边框CTA按钮 alongside 填充蓝色渐变按钮 — 双按钮CTA模式，相同构造
- Height — 紧凑基于列表的产品UI卡片8px圆角带 rgba(0,0,0,0.1) 阴影，单蓝色强调，基于Inter的字体比例带负标题字间距

## 功能要求

1. 响应式设计，支持移动端和桌面端
2. 现代化的 UI 设计，符合企业官网展示需求
3. 包含首页Banner、关于我们、产品展示、联系我们等核心模块
4. 提供联系表单和社交媒体链接

## 技术栈

- HTML5 + CSS3 + JavaScript
- 使用 CSS Grid/Flexbox 布局
- 添加适当的动画效果提升用户体验