转载说明：原创不易，未经授权，谢绝任何形式的转载

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

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

Code Sandbox 允许您轻松在线共享和测试代码。它为您提供了自己的网站链接，可与他人共享您的项目。从一开始，您就可以访问 app 文件和 index 文件等文件，在这些文件中可以设置数据、脚本和库。此外，您可以在 styles.css 中自定义项目的通用样式，例如重置 CSS 或设置字体系列。对于主要布局，我们将使用 App.js。此文件包含基本的 HTML，并导入 style.css 文件进行样式设置。

Styled Components 在 React 应用程序中管理 CSS 变得轻而易举，它提供了可重用的、动态的组件，用于实现一致的设计。它还允许您在单个页面中在 React 和 CSS 之间无缝传递属性。

import styled from "styled-components";卡片布局

我们的下一个任务是指示 Chat GPT 生成一个包括封面图片、标题、分隔符、另一个标题、一些文本以及作者的卡片，以及他们的头像和姓名。重要的是，我们需要提供详细而精确的描述，说明我们希望在卡片中显示的信息，以及应该显示的顺序。具体来说，我们希望封面图片首先出现，然后是标题、分隔符等等。通过提供这些规格，Chat GPT 将能够生成卡片所需的代码和布局。

提示词：

Create a card with cover image, title, divider, subtitle, text, author (avatar name).

Center the card in the screen

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

import React from "react";import styled from "styled-components";const Container = styled.div` display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #f5f5f5;`;const Card = styled.div` width: 300px; border: 1px solid #e8e8e8; border-radius: 5px; overflow: hidden; background-color: #ffffff;`;const CoverImage = styled.img` width: 100%; height: 180px; object-fit: cover;`;const Title = styled.h2` font-size: 1.5rem; margin: 0.5rem;`;const Divider = styled.hr` margin: 0.5rem 0; border: 0; border-top: 1px solid #e8e8e8;`;const Subtitle = styled.h3` font-size: 1.1rem; font-weight: 400; margin: 0.5rem;`;const Text = styled.p` margin: 0.5rem;`;const Author = styled.div` display: flex; align-items: center; margin: 0.5rem;`;const Avatar = styled.img` width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;`;const AuthorName = styled.span` font-weight: 600;`;function App() { return ( Card Title Card Subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. John Doe );}export default App;

将代码完整复制到SandBox，你会看到如下效果，基本的结构就完成了：

接下来我们添加自己的图片素材，替换上图的卡片、头像，如下两张图：

卡片头图

将其传至SandBox的Src目录下，如下图所示：

今天的文章就到这里，我们在GPT4的帮助下完成了最基础的卡片结构布局，下面的文章我们将继续完成后续的动画和交互效果，让卡片变得更加酷炫。文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

https://designcode.io/

基于《Design and Code with ChatGPT and Midjourney》视频教程和文章笔记翻译分享

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正