awesome-design-md 复古特辑：如何还原 2001 年任天堂 Y2K 控制台镀铬风格，一篇全解析
【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md
想让自己的 AI 编码助手生成"2001 年任天堂官网"那种 Y2K 控制台镀铬风格的网页吗？开源项目awesome-design-md收录了一份从 2001 年 Nintendo.com 逆向提炼的DESIGN.md设计系统文件，把它放进项目根目录，再告诉 AI 代理"照着这个风格构建页面"，就能一键生成带倒角金属面板、半调网点导航条和描边盒装字体的复古 UI。🎮
一、awesome-design-md 是什么？AI 能读懂的设计系统库
awesome-design-md是一个精选的 DESIGN.md 集合：用纯 Markdown 把各大品牌网站的设计语言（配色、字体、组件、布局规则）完整"逆向"成 AI 代理能直接阅读的文档。
| 文件 | 谁来读 | 定义什么 |
|---|---|---|
AGENTS.md | 编码代理 | 如何构建项目 |
DESIGN.md | 设计代理 | 项目该长什么样 |
它不需要 Figma 导出、JSON Schema 或任何额外工具——Markdown 是大语言模型最擅长的格式，丢进项目根目录即可生效。
本特辑聚焦的是仓库中的复古板块Retro Web · Nostalgia 系列，其中 Nintendo.com (2001) 条目描述为：Y2K"console chrome"网页——刷纹长春花蓝倒角金属面板、半调网点碳黑导航条上闪着琥珀金光、电路板质感主视觉上的 Arial Black 描边盒装字。
二、三步上手：让 AI 生成 Y2K 镀铬风页面
使用步骤极简（详见 README.md）：
- 复制文件：把 design-md/nintendo-2001/DESIGN.md 复制到你项目的根目录
- 下达指令：对 AI 编码代理说"用 DESIGN.md 里的设计语言，给我做一个任天堂 2001 风格的产品页"
- 验收迭代：对照文档中的 Do's and Don'ts 检查生成结果是否跑偏
💡 每个站点目录还包含
preview.html/preview-dark.html可视化目录页（见 README.md），可用来核对色板与字阶。
三、核心解析：控制台镀铬风的三大视觉声部
该设计系统的灵魂描述在 DESIGN.md 的 Overview 部分：整个页面不是"排版"出来的，而是像一台游戏机的前面板一样"组装"出来的。它靠三种"声部"形成强烈对比：
| 声部 | 角色 | 代表色（色值） |
|---|---|---|
| 冷金属底盘 | 承载一切内容的刷纹金属面板 | 长春花金属蓝#7a8aba、铬靛#3d4f97 |
| 碳黑指令层 | 导航、右侧按钮、页脚，带半调网点纹理 | Carbon Navy#21242e |
| 暖色导引 | 只用于"前进"指令，绝不装饰 | 信号橙#f68d1f、琥珀#ecab37、导航金#e48600 |
完整色板定义在文件头部 frontmatter 的colors:区块（DESIGN.md#L6-L28），包含 20+ 个具名色值，从 Nintendo Red#e60012到淡紫薰衣草#acace7，每个色值都标注了精确的功能角色。
四、排版系统：Arial Black 描边字就是"盒装封面字"
2001 年的网站没有 Webfont，全靠Arial / Arial Black的处理手法做出时代感（DESIGN.md#L396-L419）：
| 层级 | 规格 | 用途 |
|---|---|---|
| 展示字 | 44px / 900 粗体 | 主视觉词标：白色 + 粗描边 + 硬投影，模拟游戏盒装封面字 |
| 导航词 | 13px / 700 / 字距 0.5px | 大写菜单词，如碳黑导航条上发光的 Games / Systems |
| 界面标签 | 11px / 700 大写 | 面板标题、按钮文字，像手柄上丝印的图例 |
| 正文 | 12px / 400 | 小而安静，永远不与"镀铬"抢戏 |
| 微字 | 10px | 页脚版权、日历单元格 |
三条黄金原则📐：
- 大写 + 0.5px 字距 = 整套系统的"镀铬之声"
- 展示字永远描边 + 硬阴影，平铺文字会立刻失去盒装感
- 正文保持 12px 低调，层级完全靠标签和摄影撑起来
文档还贴心地给出了字体替代方案：微标签可用像素字体Silkscreen / VT323还原当时位图渲染的颗粒感，展示字可用Archivo Black（斜体）或加 CSS 描边 + 偏移阴影的 Arial Black。
五、布局与深度：倒角面板 + 硬斜面，而非模糊阴影
5.1 间距与网格
- 基础节奏单位8px，完整刻度：2 / 4 / 8 / 12 / 16 / 24 / 32 / 48px
- 固定画布约 780–830px——典型桌面时代的固定表格布局，像按单一窗口尺寸裁剪的应用程序
- 主体为"满幅主视觉 + 三分之二内容列 + 三分之一右侧动作栏"的经典双栏结构，左侧还有一条竖向旋转标签带（Top Ten、Player's Choice…）
⚙️ 留白哲学：空白是面板之间的工程接缝，不是呼吸空间。模块紧贴、仅以细倒角线分隔，页面因此像一块"一切皆一键可达"的仪表盘。
5.2 四级物理斜面（倒角）深度系统
这套系统没有柔和投影，深度全靠模拟倒角塑料件的物理感（DESIGN.md#L459-L469）：
| 级别 | 处理手法 | 应用 |
|---|---|---|
| 0 内凹 | 顶缘深色铬靛、底缘提亮 | 列表行、表单输入、画布本体 |
| 1 面板 | 顶部高光 + 下方铬靛阴影线 | 内容面板、系统磁贴、信息盒 |
| 2 凸出芯片 | 倒角按钮：亮顶缘 + 硬底阴影 | 工具按钮、Submit、导航标签 |
| 3 指令板 | 碳黑 + 半调网点纹理，"压在"镀铬之上 | 顶导航、右栏按钮、页脚 |
最外层大面板的角是**45° 切角（chamfered）**而非圆角——这才是"工业冲压前面板"的味道。
六、组件图鉴：30+ 个可直接生成的零件
components:区块（DESIGN.md#L92-L280）定义了约 30 个具名组件，挑选几个最有味道的：
nav-bar— 碳黑半调网点条，28px 高，左侧白色跑道形 Logo 药丸，五个导航金菜单词，右侧琥珀色 Code Bank / Game Finder 工具芯片hero-panel— 倒角矩形满幅摄影主视觉，按页面换底色：Home 用淡紫、Systems 用电路板青#206479、Games 用动态模糊赛道红#a7282b，顶部压描边词标 + 橙色圆形箭头按钮poll-panel+radio-option— "Player's Poll" 投票面板：长春花凸面板、12px 白色圆点单选钮、收尾信号橙 Submitesrb-badge/esrb-rating-square— 琥珀色隐私认证徽章与 20px 白色分级方章（E / T），复古信任符号mascot-bubble— 白色圆角气泡"Welcome to Nintendo.com!"，配像素马里奥切图，打破网格注入品牌人格 ✨dotted-divider— 1px 点状虚线分隔符，反复出现的 Y2K 镀铬细节（"点状而非实线"）
响应式说明（现代移植指南）
原作是固定画布、鼠标时代设计，窄窗口只横向滚动。文档给出了现代移植建议（DESIGN.md#L440-L455）：约 720px 以下将右栏堆叠到内容下方、双导航条折叠为单条碳黑条、按钮热区放大到 44×44px。
七、Do's and Don'ts：防止 AI 跑偏的护栏
每个DESIGN.md的压轴章节都是设计护栏（DESIGN.md#L631-L649），直接告诉代理什么能做什么不能做：
| ✅ 应该做 | ❌ 不能做 |
|---|---|
| 每个区域都做成倒角金属板（顶缘提亮 + 底部铬靛阴影线） | 把所有角都磨圆——圆角卡片化会抹杀"工业前面板"身份 |
| 暖色只留给导引：菜单词、工具徽章、前进/Submit | 引入模糊柔和投影——这里是硬倒角，不是 Material 高程 |
| 结构标签一律大写 Arial Bold + 0.5px 字距 | 让信号橙/琥珀色渗入装饰用途——暖色必须等于"行动" |
| 主视觉词标永远描边 + 硬阴影 | 把双导航压成单条——分层指令层级才是招牌 |
| 面板紧贴 + 细倒角接缝，密度即质感 | 放大正文和留白——拥挤的固定画布密度本身就是品牌 |
八、更多玩法与参与贡献
- 仓库共收录73 份DESIGN.md，按 AI 平台、开发者工具、金融科技、汽车等分类（README.md），复古系列目前还有 Dell (1996) 可组合玩
- 想修错色值、补 token？先提 issue 再改文件，流程见 CONTRIBUTING.md
- 本条目对应的分析文档入口：design-md/nintendo-2001/README.md
总结
awesome-design-md的 Nintendo 2001 特辑，把一台 Y2K 时代游戏机的"面部"完整翻译成了 AI 可读的 token：冷金属底盘 + 碳黑指令层 + 暖色导引的三段声部、倒角切角面板、描边盒装字、780px 固定画布。复制 design-md/nintendo-2001/DESIGN.md 进项目，让 AI 按图施工，复古不是贴皮，而是被规则约束出来的"组装感"。🕹️
【免费下载链接】awesome-design-mdA collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-design-md
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
