LaunchEx 关于

Prompt

--

**用于重现关于部分的提示词：**

> 使用 React、Tailwind CSS 和 lucide-react 图标构建一个占满视口的“关于创始人”部分。这是一个单独的 `<section>`，具体规格如下：
>
> **Section 容器：**
> - `id="about"`
> - 背景颜色：`#F0F5F7`
> - `min-height: 100vh`
> - Position relative
> - Padding：`py-20 sm:py-28 px-6 sm:px-10`
> - 使用 `flex flex-col justify-center` 垂直居中内容
>
> **内部容器：**
> - `max-w-7xl mx-auto`
>
> **顶部行——标题 + 描述（桌面端并排）：**
> - 一个 flex 容器：`flex flex-col lg:flex-row items-start justify-between gap-10 lg:gap-20`
> - 所有文本颜色：`#154359`
>
> **左侧——Section 标题：**
> - `<h2>` 的第 1 行文本为 `关于`，第 2 行文本为 `创始人`（用 `<br />` 分隔）
> - 使用自定义字体类 `.font-firs`（font-family: `'TT Firs Neue', 'Inter', system-ui, sans-serif`）
> - 字号：`text-[36px] sm:text-[48px] lg:text-[54px]`
> - `font-semibold uppercase tracking-tight leading-[0.95]`
>
> **右侧——描述区块：**
> - `flex flex-col max-w-xl`
> - 文本容器：`text-[17px] sm:text-[18px] leading-[1.5]`，颜色 `#154359`
> - 第 1 段：`"Launchex.Hub 是 Launchex 公司组合旗下的平台，用于发掘和展示突破性创新。"`
> - 第 2 段：`"Launchex.Hub 的使命是让每一位使用本地语言的创新者都有机会用其开创性创造重塑我们的世界。"`——使用 `mt-4` 间距
> - 段落下方放置一个外部链接：
>   - `<a>` 标签指向 `https://base.launchex.vc/`，在新标签页中打开（`target="_blank" rel="noreferrer"`）
>   - `group inline-flex items-center gap-4 mt-6 text-[14px] font-medium`，颜色 `#154359`
>   - 文本：`"Launchex.Hub 网站"`
>   - 旁边放置一个图标按钮：`flex items-center justify-center w-8 h-8 border`，边框颜色 `#154359`，使用 `transition-transform group-hover:-translate-y-0.5`
>   - 图标按钮使用削角 clip-path：`polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)`
>   - 按钮内部：来自 lucide-react 的 `<ArrowUpRight>`，`w-3.5 h-3.5`，`strokeWidth={2}`
>
> **统计卡片网格（位于标题行下方）：**
> - `mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5`
> - 包含 3 张统计卡片，使用以下精确数据：
>   1. value：`"7+ 年"`，text：`"Launchex 已服务市场，引导创业项目及其发展历程"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154203_6c6f94dc-a07e-4ba5-8688-106f01ccd2c8.png&w=1280&q=85`，offset：false
>   2. value：`"15000+"`，text：`"个创新项目进入 Launchex 项目管线"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154151_45c62c60-3bcc-4f21-8f9d-03722ebb5df8.png&w=1280&q=85`，offset：true
>   3. value：`"120+"`，text：`"场由 Launchex 在东欧举办的加速器活动"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_152238_24ec8db4-d728-4739-bb30-e985533e9637.png&w=1280&q=85`，offset：false
>
> **每张统计卡片：**
> - 外层容器：`relative w-full h-[280px] sm:h-[340px]`
> - 第 2 张卡片（索引 1，offset: true）添加 `lg:mt-24`，以形成错落效果
> - 外层容器使用 `backgroundColor: 'rgba(255, 255, 255, 0.8)'` 和 `padding: '1.5px'`（充当纤细的白色边框）
> - 每张卡片使用独特的 polygon clip-path 来形成削角／棱角分明的边角：
>   - 卡片 1：`polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px)`——左上角采用大削角
>   - 卡片 2：`polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px))`——右上角和左下角采用大削角
>   - 卡片 3：`polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px))`——右上角和右下角采用大削角
> - 将相同的 clip-path 同时应用于外层 div 和内部图像 div（形成内嵌边框效果）
> - 内部 div：`relative w-full h-full overflow-hidden bg-cover bg-center`，使用卡片的 image 作为 `backgroundImage`，并设置 `mixBlendMode: 'Normal'`
>
> **每张卡片内部的文本叠加层：**
> - 使用绝对定位，每张卡片的位置不同：
>   - 卡片 1：`left-6 right-6 bottom-6`
>   - 卡片 2：`left-6 bottom-20`
>   - 卡片 3：`left-6 right-28 bottom-6`
> - 全部使用 `max-w-[66%]`
> - 统计数值使用 `.font-firs font-semibold uppercase leading-none text-[36px] sm:text-[52px]`
> - 数值文本采用渐变填充：通过 `background`、`WebkitBackgroundClip: 'text'`、`backgroundClip: 'text'`、`color: 'transparent'` 应用 `linear-gradient(294deg, #185B7B 20%, #4BBDF0)`
> - 描述文本：`mt-3 text-[14px] leading-[1.4]`，颜色 `#154359`
>
> **底部渐隐叠加层：**
> - `pointer-events-none absolute inset-x-0 bottom-0 h-40 sm:h-56 z-10`
> - 背景：`linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)`——渐隐至相同的背景颜色
>
> **CSS 中所需的字体：**
> ```css
> html, body {
>   font-family: 'Inter', system-ui, -apple-system, sans-serif;
>   -webkit-font-smoothing: antialiased;
> }
> .font-firs {
>   font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif;
> }
> ```
>
> **使用的配色：**
> - Section 背景：`#F0F5F7`
> - 所有文本：`#154359`（深青色／藏青色）
> - 卡片外层背景／边框：`rgba(255, 255, 255, 0.8)`
> - 统计数值渐变：以 294deg 从 `#185B7B` 渐变至 `#4BBDF0`
> - 链接图标边框：`#154359`
> - 底部渐变：渐隐至 `#F0F5F7`
>
> **关键设计细节：**
> - 统计卡片使用 CSS `clip-path` polygons（而非 border-radius）来形成棱角分明的削角形状——每张卡片使用不同的 polygon，营造视觉变化
> - 外层容器的 1.5px padding + 白色背景在 clip-path 内营造出纤细白色边框的观感
> - 第 2 张卡片通过 `lg:mt-24` 向下偏移，在桌面端营造错落的瀑布流观感
> - 背景图像通过内联 `backgroundImage` 样式加载，而非使用 `<img>` 标签
> - 外部链接的箭头图标位于一个使用 clip-path 的小型削角方形按钮内
> - 响应式：移动端卡片堆叠为 1 栏，在 `md:` 下为 2 栏，在 `lg:` 下为 3 栏
> - 除外部链接图标按钮的 hover 上抬效果（`group-hover:-translate-y-0.5`）外，不使用其他动画

---

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型

稳定度: 93 / 100
成本: 中

AI 编程(UI)X收录 2026/07/28

3D 超市包装式创意机构官网

@Oluwaphilemon1 使用 Claude Fable 5 · Three.js · Blender · GSAP完成的网页案例，包含公开结果、完整 Prompt 与原始来源。

Skill · 3D / 动效 Hero Skill · 个人作品集叙事

提示语

Claude Fable 5 和 GPT-5.6 很强🥵🥵🥵 下面是我如何使用 Claude 构建的 👇 提示词：「设计一个机构网站，把服务以 3D 超市商品包装的形式呈现」使用 Three.js 和 WebGL 在浏览器中实时渲染所有产品使用 Blender 制作包装模型，然后导出为 GLTF 以加载到 Three.js 中使用 GSAP 实现流畅的产品旋转和悬停交互如果你想做一个让客户感觉像是在购买高级商品的作品集，请保存这条 🛒

来源热度 · X

稳定度

查看 Case →

AI 编程(UI)Aceternity UI收录 2026/08/13

3D 动画图钉

复制这段 TSX 组件源码，交给 Cursor、v0、Claude 等 AI 编程工具，说明这是「3D Animated Pin」的 Aceternity UI 组件实现，即可让它接入你的 React 项目，再按需替换文案、配色与触发参数复用。

Skill · 3D / 动效 Hero

提示语

// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…

来源热度 · Aceternity UI

—

稳定度

查看 Case →

AI 编程(UI)X收录 2026/09/12

高密度 3D 浏览器森林生成器

一个复杂的提示词，用于利用 Three.js 风格优化和逼真光照，在浏览器中生成精细的实时 3D 森林环境。

Skill · 3D / 动效 Hero Skill · 产品与电商转化页

提示语

首先搜索 "/unlazy" skill，完整阅读它，并在整个任务中持续使用。将此视为一项至少持续 {argument name="minimum duration" default="5 小时"} 的大型视觉构建。如果环境允许，最好进行 {argument name="optimal duration" default="8–24 小时"} 有实质意义的实现和迭代。不要在制作出一个还不错的场景后就停下。在浏览器中创建一个细节极其丰富的实时 {argument nam

来源热度 · X

稳定度

查看 Case →

Prompt

--

**用于重现关于部分的提示词：**

> 使用 React、Tailwind CSS 和 lucide-react 图标构建一个占满视口的“关于创始人”部分。这是一个单独的 `<section>`，具体规格如下：
>
> **Section 容器：**
> - `id="about"`
> - 背景颜色：`#F0F5F7`
> - `min-height: 100vh`
> - Position relative
> - Padding：`py-20 sm:py-28 px-6 sm:px-10`
> - 使用 `flex flex-col justify-center` 垂直居中内容
>
> **内部容器：**
> - `max-w-7xl mx-auto`
>
> **顶部行——标题 + 描述（桌面端并排）：**
> - 一个 flex 容器：`flex flex-col lg:flex-row items-start justify-between gap-10 lg:gap-20`
> - 所有文本颜色：`#154359`
>
> **左侧——Section 标题：**
> - `<h2>` 的第 1 行文本为 `关于`，第 2 行文本为 `创始人`（用 `<br />` 分隔）
> - 使用自定义字体类 `.font-firs`（font-family: `'TT Firs Neue', 'Inter', system-ui, sans-serif`）
> - 字号：`text-[36px] sm:text-[48px] lg:text-[54px]`
> - `font-semibold uppercase tracking-tight leading-[0.95]`
>
> **右侧——描述区块：**
> - `flex flex-col max-w-xl`
> - 文本容器：`text-[17px] sm:text-[18px] leading-[1.5]`，颜色 `#154359`
> - 第 1 段：`"Launchex.Hub 是 Launchex 公司组合旗下的平台，用于发掘和展示突破性创新。"`
> - 第 2 段：`"Launchex.Hub 的使命是让每一位使用本地语言的创新者都有机会用其开创性创造重塑我们的世界。"`——使用 `mt-4` 间距
> - 段落下方放置一个外部链接：
>   - `<a>` 标签指向 `https://base.launchex.vc/`，在新标签页中打开（`target="_blank" rel="noreferrer"`）
>   - `group inline-flex items-center gap-4 mt-6 text-[14px] font-medium`，颜色 `#154359`
>   - 文本：`"Launchex.Hub 网站"`
>   - 旁边放置一个图标按钮：`flex items-center justify-center w-8 h-8 border`，边框颜色 `#154359`，使用 `transition-transform group-hover:-translate-y-0.5`
>   - 图标按钮使用削角 clip-path：`polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px)`
>   - 按钮内部：来自 lucide-react 的 `<ArrowUpRight>`，`w-3.5 h-3.5`，`strokeWidth={2}`
>
> **统计卡片网格（位于标题行下方）：**
> - `mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5`
> - 包含 3 张统计卡片，使用以下精确数据：
>   1. value：`"7+ 年"`，text：`"Launchex 已服务市场，引导创业项目及其发展历程"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154203_6c6f94dc-a07e-4ba5-8688-106f01ccd2c8.png&w=1280&q=85`，offset：false
>   2. value：`"15000+"`，text：`"个创新项目进入 Launchex 项目管线"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_154151_45c62c60-3bcc-4f21-8f9d-03722ebb5df8.png&w=1280&q=85`，offset：true
>   3. value：`"120+"`，text：`"场由 Launchex 在东欧举办的加速器活动"`，image：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260514_152238_24ec8db4-d728-4739-bb30-e985533e9637.png&w=1280&q=85`，offset：false
>
> **每张统计卡片：**
> - 外层容器：`relative w-full h-[280px] sm:h-[340px]`
> - 第 2 张卡片（索引 1，offset: true）添加 `lg:mt-24`，以形成错落效果
> - 外层容器使用 `backgroundColor: 'rgba(255, 255, 255, 0.8)'` 和 `padding: '1.5px'`（充当纤细的白色边框）
> - 每张卡片使用独特的 polygon clip-path 来形成削角／棱角分明的边角：
>   - 卡片 1：`polygon(64px 0, calc(100% - 14px) 0, calc(100% - 4px) 4px, 100% 14px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px), 0 64px)`——左上角采用大削角
>   - 卡片 2：`polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 14px), calc(100% - 4px) calc(100% - 4px), calc(100% - 14px) 100%, 64px 100%, 0 calc(100% - 64px))`——右上角和左下角采用大削角
>   - 卡片 3：`polygon(0 14px, 4px 4px, 14px 0, calc(100% - 64px) 0, 100% 64px, 100% calc(100% - 64px), calc(100% - 64px) 100%, 14px 100%, 4px calc(100% - 4px), 0 calc(100% - 14px))`——右上角和右下角采用大削角
> - 将相同的 clip-path 同时应用于外层 div 和内部图像 div（形成内嵌边框效果）
> - 内部 div：`relative w-full h-full overflow-hidden bg-cover bg-center`，使用卡片的 image 作为 `backgroundImage`，并设置 `mixBlendMode: 'Normal'`
>
> **每张卡片内部的文本叠加层：**
> - 使用绝对定位，每张卡片的位置不同：
>   - 卡片 1：`left-6 right-6 bottom-6`
>   - 卡片 2：`left-6 bottom-20`
>   - 卡片 3：`left-6 right-28 bottom-6`
> - 全部使用 `max-w-[66%]`
> - 统计数值使用 `.font-firs font-semibold uppercase leading-none text-[36px] sm:text-[52px]`
> - 数值文本采用渐变填充：通过 `background`、`WebkitBackgroundClip: 'text'`、`backgroundClip: 'text'`、`color: 'transparent'` 应用 `linear-gradient(294deg, #185B7B 20%, #4BBDF0)`
> - 描述文本：`mt-3 text-[14px] leading-[1.4]`，颜色 `#154359`
>
> **底部渐隐叠加层：**
> - `pointer-events-none absolute inset-x-0 bottom-0 h-40 sm:h-56 z-10`
> - 背景：`linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)`——渐隐至相同的背景颜色
>
> **CSS 中所需的字体：**
> ```css
> html, body {
>   font-family: 'Inter', system-ui, -apple-system, sans-serif;
>   -webkit-font-smoothing: antialiased;
> }
> .font-firs {
>   font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif;
> }
> ```
>
> **使用的配色：**
> - Section 背景：`#F0F5F7`
> - 所有文本：`#154359`（深青色／藏青色）
> - 卡片外层背景／边框：`rgba(255, 255, 255, 0.8)`
> - 统计数值渐变：以 294deg 从 `#185B7B` 渐变至 `#4BBDF0`
> - 链接图标边框：`#154359`
> - 底部渐变：渐隐至 `#F0F5F7`
>
> **关键设计细节：**
> - 统计卡片使用 CSS `clip-path` polygons（而非 border-radius）来形成棱角分明的削角形状——每张卡片使用不同的 polygon，营造视觉变化
> - 外层容器的 1.5px padding + 白色背景在 clip-path 内营造出纤细白色边框的观感
> - 第 2 张卡片通过 `lg:mt-24` 向下偏移，在桌面端营造错落的瀑布流观感
> - 背景图像通过内联 `backgroundImage` 样式加载，而非使用 `<img>` 标签
> - 外部链接的箭头图标位于一个使用 clip-path 的小型削角方形按钮内
> - 响应式：移动端卡片堆叠为 1 栏，在 `md:` 下为 2 栏，在 `lg:` 下为 3 栏
> - 除外部链接图标按钮的 hover 上抬效果（`group-hover:-translate-y-0.5`）外，不使用其他动画

---

溯源 · 已核对已发布案例的 prompt 均经人工核对与原帖一致；平台逆向重构的 prompt 不予收录。核对原帖 ↗

适用模型与稳定度

建议模型

待补充模型