chanpin-luodiye-wangzhan

name	chanpin-luodiye-wangzhan
description	Product landing page and corporate website creation guide for tech companies, especially healthcare IT, data services, and smart agriculture. Use when user asks to build a landing page, product website, official website, or promotional page for a ToB/ToG tech company. Covers design standards, responsive layout, lead generation modules, case study components, and React/Tailwind code templates.
user-invocable	true
metadata	{"openclaw":{"emoji":"🌐"}}

科技公司产品落地页/官网制作规范

本 Skill 提供了为科技公司（如融御科技）制作专业、大气、高转化率的产品展示落地页和官网的标准流程、设计规范及代码模板。

When to Use

本 Skill 适用于以下场景：

• 为医疗信息化、数据服务、智能农业等科技公司制作产品落地页
• 构建面向政府（卫健委、大数据局）或医院管理者的官方网站
• 开发具备留资转化功能的 ToB/ToG 企业推广页面
• 搭建支持多语言、移动端自适应的响应式网页

1. 适用场景与产品类型

• 医疗信息化产品：医保云网关、影像质控系统、院内一体化PACS系统、区域病理公共服务平台等。
• 数据服务产品：医疗数据资产化、可信数据空间、数据工厂等。
• 智能农业产品：农机租赁服务平台、株间精准除草机等。
• 目标受众：政府部门（卫健委、大数据局）、医院管理者、企业客户（ToB/ToG）。

2. 设计与视觉规范

2.1 整体风格

• 核心基调：专业、大气、科技感、值得信赖。
• 色彩规范：优先采用蓝绿色调（参考融御科技官网 www.dicomclub.com），辅以科技蓝、数据深蓝。背景多用纯白或浅灰，以突出内容。
• 排版原则：结构化、逻辑清晰。拒绝空话套话，多用数据、图表和对比来支撑判断。

2.2 响应式与多语言

• 移动端自适应：所有页面必须完美支持移动端浏览（Mobile-responsive）。
• 多语言支持：对于市场推广网页，需支持多语言切换，以覆盖不同国家和地区的潜在用户。

2.3 多媒体与交互要求

• 视频优化：单个视频文件压缩至 10MB 以内，必须实施懒加载（Lazy Loading），并添加骨架屏或进度条。移动端需有预加载策略和流量消耗提示。演示视频按钮文案使用"查看产品演示视频"。
• AI智能交互：在信息交换或互动页面，优先融入 AI智能对话式交换 元素，替代传统表单。
• 后台可维护性：图片轮播（如系统界面展示）、留资二维码等元素，必须在后台提供带尺寸和格式提示的维护入口。

3. 核心内容模块规范

3.1 留资与转化（Lead Generation）

落地页必须包含以下固定留资元素（后台可替换）：

1. 公司公众号二维码
2. 智能客服二维码
3. 客户经理企业微信二维码
4. 视频号二维码
5. 7x24 小时热线：400-xxx-xxxx

特殊要求：展示证书、资质或敏感凭证时，禁止直接公开高清大图。必须设计机制，引导用户留资联系客户经理获取查看权限，防范竞争对手恶意使用。

3.2 客户案例与信任背书

• 真实性底线：必须使用真实、经过验证的客户名称和数据。无真实数据时，使用明显占位符，绝不虚构。
• 案例详情页：每个案例需有独立详情页，包含：挑战、解决方案、实施过程、详细效果数据、用户评价。
• 数据追踪：后台需添加分享数据统计面板，追踪案例分享次数和渠道。

3.3 ToG 汇报特色板块

针对政府或资方汇报的页面/方案，必须突出政绩与社会效益：

• 扩大当地就业率（如：预计吸纳高新技术人才300-500人）
• 增加地方税收
• 高新技术产业生态打造与人才引进

4. 技术栈与开发模板

4.1 推荐技术栈

• 前端框架：React + TypeScript
• 样式方案：Tailwind CSS（便于快速实现响应式和一致的视觉规范）
• 构建工具：Vite / Next.js
• 动画库：Framer Motion（用于科技感微交互）

4.2 模板结构

本 Skill 提供了基础的 React + Tailwind 模板，位于 {baseDir}/templates/ 目录下：

• {baseDir}/templates/LandingPage.tsx: 标准落地页结构框架。
• {baseDir}/templates/LeadGenSection.tsx: 标准留资模块。
• {baseDir}/templates/CaseStudyCard.tsx: 客户案例展示卡片。
• {baseDir}/templates/VideoSection.tsx: 视频展示模块（含懒加载）。
• {baseDir}/templates/i18n.ts: 多语言配置模板。
• {baseDir}/templates/tailwind.config.ts: 蓝绿色调 Tailwind 配置。

设计规范参考 {baseDir}/references/ 目录：

• {baseDir}/references/color-schemes.md: 色彩规范与品牌色板。
• {baseDir}/references/design-guidelines.md: 整体设计规范。
• {baseDir}/references/page-structure-best-practices.md: 页面结构最佳实践。
• {baseDir}/references/seo-and-performance.md: SEO 与性能优化指南。

5. 使用流程

1. 需求分析：明确产品类型（医疗、数据、农业）和受众（ToB/ToG）。
2. 内容准备：优先使用客户现有网站内容。提炼核心判断、业务逻辑和价值主张。
3. 初始化项目：选择 web-static 或 web-db-user 脚手架初始化项目。
4. 应用模板：将 {baseDir}/templates/ 中的组件集成到项目中，并应用蓝绿色调的 Tailwind 配置。
5. 内容填充与优化：替换真实文案、图片和视频，严格执行视频优化和安全留资规范。
6. 响应式测试：确保在桌面端和移动端均表现优异。