VibeCheck
https://example.com

页面构成与技术指标

正文

19

操作候选

1

图片

0

HTML

559 B

文案

标题字数
14
摘要字数
0没有
H1
1
H2
0

动作

主要入口

Learn more

表单
0
站内链接
0
站外链接
1

安全与页面元信息

HTTPS
有
HSTS
无
CSP
无
nosniff
无
viewport
有
图标
有
JSON-LD
无
统计
无

构成

脚本
0 ext / 0 inline
语言
en
第三方域
无

Lighthouse

移动端模拟 · 性能评分

100 / 100

2026-09-05 · 实验室数据，非真实用户体验数据。

查看详情

移动端模拟 · 实验室数据，非真实用户体验数据
2026-09-05T14:34:14.572Z · Lighthouse 13.4.1

性能100/ 100
可访问性96/ 100
最佳实践96/ 100
SEO80/ 100
LCP · 主要内容出现777 ms
CLS · 布局偏移0.000
TBT · 主线程阻塞0 ms
FCP · 首次内容绘制777 ms
SI · 视觉加载速度1,914 ms

分数会受服务器、网络和测试环境影响，独立于品味／转化评分。诊断保留 Lighthouse 原文。

Document does not have a main landmark.

One main landmark helps screen reader users navigate a web page. Learn more about landmarks.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-HTML",
        "path": "1,HTML",
        "type": "node",
        "snippet": "<html lang=\"en\">",
        "selector": "html",
        "nodeLabel": "html",
        "explanation": "Fix all of the following:\n  Document does not have a main landmark",
        "boundingRect": {
          "top": 0,
          "left": 0,
          "right": 412,
          "width": 412,
          "bottom": 402,
          "height": 402
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.semantics",
      "best-practice"
    ],
    "type": "debugdata",
    "impact": "moderate"
  }
}

Charset declaration is missing or occurs too late in the HTML

A character encoding declaration is required. It can be done with a `<meta>` tag in the first 1024 bytes of the HTML or in the Content-Type HTTP response header. Learn more about declaring the character encoding.

Links do not have descriptive text

1 link found

Descriptive link text helps search engines understand your content. Learn how to make links more accessible.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "href": "https://iana.org/domains/example",
      "text": "Learn more",
      "textLang": "en"
    }
  ],
  "headings": [
    {
      "key": "href",
      "label": "Link destination",
      "valueType": "url"
    },
    {
      "key": "text",
      "label": "Link Text",
      "valueType": "text"
    }
  ]
}
测试环境与原始指标
{
  "finalUrl": "https://example.com/",
  "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/151.0.0.0 Safari/537.36",
  "formFactor": "mobile",
  "throttlingMethod": "simulate",
  "throttling": {
    "rttMs": 150,
    "throughputKbps": 1638.4,
    "requestLatencyMs": 562.5,
    "uploadThroughputKbps": 675,
    "cpuSlowdownMultiplier": 4,
    "downloadThroughputKbps": 1474.5600000000002
  },
  "metrics": [
    {
      "id": "largest-contentful-paint",
      "unit": "millisecond",
      "value": 776.588
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 0
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 776.588
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 1913.9669999839782
    }
  ]
}

01 / 值得借鉴

好设计，具体好在哪

零视觉冗余与即时理解

页面仅包含一个主标题、两句功能说明及一个外部参考链接，无需加载额外网络资源即可瞬间呈现核心信息。

高对比度与纯净系统排版

文本采用系统默认字体，标题 24px 搭配正文 16px，在 1440px 桌面端与 390px 移动端均保持清晰易读的高对比度视觉呈现。

02 / 下一步

值得继续打磨的地方

  1. 01

    明确主要链接的目的地与操作意图

    宽泛的“Learn more”未向用户说明点击后将跳转至 IANA 官方的保留域名技术文档。

    将链接文本修改为“Learn more at IANA”或补充说明短语，同时验证目标地址继续保持指向 https://iana.org/domains/example。

  2. 02

    规范桌面大视口下的文档版心居中与约束

    在 1440px 屏幕上，文本块周围留白过大且缺乏结构聚拢感，容易让说明文档显得过于分散。

    将内容包裹在最大宽度约 600px 的居中容器内并设置匀称的垂直边距，在 1440x900 与 390x844 视口下验证排版对称性。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#eeeeee

文字

#000000

字体与尺度

标题字体
system-ui
正文字体
system-ui
标题 / 正文
24px / 16px

间距与形状

区块间距
—
组件内距
—
卡片圆角
—
按钮圆角
—

表达也可以更准确

文案润色对照

现在

Learn more

建议表达

Learn more at IANA

指明外部权威机构名称，使用户在点击前获知跳转目标平台。

04 / 检查依据

观察与实测依据

逐项查看观察、建议与采集记录。

转化4 项观察

主操作太含糊

高优先级

Get started 和 Learn more 没告诉访客下一步是什么。具体动作才会转化，套话会停住。

写下一步：开始免费试用、预约 15 分钟演示、看菜单。只留一个主动词。

Learn more

分享卡片不完整

高优先级

在 X、Slack 或微信里展开成空白或套话，等于浪费已经拿到的点击。这是分发，不是装饰。

补上 og:title、og:description，以及一张和线上标题一致的 1200x630 图。

og:title=no og:image=no

缺少或过短的 meta description

中优先级

这是搜索结果和部分聊天预览里链接下面的那句话。空着就是浪费这个位置。

写一句具体的话，70 到 160 个字符，和 H1 对得上。

(missing)

锚点文本对无障碍快速检索缺乏上下文指引

中优先级

屏幕阅读器链接列表或快速扫视的用户只能看到孤立的“Learn more”，无法识别具体学习的主题内容。

提供更具体的可见文本或添加 aria-label 属性注明“Learn more about example domain registrations at IANA”。

Learn more
上线4 项观察

没有 HSTS 响应头

中优先级

没有 Strict-Transport-Security，第一次访问仍可能被降到 http。浏览器不会钉死 HTTPS。

在边缘设置 Strict-Transport-Security: max-age=31536000; includeSubDomains。

strict-transport-security missing

没有 Content-Security-Policy

CSP 是限制脚本源的标准做法。vibe 页面常常什么都加载，包括被注入的脚本。

先开 report-only CSP，再收成 default-src 'self' 和明确的 script-src。

content-security-policy missing

没有 X-Content-Type-Options

没有 nosniff，浏览器可能按错误类型解释文件。这是一行响应头。

设置 X-Content-Type-Options: nosniff。

x-content-type-options missing

没有 Referrer-Policy

默认 referrer 可能把站内路径和查询串漏给第三方。

设置 Referrer-Policy: strict-origin-when-cross-origin。

referrer-policy missing

05 / 开始动手

把下一步，交给你的 AI

优化指令用于调整这个页面；设计指令用于借鉴它的视觉语言。「做同款」会附带截图与实施步骤。复制后粘贴到你的代码助手中。

查看完整指令
重构 example.com 单页落地页结构，在保留所有提取的设计变量与排版规格的前提下提升可读性与链接意图：
1. 保持背景色为 #eeeeee，正文文字颜色为 #000000。
2. 保持 system-ui 字体族，h1 字号 24px（字重 700），正文字号 16px 且行高为 normal。
3. 将 h1、说明段落和超链接包裹在最大宽度为 600px 且水平居中的容器中，桌面端（1440px）顶部外边距设为 48px，移动端（390px）边距设为 24px。
4. 将外链文字从“Learn more”修改为“Learn more at IANA”，保持 href='https://iana.org/domains/example'，保留下划线及文字颜色 rgb(51, 68, 136)。
5. 为链接添加 aria-label='Learn more about example domain registrations at IANA'。
6. 验证未引入任何外部字体文件或分析追踪脚本。