OpenAI Codex徹底火了，4個(gè)官方前端提示示例給你

gpt-5-codex徹底火了，很多人已經(jīng)從Claude code 轉(zhuǎn)向 codex了，只能說用戶都是墻頭草，只要工具好，一秒切換，毫不猶豫，OpenAI 趁熱打鐵，官方codex示例和提示詞也來了

gpt-5-codex在響應(yīng)式和移動(dòng)端前端開發(fā)方面表現(xiàn)非常好，以下是一些示例和提示詞

1.像素游戲

English:

Make a pixel art game where I can walk around and talk to other villagers, and catch wild bugs.

中文:

做一個(gè)像素風(fēng)游戲，我可以在里面四處走動(dòng)，和村民們交談，還能捕捉野生的昆蟲

2.工作管理平臺(tái)

English:

Give me a work management platform that helps teams organize, track, and manage their projects and tasks. Give me the platform with a kanban board, not the landing page.

中文:

給我一個(gè)工作管理平臺(tái)，用來幫助團(tuán)隊(duì)組織、跟蹤和管理項(xiàng)目與任務(wù)。我想要的是帶有看板的平臺(tái)本身，而不是它的介紹頁(yè)

3.根據(jù)草圖制作網(wǎng)頁(yè)

English:

Given this image as inspiration. Build a simple html page joke-site.html here that includes all the assets/javascript and content to implement a showcase version of this webapp. Delightful animations and a responsive design would be great but don't make things too busy.

中文:

以這張圖片為靈感，在這里創(chuàng)建一個(gè)名為 joke-site.html 的簡(jiǎn)單 HTML 頁(yè)面。頁(yè)面需要包含所有必要的資源文件（assets）、JavaScript 和內(nèi)容，用以實(shí)現(xiàn)這個(gè)網(wǎng)頁(yè)應(yīng)用的展示版本。如果能有令人愉悅的動(dòng)畫和響應(yīng)式設(shè)計(jì)就更好了，但別把頁(yè)面弄得太花哨

4.根據(jù)線框圖轉(zhuǎn)化為應(yīng)用程序

English:

"I have this wireframe, can you convert it to a real app for me? Generate HTML / inline CSS code for this website. Include CDN links for Tailwind / Bootstrap etc. Save your output to a file called index.html in the container's current directory."

中文:

我有一個(gè)線框圖，你能幫我把它轉(zhuǎn)換成一個(gè)真正的應(yīng)用程序嗎？請(qǐng)為這個(gè)網(wǎng)站生成 HTML 和內(nèi)聯(lián) CSS（inline CSS）代碼，并引入 Tailwind、Bootstrap 等框架的 CDN 鏈接。然后，將輸出結(jié)果保存到容器當(dāng)前目錄下一個(gè)名為 index.html 的文件中

可以試試以上提示詞，看看是否可以復(fù)現(xiàn)