一句话起步
一个可填写的起点
信息表达
姓名、作品与联系方式明确待填写,没有编造个人经历
布局与视觉
文字首屏与两张作品卡片,浅色紫调
交互与适配
页内导航;未提供虚假的产品或联系链接
Work / experiments
对比一句话、完整需求和逐轮反馈生成的个人主页,学会交代关键信息、提出具体修改,并用模板开始自己的页面。
The same goal
我想要一个放在社交简介里的个人介绍落地页。我是独立开发者林一帆(虚构人物),正在做两款效率工具:待办清单「条理」——把今天的待办压缩成三件事;日记应用「拾光」——每天三分钟,一张图加一句话。页面要能让访客快速认识我、了解并试用两款产品、通过邮箱 hi@linyifan.example 联系我。风格干净、可信,手机上也要好看。
同一个个人主页目标,分别尝试一句话、完整需求和四轮反馈。切换三份成品,看看不同沟通方式带来的差别。
Three outputs
预览从页面顶部开始,可在框内滚动查看完整页面;页面为实际运行的 HTML,与源码下载一致。
成品速览:生成了可填写的个人介绍模板,姓名、作品与联系方式明确标为待填写;提供页内导航,不编造经历,也未填入林一帆与两款产品。
帮我做一个个人介绍网页。
A 留下了可填写的模板;B 写出了人物、产品与具体卖点;C 经四轮补充后,人物与联系方式更完整,但产品介绍仍比较笼统。“三件待办”和“一图一句话”没有出现在 C 的反馈里,不能把未提供的信息当成模型遗漏。
这三版的差异首先来自给出的资料不同。不要只说“做一个页面”或“再好看一点”:明确提供人物与产品资料,指出希望访客采取的行动;修改时说明具体位置与期望结果。
做类似页面时,可以先交代人物资料、目标访客、核心产品与主要行动;迭代结束后,再检查全页的信息、按钮、间距与手机适配是否一致。这是从本次样本得到的建议,并非所有生成任务都会得到相同结果。
请帮我做一个个人介绍落地页,输出单文件 HTML。 目标访客:[给谁看] 主要目标:[希望访客了解什么、做什么] 人物资料:[姓名、身份、一句话介绍;只使用我提供的事实] 产品 / 作品:[名称、目标用户、具体卖点、真实链接] 联系入口:[公开邮箱或社交链接] 页面结构:[首屏、关于我、产品 / 作品、联系区域] 视觉要求:[背景、强调色、参考风格;明确不想要的元素] 使用要求:手机上卡片单列,无横向滚动;控件有标签,支持键盘操作。 缺失信息:请先询问或明确留作待填写,不编造经历、产品地址或联系方式。 完成后检查:资料与卖点是否准确,按钮是否指向指定入口,手机排版是否可用。
生成后自己检查:有没有虚构内容?核心卖点是否遗漏?按钮能否到达正确位置?在手机上打开后,文字、卡片和控件是否完整可用?让 AI 声称“已适配”不能代替实际打开检查。
下载可填写模板Side by side
从成品看输入:给了哪些资料,页面就能表达哪些细节。
一个可填写的起点
姓名、作品与联系方式明确待填写,没有编造个人经历
文字首屏与两张作品卡片,浅色紫调
页内导航;未提供虚假的产品或联系链接
目标清楚,卖点具体
包含人物、产品名称、具体卖点与示例邮箱
桌面双栏首屏、产品双卡片,使用浅色与紫色强调
产品说明可展开;邮件入口为无法投递的示例邮箱
逐步补齐,还需核对
人物、产品、邮箱已补齐;具体卖点未出现在反馈中,说明仍笼统
由浅紫首屏改为统一浅色,保持单一按钮样式
产品说明可展开;最后一轮添加示例邮箱与换行规则
How it was made
对比成品 · 学写提示词 · 复制模板
ZIP 压缩包 · 17 KiB · 浏览器运行
使用浏览器打开 codex-version-a.html、codex-version-b.html 或 codex-version-c.html,无需安装依赖;PROMPTS.md 提供任务说明,PROMPT-TEMPLATE.md 提供可填写模板。源码采用随包 MIT 许可证;人物与产品为虚构示例。
About the work
你能学到什么:做页面前,说明给谁看、展示什么、希望访客做什么;修改时,指出具体位置和期待的结果。 怎么用:切换三份成品,对照任务说明找出缺少的信息;再复制提示词模板,填入你自己的资料。用检查清单确认内容、入口和手机排版是否符合需求。 制作工具:Codex + GPT-6.1 Sol。人物、产品与邮箱为虚构示例,产品入口为页内说明;示例邮箱无法投递。三种方式的信息量与反馈轮次不同,不构成模型能力排名。