浏览 —下载点击 —

Work / experiments

让 AI 做个人主页:提示词怎么写?

对比一句话、完整需求和逐轮反馈生成的个人主页,学会交代关键信息、提出具体修改,并用模板开始自己的页面。

免费阅读 · 提示词学习可复制的需求模板
01

The same goal

统一需求:一个个人介绍落地页

我想要一个放在社交简介里的个人介绍落地页。我是独立开发者林一帆(虚构人物),正在做两款效率工具:待办清单「条理」——把今天的待办压缩成三件事;日记应用「拾光」——每天三分钟,一张图加一句话。页面要能让访客快速认识我、了解并试用两款产品、通过邮箱 hi@linyifan.example 联系我。风格干净、可信,手机上也要好看。

同一个个人主页目标,分别尝试一句话、完整需求和四轮反馈。切换三份成品,看看不同沟通方式带来的差别。

02

Three outputs

切换预览三份成品

预览从页面顶部开始,可在框内滚动查看完整页面;页面为实际运行的 HTML,与源码下载一致。

成品速览:生成了可填写的个人介绍模板,姓名、作品与联系方式明确标为待填写;提供页内导航,不编造经历,也未填入林一帆与两款产品。

版本 A · 任务说明

帮我做一个个人介绍网页。

这次比较能说明什么?

A 留下了可填写的模板;B 写出了人物、产品与具体卖点;C 经四轮补充后,人物与联系方式更完整,但产品介绍仍比较笼统。“三件待办”和“一图一句话”没有出现在 C 的反馈里,不能把未提供的信息当成模型遗漏。

这三版的差异首先来自给出的资料不同。不要只说“做一个页面”或“再好看一点”:明确提供人物与产品资料,指出希望访客采取的行动;修改时说明具体位置与期望结果。

做类似页面时,可以先交代人物资料、目标访客、核心产品与主要行动;迭代结束后,再检查全页的信息、按钮、间距与手机适配是否一致。这是从本次样本得到的建议,并非所有生成任务都会得到相同结果。

把对比结果用到你的提示词里

  1. 1. 先给资料与目标。 A 只能留下占位内容。写清楚你是谁、页面给谁看、展示哪些产品,以及希望访客点击哪个入口;没有提供的经历和链接,应让 AI 留空或询问。
  2. 2. 把卖点写具体。 B 明确给出“今天三件待办”和“一图一句话”。不要只说“效率工具”,要说明它帮助谁、解决什么问题。C 的反馈没有这些资料,结果也就更笼统。
  3. 3. 修改时指出位置与标准。 例如:“保留现有产品信息,把首屏改成浅色背景;统一按钮样式;手机上卡片改为单列。”每轮都检查姓名、卖点和入口是否仍然正确。
复制模板,填入你的资料

请帮我做一个个人介绍落地页,输出单文件 HTML。 目标访客:[给谁看] 主要目标:[希望访客了解什么、做什么] 人物资料:[姓名、身份、一句话介绍;只使用我提供的事实] 产品 / 作品:[名称、目标用户、具体卖点、真实链接] 联系入口:[公开邮箱或社交链接] 页面结构:[首屏、关于我、产品 / 作品、联系区域] 视觉要求:[背景、强调色、参考风格;明确不想要的元素] 使用要求:手机上卡片单列,无横向滚动;控件有标签,支持键盘操作。 缺失信息:请先询问或明确留作待填写,不编造经历、产品地址或联系方式。 完成后检查:资料与卖点是否准确,按钮是否指向指定入口,手机排版是否可用。

生成后自己检查:有没有虚构内容?核心卖点是否遗漏?按钮能否到达正确位置?在手机上打开后,文字、卡片和控件是否完整可用?让 AI 声称“已适配”不能代替实际打开检查。

下载可填写模板
03

Side by side

三种输入,差别在哪里?

从成品看输入:给了哪些资料,页面就能表达哪些细节。

版本 A1 次生成

一句话起步

一个可填写的起点

信息表达

姓名、作品与联系方式明确待填写,没有编造个人经历

布局与视觉

文字首屏与两张作品卡片,浅色紫调

交互与适配

页内导航;未提供虚假的产品或联系链接

写提示词时

先给姓名、作品和联系资料,缺少的信息让 AI 询问或留空。

版本 B1 次生成

完整需求

目标清楚,卖点具体

信息表达

包含人物、产品名称、具体卖点与示例邮箱

布局与视觉

桌面双栏首屏、产品双卡片,使用浅色与紫色强调

交互与适配

产品说明可展开;邮件入口为无法投递的示例邮箱

写提示词时

一次交代目标、具体卖点和行动入口,让 AI 有明确的内容依据。

版本 C4 轮反馈

逐轮补充

逐步补齐,还需核对

信息表达

人物、产品、邮箱已补齐;具体卖点未出现在反馈中,说明仍笼统

布局与视觉

由浅紫首屏改为统一浅色,保持单一按钮样式

交互与适配

产品说明可展开;最后一轮添加示例邮箱与换行规则

写提示词时

每轮保留核心资料;调整视觉后,重新检查卖点和链接。

04

How it was made

制作工具与使用说明

制作工具:
Codex + GPT-6.1 Sol
  • 三种方式的信息量和反馈轮次不同,本次展示不构成模型能力排名。
  • 三份成品均为单文件 HTML,可直接使用浏览器打开,无需安装依赖。
  • 产品入口提供页内示例,帮助理解使用场景,不代表已上线服务。
  • 人物「林一帆」、产品「条理」「拾光」与邮箱均为虚构示例,邮箱使用保留域名。
  • 示例邮箱无法投递,邮件按钮会打开本机邮件客户端。
源码下载免费开放

对比成品 · 学写提示词 · 复制模板

ZIP 压缩包 · 17 KiB · 浏览器运行

使用浏览器打开 codex-version-a.html、codex-version-b.html 或 codex-version-c.html,无需安装依赖;PROMPTS.md 提供任务说明,PROMPT-TEMPLATE.md 提供可填写模板。源码采用随包 MIT 许可证;人物与产品为虚构示例。

01

About the work

作品介绍

你能学到什么:做页面前,说明给谁看、展示什么、希望访客做什么;修改时,指出具体位置和期待的结果。 怎么用:切换三份成品,对照任务说明找出缺少的信息;再复制提示词模板,填入你自己的资料。用检查清单确认内容、入口和手机排版是否符合需求。 制作工具:Codex + GPT-6.1 Sol。人物、产品与邮箱为虚构示例,产品入口为页内说明;示例邮箱无法投递。三种方式的信息量与反馈轮次不同,不构成模型能力排名。

YOUR COLLECTION

我的收藏 —

喜欢的作品,随时回来看看。

正在连接收藏…

暂时无法加载时,可以重新连接。