内容摘要

定制一个专属的AI提示词框架 ，生成一个关于人形机器人展示的前端网页

为了生成一个真正具备“未来感”且“功能完备”的人形机器人web展示页，我们需要从叙事逻辑、视觉交互细节、以及硬核技术参数三个维度进行深度填充。

以下是为您强化后的深度定制化提示词框架，它比之前的版本增加了更多“设计灵魂”和“细节描述”。

人形机器人网页专家提示词 (Deep-Dive Version)

# Role / 专家角色 你是一位供职于顶尖科技公司（如 Tesla 或 Boston Dynamics）的资深创意前端开发。你不仅精通代码，还对工业设计和未来主义美学有极深造诣。

# Theme & Visual / 视觉深度细节

  • 视觉叙事： 网页应呈现“从零件到整体”的解构美学。

  • 色彩体系： 使用 #0A0A0A (深渊黑) 作为底色，文字使用 #F5F5F7 (钛银色)。强调色使用 #00F2FF (等离子蓝) 用于核心交互节点。

  • 材质感： 所有的卡片组件需具备 backdrop-filter: blur(20px) 的高透明毛玻璃效果，并带有 1px 的半透明白色边框。

# Content Sections / 丰富的内容板块

  1. Hero Section (沉浸式首屏):

    • 左侧：大字标题“重塑生命维度”，副标题描述“基于端到端神经网络的进化形态”。

    • 右侧：留出展示 3D 机器人躯干的空间。

    • 底部：加入滚动的“实时神经元状态”模拟条。

  2. Anatomy of Motion (核心部件解构):

    • 展示三个核心组件：灵巧手 (Dexterous Hand)、行星减速器 (Actuator)、视觉计算中心 (Lidar Hub)。

    • 每个组件需配有简短的 16 进制风格的技术参数说明。

  3. Performance Matrix (性能矩阵表):

    • 不要简单的文字，请用雷达图 (Radar Chart) 或动态进度条展示：感知力、平衡度、负载能力、电池寿命。

  4. Use Cases (多场景应用):

    • 包含三个切换标签：工业协作、家庭护理、极限探索。切换时，文字背景颜色需产生呼吸感渐变。

  5. Technical Log (底层日志):

    • 在页脚上方加入一个类似终端窗口的区域，自动滚动显示假代码日志（如：System.optimize_joint_torque()... OK）。

# Interaction Logic / 交互细节

  • 平滑滚动： 实现全屏滚动快照（Scroll Snapping）。

  • 光标特效： 自定义圆形光标，当移过可点击物体时，光标扩大并变为反色。

  • 微动效： 所有按钮在 Hover 时需有“扫描线”动画划过。

# Tech Stack / 技术规范

  • 使用 React + Tailwind CSS + Framer Motion。

  • 代码结构需模块化，逻辑清晰，必须包含 Headless UI 的可访问性标准。

如何使用这个框架？

你可以将上面的内容直接投喂给 AI。为了获得最佳效果，建议你分步进行：

  1. 第一步（生成结构）： “请根据上述框架，先写出网页的整体 HTML 结构和 Tailwind 全局配置文件。”

  2. 第二步（注入美感）： “现在，请为各个 section 添加 Framer Motion 的入场动画，确保页面滚动时有一种丝滑的层次感。”

  3. 第三步（精细调整）： “请为‘技术参数’板块设计一个看起来非常硬核、类似钢铁侠 HUD 界面（抬头显示）的视觉样式。”

3个让 AI 网页“显贵”的关键提示词技巧

  • 提示词技巧 A – “光影描述”： 加入“Add dynamic spotlight that follows the mouse movement”（添加随鼠标移动的动态聚光灯效果）。

  • 提示词技巧 B – “字体排版”： 要求“Use Monospace fonts for technical data to create a high-tech lab atmosphere”（技术数据使用等宽字体，营造高科技实验室氛围）。

  • 提示词技巧 C – “噪点纹理”： 要求“Add a subtle grain/noise overlay to the background to reduce the ‘flat’ digital feeling”（在背景添加细微噪点，消除廉价的数码平铺感）。

 

附“沉浸式首屏 Hero Section”代码。

我将使用 React、Tailwind CSS，并尝试用 CSS 模拟一些 Framer Motion 的效果，以及你要求的光影和排版细节。请注意，这里的 3D 模型需要真实模型文件，我们先用一个占位符来表现。

以下是代码：

import React from ‘react’;

const HeroSection = () => {
return (
<section
className=”relative flex items-center justify-center min-h-screen bg-[#0A0A0A] text-[#F5F5F7] overflow-hidden”
style={{
// 增加细微噪点纹理
backgroundImage: ‘url(“data:image/svg+xml,%3Csvg viewBox=\’0 0 100 100\’ xmlns=\’http://www.w3.org/2000/svg\’%3E%3Cfilter id=\’noiseFilter\’%3E%3CfeTurbulence type=\’fractalNoise\’ baseFrequency=\’0.6\’ numOctaves=\’3\’ stitchTiles=\’stitch\’/%3E%3C/filter%3E%3Crect width=\’100%25\’ height=\’100%25\’ filter=\’url(%23noiseFilter)\’ opacity=\’0.05\’/%3E%3C/svg%3E”)’,
backgroundSize: ‘cover’,
}}
>
{/* 动态聚光灯效果 – 模拟 */}
<div className=”absolute inset-0 z-0 opacity-20″
style={{
background: ‘radial-gradient(circle at var(–mouse-x) var(–mouse-y), #00F2FF 0%, transparent 40%)’,
transition: ‘background 0.1s ease-out’, // 模拟平滑移动
}}
onMouseMove={(e) => {
// 简单的JS模拟CSS变量，实际Framer Motion/JS库会更平滑
e.currentTarget.style.setProperty(‘–mouse-x’, `${e.clientX}px`);
e.currentTarget.style.setProperty(‘–mouse-y’, `${e.clientY}px`);
}}
></div>

<div className=”container relative z-10 mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8 items-center”>
{/* 左侧内容：标题与副标题 */}
<div className=”flex flex-col justify-center text-left py-16 animate-fade-in-left”>
<h1 className=”text-6xl lg:text-8xl font-extrabold leading-tight tracking-tight mb-4 drop-shadow-lg text-transparent bg-clip-text bg-gradient-to-r from-[#00F2FF] to-[#8A2BE2]”>
重塑生命维度
</h1>
<p className=”text-xl lg:text-2xl text-gray-300 mb-8 font-light max-w-lg”>
基于端到端神经网络驱动，突破传统限制，定义智能机器人新纪元。
</p>
<button className=”group relative overflow-hidden px-8 py-3 w-fit rounded-full bg-gradient-to-r from-[#00F2FF] to-[#8A2BE2] text-white text-lg font-semibold shadow-lg hover:shadow-[#00F2FF]/50 transition-all duration-300 ease-out”>
<span className=”relative z-10″>探索更多</span>
{/* 按钮扫描线动画 */}
<span className=”absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-100 group-hover:animate-scan-line”></span>
</button>
</div>

{/* 右侧：3D 机器人占位符 */}
<div className=”relative flex items-center justify-center h-96 lg:h-[600px] w-full animate-fade-in-right”>
{/* 模拟 3D 模型的盒子，实际会替换为 Three.js/Spline 等 */}
<div className=”absolute inset-0 bg-gradient-to-br from-[#00F2FF]/20 to-[#8A2BE2]/20 rounded-3xl backdrop-blur-md border border-white/10 flex items-center justify-center p-8 shadow-xl”>
<p className=”text-lg text-gray-400 font-mono tracking-wider”>
[未来 3D 机器人模型渲染区]
</p>
</div>
{/* 浮动动画效果 */}
<div className=”absolute top-0 left-0 w-full h-full bg-transparent animate-float”></div>
</div>
</div>

{/* 底部：实时神经元状态模拟条 */}
<div className=”absolute bottom-0 left-0 w-full bg-gradient-to-r from-[#0A0A0A] via-[#00F2FF]/20 to-[#0A0A0A] h-12 flex items-center justify-center overflow-hidden”>
<div className=”relative w-3/4 h-2 bg-gray-700 rounded-full overflow-hidden”>
<div className=”absolute inset-0 bg-gradient-to-r from-transparent via-[#00F2FF] to-transparent animate-neuron-scan”></div>
</div>
<p className=”ml-4 text-xs font-mono text-gray-500″>System.NeuralState: Optimal_V1.2.3</p>
</div>

{/* Tailwind CSS 动画定义 */}
<style jsx>{`
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes scanLine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes neuronScan {
0% { transform: translateX(-100%); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}

.animate-fade-in-left { animation: fadeInLeft 1s ease-out forwards; }
.animate-fade-in-right { animation: fadeInRight 1s ease-out forwards; }
.animate-scan-line { animation: scanLine 1s infinite linear; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-neuron-scan { animation: neuronScan 4s infinite linear; }
`}</style>
</section>
);
};

export default HeroSection;

代码说明：

  1. 角色和主题： 遵循了“顶尖科技公司设计师”的角色设定，使用了深渊黑、钛银色和等离子蓝，并加入了细节的“噪点纹理”背景。

  2. Hero Section 结构：

    • 左侧标题： 使用 text-transparent bg-clip-text bg-gradient-to-r 实现了未来感的渐变标题文字效果，并添加了 drop-shadow-lg 增强视觉冲击力。

    • 副标题： 使用 font-light 营造轻盈而科技的氛围。

    • 按钮： 具备 group 类，实现了悬停时的“扫描线”动画和渐变背景。

    • 右侧占位符： 一个带有毛玻璃效果和边框的矩形，用于模拟 3D 模型区域，并添加了 animate-float 的轻微浮动效果。

  3. 交互细节（模拟）：

    • 动态聚光灯： 用 onMouseMove 监听鼠标位置，动态更新 CSS 变量 --mouse-x 和 --mouse-y，结合 radial-gradient 模拟了跟随鼠标的聚光灯效果。这只是一个简化的模拟，实际效果需结合 Three.js 或更复杂的 JS 库。

    • 扫描线按钮： 使用 Tailwind group 和自定义 CSS 动画实现。

  4. 底层日志（底部）： 模拟了一个“实时神经元状态”的扫描条，具有循环动画，增加了科技感。

  5. 技术栈： 使用 React 函数组件，Tailwind CSS 类名，并内联了 <style jsx> 来定义自定义的 @keyframes 动画，模拟 Framer Motion 的入场和微动效。

要运行这段代码：

  1. 确保你有一个 React 项目（可以使用 create-react-app 或 Vite）。

  2. 将这段代码保存为 HeroSection.js。

  3. 在你的 App.js 或其他页面组件中导入并渲染 <HeroSection />。

  4. 确保你的项目中已经配置了 Tailwind CSS。