GPT-6 Astra 用于网页设计：从产品简介到可用的着陆页

通过分配一个具有明确商业目标、小型视觉系统和可观察交互的完整页面，使用 GPT-6 Astra 进行网页设计。要求它在桌面和移动宽度下构建和检查页面，然后修订特定缺陷。屏幕截图可以确立方向；交付的网站还必须在用户点击、输入、滚动或返回时正常工作。

OpenAI 的网站展示包括店面、着陆页和交互式体验。它是可能输出的有用证据，但不能保证每个首次提示都能生成一个完成的网站。本指南提供了一个原创的工作流程和虚构的店面简介，而不是将一个未运行的实验作为评论呈现。

定义访客应执行的操作

对于产品页面，主要问题通常是访客是否理解产品并能找到其购买信息。在列出时尚效果之前，请选择该操作。

设想一个名为 Angle 的虚构可调节手机支架。提供的事实包括可折叠主体、可调节视角和钴蓝色饰面。其着陆页应解释这些功能，并链接到所有者提供的真实产品详情目的地。不提供销售数量、客户评论或交付承诺。

赋予其视觉语言，而非一堆参考资料

指定一些可以保持一致的决策：暖白色画布、钴蓝色产品图像、炭灰色文本、衬线标题和用于控件的内敛无衬线字体。然后说明它们如何协同工作。例如，大型产品视图引导页面；细线分隔部分；短标题支持图像。

当你明确指出你希望从每个参考网站中获得的品质时，它们会更有用。“使用参考 A 的大图像比例和参考 B 的紧凑导航”比“让它像这六个网站一样”更容易检查。保留你自己的标志、文案和产品标识。

避免在每个部分都要求新的视觉技巧。一个重复的间距节奏和一个强有力的产品处理可以使页面感觉比几个不相关的卡片样式更有条理。将其视为一种编辑设计选择，根据你的品牌进行评估，而非普遍的转化规则。

同时请求页面及其状态

在具有可用存储库、资产和预览工具的编码环境中使用 Astra。对于原型，请在工作笔记中明确标记不可用的后端操作；不要让成功的按钮动画代替真实的结账。

Build a responsive product landing page for the fictional Angle phone stand.
Use the supplied logo, product references and verified product facts.
Visual direction: warm off-white, charcoal typography and cobalt product accents.
Let product imagery lead. Use a serif display face and a quiet sans-serif for UI.
Primary action: View product details, linking to the URL I supply.
Include hero, adjustment detail, desk-use scene and a concise final action.
Implement mobile navigation, visible keyboard focus and reduced-motion behavior.
Inspect the result at 390 px and 1440 px wide. Exercise every link and control.
Deliver the working files, preview address and a short list of remaining limitations.
Do not invent testimonials, sales numbers, offers or functioning checkout services.

所提及的宽度是本次练习的测试条件，而非平台标准。请添加对你的受众重要的宽度。检查长产品名称和翻译标签，以及简短的英文示例。

分别审查设计质量和功能完整性

首先，不进行交互地浏览页面。主要产品是否足够大？标题是否做出了产品支持的特定承诺？导航和主要操作是否在视觉上清晰可辨？寻找那些只增加高度而不增加信息的重复装饰性卡片。

然后使用它。打开移动菜单，用键盘激活其链接，导航返回，如果存在真实表单，则测试表单错误。检查粘性标题是否覆盖了部分标题。在状态更改后重新加载页面，并检查应持久化的内容。

第三遍是针对动效。滚动效果不应使产品消失或阻碍下一步操作。在启用减弱动效的情况下，以及在不存在悬停效果的触摸设备上测试页面。保持安静版本完全可用。

请求有范围的修订

向 Astra 提供可见问题和要保留的周围选择。例如：“在 390 像素宽度下，主视觉照片将主要操作推到一个不必要的长段落下方。将段落缩短为产品提供的单一优势，并减小主视觉间距。保留字体、颜色、产品图片和桌面构图。”

更改后，再次检查桌面布局。如果移动端修复破坏了其他布局，则该修复是不完整的。在进行较大的艺术指导更改之前保存一个命名版本，以便你可以进行比较，而不是凭记忆重建之前的结果。

将着陆页连接到你的广告

使用已批准的产品处理作为参考，在 Panelly Studio 中进行四面板广告活动。一套连贯的广告可以展示支架放置在桌面上、其调节功能在使用中、清晰的产品详情以及探索它的邀请。着陆页随后延续相同的产品标识和提供的优势。

你可以将标题和 CTA 保留在完成的广告图片中。此工作流程不需要单独的文本图层系统。网站本身在适当情况下仍使用可访问的链接、控件和页面文本。

常见问题

Astra 能否从一个提示生成整个网站？

它可以处理大量的编码任务，但要定义“整个”包含什么。着陆页、可用的账户系统和支付集成具有不同的依赖关系和验收检查。

模型比较会告诉我应该发布哪个设计吗？

比较可以为你的评估提供信息。你的产品、品牌、交互要求和实际渲染结果仍然决定设计是否合适。

在此工作流程中 Panelly 会构建网站吗？

不。Astra 和你的编码环境处理网站。Panelly 是用于创建和优化四面板广告图片的独立工作区。

最有用的第二个提示是什么？

指出最关键的可见或功能缺陷、其位置以及期望的行为。“改进一切”会让你更难保留你已经喜欢的方向。

资料与延伸阅读

• 网站展示