跳到主要内容
AI教程

使用 Design on the Flank 创建 Framer 3D 和 WebGL 组件

了解如何结合 Codex、Claude、Claude Code 或 ChatGPT 使用 Design on the Flank，生成完整的 Framer 代码组件。本教程涵盖环境设置、提示词、Framer 集成、Properties 自定义、测试，以及 3D、WebGL 和 GSAP 特效的实用技巧。

AI我搜编辑部阅读约 6 分钟
使用 Design on the Flank 创建 Framer 3D 和 WebGL 组件

什么是 Design on the Flank？

Design on the Flank 是一项用于构建 Framer 代码组件的 AI 技能，支持 Three.js、WebGL 和 GSAP。配合 Codex、Claude、Claude Code 或 ChatGPT 使用时，它可以根据文字描述或视觉参考，帮助你创建 3D 场景、着色器效果、基于滚动的动画和自定义交互。

每个生成的组件都会以完整的 TSX 文件形式提供，你可以将其复制到 Framer 中。组件设置会显示在 Framer 的属性面板中，因此无需编辑代码即可修改内容、颜色、图像和运动参数。

主要功能

  • 3D 图形：创建产品场景、粒子系统、材质、光照以及鼠标或触摸交互。
  • WebGL 效果：构建图像变形、波纹、过渡和自定义着色器效果。
  • GSAP 动效：使用时间轴、文字效果、过渡序列以及与滚动位置关联的动画。
  • Framer 集成：生成响应式布局、属性控件以及可直接在 Framer 中使用的组件。
  • 组件编辑：扩展现有组件或修复问题，同时保留请求范围之外的设置。

选择 AI 平台

该项目支持多种 AI 工作流程。请选择与你当前使用的工具相匹配的方式。

使用 Codex 安装技能

最快的设置方式是让 Codex 直接从代码仓库安装该技能。

Cài skill Design on the Flank từ https://github.com/Chien1618/design-on-the-flank/tree/main/skills/design-on-the-flank

安装完成后，开始新的对话，并描述你想要创建的 Framer 组件。上面的请求使用越南语编写，与项目 README 保持一致，但同样的工作流程也可以调整为你偏好的语言。

在 ChatGPT 中使用知识文件

对于 ChatGPT，请将入门知识文件附加到对话中，然后描述你想要的组件。请说明所需的视觉行为、交互模型以及希望在 Framer 中公开的设置。

如果 ChatGPT 请求额外文档或无法打开链接资源，请下载所需文件并将其附加到同一对话中。项目提供了详细的 ChatGPT 指南。

逐步创建 Framer 组件

  1. 描述预期结果。说明视觉效果、用户交互以及应当可以在 Framer 中调整的参数。你也可以提供参考图像、视频或现有代码。
  2. 请求完整代码。要求 AI 提供完整的 TSX 文件；如果组件需要额外资源，则要求提供完整的代码脚手架。
  3. 将代码移入 Framer。创建 Framer 代码组件，用生成的代码替换示例内容，然后将组件添加到页面中。详细流程请参阅 Framer 集成指南。
  4. 自定义并测试。在属性面板中调整已公开的设置，然后打开预览，测试动画、滚动、鼠标输入、触摸输入和响应式行为。

编写有效的提示词

高质量的提示词应同时描述所需的外观和控件。请说明组件的作用、动画行为、交互模型，以及应当可以通过属性进行编辑的值。

例如，你可以这样请求一个 3D 首屏区域：

Dùng Design on the Flank tạo hero sản phẩm 3D cho Framer, chuyển góc nhìn theo cuộn và cho phép chỉnh model, ánh sáng, nội dung trong Properties.

用英语表达时，同一个请求会要求创建一个用于 Framer 的 3D 产品首屏区域、一个会随滚动改变的摄像机角度，以及可在属性中编辑的模型、光照和内容设置。你可以在项目的示例提示词指南中找到更多示例。

使用外部资源

某些组件需要 3D 模型、图像或其他私有数据。遇到这种情况时，请将相关资源提供给 AI，并按照生成代码中包含的设置说明进行操作。在所需资源配置完成之前，不要假设依赖资源的组件能够正常运行。

组件进入 Framer 后，请使用属性调整生成代码所公开的设置。根据组件的不同，这些设置可能包括内容、颜色、图像和运动参数。

高级技巧

准确描述交互

对于 Three.js 和 WebGL 组件，请明确体验应响应鼠标、触摸、滚动位置，还是这些输入的组合。说明效果应如何开始、变化和结束，以便生成的动画符合预期行为。

将可编辑设置与实现细节分离

告诉 AI 哪些值应在 Framer 的 Properties 面板中提供。这样可以在保留 TSX 组件内部实现的同时，让内容和视觉参数保持可调。

编辑时保留现有配置

要求 AI 修改现有组件时，请明确需要处理的功能或错误，并要求其保留无关设置。Design on the Flank 专门支持扩展组件或修复问题，同时不更改请求范围之外的配置。

在预览中测试

使用 Framer Preview 验证响应式布局、滚动过渡、指针交互、触摸行为和资源加载。如果需要进行调整，请在后续请求中描述观察到的问题和期望的结果。

故障排除与文档

如遇常见问题，请查阅项目的故障排除指南和常见问题。文档还包含将生成的代码移入 Framer 的分步指南。

Design on the Flank 融合了来自 Framer Labs 的 Framer 和 Three.js 知识，以及来自官方 GreenSock 的 GSAP 技能。使用前，请查看项目的使用条款和第三方归属信息。

结语

Design on the Flank 提供了一套实用的 AI 辅助工作流，用于结合 Three.js、WebGL 和 GSAP 创建 Framer 代码组件。安装该技能或附加其知识文件，描述你想要的体验，将生成的 TSX 复制到 Framer 中，然后通过 Properties 面板和 Preview 进一步完善结果。