转化页面：价值主张、演示与信任证明

把“网站要展示价值”变成一张具体页面。本节完成ClearCopy首页的第一屏和示例区：读者看见输入是什么，点击按钮后到达完整样例，再决定要不要使用自己的文案。

准备一个已有的Astro教学项目。没有项目时，可以先把下面的HTML保存为landing-demo.html，双击在浏览器打开，查看结构和跳转；它是静态演示，不会调用模型或扣费。

直接搭出这份首屏

将下面内容放进Astro页面的主体，或独立HTML文件的body中：

<main>
  <h1>Check your English app description before you publish.</h1>
  <p>Paste your product facts and draft. Get a clearer rewrite
    and find claims your app doesn't support.</p>
  <a href="#sample">Try the packing-list example</a>
  <p>10 completed checks for $9. No automatic renewal.</p>

  <section id="sample" aria-labelledby="sample-title">
    <h2 id="sample-title">Sample: remove a sync claim</h2>
    <h3>Product facts</h3>
    <p>An offline packing-list app. Create trips, check off items,
      and reuse lists. No accounts or cloud sync.</p>
    <h3>Draft</h3>
    <p>Sync your packing list across all devices.</p>
    <h3>Sample result</h3>
    <p>Unsupported claim: cross-device sync.</p>
    <p>Suggested rewrite: Reuse your packing list for future trips.</p>
  </section>
</main>

打开页面后，你应看见一句动作标题、一句输入与输出说明、示例链接和9美元说明。点击示例链接，浏览器移到Sample: remove a sync claim。这就形成一个完整的小动作，不需要先注册才能弄懂工具。

暂时别加五个并列按钮、自动播放视频和倒计时。先把这条阅读路线做顺。如果手机首屏只能看见装饰图，缩短图片区高度，让标题和示例入口露出来。

为真实输入区写好标签和错误文字

示例解释清楚后，再在自己的已有工具入口放输入表单。先保存这份可复用HTML结构，本稿的按钮先用type="button"，点击不会默认提交或刷新而丢掉输入；它本身不含后端实现：

<form>
  <label for="facts">Product facts</label>
  <textarea id="facts" name="facts" required
    aria-describedby="facts-help"></textarea>
  <p id="facts-help">List only features your app already provides.</p>

  <label for="draft">English description draft</label>
  <textarea id="draft" name="draft" required></textarea>
  <button type="button">Check description</button>
  <p role="status" aria-live="polite"></p>
</form>

W3C表单教程把标签、填写说明和反馈分开讲。这里的label告诉读者每个框填什么，facts-help提醒填写真实功能，状态区域接收“Checking…”或错误提示。不要只在空框里放placeholder，输入后说明就消失。

真正接入检查接口时，再将按钮改为submit，在form的submit监听器开头调用event.preventDefault()，完成输入校验后由已有接口处理，别让默认页面提交先发生。静态稿仍保留type="button"。

用行李清单事实填第一个框，用含同步宣称的句子填第二个框。接口开始处理时显示Checking your description…；成功后显示报告标题和复制入口；失败时给出We couldn't complete this check. Your credits were not used. Try again.。最后一句必须与你实现的扣次规则一致。你在静态原型里可以展示这些状态稿，但不要让按钮伪装成完成了真实检查。

先把“信任”放在用户正在犹豫的地方

检查报告下方放一条具体说明：Sample report written for this demo.，让读者知道这里是人工样例。价格旁写清一次性与次数。页脚放能联系到你的支持入口、隐私政策和数据处理说明。比起填三条虚构好评，这些信息更能帮助用户做决定。

Google的内容质量问题会要求作者解释内容是否原创且可信。本页对应的做法是给出完整输入和结果，让读者自行看出“sync”为什么被删掉。若以后有实际用户评价，征得使用同意后再加，保留评价发生的产品情境。

用手机宽度完成一次操作

在浏览器缩窄窗口到约390像素。依次读标题、点示例、找到被标出的同步宣称。如果必须横向滚动才看得完一句正文，给内容容器设置宽度上限与内边距，代码块才允许局部横向滚动。

再用键盘按Tab：应能依次到示例链接、事实输入、描述输入和提交按钮。焦点要看得见。点击Product facts标签时，光标应进入对应文本框；如果没有，检查for和id是否一致。

不要把“提交成功”的唯一提示放在一张图片里。报告正文、错误和次数变化都用真实文字显示，手机放大与辅助阅读才能使用。

检查首页主内容是否被大图拖住

打开web.dev的LCP说明，配图标出的2.5秒是官方良好阈值，关注的是大部分真实访问在手机和桌面上的表现，不能用一次本地跑分宣布所有人都快。

如果首页有大图，先压缩成合适尺寸并写入宽高；本节的核心示例已经是文字，不必等大图下载后才出现。用浏览器性能工具检查最大的可见元素是什么。如果它是首屏横幅，优先减小图片与消除阻塞加载；如果是标题但等待API完成才显示，把公开标题和示例保留在Astro输出的HTML中。

本次结果应该可以直接打开：标题说检查什么，示例展示具体删改，按钮带去正确位置，输入框有清楚标签。把它和原来只有“AI平台”标题的页面并排看，你会知道用户第一步该做什么，而无需再加一段产品说明。