| 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 整体风格
2.2 响应式与多语言
- 移动端自适应：所有页面必须完美支持移动端浏览（Mobile-responsive）。
- 多语言支持：对于市场推广网页，需支持多语言切换，以覆盖不同国家和地区的潜在用户。
2.3 多媒体与交互要求
- 视频优化：单个视频文件压缩至 10MB 以内，必须实施懒加载（Lazy Loading），并添加骨架屏或进度条。移动端需有预加载策略和流量消耗提示。演示视频按钮文案使用"查看产品演示视频"。
- AI智能交互：在信息交换或互动页面，优先融入 AI智能对话式交换 元素，替代传统表单。
- 后台可维护性：图片轮播（如系统界面展示）、留资二维码等元素，必须在后台提供带尺寸和格式提示的维护入口。
3. 核心内容模块规范
3.1 留资与转化（Lead Generation）
落地页必须包含以下固定留资元素（后台可替换）：
- 公司公众号二维码
- 智能客服二维码
- 客户经理企业微信二维码
- 视频号二维码
- 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. 使用流程
- 需求分析：明确产品类型（医疗、数据、农业）和受众（ToB/ToG）。
- 内容准备：优先使用客户现有网站内容。提炼核心判断、业务逻辑和价值主张。
- 初始化项目：选择
web-static 或 web-db-user 脚手架初始化项目。
- 应用模板：将
{baseDir}/templates/ 中的组件集成到项目中，并应用蓝绿色调的 Tailwind 配置。
- 内容填充与优化：替换真实文案、图片和视频，严格执行视频优化和安全留资规范。
- 响应式测试：确保在桌面端和移动端均表现优异。
