这是什么？​

HER WAKA 是由 SheSharp 与 Ministry of Social Development（MSD，新西兰社会发展部） 合作、academyEX 承办、RCSA 提供招聘视角的综合就业赋能项目。面向奥克兰地区准备重返职场的女性 MSD 客户，2026 年 3 月至 6 月每月一场工作坊，全部线下在 academyEX Pikopiko 举办。

项目核心有三块：

1. 四场线下工作坊 —— AI 与未来工作、#IAmRemarkable 与 Vibe Coding、就业权益、Networking 与职业连接
2. 10 个自学 AI 教程 —— 按 ★ 到 ★★★★★ 五个难度编排，从「用 AI 总结 Gmail」到「用 Claude Code 打造 Daily Report Bot」
3. 完整求职资源库 —— 新西兰 IT 市场、求职平台、招聘机构、CV/LinkedIn、就业权益、AI 学习工具、科技社区

为什么要并进本站？​

HER WAKA 原本是一个独立的 Mintlify 站点。把它合并到本站之后：

• 一套导航，三届活动 —— 通过右上角版本下拉可以无缝切换 2024 冬、2025 夏、2026 HER WAKA
• 共享搜索与博客 —— Algolia 索引一次性覆盖三届内容，博客持续更新
• 双语支持 —— 中文为默认；切换到 English 可看原版英文教学（原生为 MSD 客户设计）

快速入口​

• 👉 项目介绍
• 👉 四场工作坊日程
• 👉 10 个自学教程总览
• 👉 求职资源库

技术笔记（为好奇的同学）​

原站使用 Mintlify 专有组件（<Card>/<Tabs>/<Steps>/<Accordion> 等）。为避免 1000+ 处 MDX 手动改写，本次迁移通过一个轻量的 MintlifyShim 兼容层 把这些组件映射到 Docusaurus 原生能力（@theme/Tabs、@theme/Admonition、原生 <details> 等），并通过 swizzle MDXComponents.js 全局注入，MDX 文件几乎零改动。这套兼容层未来也可以复用到任何从 Mintlify 迁来的项目。

祝学习愉快 🌸

工具概览​

Cursor IDE​

Cursor 是基于 VS Code 的 AI 增强型编辑器。它将 AI 能力深度集成到编辑器的每一个环节中，包括代码补全、代码编辑、多文件修改和对话式开发。

核心特点：

• 基于 VS Code，界面和操作习惯完全兼容
• Cmd+K / Ctrl+K 快捷键调用内联编辑
• Composer 模式支持跨文件的大规模修改
• 自动理解项目上下文

Gemini CLI​

Gemini CLI 是 Google 推出的命令行 AI 工具，基于 Gemini 大模型。它运行在终端中，通过自然语言对话完成开发任务。

核心特点：

• 纯命令行操作，无需图形界面
• 可以直接执行系统命令
• 理解项目文件结构和内容
• 免费使用（有每日限额）

功能对比​

代码编辑​

1. 选中一段代码
2. 按 Cmd+K
3. 输入："添加错误处理和日志记录"
4. 预览修改 → 接受/拒绝

> 帮我在 src/utils.js 中添加一个日期格式化函数，
  支持中文和英文两种格式，并给它写单元测试

项目管理​

学习与调试​

Cursor IDE 更适合在写代码时即时获得帮助：

• 遇到报错？选中错误信息，Cmd+L 发送给 AI
• 不理解某段代码？选中后按 Cmd+L 询问
• 需要重构？选中代码，Cmd+K 描述新的结构

Gemini CLI 更适合整体性的问题排查：

• "帮我检查这个项目为什么运行不起来"
• "分析一下这个项目的性能瓶颈"
• "把这个项目从 JavaScript 迁移到 TypeScript"

适用场景分析​

选择 Cursor IDE 的场景​

1. 日常编码工作

   • 你大部分时间都在写代码和修改代码
   • 你需要实时的代码补全和建议
   • 你习惯在图形化 IDE 中工作

2. 团队协作项目

   • 项目有严格的代码规范
   • 需要频繁的代码审查
   • 需要精细控制每一行改动

3. 复杂应用开发

   • 大型前端应用（React/Vue/Angular）
   • 后端 API 开发
   • 需要频繁在多个文件之间切换

选择 Gemini CLI 的场景​

1. 环境管理和项目搭建

   • 初始化新项目
   • 安装和配置开发工具
   • 系统环境诊断和修复

2. 学习编程

   • 你是零基础初学者
   • 想通过实际项目学习
   • 需要 AI 手把手指导

3. 自动化任务

   • 批量文件处理
   • 数据格式转换
   • 部署和运维脚本

4. 预算有限

   • Gemini CLI 免费使用
   • 不需要额外订阅费用

上手难度对比​

Cursor IDE​

学习曲线：低（如果熟悉 VS Code）/ 中等（如果是新手）

第1天：安装 Cursor，熟悉界面
第2天：学习 Cmd+K（内联编辑）和 Cmd+L（AI 对话）
第3天：尝试 Composer 模式进行多文件编辑
第4天：定制设置，了解 .cursorrules 文件

Gemini CLI​

学习曲线：中等

第1天：安装 Node.js 和 Gemini CLI，完成授权
第2天：学习基本对话交互，文件读写操作
第3天：尝试项目级别的操作（创建、修改、部署）
第4天：学习高级用法，建立自己的工作流

费用对比​

最佳实践：两者结合使用​

实际上，这两款工具并不是非此即彼的关系。最高效的方式是根据任务类型灵活切换：

推荐工作流​

1. 项目初始化 → Gemini CLI
   "创建一个 Next.js 项目，配置好 TypeScript 和 Tailwind CSS"

2. 日常编码 → Cursor IDE
   在 Cursor 中编写和修改代码，享受实时补全

3. 环境问题排查 → Gemini CLI
   "为什么我的项目 build 失败了？帮我排查"

4. 大规模重构 → Cursor IDE（Composer 模式）
   使用 Composer 进行跨文件的结构调整

5. 部署和运维 → Gemini CLI
   "帮我配置 Vercel 部署，设置环境变量"

总结​

没有最好的工具，只有最适合当前任务的工具。了解每款工具的优势和局限，根据实际需求灵活选择，才是 AI 时代的正确打开方式。

为什么 2025 年是学习 AI 编程的最佳时机？​

AI 编程工具已经成熟​

2024-2025 年，AI 编程工具经历了爆发式发展：

• Google Gemini CLI — 免费的命令行 AI 助手，可以直接在终端操作文件和执行命令
• GitHub Copilot — 在编辑器中实时提供代码补全建议
• Cursor IDE — 专为 AI 编程设计的集成开发环境
• Claude / ChatGPT — 通用 AI 助手，擅长代码解释和生成

这些工具已经足够成熟，能够帮助完全零基础的人完成实际项目。

学习门槛大幅降低​

传统编程学习路径：

学语法 → 练算法 → 做项目 → 找工作（6-12个月）

AI 辅助编程学习路径：

学工具 → 做项目 → 边做边学 → 快速见效（2-4周上手）

主流 AI 编程工具对比​

选择合适的工具是入门的第一步。以下是2025年最主流的 AI 编程工具对比：

推荐组合​

对于零基础学习者，推荐以下组合：

1. 起步阶段：Claude（网页版）+ Gemini CLI

   • 用 Claude 理解概念、解答疑惑
   • 用 Gemini CLI 动手实践

2. 进阶阶段：Cursor IDE + GitHub Copilot

   • 用 Cursor 进行日常开发
   • 用 Copilot 提升编码效率

零基础学习路线图​

第一周：认识 AI 编程​

目标：理解 AI 编程是什么，搭建基本环境

具体步骤：

1. 了解基本概念

   • 什么是终端/命令行
   • 什么是代码编辑器
   • 什么是版本控制（Git）

2. 注册必要账号

   • Google 账号（用于 Gemini CLI）
   • GitHub 账号（代码托管和协作）
   • Vercel 账号（网站部署）

3. 安装开发工具

   • Node.js（JavaScript 运行时）
   • VS Code（代码编辑器）
   • Git（版本控制）

第二周：第一个 AI 项目​

目标：用 AI 工具完成一个完整的小项目

推荐项目：搭建个人网站

为什么推荐做个人网站？

• 成果可见——做出来就能看到
• 实用性强——可以作为作品集
• 技术覆盖全面——前端、部署、域名等
• AI 擅长帮忙——模板生成、内容优化等

具体步骤：

第1天：用 Gemini CLI 初始化 Docusaurus 项目
第2天：自定义网站配置（标题、颜色、导航）
第3天：创建个人介绍和项目展示页面
第4天：学习 Markdown 写作，发布第一篇博客
第5天：部署到 Vercel，绑定自定义域名

第三周：深入实践​

目标：掌握更多 AI 辅助开发技巧

• 学习用 AI 调试代码
• 学习用 AI 管理 Git 工作流
• 尝试用 AI 生成更复杂的功能
• 学习阅读和理解 AI 生成的代码

第四周：建立工作流​

目标：形成自己的 AI 辅助开发工作流

• 总结哪些任务适合交给 AI
• 哪些任务需要自己理解
• 如何验证 AI 生成的代码
• 如何持续学习和提升

常见误区​

误区一："AI 会替代程序员"​

AI 是工具，不是替代品。就像计算器没有替代数学家一样，AI 编程工具不会替代程序员。它改变的是工作方式，而不是取消这个职业。

误区二："用 AI 写代码是作弊"​

在专业开发中，使用任何能提升效率的工具都是正确的做法。AI 编程助手与代码自动补全、代码片段、Stack Overflow 一样，都是开发者工具箱的一部分。

误区三："不需要学编程基础了"​

AI 工具可以帮你写代码，但理解代码在做什么仍然是你的责任。基础知识帮助你：

• 判断 AI 生成的代码是否正确
• 描述更精准的需求
• 调试和修复问题
• 做出架构决策

误区四："越贵的工具越好"​

免费工具足以完成大部分学习和个人项目。不要在入门阶段就花钱订阅付费工具。先用免费方案（Gemini CLI + VS Code），等你确认这是你想深入的方向后，再考虑付费工具。

学习资源推荐​

在线课程​

• AI 编程公开课 — 我们的免费课程系列，从环境搭建到网站部署
• Gemini CLI 基础教程 — 系统学习 Gemini CLI
• 个人网站开发部署 — 动手做项目

社区​

• Discord 学习社区 — 加入学习群组，互相交流
• GitHub Discussions — 提问和讨论

实用链接​

• Node.js 官网 — 安装 JavaScript 运行时
• VS Code 官网 — 免费代码编辑器
• GitHub — 代码托管平台
• Vercel — 免费网站部署平台

写在最后​

学习 AI 编程最重要的不是天赋，而是动手。完美的学习计划不如一个实际完成的项目。

建议你现在就开始：

1. 打开我们的 课程介绍
2. 按照指引搭建开发环境
3. 完成你的第一个 AI 辅助项目

每一位优秀的开发者都是从零开始的。AI 只是让这个起步变得更加平滑。

什么是 Gemini CLI？​

Gemini CLI 是 Google 基于 Gemini 大语言模型打造的命令行工具。与传统的 AI 聊天界面不同，它直接运行在你的终端中，能够：

• 理解你的项目结构和代码上下文
• 直接读写本地文件
• 执行系统命令
• 帮助调试和修复代码问题
• 自动化重复性开发任务

安装 Gemini CLI​

前置要求​

在安装 Gemini CLI 之前，你需要确保系统已安装 Node.js 18 或更高版本。

node --version
npm --version

npm install -g @google/gemini-cli

npx @google/gemini-cli

brew install node

npm install -g @google/gemini-cli

npx @google/gemini-cli

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Fedora
sudo dnf install nodejs

npm install -g @google/gemini-cli

首次配置​

安装完成后，首次运行 Gemini CLI 会引导你完成 Google 账号授权：

gemini

按照终端中的提示完成 OAuth 登录流程。授权成功后，你就可以开始使用了。

基础使用​

启动交互模式​

在任意项目目录中运行：

gemini

进入交互模式后，你可以直接输入自然语言指令：

> 帮我查看这个项目的结构
> 这个目录下有哪些 JavaScript 文件？
> 帮我创建一个简单的 HTTP 服务器

单次命令模式​

如果只需要执行一次性任务：

gemini "帮我解释这段代码的作用" < main.py

常用指令示例​

以下是一些实用的 Gemini CLI 使用场景：

环境诊断与修复：

> 检查我的开发环境，看看是否缺少必要的工具
> 我的 Git 配置有什么问题吗？帮我修复
> 清理系统中不需要的 Node.js 旧版本

代码生成与修改：

> 在当前目录创建一个 Express.js 项目模板
> 帮我给这个函数添加错误处理
> 把这个 JavaScript 文件重构为 TypeScript

Git 操作自动化：

> 帮我初始化 Git 仓库并创建 .gitignore
> 查看最近的修改并帮我写一个有意义的 commit 信息
> 创建一个新分支并切换过去

实战案例：用 Gemini CLI 搭建个人网站​

让我们通过一个实际案例来展示 Gemini CLI 的强大能力。

第一步：项目初始化​

> 帮我创建一个基于 Docusaurus 的个人网站项目，项目名叫 my-portfolio

Gemini CLI 会为你执行必要的命令，创建项目结构，并安装依赖。

第二步：自定义配置​

> 帮我修改 docusaurus.config.js，把网站标题改成"我的作品集"，
  并添加中文语言支持

第三步：创建内容​

> 在 docs 目录下创建一个自我介绍页面，使用 Markdown 格式，
  包含个人简介、技能列表和项目经历

第四步：本地预览​

> 启动开发服务器，让我预览网站效果

第五步：部署上线​

> 帮我把这个项目部署到 Vercel，给我详细的操作步骤

进阶技巧​

1. 利用上下文感知​

Gemini CLI 能够读取当前目录下的文件，自动理解项目上下文。在项目根目录下启动 Gemini CLI，它就能智能地：

• 识别项目类型（Node.js、Python、Go 等）
• 理解项目结构和依赖关系
• 根据现有代码风格生成一致的代码

2. 批量文件操作​

> 帮我把 src 目录下所有 .js 文件的 var 声明改成 const 或 let
> 给所有 Python 文件添加 type hints

3. 学习与调试​

> 解释这个正则表达式的含义：/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
> 这段代码为什么会产生内存泄漏？帮我找到原因并修复

4. 安全实践​

常见问题​

Q: Gemini CLI 和 ChatGPT 有什么区别？​

Gemini CLI 运行在本地终端，能直接访问你的文件系统和开发环境，适合实际编程任务。而 ChatGPT 是网页聊天界面，更适合一般性的问答。

Q: 使用 Gemini CLI 需要付费吗？​

Gemini CLI 基础版本免费使用，有每日使用次数限制。对于大多数个人学习和小型项目来说完全够用。

Q: 我完全不会编程，也能用 Gemini CLI 吗？​

可以！Gemini CLI 的一大优势就是你可以用自然语言描述你想做的事情，它会帮你生成代码和执行命令。不过，建议先学习一些基础的终端操作知识。

总结​

Gemini CLI 是学习 AI 辅助编程的绝佳工具。它降低了编程的门槛，让初学者能够通过自然语言与 AI 协作完成开发任务。无论你是想学习编程、管理开发环境、还是快速搭建项目，Gemini CLI 都能成为你的得力助手。

想要更深入地学习 Gemini CLI 的使用？欢迎查看我们的 Gemini CLI 环境管理课程，通过实践项目系统性地掌握这一工具。

作为2025年夏季她行活动的导师，我在2025年7月27日的导师小组答疑活动中分享了关于身份认知与社会群体划分的深度思考。

核心观点概览​

理论框架​

社会认同理论 (Social Identity Theory)​

社会认同的三个核心过程：

1. 社会分类 (Social Categorization) - 将人群划分为不同群体
2. 社会认同 (Social Identification) - 认识并认同自己的群体归属
3. 社会比较 (Social Comparison) - 通过群体间比较获得积极独特性

多重叙事视角​

心理机制解析​

• 内群体偏私：偏爱自己所属群体成员，以提升自尊感
• 外群体同质性偏见：认为"他们都一样"，忽视外群体的多样性
• 恐怖管理理论：通过群体认同管理死亡焦虑
• 进化心理学视角：群体忠诚可能具有进化适应性

交叉性理论的洞见​

交叉性的重要启示​

• 不存在普遍的、同质化的群体经验
• 必须关注多重权力结构的相互作用
• 避免以一个群体的"我们"覆盖另一个群体的特殊性

数字时代的新挑战​

未来展望：超越二元对立​

构建包容性"大我们"的路径：

• 培养批判性思维，审视叙事框架
• 促进跨群体对话，打破刻板印象
• 构建公正社会结构，减少权力不平等
• 拥抱身份复杂性，寻找共同立场

结语​

未来的挑战在于，如何在承认和尊重差异的同时，努力寻找和构建更具包容性的、能够促进共同福祉的"大我们"。这需要我们以一种更宏观、更细致、更具同理心的视角看待世界的差异和问题。

本文基于2025年7月27日她行活动导师小组答疑会的演讲内容整理而成。

Coze工作流开发教程​

环境配置部分​

第一部分：基础配置​

第二部分：进阶设置​

第三部分：完整流程​

Docusaurus教程系列​

网站开发完整教程​

第一部分：项目初始化​

创建项目并进行基础配置。

第二部分：内容编写​

学习如何编写和组织文档内容。

第三部分：主题定制​

自定义网站主题和样式。

第四部分（上）：部署准备​

部署前的准备工作和配置。

第四部分（下）：Vercel部署​

将网站部署到Vercel平台。

AI绘图教程​

LOGO设计基础​

教程视频 1：LOGO设计入门​

教程视频 2：进阶技巧​

AI对话系统​

环境配置教程​

环境配置指南​

提示​

• 视频资源来自YouTube，请确保网络环境可以正常访问
• 建议按照顺序观看，每个系列的视频都是循序渐进的
• 如果视频无法播放，可以直接访问YouTube链接观看
• 欢迎在评论区留言交流和讨论

定期更新​

我们会定期更新和补充新的视频教程资源，欢迎经常回来查看最新内容。如果你发现任何问题或有好的建议，也请告诉我们。

关于继续深造​

在申请海外研究生项目时，需要注意以下几个关键点：

工作经验的价值​

• 国内开发工作经验可以带来一定加分
• 但影响相对有限
• 需要重点突出与专业相关的实践经历

海外就业考量​

专业选择的关键因素​

1. 就业市场需求导向

   • 研究目标国家的人才需求
   • 了解热门行业和职位
   • 分析未来市场趋势

2. 移民政策考量

   • 是否有意向移民当地
   • 了解当地移民政策
   • 评估专业与移民的关联性

3. 个人职业规划

   • 明确长期职业目标
   • 评估专业发展前景
   • 考虑个人兴趣与能力

建议与提醒​

申请前准备​

1. 充分调研目标国家
2. 了解就业市场情况
3. 研究移民政策变化
4. 评估个人竞争力

规划要点​

• 设定清晰的目标
• 制定详细的时间表
• 准备充足的资金
• 提前做好语言准备

行动计划​

第一步：信息收集​

• 研究目标院校和专业
• 了解申请要求和截止日期
• 收集往年录取数据

第二步：能力提升​

• 提高语言水平
• 积累相关工作经验
• 准备标准化考试

第三步：申请准备​

• 撰写个人陈述
• 准备推荐信
• 整理申请材料

第四步：长期规划​

• 制定职业发展路径
• 建立专业人脉网络
• 关注行业动态

准备工作​

你需要准备：

• 电脑（Windows系统）
• 谷歌浏览器（Chrome）
• Git Bash 软件（后面会教你安装）

详细步骤​

第一步：安装必要软件​

1. 如果你还没有安装 Git Bash：
   • 访问官网：Git 下载页面
   • 点击 "Download for Windows"
   • 下载完成后双击安装包
   • 一路点击"下一步"使用默认设置完成安装

第二步：获取视频下载信息​

1. 用谷歌浏览器打开腾讯会议录屏链接
2. 点击播放视频，等待视频开始播放
3. 在键盘上按 F12 键（某些笔记本可能需要同时按 Fn + F12）
4. 在开发者工具窗口顶部找到并点击 "Network"（网络）标签
5. 在 Network 下面找到并点击 "Media"（媒体）选项
6. 刷新网页，重新开始播放视频
7. 等待几秒，找到以 .mp4 结尾的文件
8. 右键点击这个 .mp4 文件
9. 选择 "Copy" → "Copy as cURL(bash)"

第三步：修改下载命令​

curl 'https://example.com/video.mp4' \
-H 'range: bytes=14200808-314114094' \
-H 'if-range: "17c5ccf6d75f9bccce2a71f5a32dbea4-3"' \
-H 'accept: */*' \

curl 'https://example.com/video.mp4' \
-H 'accept: */*' \
--output /d/meeting_video.mp4

第四步：下载视频​

1. 打开 Git Bash（从开始菜单找到）
2. 粘贴修改好的命令
3. 按回车键执行
4. 等待下载完成

下载过程示例：

常见问题解答​

# D盘根目录
--output /d/视频名称.mp4

# D盘的 Videos 文件夹
--output /d/Videos/视频名称.mp4

# 桌面
--output /c/Users/你的用户名/Desktop/视频名称.mp4

注意事项​

• 确保有足够的磁盘空间
• 下载过程中不要关闭 Git Bash
• 保持网络连接稳定
• 下载完成前不要关机或休眠
• 如果下载速度很慢，可以尝试重新获取下载命令

进阶提示​

• 创建专门的文件夹存放下载的视频
• 给视频文件起一个有意义的名字
• 下载完成后确认视频是否可以正常播放
• 及时备份重要的视频文件

最后提醒​

设计理念​

受极简几何艺术家的启发，我们的设计系统强调：

• 清晰的线条和基本几何形状（方形、圆形、三角形）
• 有限但对比鲜明的配色方案
• 基于网格的布局
• 将负空间作为设计元素
• 视觉元素的系统性重复
• 注重功能性和可读性

色彩系统​

主色​

辅助色​

字体系统​

--ifm-font-family-base: 'Space Grotesk', system-ui, -apple-system;

--ifm-font-family-monospace: 'JetBrains Mono', SFMono-Regular, Monaco;

字体大小​

• 标题:
  • h1: 2.5rem (40px)
  • h2: 2rem (32px)
  • h3: 1.5rem (24px)
• 正文: 1rem (16px)
• 代码: 0.9375rem (15px)

布局指南​

网格系统​

• 12列网格
• 槽宽: 24px
• 最大内容宽度: 1200px
• 响应式断点:
  • 移动端: 320px
  • 平板: 768px
  • 桌面: 1024px

间距比例​

--space-xs: 0.25rem;  /* 4px */
--space-sm: 0.5rem;   /* 8px */
--space-md: 1rem;     /* 16px */
--space-lg: 1.5rem;   /* 24px */
--space-xl: 2rem;     /* 32px */

组件设计​

导航栏​

• 固定头部与几何logo
• 桌面端水平菜单
• 移动端汉堡菜单
• 使用几何形状作为激活状态指示器

Hero区块​

.hero {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  min-height: 80vh;
}

代码块​

• 深色背景: #1e1e1e
• 受几何图案启发的语法高亮
• 圆角: 4px
• 内边距: 1.5rem

卡片​

.card {
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

实现指南​

1. 更新 docusaurus.config.js​

module.exports = {
  themeConfig: {
    navbar: {
      style: 'dark',
      logo: {
        alt: 'Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        // 导航项
      ],
    },
    prism: {
      theme: require('prism-react-renderer/themes/nightOwl'),
    },
  },
};

2. 自定义CSS变量​

在 src/css/custom.css 中:

:root {
  --ifm-color-primary: #1a237e;
  --ifm-color-primary-dark: #172069;
  --ifm-color-primary-darker: #151e63;
  --ifm-color-primary-darkest: #111851;
  --ifm-color-primary-light: #1d2893;
  --ifm-color-primary-lighter: #1f2a99;
  --ifm-color-primary-lightest: #232fab;
  
  --ifm-code-font-size: 0.9375rem;
  --ifm-font-size-base: 16px;
  --ifm-line-height-base: 1.5;
  --ifm-spacing-horizontal: var(--space-md);
}

3. 首页结构​

在 src/pages/index.js 中:

import React from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';

export default function Home() {
  return (
    <Layout
      title="AI Programming Education"
      description="Learn AI programming through collaborative examples">
      <header className="hero">
        <div className="container">
          <h1 className="hero__title">Master AI Programming</h1>
          <p className="hero__subtitle">
            Through collaborative learning and practical examples
          </p>
          <div className="buttons">
            <Link className="button button--primary button--lg">
              Get Started
            </Link>
          </div>
        </div>
      </header>
      
      {/* 特性部分 */}
      <main>
        <section className="features">
          <div className="container">
            {/* 特性卡片 */}
          </div>
        </section>
      </main>
    </Layout>
  );
}

动画指南​

• 使用细微的过渡效果 (0.2-0.3s)
• 倾向于使用transform而非opacity变化
• 实现几何展示动画
• 保持交互流畅且有目的性

响应式设计​

• 移动优先方法
• 流式排版
• 可维护的网格系统
• 在断点处进行自适应布局更改

无障碍设计​

• 符合WCAG 2.1 AA标准
• 高对比度
• 清晰的焦点状态
• 语义化HTML结构
• 适配屏幕阅读器

性能优化​

• 图片优化
• 实现懒加载
• 最小化CSS/JS包
• 尽可能使用系统字体
• 缓存静态资源