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

在上一篇文章中，我们一起使用 ChatGPT 和 React 构建了一个基本的卡片布局，效果如下图所示。如果您还没有看过上一篇文章，可以通过这个链接快速查看《使用 ChatGPT 和 React 创建一个惊艳的3D卡片（一）》。

在此基础上，我利用 Figma 软件对卡片进行了优化和设计。下图展示了我们设计的效果图。在本篇文章中，我们将基于这个设计完善上述案例，让这个卡片更加炫酷。废话不多说，让我们借助 GPT4 开始编码吧！

如需要figma素材，请关注「前端达人」公众号，私信我"卡片素材"获取

暗黑模式

接下来，我们将使用 ChatGPT 将网站设置为暗黑模式，并添加一个背景图像。AI 建议更新样式组件中的容器和所有相关元素以实现这一点。

提示词

Make the site in dark mode and set a background image

输入提示词的效果，效果如下图所示：

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: #212121;
  background-image: url("https://via.placeholder.com/1920x1080");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
`;

const Card = styled.div`
  width: 300px;
  border: 1px solid #424242;
  border-radius: 5px;
  overflow: hidden;
  background-color: #424242;
  color: #ffffff;
`;

// ... (other styled-components, update colors for dark mode)

function App() {
  return (
    <Container>
      <Card>
        <CoverImage src="https://via.placeholder.com/300x180" alt="Cover" />
        <Title>Card Title</Title>
        <Divider />
        <Subtitle>Card Subtitle</Subtitle>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a