https://rauno.me

页面构成与技术指标

正文

52

操作候选

1

图片

0

HTML

31 KB

文案

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

动作

主要入口

Email

表单
0
站内链接
8
站外链接
4

安全与页面元信息

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

构成

Next.js / Tailwind

脚本
17 ext / 3 inline
语言
en
第三方域

Lighthouse

移动端模拟 · 性能评分

78 / 100

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

查看详情

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

性能78/ 100
可访问性87/ 100
最佳实践100/ 100
SEO92/ 100
LCP · 主要内容出现6,019 ms
CLS · 布局偏移0.000
TBT · 主线程阻塞31 ms
FCP · 首次内容绘制940 ms
SI · 视觉加载速度2,127 ms

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

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,0,DIV,2,MAIN,1,DIV,0,DIV,1,A,0,DIV",
        "type": "node",
        "snippet": "<div class=\"index_label__cgZWW\" style=\"top: -88.3495px; transform: scale(3.15534);\">",
        "selector": "div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1 > div.index_label__cgZWW",
        "nodeLabel": "Devouring Details",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #6f6f6f, background color: #ededed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 269,
          "left": 409,
          "right": 516,
          "width": 107,
          "bottom": 285,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-1-HTML",
              "path": "1,HTML",
              "type": "node",
              "snippet": "<html lang=\"en\" class=\"light\" style=\"color-scheme: light;\">",
              "selector": "html.light",
              "nodeLabel": "html.light",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 1,
                "height": 1
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-2-DIV",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,2,A,0,DIV",
        "type": "node",
        "snippet": "<div class=\"index_label__cgZWW\" style=\"top: -88.3495px; transform: scale(3.15534);\">",
        "selector": "div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1 > div.index_label__cgZWW",
        "nodeLabel": "Craft",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #6f6f6f, background color: #ededed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 269,
          "left": 802,
          "right": 832,
          "width": 30,
          "bottom": 285,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-1-HTML",
              "path": "1,HTML",
              "type": "node",
              "snippet": "<html lang=\"en\" class=\"light\" style=\"color-scheme: light;\">",
              "selector": "html.light",
              "nodeLabel": "html.light",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 1,
                "height": 1
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-3-DIV",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,3,A,0,DIV",
        "type": "node",
        "snippet": "<div class=\"index_label__cgZWW\" style=\"top: -88.3495px; transform: scale(3.15534);\">",
        "selector": "div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1 > div.index_label__cgZWW",
        "nodeLabel": "History of Software Design",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #6f6f6f, background color: #ededed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 269,
          "left": 1195,
          "right": 1356,
          "width": 162,
          "bottom": 285,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-1-HTML",
              "path": "1,HTML",
              "type": "node",
              "snippet": "<html lang=\"en\" class=\"light\" style=\"color-scheme: light;\">",
              "selector": "html.light",
              "nodeLabel": "html.light",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 1,
                "height": 1
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-4-DIV",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,4,A,0,DIV",
        "type": "node",
        "snippet": "<div class=\"index_label__cgZWW\" style=\"top: -88.3495px; transform: scale(3.15534);\">",
        "selector": "div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1 > div.index_label__cgZWW",
        "nodeLabel": "Projects",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #6f6f6f, background color: #ededed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 269,
          "left": 1588,
          "right": 1638,
          "width": 50,
          "bottom": 285,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-1-HTML",
              "path": "1,HTML",
              "type": "node",
              "snippet": "<html lang=\"en\" class=\"light\" style=\"color-scheme: light;\">",
              "selector": "html.light",
              "nodeLabel": "html.light",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 1,
                "height": 1
              }
            }
          }
        ]
      }
    },
    {
      "node": {
        "lhId": "1-5-DIV",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,5,A,0,DIV",
        "type": "node",
        "snippet": "<div class=\"index_label__cgZWW\" style=\"top: -88.3495px; transform: scale(3.15534);\">",
        "selector": "div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1 > div.index_label__cgZWW",
        "nodeLabel": "Field Notes",
        "explanation": "Fix any of the following:\n  Element has insufficient color contrast of 4.29 (foreground color: #6f6f6f, background color: #ededed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
        "boundingRect": {
          "top": 269,
          "left": 1981,
          "right": 2050,
          "width": 69,
          "bottom": 285,
          "height": 16
        }
      },
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "relatedNode": {
              "lhId": "1-1-HTML",
              "path": "1,HTML",
              "type": "node",
              "snippet": "<html lang=\"en\" class=\"light\" style=\"color-scheme: light;\">",
              "selector": "html.light",
              "nodeLabel": "html.light",
              "boundingRect": {
                "top": 0,
                "left": 0,
                "right": 412,
                "width": 412,
                "bottom": 1,
                "height": 1
              }
            }
          }
        ]
      }
    }
  ],
  "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"
  }
}

Heading elements are not in a sequentially-descending order

Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. Learn more about heading order.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-6-H3",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,4,A,1,DIV,0,DIV,0,DIV,0,H3",
        "type": "node",
        "snippet": "<h3>",
        "selector": "div.c-lesPJm > div.index_contents__YVkKY > div.index_contents__YVkKY > h3",
        "nodeLabel": "Projects",
        "explanation": "Fix any of the following:\n  Heading order invalid",
        "boundingRect": {
          "top": 275,
          "left": 1588,
          "right": 2408,
          "width": 820,
          "bottom": 548,
          "height": 274
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.semantics",
      "best-practice"
    ],
    "type": "debugdata",
    "impact": "moderate"
  }
}

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-7-A",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,1,A",
        "type": "node",
        "snippet": "<a target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Devouring Details\" class=\"index_frame__XKrH1\" data-variant=\"slide\" style=\"width:1200px;height:720px;position:absolute;left:1240px\" href=\"https://www.devouringdetails.com\">",
        "selector": "main.index_root__qDg6t > div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1",
        "nodeLabel": "Devouring Details\nDD",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 297,
          "left": 409,
          "right": 789,
          "width": 380,
          "bottom": 526,
          "height": 228
        }
      }
    },
    {
      "node": {
        "lhId": "1-8-A",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,2,A",
        "type": "node",
        "snippet": "<a aria-label=\"Craft\" class=\"index_frame__XKrH1\" data-variant=\"slide\" style=\"width:1200px;height:720px;position:absolute;left:2480px\" href=\"/craft\">",
        "selector": "main.index_root__qDg6t > div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1",
        "nodeLabel": "Craft\nCraft",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 297,
          "left": 802,
          "right": 1182,
          "width": 380,
          "bottom": 526,
          "height": 228
        }
      }
    },
    {
      "node": {
        "lhId": "1-9-A",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,4,A",
        "type": "node",
        "snippet": "<a aria-label=\"Projects\" class=\"index_frame__XKrH1\" data-variant=\"slide\" style=\"width:1200px;height:720px;position:absolute;left:4960px\" href=\"/projects\">",
        "selector": "main.index_root__qDg6t > div.index_center__dvDjE > div.index_frames__d9hw4 > a.index_frame__XKrH1",
        "nodeLabel": "Projects\nProjects",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 297,
          "left": 1588,
          "right": 1968,
          "width": 380,
          "bottom": 526,
          "height": 228
        }
      }
    },
    {
      "node": {
        "lhId": "1-10-BUTTON",
        "path": "1,HTML,1,BODY,0,DIV,2,MAIN,1,DIV,0,DIV,6,DIV,0,DIV,0,DIV,4,BUTTON",
        "type": "node",
        "snippet": "<button aria-label=\"Copy email\">",
        "selector": "div.index_frame__XKrH1 > div.c-lesPJm > div.index_contact__4w2ft > button",
        "nodeLabel": "Email\n\nCopied",
        "explanation": "Fix any of the following:\n  Text inside the element is not included in the accessible name",
        "boundingRect": {
          "top": 395,
          "left": 2521,
          "right": 2607,
          "width": 85,
          "bottom": 428,
          "height": 32
        }
      }
    }
  ],
  "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"
  }
}

`[user-scalable="no"]` is used in the `<meta name="viewport">` element or the `[maximum-scale]` attribute is less than 5.

Disabling zooming is problematic for users with low vision who rely on screen magnification to properly see the contents of a web page. Learn more about the viewport meta tag.

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "node": {
        "lhId": "1-11-META",
        "path": "1,HTML,0,HEAD,1,META",
        "type": "node",
        "snippet": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" data-next-head=\"\">",
        "selector": "head > meta",
        "nodeLabel": "head > meta",
        "explanation": "Fix any of the following:\n  user-scalable=no on <meta> tag disables zooming on mobile devices",
        "boundingRect": {
          "top": 0,
          "left": 0,
          "right": 0,
          "width": 0,
          "bottom": 0,
          "height": 0
        }
      }
    }
  ],
  "headings": [
    {
      "key": "node",
      "label": "Failing Elements",
      "valueType": "node",
      "subItemsHeading": {
        "key": "relatedNode",
        "valueType": "node"
      }
    }
  ],
  "debugData": {
    "tags": [
      "cat.sensory-and-visual-cues",
      "wcag2aa",
      "wcag144",
      "EN-301-549",
      "EN-9.1.4.4",
      "ACT",
      "RGAAv4",
      "RGAA-10.4.2"
    ],
    "type": "debugdata",
    "impact": "moderate"
  }
}

Reduce unused JavaScript

Est savings of 610 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://rauno.me/_next/static/chunks/767-4b6515b63bfd27c7.js",
      "totalBytes": 359090,
      "wastedBytes": 284303,
      "wastedPercent": 79.17318778022224
    },
    {
      "url": "https://rauno.me/_next/static/chunks/289-997c237818b86f43.js",
      "totalBytes": 337830,
      "wastedBytes": 210776,
      "wastedPercent": 62.39114347452861
    },
    {
      "url": "https://rauno.me/_next/static/chunks/150-19d3218242abd104.js",
      "totalBytes": 92799,
      "wastedBytes": 80394,
      "wastedPercent": 86.63239905602431
    },
    {
      "url": "https://rauno.me/_next/static/chunks/pages/_app-8bc0311d52546293.js",
      "totalBytes": 63185,
      "wastedBytes": 27743,
      "wastedPercent": 43.90757200239296
    },
    {
      "url": "https://rauno.me/_next/static/chunks/framework-7c95b8e5103c9e90.js",
      "totalBytes": 58682,
      "wastedBytes": 21850,
      "wastedPercent": 37.234019264448335
    }
  ],
  "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": 2400
    }
  },
  "overallSavingsMs": 2400,
  "overallSavingsBytes": 625066
}

Legacy JavaScript

Est savings of 13 KiB

Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile Baseline features, unless you know you must support older browsers. Learn why most sites can deploy ES6+ code without transpiling

对应元素与资源
{
  "type": "table",
  "items": [
    {
      "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
      "subItems": {
        "type": "subitems",
        "items": [
          {
            "signal": "Array.prototype.at",
            "location": {
              "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
              "line": 0,
              "type": "source-location",
              "column": 18290,
              "urlProvider": "network"
            }
          },
          {
            "signal": "Array.prototype.flat",
            "location": {
              "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
              "line": 0,
              "type": "source-location",
              "column": 17678,
              "urlProvider": "network"
            }
          },
          {
            "signal": "Array.prototype.flatMap",
            "location": {
              "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
              "line": 0,
              "type": "source-location",
              "column": 17791,
              "urlProvider": "network"
            }
          },
          {
            "signal": "Object.fromEntries",
            "location": {
              "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
              "line": 0,
              "type": "source-location",
              "column": 18167,
              "urlProvider": "network"
            }
          },
          {
            "signal": "Object.hasOwn",
            "location": {
              "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
              "line": 0,
              "type": "source-location",
              "column": 18425,
              "urlProvider": "network"
            }
          },
          {
            "signal": "String.prototype.trimEnd",
            "location": {
              "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
              "line": 0,
              "type": "source-location",
              "column": 17420,
              "urlProvider": "network"
            }
          },
          {
            "signal": "String.prototype.trimStart",
            "location": {
              "url": "https://rauno.me/_next/static/chunks/main-bff256145eb15a4d.js",
              "line": 0,
              "type": "source-location",
              "column": 17335,
              "urlProvider": "network"
            }
          }
        ]
      },
      "wastedBytes": 12966
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url",
      "subItemsHeading": {
        "key": "location",
        "valueType": "source-location"
      }
    },
    {
      "key": null,
      "label": "",
      "valueType": "code",
      "subItemsHeading": {
        "key": "signal"
      }
    },
    {
      "key": "wastedBytes",
      "label": "Wasted bytes",
      "valueType": "bytes"
    }
  ],
  "debugData": {
    "type": "debugdata",
    "wastedBytes": 12966
  }
}

Render-blocking requests

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://rauno.me/_next/static/css/e621362aa87785a2.css",
      "totalBytes": 2770
    },
    {
      "url": "https://rauno.me/_next/static/css/647af292b7760dc7.css",
      "totalBytes": 1449
    }
  ],
  "headings": [
    {
      "key": "url",
      "label": "URL",
      "valueType": "url"
    },
    {
      "key": "totalBytes",
      "label": "Transfer Size",
      "valueType": "bytes"
    },
    {
      "key": "wastedMs",
      "label": "Duration",
      "valueType": "timespanMs"
    }
  ]
}
测试环境与原始指标
{
  "finalUrl": "https://rauno.me/",
  "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": 6018.6990000000005
    },
    {
      "id": "cumulative-layout-shift",
      "unit": "unitless",
      "value": 0
    },
    {
      "id": "total-blocking-time",
      "unit": "millisecond",
      "value": 31.000000000000455
    },
    {
      "id": "first-contentful-paint",
      "unit": "millisecond",
      "value": 939.699
    },
    {
      "id": "speed-index",
      "unit": "millisecond",
      "value": 2127.0539059834236
    }
  ]
}

01 / 值得借鉴

好设计,具体好在哪

一个图形就能建立记忆

鲜黄色圆形与黑字形成非常直接的识别点,其余背景保持低饱和。

内容边缘表达空间

右侧露出相邻画布,顶部刻度与灰色外框共同提示这不是普通单列网页。

02 / 下一步

值得继续打磨的地方

  1. 01

    补充横向浏览的操作提示

    手机画布上下留白较大,下一页入口主要依赖边缘提示,不够直观。

    增加简短的滑动说明或上一页下一页控件,保留键盘替代操作,并让联系入口在窄屏可直接找到。

03 / 设计语言

把气质拆成可复用的参数

色彩

背景

#ededed

文字

#171717

字体与尺度

标题字体
X
正文字体
X
标题 / 正文
32px / 16px

间距与形状

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

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

04 / 检查依据

观察与实测依据

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

转化1 项观察

补充横向浏览的操作提示

手机画布上下留白较大,下一页入口主要依赖边缘提示,不够直观。

增加简短的滑动说明或上一页下一页控件,保留键盘替代操作,并让联系入口在窄屏可直接找到。

mobile.png: centered horizontal canvas with subtle neighboring edge
上线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

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

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

设计基线
主体以白色画布承载身份说明,黄色圆与文字交叠;左右可见其它画布的边缘,上方细刻度辅助表达浏览进度,联系方式在页面内容中提供。手机将画布缩为可浏览的一页。参考单一图形、文字尺度和横向空间关系,真实键盘与触屏交互必须单独实现验证。
{
  "colors": [
    {
      "role": "bg",
      "hex": "#ededed"
    },
    {
      "role": "ink",
      "hex": "#171717"
    }
  ],
  "fonts": {
    "body": "X",
    "display": "X",
    "stack": [
      "X"
    ]
  },
  "radius": {
    "button": "0px",
    "card": "",
    "field": ""
  },
  "space": {
    "section": "0px",
    "card": ""
  },
  "type": {
    "h1": "32px",
    "body": "16px",
    "weight": "500",
    "lineHeight": "normal",
    "letterSpacing": "normal"
  }
}
数据来自同次页面采集;字体、圆角和间距为具体元素采样,不代表全站唯一设计规范。空值为未取得。HTML 为源码体积,不是压缩传输量;脚本数为 DOM 标签数,不是请求数。

执行事项
1. 补充横向浏览的操作提示
增加简短的滑动说明或上一页下一页控件,保留键盘替代操作,并让联系入口在窄屏可直接找到。
依据: mobile.png: centered horizontal canvas with subtle neighboring edge

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