复古互联网
Retro Web
别名:老网页早期互联网个人主页风格Web 1.0old-school webretro website
这是什么
借用早期个人网站与桌面浏览器的视觉语言：灰色凹凸边框、衬线文字、蓝色下划线链接、侧栏目录和访客计数器。它表达的是手工制作网页的亲切感；不等同于像素艺术，也不需要牺牲今天的键盘操作、响应式布局和阅读体验。
开发规格
字体
衬线正文、系统字体菜单、可读的蓝色下划线链接。
色彩
浅灰窗口、白色内容、深蓝标题栏与链接。
边框
方角与 2px 凹凸边框，无模糊投影。
阴影
使用边框明暗方向表达凹凸，不加模糊阴影。
间距
紧凑但保持足够触控面积，窄屏目录换行。
动效
即时切换，避免闪烁和自动滚动。
状态反馈
当前页加粗、焦点有清晰轮廓，表单反馈使用实时区域。
风格演示
先看整页效果，再试交互场景打开目录中的页面，再向留言簿写一句话。留言仅存在当前演示内，不发送到任何服务，刷新即清空。
整页预览
这里是一个关于互联网早期记忆的空间。
我们收集有趣的页面、链接与值得慢慢发现的故事。
YOU ARE VISITOR 0 0 1 2 8 4
A simpler internet.
A brighter tomorrow.
交互场景
正在加载演示…
使用时关注什么
- 01用 Tab 和 Enter 切换目录；当前页面有文字加粗和明确状态。
- 02试一次空白留言和正常留言，观察验证与提交反馈。
- 03缩到窄容器时目录换行，内容依然可读。
✓ 适用场景
- 个人主页、爱好者站点、互联网历史展览或怀旧创意项目。
- 希望强调手工整理、慢慢发现和个人表达的内容。
✕ 不适用场景
- 高密度工作系统或依赖可信支付与身份验证的关键流程。
- 不要复制闪烁文字、弹窗广告、固定宽度和过小触控目标等旧网页缺陷。
常见形式
个人主页
Personal homepage
目录侧栏、短文和精选链接组成的手工小站。
旧浏览器窗口
Vintage browser window
用标题栏、菜单和凹凸边框营造桌面窗口层次。
实现要点
border-styletext-decorationfont-family:focus-visibleflex-wrap用 inset/outset 或多层阴影表达灰色面板层次；正文使用可读字号，链接保留下划线。视觉样张可以还原固定构图，真实交互区必须换行并支持键盘。留言只用组件状态，明确不持久保存。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
检查项目现有路由和样式后，创建一个复古互联网个人主页。 包含目录导航、内容区和仅本地模拟的留言簿，所有页面入口都必须有效。 用灰色凹凸窗口、深蓝标题栏、衬线正文与蓝色下划线链接建立风格，不以整张截图替代 DOM。 不新增后端、凭据或外部请求。键盘可以完成切换和留言，空白提交有明确反馈，窄屏无页面横向溢出。 验证中英文本、焦点、页面切换与刷新后的状态边界，再报告实际通过和未验证的检查。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用硬像素边缘、有限色板与点阵字形表示「游戏机记忆」的界面视觉语言。锯齿即正确， 缩放必须整数倍，抖动网点做过渡。刻意站在抗锯齿的对立面。
风格相似概念用现实世界的材质与物理形态表示数字控件的视觉语言：皮革缝线、木质纹理、拉丝 金属、玻璃光泽，按钮做成可以按压的实体，开关做成拨杆。界面元件拥有高光、 投影与倒角，"看起来像什么"直接暗示"能怎么用"。
风格相似概念复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件搭配使用容易混淆
像素艺术由点阵与有限色板定义；复古互联网由页面结构、超链接和旧浏览器视觉语汇定义，可包含照片与常规文字。