【ChatGPT】工程师可使用的通用提示

工程师可使用的通用提示符

あなたは、プロの【その分野の専門家】です。

以下の制約条件と入力文をもとに、【出力内容】を出力してください。

# 制約条件
  - 前提条件
  - 決まりごと

# 入力文
期待する出力結果・指示

句：我正在吃晚餐的时候接到了电话。

Paraphrased in Chinese: 当我正在用餐的时候，我接到了一个电话。

	あなたは、プロのプログラマーです。
	
	以下の制約条件と入力文をもとに、プログラムを出力してください。
	
	# 制約条件
	  - JavaScriptを使うこと
	  - React 18.1.0を使うこと
	  - AtomicDesignでコンポーネントを作ること
	  - 初心者でも分かりやすいコードを書くこと
	  - コメントを残すこと
	
	# 入力文
	huluやネットフリックスのサービスページのような動画一覧ページを作成する
	CSSもつけてリッチなデザインにする。

输出结果

以下代码是一个使用React 18.1.0和Atomic Design创建类似Hulu或Netflix视频列表页面的简单示例。为了让初学者也能理解，我添加了注释。

首先，我们将根据原子设计原理进行组件设计。在这个例子中，我们将创建具有以下层次结构的组件。

1. 原子（Atoms）：基本的的HTML元素

1. 分子（Molecules）：由原子组合而成的小功能单元的组件

1. 有机体（Organisms）：由分子组合而成的大功能单元的组件

1. 模板（Templates）：由有机体组合而成的页面布局

页面（Pages）：将数据注入模板中，完成的实际页面

// Atoms/Image.js
import React from 'react';

const Image = ({ src, alt, ...props }) => {
  return <img src={src} alt={alt} {...props} />;
};

export default Image;

// Atoms/Title.js
import React from 'react';

const Title = ({ children, ...props }) => {
  return <h2 {...props}>{children}</h2>;
};

export default Title;

// Molecules/Thumbnail.js
import React from 'react';
import Image from '../Atoms/Image';
import Title from '../Atoms/Title';

const Thumbnail = ({ imageUrl, title, ...props }) => {
  return (
    <div className="thumbnail" {...props}>
      <Image src={imageUrl} alt={title} />
      <Title>{title}</Title>
    </div>
  );
};

export default Thumbnail;

// Organisms/VideoList.js
import React from 'react';
import Thumbnail from '../Molecules/Thumbnail';

const VideoList = ({ videos, ...props }) => {
  return (
    <div className="video-list" {...props}>
      {videos.map((video) => (
        <Thumbnail key={video.id} imageUrl={video.imageUrl} title={video.title} />
      ))}
    </div>
  );
};

export default VideoList;

// Templates/VideoGallery.js
import React from 'react';
import VideoList from '../Organisms/VideoList';

const VideoGallery = ({ videos, ...props }) => {
  return (
    <main className="video-gallery" {...props}>
      <VideoList videos={videos} />
    </main>
  );
};

export default VideoGallery;

// Pages/VideoGalleryPage.js
import React from 'react';
import VideoGallery from '../Templates/VideoGallery';

const VideoGalleryPage = ({ videos }) => {
  return <VideoGallery videos={videos} />;
};

export default VideoGalleryPage;

接下来，我们将添加CSS以创建丰富的设计。在这个例子中，我们应用了简单的样式，但您可以根据个人喜好进行自定义。

/* styles.css */
.thumbnail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.thumbnail h2 {
  margin-top: 10px;
  font-size: 18px;
  text-align: center;
  color: #333;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

.video-gallery {
  padding: 40px 0;
  background-color: #f5f5f5;
}

出来上がり (chū qǐ)

嗯，雖然距離Netflix的設計還有很大差距，
但我成功地請求ChatGPT進行程式輸出。

请参考时一定要向GPT先生请教。