---
name: electric-learning-library
description: "电蓝学习资源库 (Electric Learning Library) style skill for AI website building."
---

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

## 适用场景 / Use When

学习资源库 / AI 学习专题 / 课程导航页 / 知识媒体入口

## 适合做 / Best For

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

## 不适合做 / Not For

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

## 长这样 / Visual Traits

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

## 配色系统 / Color System

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

## 排版系统 / Typography

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

## 版式规则 / Layout Rules

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

## 图片处理 / Image Treatment

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

## 动效节奏 / Motion

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

## 推荐结构 / Recommended Structures

- 目录索引型 / Catalog Explorer
- 档案堆栈型 / Archive Stack

## 历史来源 / Historical Roots

- 新字体排印 / New Typography
- 瑞士风格 / Swiss Style
- 包豪斯 / Bauhaus

## 参考网站 / Reference Sites

- 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/

## 注意避坑 / Avoid

- 做成普通课程 marketplace
- 把电蓝换成多色渐变
- 首屏只有品牌口号没有资源入口

## Prompt DNA

```text
请参考电蓝学习资源库（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.
```