VibeCheck
https://liutianjie.github.io/Saylane/

页面构成与技术指标

正文

481

操作候选

4

图片

2

HTML

9 KB

文案

标题字数
50
摘要字数
46偏短
H1
1
H2
3

动作

主要入口

中文听写

表单
0
站内链接
3
站外链接
6

安全与页面元信息

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

构成

脚本
3 ext / 0 inline
Alt
2 missing
语言
zh-CN
第三方域
1

Lighthouse

移动端模拟 · 性能评分

84 / 100

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

查看详情

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

性能84/ 100
可访问性96/ 100
最佳实践100/ 100
SEO100/ 100
LCP · 主要内容出现2,569 ms
CLS · 布局偏移0.007
TBT · 主线程阻塞158 ms
FCP · 首次内容绘制2,569 ms
SI · 视觉加载速度7,727 ms

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

Minimize main-thread work

12.8 s

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "group": "other",
      "duration": 10848.015999999967,
      "groupLabel": "Other"
    },
    {
      "group": "scriptEvaluation",
      "duration": 943.8639999999988,
      "groupLabel": "Script Evaluation"
    },
    {
      "group": "styleLayout",
      "duration": 630.256,
      "groupLabel": "Style & Layout"
    },
    {
      "group": "paintCompositeRender",
      "duration": 355.8759999999998,
      "groupLabel": "Rendering"
    },
    {
      "group": "parseHTML",
      "duration": 13.127999999999997,
      "groupLabel": "Parse HTML & CSS"
    },
    {
      "group": "garbageCollection",
      "duration": 12.583999999999971,
      "groupLabel": "Garbage Collection"
    },
    {
      "group": "scriptParseCompile",
      "duration": 5.099999999999999,
      "groupLabel": "Script Parsing & Compilation"
    }
  ],
  "headings": [
    {
      "key": "groupLabel",
      "label": "Category",
      "valueType": "text"
    },
    {
      "key": "duration",
      "label": "Time Spent",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "duration"
  ]
}

Background and foreground colors do not have a sufficient contrast ratio.

Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-DIV",
        "path": "1,HTML,1,BODY,1,MAIN,0,SECTION,1,DIV,1,DIV,1,DIV,2,DIV",
        "type": "node",
        "snippet": "<div class=\"chat-message outgoing\">",
        "selector": "div.app-window > div.chat-main > div#chat-history > div.chat-message",
        "nodeLabel": "Really good! Been exploring something new.",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.19 (foreground color: #ffffff, background color: #1479ef, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 340,
          "left": 139,
          "right": 378,
          "width": 239,
          "bottom": 371,
          "height": 31
        }
      }
    },
    {
      "node": {
        "lhId": "1-1-SPAN",
        "path": "1,HTML,1,BODY,1,MAIN,0,SECTION,1,DIV,1,DIV,2,DIV,1,DIV,0,SPAN",
        "type": "node",
        "snippet": "<span class=\"local-only\">",
        "selector": "div.chat-main > div.chat-composer-area > div.chat-input-status > span.local-only",
        "nodeLabel": "仅本页演示",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 3.87 (foreground color: #737b76, background color: #1c1d1f, font size: 4.5pt (6px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 501,
          "left": 341,
          "right": 379,
          "width": 38,
          "bottom": 510,
          "height": 9
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-2-DIV",
              "path": "1,HTML,1,BODY,1,MAIN,0,SECTION,1,DIV,1,DIV,2,DIV",
              "type": "node",
              "snippet": "<div class=\"chat-composer-area\">",
              "selector": "section.experience > div.app-window > div.chat-main > div.chat-composer-area",
              "nodeLabel": "＋\nI have an idea. Let's make it happen.\n仅本页演示",
              "boundingRect": {
                "top": 436,
                "left": 17,
                "right": 395,
                "width": 378,
                "bottom": 520,
                "height": 84
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-3-SPAN",
        "path": "1,HTML,1,BODY,1,MAIN,1,SECTION,1,DIV,0,ARTICLE,0,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "section.underneath > div.steps > article > span",
        "nodeLabel": "01",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.2 (foreground color: #63796a, background color: #090b0c, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 1078,
          "left": 25,
          "right": 34,
          "width": 9,
          "bottom": 1090,
          "height": 12
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-4-BODY",
              "path": "1,HTML,1,BODY",
              "type": "node",
              "snippet": "<body>",
              "selector": "body",
              "nodeLabel": "body",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 2876,
                "height": 2876
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-5-SPAN",
        "path": "1,HTML,1,BODY,1,MAIN,1,SECTION,1,DIV,1,ARTICLE,0,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "section.underneath > div.steps > article > span",
        "nodeLabel": "02",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.2 (foreground color: #63796a, background color: #090b0c, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 1166,
          "left": 25,
          "right": 36,
          "width": 11,
          "bottom": 1178,
          "height": 12
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-4-BODY",
              "path": "1,HTML,1,BODY",
              "type": "node",
              "snippet": "<body>",
              "selector": "body",
              "nodeLabel": "body",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 2876,
                "height": 2876
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-6-SPAN",
        "path": "1,HTML,1,BODY,1,MAIN,1,SECTION,1,DIV,2,ARTICLE,0,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "section.underneath > div.steps > article > span",
        "nodeLabel": "03",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.2 (foreground color: #63796a, background color: #090b0c, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 1254,
          "left": 25,
          "right": 36,
          "width": 11,
          "bottom": 1266,
          "height": 12
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-4-BODY",
              "path": "1,HTML,1,BODY",
              "type": "node",
              "snippet": "<body>",
              "selector": "body",
              "nodeLabel": "body",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 2876,
                "height": 2876
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-7-SPAN",
        "path": "1,HTML,1,BODY,2,FOOTER,1,SPAN",
        "type": "node",
        "snippet": "<span>",
        "selector": "body > footer > span",
        "nodeLabel": "macOS 26+ · Apple Silicon · 默认 Apple 端侧识别与翻译",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4 (foreground color: #65746b, background color: #090b0c, font size: 6.0pt (8px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 2840,
          "left": 21,
          "right": 391,
          "width": 371,
          "bottom": 2851,
          "height": 11
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-4-BODY",
              "path": "1,HTML,1,BODY",
              "type": "node",
              "snippet": "<body>",
              "selector": "body",
              "nodeLabel": "body",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 2876,
                "height": 2876
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-8-A",
        "path": "1,HTML,1,BODY,2,FOOTER,2,A",
        "type": "node",
        "snippet": "<a href=\"https://github.com/LiuTianjie/Saylane\">",
        "selector": "body > footer > a",
        "nodeLabel": "在 GitHub 上探索 ↗",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4 (foreground color: #65746b, background color: #090b0c, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 2800,
          "left": 310,
          "right": 391,
          "width": 82,
          "bottom": 2813,
          "height": 13
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-4-BODY",
              "path": "1,HTML,1,BODY",
              "type": "node",
              "snippet": "<body>",
              "selector": "body",
              "nodeLabel": "body",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 2876,
                "height": 2876
              }
            }
          }
        ]
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.color",
      "wcag2aa",
      "wcag143",
      "TTv5",
      "TT13.c",
      "EN-301-549",
      "EN-9.1.4.3",
      "ACT",
      "RGAAv4",
      "RGAA-3.2.1"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

Elements with visible text labels do not have matching accessible names.

Visible text labels that do not match the accessible name can result in a confusing experience for screen reader users. Learn more about accessible names.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-9-BUTTON",
        "path": "1,HTML,1,BODY,1,MAIN,2,SECTION,1,DIV,0,DIV,3,DIV,0,BUTTON",
        "type": "node",
        "snippet": "<button id=\"practice-key\" class=\"practice-key\" aria-label=\"双击切换模式；键盘 Enter 或空格可直接切换\">",
        "selector": "div.practice-content > div.practice-workbench > div.practice-switch-row > button#practice-key",
        "nodeLabel": "⌘\n右 Command",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 2047,
          "left": 141,
          "right": 207,
          "width": 66,
          "bottom": 2114,
          "height": 67
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.semantics",
      "wcag21a",
      "wcag253",
      "EN-301-549",
      "EN-9.2.5.3",
      "RGAAv4",
      "RGAA-6.1.5",
      "experimental"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

Use efficient cache lifetimes

Est savings of 76 KiB

A long cache lifetime can speed up repeat visits to your page. Learn more about caching.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://liutianjie.github.io/Saylane/assets/brand-icon.png",
      "totalBytes": 72309,
      "wastedBytes": 66283.25,
      "cacheLifetimeMs": 600000
    },
    {
      "url": "https://liutianjie.github.io/Saylane/style.css?v=brand-alignment-2",
      "totalBytes": 7289,
      "wastedBytes": 6681.583333333333,
      "cacheLifetimeMs": 600000
    },
    {
      "url": "https://liutianjie.github.io/Saylane/app.js",
      "totalBytes": 4418,
      "wastedBytes": 4049.833333333333,
      "cacheLifetimeMs": 600000
    },
    {
      "url": "https://liutianjie.github.io/Saylane/practice.js",
      "totalBytes": 1108,
      "wastedBytes": 1015.6666666666666,
      "cacheLifetimeMs": 600000
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "Request",
      "valueType": "url"
    },
    {
      "key": "cacheLifetimeMs",
      "label": "Cache TTL",
      "valueType": "ms",
      "displayUnit": "duration"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes",
      "displayUnit": "kb",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "wastedBytes"
  ],
  "debugData": {
    "type": "debugdata",
    "wastedBytes": 78030.33333333333
  },
  "skipSumming": [
    "cacheLifetimeMs"
  ]
}

Improve image delivery

Est savings of 70 KiB

Reducing the download time of images can improve the perceived load time of the page and LCP. Learn more about optimizing image size

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://liutianjie.github.io/Saylane/assets/brand-icon.png",
      "node": {
        "lhId": "page-5-IMG",
        "path": "1,HTML,1,BODY,2,FOOTER,0,A,0,IMG",
        "type": "node",
        "snippet": "<img class=\"brand-icon\" src=\"./assets/brand-icon.png\" width=\"32\" height=\"32\" alt=\"\">",
        "selector": "body > footer > a.brand > img.brand-icon",
        "nodeLabel": "body > footer > a.brand > img.brand-icon",
        "boundingRect": {
          "top": 2791,
          "left": 21,
          "right": 53,
          "width": 32,
          "bottom": 2823,
          "height": 32
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "reason": "Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size.",
            "wastedBytes": 61076
          },
          {
            "reason": "This image file is larger than it needs to be (256x256) for its displayed dimensions (32x32). Use responsive images to reduce the image download size.",
            "wastedBytes": 70874
          }
        ]
      },
      "totalBytes": 71999,
      "wastedBytes": 71828
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "",
      "valueType": "node"
    },
    {
      "key": "url",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "reason",
        "valueType": "text"
      }
    },
    {
      "key": "totalBytes",
      "label": "Resource Size",
      "valueType": "bytes"
    },
    {
      "key": "wastedBytes",
      "label": "Est Savings",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "wastedBytes",
        "valueType": "bytes"
      }
    }
  ],
  "debugData": {
    "type": "debugdata",
    "wastedBytes": 71828
  }
}

LCP breakdown

Each subpart has specific improvement strategies. Ideally, most of the LCP time should be spent on loading the resources, not within delays.

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "table",
      "items": [
        {
          "label": "Time to first byte",
          "subpart": "timeToFirstByte",
          "duration": 1406.747
        },
        {
          "label": "Element render delay",
          "subpart": "elementRenderDelay",
          "duration": 1898.548
        }
      ],
      "headings": [
        {
          "key": "label",
          "label": "Subpart",
          "valueType": "text"
        },
        {
          "key": "duration",
          "label": "Duration",
          "valueType": "ms"
        }
      ]
    },
    {
      "lhId": "page-0-H1",
      "path": "1,HTML,1,BODY,1,MAIN,0,SECTION,0,DIV,0,H1",
      "type": "node",
      "snippet": "<h1>",
      "selector": "main > section.experience > div.headline > h1",
      "nodeLabel": "Saylane",
      "boundingRect": {
        "top": 100,
        "left": 0,
        "right": 412,
        "width": 412,
        "bottom": 150,
        "height": 50
      }
    }
  ]
}

Network dependency tree

Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.

对应元素与资源
{
  "type": "list",
  "items": [
    {
      "type": "list-section",
      "value": {
        "type": "network-tree",
        "chains": {
          "E5657F7A220F7A45C529C1A5870D9068": {
            "url": "https://liutianjie.github.io/Saylane/",
            "children": {
              "322938.2": {
                "url": "https://liutianjie.github.io/Saylane/style.css?v=brand-alignment-2",
                "children": {
                  "322938.13": {
                    "url": "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap",
                    "children": {
                      "322938.15": {
                        "url": "https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2",
                        "children": {},
                        "isLongest": true,
                        "transferSize": 37531,
                        "navStartToEndTime": 3551
                      },
                      "322938.27": {
                        "url": "https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2",
                        "children": {},
                        "transferSize": 24703,
                        "navStartToEndTime": 3550
                      }
                    },
                    "isLongest": true,
                    "transferSize": 1347,
                    "navStartToEndTime": 3164
                  }
                },
                "isLongest": true,
                "transferSize": 7289,
                "navStartToEndTime": 2214
              },
              "322938.9": {
                "url": "https://liutianjie.github.io/Saylane/app.js",
                "children": {},
                "transferSize": 4418,
                "navStartToEndTime": 2629
              },
              "322938.12": {
                "url": "https://liutianjie.github.io/Saylane/practice.js",
                "children": {},
                "transferSize": 1108,
                "navStartToEndTime": 2630
              }
            },
            "isLongest": true,
            "transferSize": 3916,
            "navStartToEndTime": 1962
          }
        },
        "longestChain": {
          "duration": 3551
        }
      }
    },
    {
      "type": "list-section",
      "title": "Preconnected origins",
      "value": {
        "type": "text",
        "value": "no origins were preconnected"
      },
      "description": "[preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints help the browser establish a connection earlier in the page load, saving time when the first request for that origin is made. The following are the origins that the page preconnected to."
    },
    {
      "type": "list-section",
      "title": "Preconnect candidates",
      "value": {
        "type": "table",
        "items": [
          {
            "origin": "https://fonts.googleapis.com",
            "wastedMs": 301.25
          }
        ],
        "headings": [
          {
            "key": "origin",
            "label": "Origin",
            "valueType": "text"
          },
          {
            "key": "wastedMs",
            "label": "Est LCP savings",
            "valueType": "ms"
          }
        ]
      },
      "description": "Add [preconnect](https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/) hints to your most important origins, but try to use no more than 4."
    }
  ]
}

Render-blocking requests

Est savings of 810 ms

Requests are blocking the page's initial render, which may delay LCP. Deferring or inlining can move these network requests out of the critical path.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap",
      "wastedMs": 814,
      "totalBytes": 1347
    },
    {
      "url": "https://liutianjie.github.io/Saylane/style.css?v=brand-alignment-2",
      "totalBytes": 7289
    },
    {
      "url": "https://liutianjie.github.io/Saylane/app.js",
      "wastedMs": 393,
      "totalBytes": 4418
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    },
    {
      "key": "wastedMs",
      "label": "Duration",
      "valueType": "timespanMs"
    }
  ]
}
测试环境与原始指标
{
  "finalUrl": "https://liutianjie.github.io/Saylane/",
  "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": 2569.2695000000003
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.006588013250849241
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 157.5
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 2569.2695000000003
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 7727.449604874679
    }
  ]
}

01 / 值得借鉴

好设计，具体好在哪

贴合使用场景的 macOS 拟真演示

直接在 Apple 原生短信界面模型中展示语音到文本的转译胶囊，无需视频即可秒级传递产品在原生输入框中的无缝工作流。

沉浸克制的暗黑配色与排版层次

采用深色背景 #090b0c、薄荷绿点缀色（#b9f4d4）以及清晰的 Manrope 和 DM Sans 字体组合，营造出专注且符合 macOS 原生工具品味的高级质感。

02 / 下一步

值得继续打磨的地方

  1. 01

    修正 Hero 主英文标语的语法错误

    主视觉正下方的标语 'Speak like native speaker in native way' 缺少必要冠词。对于一款主打地道英语表达的生产力工具，这一语法硬伤会严重削弱访客对翻译质量的信任。

    将标语替换为 'Speak like a native speaker, naturally.' 或 'Speak like a native speaker in a natural way.'，并在 1440px 桌面端与 390px 移动端校验文本换行。

  2. 02

    在下载入口旁补充 Gatekeeper 拦截绕过指引

    页面明确标注 PKG 安装器未完成 Apple 公证可能被拦截，但仅给出了版本说明和安装指南文本链，用户下载后遇到拦截极易放弃安装。

    在下载按钮旁增加简明提示条：'右键安装包 -> 打开 -> 仍要打开'，将公证风险前置化解为简单的确定操作，减少下载后的安装流失。

  3. 03

    针对移动端交互预览增加触屏操作指引

    移动端视图中仍展示带有 Mac 按键符号的 '⌥ 按住这里，看中文变成英文'，手机用户无法对应键盘物理按键，交互暗示产生割裂。

    在 768px 以下或触控设备上将文案调整为 '长按演示胶囊查看效果'，仅在桌面端保留 ⌥ 符号与物理按键提示。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#090b0c

文字

#f3f4ee

字体与尺度

标题字体
Manrope
正文字体
DM Sans
标题 / 正文
66px / 16px

间距与形状

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

表达也可以更准确

文案润色对照

现在

Speak like native speaker in native way.

建议表达

Speak like a native speaker, naturally.

原句缺少冠词且搭配生硬，与其宣传的原汁原味、地道出圈承诺相悖。

04 / 检查依据

观察与实测依据

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

品味1 项观察

移动端预览仍显示物理 Option 键符号

中优先级

手机端访客看到 '⌥ 按住这里'，物理键盘符号在触摸屏上缺乏交互直觉。

在触屏模式下使用手势轻触或长按图标替换 ⌥ 符号，文案适配为触屏手势说明。

⌥ 按住这里，看中文变成英文
转化5 项观察

分享卡片不完整

高优先级

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

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

og:title=no og:image=no

页面上没有人或证明

中优先级

陌生人落到一个看起来像 AI、没有作者、没有客户、没有联系方式的站点上，不会把邮箱给你。

加上真名、真脸、真实联系方式，或一句真实客户的话。

no about, no first-person, no quote

线上页没有统计

中优先级

看不到谁跳出，就不知道下一次修改有没有用。没有计数就等于盲飞。

在公开页放上 Plausible、PostHog 或 GA4。一段脚本就够。

no gtag / plausible / posthog / umami

图片没有 alt

中优先级

没有 alt，读屏到这里就断了，搜索也会减分。装饰图可以 alt=""，内容图不行。

产品和照片写短 alt。纯装饰才用空 alt。

2 images without alt

未公证安装包警示缺少即时解决方案

高优先级

告知用户 macOS 会阻止打开却未直接展示两步绕过方法，会导致大量下载用户在双击遇阻后直接流失。

在下载按钮下方增加常驻简注：'遇 macOS 拦截？右键点击安装包选择“打开”即可继续安装'。

签名说明：包内应用已做 Developer ID 签名；PKG 安装器本身未签名、未完成 Apple 公证，macOS 可能阻止直接打开。
上线3 项观察

没有 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

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

查看完整指令
修复网站文案及移动端交互提示：
1. 将 Hero 区域的副标题从 'Speak like native speaker in native way.' 修改为 'Speak like a native speaker, naturally.'。
2. 在下载模块的说明文字旁增加明显的辅助说明：'遇系统拦截：右键安装包并选择“打开”即可正常安装'，降低 Gatekeeper 拦截流失率。
3. 在演示胶囊 '⌥ 按住这里，看中文变成英文' 中，针对移动端触屏环境（max-width 768px 或 pointer: coarse）隐藏 ⌥ 物理键符号，文案调整为 '长按这里，看中文变成英文'。
4. 严格保留现有深色背景 #090b0c、文本颜色 #f3f4ee、薄荷绿点缀变量 --mint (#b9f4d4)、按钮圆角 6px 以及 Manrope 与 DM Sans 字体设定。