开发者用Claude Code开发Horixa前端网页分享Prompt

我用 Claude Code + Higgsfield Prompt 构建了这个项目，Prompt 内容如下 ↓

# 提示词背景：全屏（h-screen w-full overflow-hidden）背景视频，自动播放/循环/静音/inline 播放，object-cover，来源：.

顶部叠加层级：一层 bg-black/10 可读性遮罩，然后是一层杂色纹理遮罩（opacity-10，行内 SVG 分形杂色 baseFrequency='0.9' numOctaves='4“，256×256 平铺）。所有背景层都是 absolute inset-0 z-0。

导航栏 — 顶部吸顶，两端对齐，水平内边距 px-5 sm:px-8 lg:px-10，垂直内边距 py-4 lg:py-5，z-20。

Logo（左侧）：SVG 波浪标志（40×20，白色填充，路径：M0 10C0 15.5228 4.47715 20 10 20V10C10 15.5228 14.4772 20 20 20V10C20 15.5228 24.4772 20 30 20C35.5228 20 40 15.5228 40 10C40 4.47717 35.5228 0 30 0C24.4772 0 20 4.47717 20 10V0C14.4772 0 10 4.47717 10 10V0C4.47715 0 0 4.47717 0 10Z），后接文字标识 ”Horixa“，字体为 Inter Medium 21px，白色，字距 tracking-[-0.63px]，首字母大写。

导航链接（居中，lg 断点以下隐藏）：Home · Technology · Platform · Solutions · Contact。字体 Inter Medium，字号 clamp(12px, 1.1vw, 16px)，白色，字距 tracking-[-0.32px]，间距 gap-8。”Home“ 为不透明度 100%；其余链接不透明度 60%，悬停时不透明度变为 100%，带过渡动画。

”Watch Demo“ 按钮（右侧，lg 断点以下隐藏）：backdrop-blur-[3.5px] bg-white/[0.03] 边框 border border-white/25，文字为白色，字体 Inter Medium 字号 text-[18px]，内边距 px-6 py-3，字距 tracking-[-0.36px]，首字母大写，悬停时 bg-white/10。

移动端（lg 断点以下）：汉堡菜单图标（lucide-react Menu/X）。点击打开下拉面板：bg-black/80 backdrop-blur-md，mx-5 mt-2 rounded-xl p-4 flex flex-col gap-3，导航链接和 Watch Demo 按钮垂直堆叠。

首屏内容 — 相对定位 z-10 flex flex-col 居中对齐 文字居中 px-4 mt-8 md:mt-16。

徽章标签：backdrop-blur-[3.5px] bg-white/[0.03] rounded-lg border-[0.5px] border-white/25 px-3 py-2，mb-6。文字内容：”Engineered with precision, trusted by the world's top researchers.“ 字体 Inter Medium 11px，白色，字距 tracking-[-0.24px]，行高 leading-none。

标题：font-[”Instrument_Serif“] text-4xl sm:text-5xl md:text-7xl lg:text-8xl，行高 leading-[0.95] 字距 tracking-tight 白色 最大宽度 max-w-4xl。文字内容：”Step Into the Next Horizon" <br> "of Computation“。

副标题：mt-5 sm:mt-6 最大宽度 max-w-3xl 字号 text-xs sm:text-sm md:text-base 行高 leading-relaxed 颜色 text-white/80。文字内容：”Run large-scale simulations drastically faster with a next-generation compute architecture.“

CTA 按钮 — 移动端垂直堆叠（flex-col），sm 断点及以上水平排列（flex-row），间距 gap-3，mt-7 sm:mt-8，宽度 w-full sm:w-auto：

”Get Early Access“：backdrop-blur-[2px] bg-white border border-black/25，文字黑色，字体 Inter Medium 字号 text-[13px] sm:text-[15px] lg:text-[18px]，内边距 px-4 sm:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3，悬停时 hover:bg-white/90。

”Watch Demo"：backdrop-blur-[3.5px] bg-white/[0.03] border border-white/25，文字白色，响应式字号/内边距和上面按钮一致，悬停时 hover:bg-white/10。

两个按钮都满足：宽度 w-full sm:w-auto，字距 tracking-[-0.36px]，首字母大写，行高 leading-[1.6]，200毫秒过渡变色。