3 小时 · 零编程基础 · macOS & Windows

用对话写代码，
从零做一个 Chrome 插件。

不用学语法、不用装后端。跟 AI 聊天，就能做出一个真正实用的浏览器工具——
划词卡片：选中网页文字，一键生成精美分享图。

开始学习 → 看看成品 ↓

你将做出的东西

划词卡片。

在任意网页上选中一段话，右键一点，
一张带高亮、带来源、带二维码的分享卡片就生成了。
自动复制到剪贴板，直接去微信粘贴。

...在过去的几十年里，人工智能经历了多次起伏。从最初的符号主义到如今的深度学习，
真正的创新不是让机器取代人类，
而是让人类借助机器成为更好的自己。
这一理念正在重新定义我们与技术的关系...
某科技媒体
扫码查看原文
✨ 高亮 + 上下文
📱 QR 码溯源
📋 自动复制
🎨 多种风格
🗂️ 历史记录

为什么选这个项目

做完你真的会每天用它。

🔥

实用

不是玩具，不是 demo。做完就是一个你每天会用的工具。

🎨

可个性化

小红书风、暗黑学术风、赛博朋克…每个人做出不同的风格。

🌍

跨平台零差异

Chrome 在 macOS 和 Windows 上完全一样，体验无差别。

📦

零后端

不需要装 Python，不需要启动服务器。开箱即用。

课程设计

7 章 · 3 小时 · 完整闭环。

从装环境到部署上线，跑通一个真实的软件开发流程。

15 min

00 — 环境准备

安装 Claude Code、Git，开启 Chrome 开发者模式

20 min

01 — 初识 Vibe Coding

什么是 Vibe Coding？对话生成第一个 Chrome 插件

20 min

02 — Git 入门

代码的"存档系统"：初始化、提交、查看历史

40 min

03 — 构建插件 ⭐

分 4 步对话搭建划词卡片：右键菜单 → Canvas 绘制 → 剪贴板 → 历史记录

20 min

04 — 迭代优化

自定义卡片风格，设计你独一无二的模板

15 min

05 — 发布分享

推送到 GitHub，写 README，分享给同事

25 min

06 — 项目主页

做一个介绍网页，部署到 GitHub Pages

你将收获

9 项技能。一个下午。

💬
Vibe Coding
用自然语言驱动 AI 写代码
📸
Git
代码的存档与版本管理
🤖
Claude Code
命令行 AI 编程助手
⌨️
CLI
终端 / 命令行入门
🌐
HTML / CSS / JS
前端三件套
🧩
Chrome 插件
manifest、content script、权限
🎨
Canvas
用代码画出一张图片
💾
浏览器存储
Chrome Storage API
🚀
GitHub Pages
把网页部署到互联网

开始之前

你只需要带上好奇心。

✅ 一台电脑（macOS 或 Windows）
✅ Chrome 浏览器
✅ 能上网
✅ 好奇心

不需要任何编程经验。

"Vibe Coding 的本质不是"不写代码"，
而是把创造力从语法中解放出来。"

Let's vibe. 🎶

打开 GitHub 仓库，从第 00 章开始。

开始学习 →