小红书 / AI 网页 + 3D 交互 + Pretext 设计合集

2026 现象级开源项目 Pretext 引爆全民创作时代。23 篇创作者作品 + 教程,从前端排版到 3D 建模,普通人都能搭出"电影级网页"。

一、Pretext — 2026 现象级前端排版库

项目概览

开发者:程楼(著名 React 动效作者,前端基础设施工程师)
原贴围观:2100 万+
核心能力:前端排版库,让文字根据画面流动实时重新排版
Karpathy 都转发了

核心思路

类似 Word 文档插图就要到处调节排版的痛点 — Pretext 让前端设计变成一键生成。前端设计师不再需要辛苦一个个调节。

典型应用

场景	效果
儿童故事可视化	每句话生成由文字组成的图案
3D 模型 + 实时排版(古迹展示)	默认仔细阅读古迹介绍,拖动旋转建筑时文字不挡视线
2 分钟 Demo APP	GitHub 代码丢给 AI(StarChild)2 分钟出 Demo

实操流程(古迹 3D + Pretext 教程)

1. 安装 Pretext + 程楼基于 Pretext 开发的框架
   方式:把两个项目拖给 CloudCoder 或 Codex 让它装
2. 跑一张图(任意图片生成工具)
3. 用 AI 3D 工具把图片转 3D 模型(下载 GLB 格式)
4. 把 GLB 文件拖到框架的资产文件夹
5. 让 CloudCoder 启动端口,弹出网页
6. 在网页里玩 3D + 实时排版交互

Pretext 的更大意义

"AI 时代越来越多人更容易表达自己。不适合在镜头前表达的人,通过 Pretext 等开源技术,可以制作艺术动画来表达自己。AI 让创造平民化。"

二、电影感网页 SOP(设计师妍妍)

"就算不用最强的 AI(Claude Code),只要学会这套做法,照样能做出电影级的网页。"

完整工作流(6 步)

Step 1: 翻参考网站 — 先把 3 件事定下来

不是找灵感,是定方向:

页面气质(安静 vs 冲)
主视觉长什么样
节奏怎么摆

"你不先想明白,后面 AI 就只能按自己的理解乱猜。"

Step 2: Nano Banana 做背景氛围

先做发光流动偏科幻的底图一批。

"很多网页看起来不高级,就是背景那一层就没撑起来,底子一平,整个页面就很难有电影感。"

Step 3: 做人物 — 网页人物图 ≠ 角色设定图

角色设定图	网页人物图
追求完整	构图干净,位置好,裁进页面不会挤
一张大图	半身白底 + 不同角度

Step 4: 做动态素材(网页视频 ≠ 短视频)

短视频	网页视频
复杂剧情	能循环,别穿帮,气质稳,动得自然

Step 5: Google AI Studio 搭页面 — 信息要给够

关键信息清单:

页面类型(如:Crypto LANDING page)
技术栈(React + TypeScript + Tailwind + Vite)
风格意图
背景图 / 视频链接

"AI 才知道自己是在搭一个什么页面,不然特别容易给你一套看起来没错,但也没什么记忆点的标准网站。"

Step 6: 去 Landingbook 抓第一屏排版

专门看 Landingpage 的第一屏怎么排。截图发给 AI + 补充说明 → 做 4-5 个内容区块(借布局感觉,不要原样抄)。

Step 7: Higgsfield 挑人物图 → Seedance 视频模型

挑正面 / 侧面 / 半身 / 不同表情,一张一张看 → Seedance 做成动态效果 → 与场景结合做成视频。

Step 8: 细修页面

直接对 AI 点名:"master your digital assets 这个区块,右边那张静态图别用了,换成视频" → 统一首页和下方卡片视觉语言。

核心心法

"厉害的人不是用到最新模型的人,是能把任何模型快速用成自己手和脑子延伸的人。今天这个工具能做,明天那个工具更强,后天可能又换名字了,别变成被模型牵着走的人。要变成能驾驭模型的人。"

"会追新的人很多,会把东西做成的人很少。"

三、让 Vibecoding 高级感页面(小壮 — 审美篇)

3 个固定刷的 UI 审美库

网站	特点
Page Flows	收录全球一线热门产品完整 UI 设计页面 + 真实用户流程示例(如 Lovable / Crowd),含详细屏幕录像
Godly (godly.website)	偏重高级感和创意感的视觉交互网站,艺术 / 人文风格 Web Coding 适用(小红书原文误作 "Godley")
Mobbin	按行业和 UI 元素筛选,细节层面(搜索页 / 设置页 / 弹窗都有),兼具创意 + 落地

2 个借鉴小技巧

技巧 1:截图直接复刻

提示词:
请参考附件中的 UI 设计风格,帮我统一优化 UI 视觉,产品功能保持不变。

技巧 2:让 AI 帮你提炼风格(Gemini 风格翻译官)

把 UI 图或交互录屏丢给 Gemini,让它总结:
1. UI 风格关键词
2. 交互逻辑
3. 页面结构

然后把提炼好的关键词喂给你的 Web Coding 工具。

"不会设计没关系,但你要会选设计,慢慢培养自己独特的审美判断力。你喂给 AI 什么水平的设计,它就会给你做出什么样的页面。"

四、让 Vibecoding 页面动起来(小壮 — 动效篇)

3 个顶级动效组件库

库	特点	适用
Unicorn Studio	不需任何设计 / 代码基础。内置无数 WebGL 动画 + 高级交互。支持一键复制 + 上传自己的图像 + 导出视频	顶级视觉创意
React Bits (reactbits.dev)	Vibe Coding 动效全家桶,几乎收录全网开源动效(动态背景 / 文本效果),支持高度定制化	1:1 视觉复刻(小红书原文误作 "React Beats")
Design Spells	专门收录全球顶级产品微动效(按钮弹性反馈 / 输入框聚焦律动)	解决 Vibe Coding 生硬感,精致度 +10×

2 个 AI 投递技巧

方法 1:代码 + 文档喂养法

提示词:
请参考以下 React Bits (reactbits.dev) 的组件代码及官方文档说明,
帮我实现一个逻辑完全一致的 XX 动效,
注意保持原有动画的曲线和延迟参数。

方法 2:Gemini 动效翻译官

录屏发给 Gemini,让它提炼:

动画触发时机(悬停 / 滚动)
缓动函数类型(Spring 弹性 / Easy in out 平滑)
关键帧参数

→ 投喂给 Web Coding 工具精准复刻

五、Gemini 3D 粒子动画 + 手势识别(猫学长)

教程 SOP(全网最全 Gemini 教程)

步	内容
1. 开 Gemini 网页版 + 设置 Canvas 模式	不用 AI Studio,因为它默认 React,不适合小白
2. 输入提示词	截图扔给豆包识别即可
3. 等 Gemini 3 写完代码
4. 创建 index.html	在线预览不能全屏 → 创建本地文件夹 + index.html + 全选粘贴
5. 拖到 Chrome 浏览器全屏

技术栈选择(关键)

技术	用途
前端三件套(HTML/CSS/JS 揉一个 HTML)	新手友好(对比 React 分散文件)
MediaPipe	手势识别库
Three.js	3D 渲染

500 行代码不到的视觉感:库代码没显示,只是看不到。

Gemini 3 五种 3D 粒子玩法

(具体待补全;核心是 Three.js + 粒子系统 + Gemini 写代码 + Canvas 渲染)

六、AI 3D 建模 — Hitem3D (hi3d.AI)

用法

Step	操作
1	准备图片 → hi3d.AI
2	模型选 2.0(资产级 PBR 场景投入 + 纹理效果好)/ 2.1(人像结构 + 三庭五眼 + 脸型轮廓还原好,新增浮雕功能)
3	分辨率选 1536 Pro
4	勾选几何 + 纹理(更高清还原)
5	3 次免费重试
6	下载格式

适用场景

游戏角色 / 3D 手办 / 艺术藏品 / 文物修复
一张图 → 自带真实纹理感的高精度三维模型
自动补全看不见区域 + 光影修正(消除阴影高光)

七、Google Genie 3 — 世界生成模型

最新世界模型:输入一句话 / 一张图片 → 生成可实时互动 + 无限探索的 3D 世界。

"进入真实的角色视角,用喜欢的方式创造一个鲜活、不断拓展的 AI 世界。"

八、AI 实时生成无穷尽网页(X 爆火,Karpathy 转发)

"知识的海洋怎么可以用长文与生成式界面那样的细吸管汲取呢?"

核心:不需要切换多个网站,点击目标地点 → AI 生成相关介绍。高度个性化的网页。

顶部有导航栏可返回
旅游攻略场景:云游巴厘岛感
文字渲染有欠缺,但高质量版本完全没问题 + 多很多细节
"不敢想象小时候学习有它该有多爽"

"这个作品打开了大家对网页的想象力,原来信息之间是可以没有边界的。"

九、国内可用的 Vibecoding 模型 — Minimax 2.7

适用人群:国内网络限制,用不了 Claude Code 官方模型。

Minimax Plus 版本:

Token 5 小时可调用 1500 次
速度快
支持图像理解 + 联网搜索
从网站构思 → 页面设计 → 部署开发可全用这一个模型

搭配工具:Claude Code(国内能用的客户端)+ Minimax 2.7 模型

十、Pretext 之外的延伸(GPT Image 2 全景)

用 gpt image 2 做 360 全景图 — 后期补充类视觉创作工具。

关键 AI 工具一览(B2)

工具	用途
Nano Banana	网页背景/底图氛围
Higgsfield	网页人物素材(不同角度表情)
Seedance	视频生成模型
Google AI Studio	搭页面主力(技术栈说清楚)
Landingbook	Landing page 第一屏排版灵感
Page Flows / Godly / Mobbin	UI 审美 3 库
Unicorn Studio / React Bits / Design Spells	动效 3 库
Hitem3D (hi3d.AI)	AI 3D 建模
Genie 3	Google 世界生成模型
Gemini 3	3D 粒子 + 手势识别
MediaPipe	手势识别库
Three.js	3D 渲染
GPT Image 2	图像生成 / 360 全景图
Pretext	前端排版库(程楼)
Minimax 2.7 Plus	国内可用 Vibecoding 模型