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

Page structure & technical metrics

Words

481

Action candidates

4

Images

2

HTML

9 KB

Copy

Title chars
50
Meta chars
46short
H1
1
H2
3

Action

Primary

中文听写

Forms
0
On-site links
3
Off-site links
6

Security & metadata

HTTPS
yes
HSTS
yes
CSP
no
nosniff
no
viewport
yes
Icon
yes
JSON-LD
no
Analytics
no

Page

Scripts
3 ext / 0 inline
Alt
2 missing
Lang
zh-CN
Third-party hosts
1

Lighthouse

Simulated mobile · Performance

84 / 100

2026-09-09 · Lab data, not field data.

View details

Simulated mobile · Lab data, not field data
2026-09-09T14:50:36.527Z · Lighthouse 13.4.1

Performance84/ 100
Accessibility96/ 100
Best practices100/ 100
SEO100/ 100
LCP · Largest content2,569 ms
CLS · Layout shift0.007
TBT · Blocking time158 ms
FCP · First content2,569 ms
SI · Speed index7,727 ms

Results vary by server, network and environment, independently of taste/conversion scores. Diagnostics retain Lighthouse wording.

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

Elements & resources
{
  "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.

Elements & resources
{
  "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.

Elements & resources
{
  "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.

Elements & resources
{
  "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

Elements & resources
{
  "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.

Elements & resources
{
  "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.

Elements & resources
{
  "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.

Elements & resources
{
  "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"
    }
  ]
}
Environment & raw metrics
{
  "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 / WHAT WORKS

What makes it work

Contextual macOS messaging demo

Presenting the product directly inside an Apple Messages window mockup with real-time translation capsules instantly communicates the core workflow without requiring a video.

Calibrated dark mode palette and typography

Using deep neutral background #090b0c, mint green accents (#b9f4d4), and crisp typography (Manrope and DM Sans) creates a focused native utility vibe.

02 / NEXT STEPS

Where to go next

  1. 01

    Correct grammatical flaw in the hero English tagline

    The prominent tagline 'Speak like native speaker in native way' lacks required articles. For a product selling native-level English output, an unidiomatic headline directly damages buyer trust.

    Update the subtitle to 'Speak like a native speaker, naturally.' or 'Speak like a native speaker in a natural way.' Verify on both 1440px desktop and 390px mobile viewports.

  2. 02

    Provide clear Gatekeeper bypass guidance beside download CTA

    The download area states that the PKG installer is unnotarized by Apple and macOS may block execution. Leaving this as a mere warning causes drop-off right after download.

    Add a two-step visual tooltip or micro-callout next to the download button: 'Right click PKG -> Open -> Confirm Open' to eliminate install drop-off. Test that the prompt is visible without scrolling inside the download section.

  3. 03

    Add touch-native instruction for mobile interactive preview

    Mobile users see '⌥ 按住这里，看中文变成英文', displaying an Option key glyph that does not exist on phone keyboards.

    Detect touch devices or screen widths below 768px and switch label to '长按演示胶囊查看效果', keeping the ⌥ symbol only on desktop viewports.

03 / DESIGN LANGUAGE

A design system you can reuse

Colors

Background

#090b0c

Text

#f3f4ee

Typography

Display font
Manrope
Body font
DM Sans
Heading / body
66px / 16px

Spacing & shape

Section gap
0px
Component inset
—
Card radius
—
Button radius
6px

CLEARER WORDS

Copy Revision Diff

Now

Speak like native speaker in native way.

SUGGESTED COPY

Speak like a native speaker, naturally.

The original headline misses indefinite articles and reads unidiomatically, directly contradicting the product core value.

04 / EVIDENCE

The detail behind the report

Explore each observation, recommendation and captured record.

Taste1 observations

Physical Option key glyph rendered on mobile preview

Medium

Mobile visitors see '⌥ 按住这里', displaying a keyboard symbol that has no meaning on touch devices.

Use responsive text or CSS media query (hover: none) to render a touch icon with '长按试听' instead of the Mac Option glyph.

⌥ 按住这里，看中文变成英文
Conversion5 observations

Share card is incomplete

High

A blank or generic unfurl on X, Slack, or WeChat wastes the click you already earned. This is distribution, not decoration.

Set og:title, og:description, and a 1200x630 image that matches the live headline.

og:title=no og:image=no

No human or proof on the page

Medium

A stranger landing on an AI-looking site with no maker, no customer, and no contact will not give you an email.

Add a real name, a real face, a real contact method, or one real customer line.

no about, no first-person, no quote

No analytics on the live page

Medium

If you cannot see who bounced, you cannot tell if the next fix worked. Shipping without a counter is flying blind.

Put Plausible, PostHog, or GA4 on the public pages. One snippet is enough.

no gtag / plausible / posthog / umami

Images ship without alt text

Medium

Missing alt is a screen-reader dead end and a ranking leak. Decorative images can be alt="". Content images cannot be blank.

Write a short alt for product and photo images. Use empty alt only on pure decoration.

2 images without alt

Unnotarized package warning lacks instant resolution step

High

Warning users that macOS might block the app without directly showing the two-click bypass right on the card creates severe conversion leakage.

Add an inline tip under the download button: 'macOS 拦截提示？右键点击安装包选择“打开”即可' with a modal link to screenshot steps.

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

No Content-Security-Policy

A CSP is the standard way to limit script sources. Vibe-coded pages often load anything, including injected scripts.

Start with a report-only CSP, then default-src 'self' and an explicit script-src.

content-security-policy missing

No X-Content-Type-Options

Without nosniff, browsers may interpret a file as a different type than you sent. It is a one-line header.

Set X-Content-Type-Options: nosniff.

x-content-type-options missing

No Referrer-Policy

The default referrer can leak internal paths and query strings to third parties.

Set Referrer-Policy: strict-origin-when-cross-origin.

referrer-policy missing

05 / MAKE IT HAPPEN

Give your AI a clear next step

Use the improvement prompt for this page, or the design prompt to borrow its visual language. “Recreate” includes references and implementation steps. Paste either into your coding assistant.

Preview full instructions
Fix landing page copy and mobile cues in the repository:
1. Update hero English subtitle from 'Speak like native speaker in native way.' to 'Speak like a native speaker, naturally.'.
2. In the download section beside 'v0.2.54 · macOS 26+ · Apple Silicon · 39.2 MB', add an inline badge or collapsible hint next to '签名说明': '遇系统拦截：右键安装包并选择“打开”'.
3. In the floating demo capsule '⌥ 按住这里，看中文变成英文', adjust responsive styling so touch viewports (max-width 768px or pointer: coarse) hide the '⌥' glyph and read '长按这里，看中文变成英文'.
4. Preserve background hex #090b0c, text hex #f3f4ee, accent variable --mint (#b9f4d4), border radius 6px, and font stack Manrope + DM Sans.