电蓝学习资源库 (Electric Learning Library)

更像带强品牌色的学习资源库首页,用超大标题、单一高识别色和策展式资源卡片,把知识入口做得有记忆点。

学习资源库课程导航知识门户

真实网站参考 / Real References

先看这些真实网站 / Open these real sites first

Zara Faces / AI Grid screenshot

代表网站 / Reference

Zara Faces / AI Grid

下折之后直接进入学习资源卡片,品牌感和浏览感衔接得很紧。

打开网站 / Open Site
People + AI Guidebook screenshot

代表网站 / Reference

People + AI Guidebook

如果想把同类站点做得更章节化、更少品牌色,可以借这一侧。

打开网站 / Open Site

长这样 / Looks Like

  • 电蓝识别强
  • 超大标题先定调
  • 导言像宣言
  • 下折直连资源卡片

适合做 / Good For

  • 学习资源库
  • 课程导航
  • 知识门户

不适合做 / Not For

  • 纯作品集
  • 后台工作台
  • 重情绪摄影品牌页

Skill 包含什么 / What The Skill Controls

截图、排版和规则来自同一套风格包 / The screenshots, layout, and rules come from the same skill packet

配色系统 / Color System

  • 用近白或极浅灰作为画布
  • 只保留一个高识别度电蓝作为主色
  • 不要再叠加第二套鲜艳品牌色

排版系统 / Typography

  • 超大无衬线标题先定调
  • 副文像导言或编辑按语
  • 卡片元数据保持紧凑和整齐

版式规则 / Layout Rules

  • 首屏先明确这个资源库在帮谁学什么
  • 下折立刻进入 featured resources 或 videos 网格
  • 品牌宣言和资源浏览要连续出现,不要分成两个站

图片处理 / Image Treatment

  • 缩略图可以服务资源卡片
  • 但视觉身份主要靠排印和电蓝色建立
  • 不要让卡片缩略图风格彼此失控

交互节奏 / Motion

  • 滚动显露和 hover 保持轻量
  • 让链接、卡片边界和按钮反馈更清楚
  • 不要做廉价 SaaS 弹跳或赛博发光

AI Prompt / AI Prompt

复制后直接粘贴给 Cursor / Claude / Paste directly into Cursor / Claude

请参考电蓝学习资源库(Electric Learning Library)风格建站: 视觉特征:电蓝识别强 / 超大标题先定调 / 导言像宣言 / 下折直连资源卡片 适合场景:学习资源库 / 课程导航 / 知识门户 不适合:纯作品集 / 后台工作台 / 重情绪摄影品牌页 推荐页面组织:目录索引型 / Catalog Explorer / 档案堆栈型 / Archive Stack 历史来源:新字体排印 / New Typography / 瑞士风格 / Swiss Style / 包豪斯 / Bauhaus 参考网站:Zara Faces / AI: https://zara.faces.site/ai / Zara Faces / AI Grid: https://zara.faces.site/ai / People + AI Guidebook: https://pair.withgoogle.com/guidebook-v2/ 配色系统:用近白或极浅灰作为画布 / 只保留一个高识别度电蓝作为主色 / 不要再叠加第二套鲜艳品牌色 排版系统:超大无衬线标题先定调 / 副文像导言或编辑按语 / 卡片元数据保持紧凑和整齐 版式规则:首屏先明确这个资源库在帮谁学什么 / 下折立刻进入 featured resources 或 videos 网格 / 品牌宣言和资源浏览要连续出现,不要分成两个站 图片处理:缩略图可以服务资源卡片 / 但视觉身份主要靠排印和电蓝色建立 / 不要让卡片缩略图风格彼此失控 风格要求:Use an electric learning library family: near-white canvas, one electric accent color as the identity system, oversized sans-serif hero copy, manifesto-like intro text, and curated resource cards or video modules directly below the fold.
历史来源 / Historical Roots

这部分放在最后看,用来补背景,而不是先决定风格。 / Use this section to add background after the direction is already clear.

1920s-1930s

新字体排印 (New Typography)

以非对称排版、空白场和摄影/版面组织信息清晰度。

1950s-1970s

瑞士风格 (Swiss Style)

网格、对齐、无衬线、秩序感。它是今天大量知识型、设计型、档案型网页的基础语法之一。

1919-1933

包豪斯 (Bauhaus)

功能、工业和几何秩序优先。它把形式服从用途这件事系统化。