实用教程
用 GPT-6 Astra 做商品落地页：需求怎么说，成稿怎么看？
用手机支架案例说明怎样给 GPT-6 Astra 写网页需求、检查手机布局与按钮，再通过具体指令修改。附完整中文提示词。
想让 GPT-6 Astra 做出能用的商品落地页，先说清三件事：卖什么、希望访客做什么、页面要呈现什么风格。第一版出来后，再检查手机布局和按钮是否可用。只说“做得高级一点”，很容易得到一张好看的截图，却不知道哪里还需要改。
OpenAI 的网站案例可以用来找构图和交互参考。下面用一个虚构的手机支架演示怎样写需求、检查页面和继续修改，示例提示词可直接改用，不是已经运行过的产品测评。
先确定访客看完要做什么
商品页先要回答“这是什么、有什么用、去哪里了解详情”。把这条路径理顺，再决定要不要加滚动动画和装饰效果。
假设商品是 Angle 手机支架，已有资料只有三项：可以折叠、角度可调、钴蓝色外观。页面需要把这三点讲清楚，并链接到你提供的商品详情地址。没有提供的销量、用户评价和发货承诺，就不写。
| 页面部分 | 需要讲清什么 | 怎么检查 |
|---|---|---|
| 首屏 | 商品是什么、主要用在哪里 | 手机上能看清支架，并找到下一步入口 |
| 调节细节 | 支架怎样调整角度 | 图片里的结构和文字说明一致 |
| 使用场景 | 放在桌面上有什么用 | 场景里仍能认出同一款支架 |
| 主按钮 | 去哪里了解详情 | 点击后到达你提供的地址 |
| 手机导航 | 怎样找到各部分内容 | 菜单能展开、关闭，也能用键盘操作 |
把“高级感”说成具体的设计要求
可以先定一小组规则：暖白背景、炭灰正文、钴蓝色商品图，大标题用衬线字体，导航和按钮用简洁的无衬线字体。再交代主次：让商品大图吸引注意，细线分隔内容，图旁只留必要的短说明。
给参考网站时，说清借鉴哪一点。例如“参考 A 的大图比例、参考 B 的紧凑导航”，比“像这六个网站一样”更容易落实。自己的 logo、商品图和文案仍然保留。
不必每一屏都换一种卡片或动效。同样的间距、字体和图片比例重复使用，往往更容易保持整体感。这是需要结合品牌判断的设计选择，不能据此承诺转化率提升。
一次说清页面内容和交互
在能访问代码、素材和预览工具的开发环境中使用 Astra。先把真实商品资料准备好。如果只是演示页，也应在交付说明里写明哪些功能还没接后端，按钮出现成功动画不代表订单已经创建。
为虚构的 Angle 手机支架制作一个适配手机和电脑的商品落地页。
使用我提供的 logo、商品参考图和资料：可折叠、角度可调、钴蓝色外观。
视觉方向：暖白背景、炭灰文字，以钴蓝色商品图为重点。
让大幅商品图主导页面；大标题用衬线字体，导航和按钮用简洁的无衬线字体。
主按钮写“查看商品详情”，链接到我提供的地址。
内容依次为首屏、角度调节细节、桌面使用场景和简短的结尾引导。
实现手机导航、清楚可见的键盘焦点，以及减少动态效果的适配。
分别在 390 px 和 1440 px 宽度下预览，实际点击每个链接和控件。
交付代码文件、预览地址，并列明还没完成的功能。
不要编造用户评价、销量、优惠或已经接通的支付功能。390 px 和 1440 px 是这次练习的检查尺寸，不是所有网站都必须遵守的标准。实际还要覆盖目标用户常用的宽度。把短商品名换成长名称、把按钮切换成其他语言，也看看会不会挤出边界。
先看页面，再动手操作
先不点击，只看重点是否清楚：商品够不够大，标题有没有说明真实用途，主按钮能不能一眼找到。那些占了半屏、又没增加信息的装饰卡片，可以删掉或缩短。
然后实际操作。展开手机菜单，用键盘进入链接，返回上一页；有表单就试试填错后的反馈。点击导航后，吸顶栏有没有遮住小标题？刷新页面后，需要保留的状态还在不在？这些问题只看截图发现不了。
最后检查动效。滚动时商品不应突然消失，动画也不应挡住按钮。开启系统的“减少动态效果”设置再试一次；手机没有鼠标悬停，关键信息也必须能直接看到。
每一轮修改都说明“改哪里、保留什么”
例如：“在 390 px 宽度下，首屏图片和长段落把主按钮挤得太靠下。把段落缩成商品的一条主要优势，减小首屏上下留白。保留字体、配色、商品图和电脑端的构图。”这比“整个页面再优化一下”更明确。
改完手机端，再看一遍电脑端，避免修好一个尺寸、破坏另一个。大幅调整风格前保存一个带名称的版本，之后可以直接对比，不必靠记忆描述上一版。
让广告和落地页讲同一件事
确定商品在页面里的呈现方式后，可以把参考图带到 Panelly Studio，继续做四格广告：先出现桌面使用场景，再展示角度调节、商品细节，最后引导用户了解支架。广告点进页面后，仍然看到同一款商品和同一个卖点，信息才接得上。
广告图片里的标题和 CTA 可以随画面一起生成，不必为了这一步拆成独立图层。网页中的按钮、链接和正文则按网页方式实现，保证可以点击、选择和通过辅助工具读取。
常见问题
一句话能让 Astra 做出整个网站吗？
可以用一段需求启动开发，但要先界定“整个网站”包含什么。展示商品、登录账户和真实收款，需要接入的服务和检查项都不同。交付时逐项操作，才能知道哪些已经完成。
看模型榜单就能决定页面设计吗？
榜单可以作为选工具的参考，不能替你判断这个页面是否适合商品。仍然要看实际画面、品牌要求和操作是否顺畅。
这里的网站是由 Panelly 生成的吗？
不是。网站由 Astra 配合开发环境完成；Panelly 用来创作和修改配套的四格广告图片。
第一版出来后，第二句话该怎么说？
选一个最影响使用的问题，说出位置、期望效果，以及不希望改变的部分。比如先解决手机上找不到主按钮的问题，再继续调整装饰细节。
