VibeCheck
https://metalab.com

页面构成与技术指标

正文

66

操作候选

16

图片

24

HTML

89 KB

文案

标题字数
28
摘要字数
130
H1
16
H2
0

动作

主要入口

All Work

表单
0
站内链接
30
站外链接
2

安全与页面元信息

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

构成

Next.js / Tailwind

脚本
17 ext / 5 inline
Alt
9 missing
语言
en
第三方域
3

Lighthouse

移动端模拟 · 性能评分

75 / 100

2026-09-05 · 本次测试有警告，结果可能不完整。

查看详情

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

本次测试有警告，结果可能不完整： The page may not be loading as expected because your test URL (https://metalab.com/) was redirected to https://www.metalab.com/. Try testing the second URL directly.

性能75/ 100
可访问性96/ 100
最佳实践77/ 100
SEO100/ 100
LCP · 主要内容出现2,798 ms
CLS · 布局偏移0.075
TBT · 主线程阻塞260 ms
FCP · 首次内容绘制2,723 ms
SI · 视觉加载速度14,491 ms

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

Avoid multiple page redirects

Est savings of 1,150 ms

Redirects introduce additional delays before the page can be loaded. Learn how to avoid page redirects.

对应元素与资源
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://metalab.com/",
      "wastedMs": 1145.699
    },
    {
      "url": "https://www.metalab.com/",
      "wastedMs": 0
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "wastedMs",
      "label": "Time Spent",
      "valueType": "timespanMs"
    }
  ],
  "overallSavingsMs": 1145.699
}

Uses third-party cookies

1 cookie found

Third-party cookies may be blocked in some contexts. Learn more about preparing for third-party cookie restrictions.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://www.facebook.com/tr/?id=302858487106598&ev=PageView&dl=https%3A%2F%2Fwww.metalab.com%2F&rl=&if=false&ts=1788581183912&iw=false&sw=412&sh=823&v=2.9.393&r=stable&a=tmgoogletagmanager&ec=0&o=4126&aems=0%3B0&fbp=fb.1.1788581183908.462169264907641327&ler=empty&cdl=API_unavailable&pmd[title]=Metalab%20%7C%20We%20make%20interfaces&pmd[locale]=en&pmd[description]=Metalab%20helps%20some%20of%20the%20world%27s%20top%20companies%20%E2%80%94%20like%20Slack%20and%20Google%20%0A%20%E2%80%94%20design%2C%20build%2C%20and%20ship%20amazing%20products%20and%20services.&pmd[keywords]=product%2C%20design%2C%20agency%2C%20website%2C%20branding%2C%20web%20development&plt=2070.199999988079&iss=1&imft=1&tz=480&it=1788581183385&coo=false&chmd=moto%20g%20power%20(2022)&chpv=11.0&chfv=undefined&expv2[0]=pl0&expv2[1]=el3&expv2[2]=bc1&expv2[3]=ra2&expv2[4]=rp2&expv2[5]=im1&expv2[6]=hf0&expv2[7]=sd1&expv2[8]=sp1&expv2[9]=ek1&expv2[10]=pc1&expv2[11]=gs1&expv2[12]=zs1&expv2[13]=cp1&expv2[14]=es1&expv2[15]=ac1&expv2[16]=so1&expv2[17]=wc1&expv2[18]=la1&expv2[19]=sf1&expv2[20]=da1&expv2[21]=io1&expv2[22]=ae1&expv2[23]=sx1&expv2[24]=if1&expv2[25]=fd1&expv2[26]=bg1&expv2[27]=mg1&expv2[28]=kl1&expv2[29]=sg1&expv2[30]=mk1&expv2[31]=sn1&expv2[32]=ec1&expv2[33]=mp1&expv2[34]=ps1&expv2[35]=fx1&expv2[36]=vt1&expv2[37]=tz1&rqm=GET",
      "name": "fr"
    }
  ],
  "headings": [
    {
      "key": "name",
      "label": "Name",
      "valueType": "text"
    },
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    }
  ]
}

Minimize main-thread work

4.5 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": "scriptEvaluation",
      "duration": 2168.631999999854,
      "groupLabel": "Script Evaluation"
    },
    {
      "group": "styleLayout",
      "duration": 1109.643999999999,
      "groupLabel": "Style & Layout"
    },
    {
      "group": "other",
      "duration": 808.8839999999946,
      "groupLabel": "Other"
    },
    {
      "group": "scriptParseCompile",
      "duration": 272.06800000000015,
      "groupLabel": "Script Parsing & Compilation"
    },
    {
      "group": "paintCompositeRender",
      "duration": 123.61200000000616,
      "groupLabel": "Rendering"
    },
    {
      "group": "garbageCollection",
      "duration": 24.280000000000005,
      "groupLabel": "Garbage Collection"
    },
    {
      "group": "parseHTML",
      "duration": 14.76,
      "groupLabel": "Parse HTML & CSS"
    }
  ],
  "headings": [
    {
      "key": "groupLabel",
      "label": "Category",
      "valueType": "text"
    },
    {
      "key": "duration",
      "label": "Time Spent",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "duration"
  ]
}

Reduce JavaScript execution time

2.4 s

Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to reduce Javascript execution time.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://www.metalab.com/_next/static/chunks/pages/_app-f1f4fa5f5e8d611f.js",
      "total": 1935.560000000009,
      "scripting": 1186.0440000000062,
      "scriptParseCompile": 101.084
    },
    {
      "url": "https://www.metalab.com/",
      "total": 1064.6519999999991,
      "scripting": 6.819999999999997,
      "scriptParseCompile": 1.572
    },
    {
      "url": "https://www.metalab.com/_next/static/chunks/framework-0c7baedefba6b077.js",
      "total": 490.2760000000003,
      "scripting": 407.2400000000004,
      "scriptParseCompile": 15.936
    },
    {
      "url": "Unattributable",
      "total": 315.46799999999956,
      "scripting": 39.367999999999995,
      "scriptParseCompile": 0
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-1LGPSZM149&cx=c&gtm=4e6921",
      "total": 151.60000000000127,
      "scripting": 117.58400000000127,
      "scriptParseCompile": 32.904
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-9QF96M5G4E&cx=c&gtm=4e6921",
      "total": 137.28000000000114,
      "scripting": 101.60400000000114,
      "scriptParseCompile": 34.083999999999996
    },
    {
      "url": "https://www.googletagmanager.com/gtm.js?id=GTM-NNNCZZG",
      "total": 130.27600000000083,
      "scripting": 98.71600000000085,
      "scriptParseCompile": 30.163999999999998
    },
    {
      "url": "https://connect.facebook.net/en_US/fbevents.js",
      "total": 102.6400000000003,
      "scripting": 78.80000000000031,
      "scriptParseCompile": 23.296
    },
    {
      "url": "https://connect.facebook.net/signals/config/302858487106598?v=2.9.393&r=stable&domain=www.metalab.com&im=1&hme=118644ce20ff837cfc6c6ee441987e9e11b8b9fb8ec6bc04b15a3c516441ba07&ex_m=115%2C226%2C166%2C26%2C80%2C81%2C158%2C76%2C75%2C11%2C176%2C100%2C20%2C150%2C138%2C45%2C83%2C88%2C146%2C171%2C178%2C31%2C17%2C30%2C18%2C32%2C33%2C34%2C36%2C54%2C159%2C85%2C123%2C22%2C24%2C50%2C46%2C48%2C47%2C93%2C102%2C106%2C121%2C157%2C160%2C52%2C122%2C28%2C25%2C130%2C77%2C42%2C162%2C161%2C163%2C154%2C152%2C29%2C41%2C65%2C120%2C173%2C78%2C21%2C125%2C91%2C74%2C23%2C95%2C96%2C127%2C94%2C148%2C147%2C151%2C107%2C172%2C175%2C40%2C55%2C124%2C53%2C8%2C4%2C5%2C7%2C6%2C3%2C101%2C112%2C179%2C193%2C240%2C82%2C254%2C253%2C252%2C14%2C27%2C39%2C61%2C114%2C67%2C10%2C71%2C108%2C109%2C110%2C116%2C141%2C37%2C35%2C143%2C144%2C145%2C140%2C139%2C167%2C84%2C170%2C168%2C169%2C56%2C66%2C134%2C19%2C174%2C51%2C303%2C304%2C305%2C302%2C318%2C340%2C233%2C222%2C68%2C223%2C221%2C343%2C334%2C58%2C234%2C118%2C142%2C90%2C132%2C60%2C131%2C137%2C136%2C64%2C72%2C70%2C164%2C86%2C87%2C126%2C43%2C38%2C59%2C62%2C111%2C177%2C1%2C135%2C16%2C133%2C12%2C2%2C63%2C103%2C15%2C73%2C69%2C129%2C99%2C98%2C181%2C182%2C104%2C105%2C9%2C113%2C180%2C57%2C155%2C97%2C89%2C79%2C128%2C117%2C49%2C156%2C0%2C92%2C149%2C153%2C165%2C44%2C119%2C13%2C183",
      "total": 83.6359999999998,
      "scripting": 54.1919999999998,
      "scriptParseCompile": 20.512
    },
    {
      "url": "https://www.metalab.com/_next/static/chunks/main-27810a11c8552004.js",
      "total": 61.34000000000002,
      "scripting": 50.22400000000002,
      "scriptParseCompile": 8.596
    }
  ],
  "summary": {
    "wastedMs": 2408.74000000001
  },
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "total",
      "label": "Total CPU Time",
      "valueType": "ms",
      "granularity": 1
    },
    {
      "key": "scripting",
      "label": "Script Evaluation",
      "valueType": "ms",
      "granularity": 1
    },
    {
      "key": "scriptParseCompile",
      "label": "Script Parse",
      "valueType": "ms",
      "granularity": 1
    }
  ],
  "sortedBy": [
    "total"
  ]
}

Missing source maps for large first-party JavaScript

Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. Learn more about source maps.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "error": "Large JavaScript file is missing a source map"
          }
        ]
      },
      "scriptUrl": "https://www.metalab.com/_next/static/chunks/pages/_app-f1f4fa5f5e8d611f.js"
    }
  ],
  "headings": [
    {
      "key": "scriptUrl",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "error"
      }
    },
    {
      "key": "sourceMapUrl",
      "label": "Map URL",
      "valueType": "url"
    }
  ]
}

Links do not have a discernible name

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-0-A",
        "path": "1,HTML,1,BODY,2,DIV,1,HEADER,2,DIV,2,DIV,1,A",
        "type": "node",
        "snippet": "<a class=\"Button_link__a_ogG\" href=\"/contact\">",
        "selector": "header#header > div.Navigation_inner__GVLfb > div.Navigation_uiRight__8K_ZG > a.Button_link__a_ogG",
        "nodeLabel": "header#header > div.Navigation_inner__GVLfb > div.Navigation_uiRight__8K_ZG > a.Button_link__a_ogG",
        "explanation": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute",
        "boundingRect": {
          "top": 8,
          "left": 364,
          "right": 396,
          "width": 32,
          "bottom": 40,
          "height": 32
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.name-role-value",
      "wcag2a",
      "wcag244",
      "wcag412",
      "section508",
      "section508.22.a",
      "TTv5",
      "TT6.a",
      "EN-301-549",
      "EN-9.2.4.4",
      "EN-9.4.1.2",
      "ACT",
      "RGAAv4",
      "RGAA-6.2.1"
    ],
    "type": "debugdata",
    "impact": "serious"
  }
}

Avoid enormous network payloads

Total size was 6,105 KiB

Large network payloads cost users real money and are highly correlated with long load times. Learn how to reduce payload sizes.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://cdn.sanity.io/files/nuxb3jim/production-july-2025/6fbb33f6dd694cebe5cc6a5eea7f75df6b664539.mp4",
      "totalBytes": 2858262
    },
    {
      "url": "https://www.metalab.com/_next/static/chunks/pages/_app-f1f4fa5f5e8d611f.js",
      "totalBytes": 482927
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-9QF96M5G4E&cx=c&gtm=4e6921",
      "totalBytes": 189951
    },
    {
      "url": "https://cdn.sanity.io/images/nuxb3jim/production-july-2025/5bdc970b5da2556c8c61c726c758c93049d05002-3024x1760.png?w=1920&q=75&fit=clip&auto=format",
      "totalBytes": 185976
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-1LGPSZM149&cx=c&gtm=4e6921",
      "totalBytes": 179179
    },
    {
      "url": "https://cdn.sanity.io/images/nuxb3jim/production-july-2025/948d9ddc877bf4d912a67fe94bb8843d9e22a2df-2500x1500.jpg?w=1920&q=75&fit=clip&auto=format",
      "totalBytes": 172787
    },
    {
      "url": "https://www.googletagmanager.com/gtm.js?id=GTM-NNNCZZG",
      "totalBytes": 171705
    },
    {
      "url": "https://cdn.sanity.io/images/nuxb3jim/production-july-2025/5bdc970b5da2556c8c61c726c758c93049d05002-3024x1760.png?w=1500&q=80&fm=webp",
      "totalBytes": 155097
    },
    {
      "url": "https://www.metalab.com/_next/static/media/ppeiko-regular.2f66d2cd.woff2",
      "totalBytes": 119203
    },
    {
      "url": "https://www.metalab.com/_next/static/media/ppeiko-light.0703289c.woff2",
      "totalBytes": 118981
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    }
  ],
  "sortedBy": [
    "totalBytes"
  ]
}

Reduce unused CSS

Est savings of 36 KiB

Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content to decrease bytes consumed by network activity. Learn how to reduce unused CSS.

对应元素与资源
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://www.metalab.com/_next/static/css/15230c8daab2ecff.css",
      "totalBytes": 41051,
      "wastedBytes": 36596,
      "wastedPercent": 89.14878159733303
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    },
    {
      "key": "wastedBytes",
      "label": "Est Savings",
      "valueType": "bytes"
    }
  ],
  "sortedBy": [
    "wastedBytes"
  ],
  "debugData": {
    "type": "debugdata",
    "metricSavings": {
      "FCP": 280,
      "LCP": 280
    }
  },
  "overallSavingsMs": 280,
  "overallSavingsBytes": 36596
}

Reduce unused JavaScript

Est savings of 554 KiB

Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity. Learn how to reduce unused JavaScript.

对应元素与资源
{
  "type": "opportunity",
  "items": [
    {
      "url": "https://www.metalab.com/_next/static/chunks/pages/_app-f1f4fa5f5e8d611f.js",
      "totalBytes": 482707,
      "wastedBytes": 284539,
      "wastedPercent": 58.94642772603671
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-9QF96M5G4E&cx=c&gtm=4e6921",
      "totalBytes": 188518,
      "wastedBytes": 79195,
      "wastedPercent": 42.00903129811934
    },
    {
      "url": "https://www.googletagmanager.com/gtm.js?id=GTM-NNNCZZG",
      "totalBytes": 171350,
      "wastedBytes": 71906,
      "wastedPercent": 41.96431024265424
    },
    {
      "url": "https://www.googletagmanager.com/gtag/js?id=G-1LGPSZM149&cx=c&gtm=4e6921",
      "totalBytes": 177746,
      "wastedBytes": 70811,
      "wastedPercent": 39.83838666358285
    },
    {
      "url": "https://connect.facebook.net/en_US/fbevents.js",
      "totalBytes": 90807,
      "wastedBytes": 31546,
      "wastedPercent": 34.7400480666293
    },
    {
      "url": "https://connect.facebook.net/signals/config/302858487106598?v=2.9.393&r=stable&domain=www.metalab.com&im=1&hme=118644ce20ff837cfc6c6ee441987e9e11b8b9fb8ec6bc04b15a3c516441ba07&ex_m=115%2C226%2C166%2C26%2C80%2C81%2C158%2C76%2C75%2C11%2C176%2C100%2C20%2C150%2C138%2C45%2C83%2C88%2C146%2C171%2C178%2C31%2C17%2C30%2C18%2C32%2C33%2C34%2C36%2C54%2C159%2C85%2C123%2C22%2C24%2C50%2C46%2C48%2C47%2C93%2C102%2C106%2C121%2C157%2C160%2C52%2C122%2C28%2C25%2C130%2C77%2C42%2C162%2C161%2C163%2C154%2C152%2C29%2C41%2C65%2C120%2C173%2C78%2C21%2C125%2C91%2C74%2C23%2C95%2C96%2C127%2C94%2C148%2C147%2C151%2C107%2C172%2C175%2C40%2C55%2C124%2C53%2C8%2C4%2C5%2C7%2C6%2C3%2C101%2C112%2C179%2C193%2C240%2C82%2C254%2C253%2C252%2C14%2C27%2C39%2C61%2C114%2C67%2C10%2C71%2C108%2C109%2C110%2C116%2C141%2C37%2C35%2C143%2C144%2C145%2C140%2C139%2C167%2C84%2C170%2C168%2C169%2C56%2C66%2C134%2C19%2C174%2C51%2C303%2C304%2C305%2C302%2C318%2C340%2C233%2C222%2C68%2C223%2C221%2C343%2C334%2C58%2C234%2C118%2C142%2C90%2C132%2C60%2C131%2C137%2C136%2C64%2C72%2C70%2C164%2C86%2C87%2C126%2C43%2C38%2C59%2C62%2C111%2C177%2C1%2C135%2C16%2C133%2C12%2C2%2C63%2C103%2C15%2C73%2C69%2C129%2C99%2C98%2C181%2C182%2C104%2C105%2C9%2C113%2C180%2C57%2C155%2C97%2C89%2C79%2C128%2C117%2C49%2C156%2C0%2C92%2C149%2C153%2C165%2C44%2C119%2C13%2C183",
      "totalBytes": 77330,
      "wastedBytes": 29114,
      "wastedPercent": 37.64894162747622
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "source",
        "valueType": "code"
      }
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "sourceBytes"
      }
    },
    {
      "key": "wastedBytes",
      "label": "Est Savings",
      "valueType": "bytes",
      "subItemsHeading": {
        "key": "sourceWastedBytes"
      }
    }
  ],
  "sortedBy": [
    "wastedBytes"
  ],
  "debugData": {
    "type": "debugdata",
    "metricSavings": {
      "FCP": 0,
      "LCP": 0
    }
  },
  "overallSavingsMs": 0,
  "overallSavingsBytes": 567111
}

Issues were logged in the `Issues` panel in Chrome Devtools

Issues logged to the `Issues` panel in Chrome Devtools indicate unresolved problems. They can come from network request failures, insufficient security controls, and other browser concerns. Open up the Issues panel in Chrome DevTools for more details on each issue.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "url": "https://www.facebook.com/tr/?id=302858487106598&ev=PageView&dl=https%3A%2F%2Fwww.metalab.com%2F&rl=&if=false&ts=1788581183912&iw=false&sw=412&sh=823&v=2.9.393&r=stable&a=tmgoogletagmanager&ec=0&o=4126&aems=0%3B0&fbp=fb.1.1788581183908.462169264907641327&ler=empty&cdl=API_unavailable&pmd[title]=Metalab%20%7C%20We%20make%20interfaces&pmd[locale]=en&pmd[description]=Metalab%20helps%20some%20of%20the%20world%27s%20top%20companies%20%E2%80%94%20like%20Slack%20and%20Google%20%0A%20%E2%80%94%20design%2C%20build%2C%20and%20ship%20amazing%20products%20and%20services.&pmd[keywords]=product%2C%20design%2C%20agency%2C%20website%2C%20branding%2C%20web%20development&plt=2070.199999988079&iss=1&imft=1&tz=480&it=1788581183385&coo=false&chmd=moto%20g%20power%20(2022)&chpv=11.0&chfv=undefined&expv2[0]=pl0&expv2[1]=el3&expv2[2]=bc1&expv2[3]=ra2&expv2[4]=rp2&expv2[5]=im1&expv2[6]=hf0&expv2[7]=sd1&expv2[8]=sp1&expv2[9]=ek1&expv2[10]=pc1&expv2[11]=gs1&expv2[12]=zs1&expv2[13]=cp1&expv2[14]=es1&expv2[15]=ac1&expv2[16]=so1&expv2[17]=wc1&expv2[18]=la1&expv2[19]=sf1&expv2[20]=da1&expv2[21]=io1&expv2[22]=ae1&expv2[23]=sx1&expv2[24]=if1&expv2[25]=fd1&expv2[26]=bg1&expv2[27]=mg1&expv2[28]=kl1&expv2[29]=sg1&expv2[30]=mk1&expv2[31]=sn1&expv2[32]=ec1&expv2[33]=mp1&expv2[34]=ps1&expv2[35]=fx1&expv2[36]=vt1&expv2[37]=tz1&rqm=GET"
          }
        ]
      },
      "issueType": "Cookie"
    }
  ],
  "headings": [
    {
      "key": "issueType",
      "label": "Issue type",
      "valueType": "text",
      "subItemsHeading": {
        "key": "url",
        "valueType": "url"
      }
    }
  ]
}
测试环境与原始指标
{
  "finalUrl": "https://www.metalab.com/",
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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": 2798.0975
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0.07515283395714523
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 259.73199999999815
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 2723.045
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 14491.139646397407
    }
  ]
}

01 / 值得借鉴

好设计，具体好在哪

字体对比有明确分工

大号衬线负责宣言，小号无衬线负责项目和说明，品牌表达与功能信息不混用。

客户项目可直接进入

Robinhood、Midjourney 等项目标签在首屏即出现，作品入口不必全部藏在菜单中。

02 / 下一步

值得继续打磨的地方

  1. 01

    提高背景上项目标签的稳定对比

    半透明项目胶囊叠在深色反光背景上，部分标签边界较弱。

    为项目标签增加稳定的底色和清晰焦点，逐个检查背景不同区域下的对比；保持胶囊尺寸适合触屏。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#000000

文字

#ffffff

字体与尺度

标题字体
PP Eiko
正文字体
Basis Grotesque Pro
标题 / 正文
88px / 16px

间距与形状

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

参数来自页面元素采样，空值表示未取得；不将单个元素的参数当作全站规范。

04 / 检查依据

观察与实测依据

数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。

品味1 项观察

提高背景上项目标签的稳定对比

半透明项目胶囊叠在深色反光背景上，部分标签边界较弱。

为项目标签增加稳定的底色和清晰焦点，逐个检查背景不同区域下的对比；保持胶囊尺寸适合触屏。

mobile.png: translucent project chips over reflective background
上线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
链接分享预览

Metalab | We make interfaces

Metalab helps some of the world's top companies — like Slack and Google — design, build, and ship amazing products and services.

05 / 开始动手

把下一步，交给你的 AI

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

查看完整指令
请基于 https://metalab.com 的 2026-09-05T03:25:46.549Z 页面快照优化当前项目。先确认当前实现与快照差异，不要把已变化的内容重新改回旧版。

设计基线
品牌居中、菜单与联系入口分置两侧，客户项目以胶囊清单排列，We make interfaces 使用大衬线字叠在抽象材质上，旁边用短段落补充定位。手机把宣言上移，项目列表留在下方。参考材质、字形对比和信息锚点，不把参考客户名单挪用为自己的经历。
{
  "colors": [
    {
      "role": "bg",
      "hex": "#000000"
    },
    {
      "role": "ink",
      "hex": "#ffffff"
    }
  ],
  "fonts": {
    "body": "Basis Grotesque Pro",
    "display": "PP Eiko",
    "stack": [
      "Basis Grotesque Pro",
      "PP Eiko",
      "Arial"
    ]
  },
  "radius": {
    "button": "50px",
    "card": "",
    "field": ""
  },
  "space": {
    "section": "0px",
    "card": ""
  },
  "type": {
    "h1": "88px",
    "body": "16px",
    "weight": "240",
    "lineHeight": "normal",
    "letterSpacing": "-1.76px"
  }
}
数据来自同次页面采集；字体、圆角和间距为具体元素采样，不代表全站唯一设计规范。空值为未取得。HTML 为源码体积，不是压缩传输量；脚本数为 DOM 标签数，不是请求数。

执行事项
1. 提高背景上项目标签的稳定对比
为项目标签增加稳定的底色和清晰焦点，逐个检查背景不同区域下的对比；保持胶囊尺寸适合触屏。
依据: mobile.png: translucent project chips over reflective background

2. 没有 Content-Security-Policy
先开 report-only CSP，再收成 default-src 'self' 和明确的 script-src。
依据: content-security-policy missing

3. 没有 X-Content-Type-Options
设置 X-Content-Type-Options: nosniff。
依据: x-content-type-options missing

4. 没有 Referrer-Policy
设置 Referrer-Policy: strict-origin-when-cross-origin。
依据: referrer-policy missing

验收
- 在 1440×900 和 390×844 分别核对文字、布局和主要操作“All Work”。
- 保留已有品牌、登录和业务链路，不从静态截图推断交互故障。
- 只修复有证据的项；涉及安全响应头时先用报告模式验证现有资源及认证兼容性。
- 对比修改前后的截图，并执行相关功能测试。不要声称未经测试的功能已通过。