使用 ChatGPT 和 React 创建一个惊艳的3D卡片（一）

本系列文章将使用 ChatGPT、React 和 CodeSandbox 处理错误、图像占位符和协作，来探索如何创建一个惊艳的 3D 卡片，利用鼠标位置创建光照效果。这种设计在现代网站布局中非常常见。我们将深入了解如何使用网络技术创建这种动态效果，并利用 ChatGPT 的强大功能来解决可能出现的任何问题。这将是一次令人兴奋和愉快的学习体验。

案例展示

最终完成的效果如下图所示，一个漂亮的毛玻璃背景卡片，鼠标放上去还有一种光照跟随的效果，今天的文章我们将完成最基础的布局结构，相关的动画和交互效果将在下面的文章进行介绍。

初始提示词

在使用 Chat GPT，尤其是 GPT4 的过程中，我意识到了准确描述和设置明确的参数对于 AI 的工作有多么重要。例如，作为一名 Web 开发者，明确指定自己专精于 React 和 CSS，以及自己偏好使用的编码风格和库，是非常关键的。

提示词

You're a web developer that specializes in React and CSS.

- For CSS, use Styled-Components.
- Use CodeSandbox to quickly build prototypes.
- Provide steps to create a new project in CodeSandbox.
- Provide steps to install any third party libraries that we need.
- Create everything inside App.js

中文翻译

你是一位专精于 React 和 CSS 的 Web 开发者。在 CSS 中，使用 Styled-Components。使用 CodeSandbox 快速构建原型。提供在 CodeSandbox 中创建新项目的步骤。提供安装任何需要的第三方库的步骤。在 App.js 中创建所有内容。

在 ChatGPT-4 输入以上指令，你将会看到如下效果：