实操课：用 AtomCode 20 分钟完成业务开发

从零到一，零基础也能跟着做出来

📋 开始之前：你需要准备什么

本课程会从安装开始，手把手带你完成。你只需要一台电脑，其他一切都交给我们。

你的电脑需要：

• macOS、Linux、Windows 或鸿蒙 PC 均可
• 能联网
• 有一个终端（macOS 自带 Terminal，Windows 用 PowerShell 或 Windows Terminal）

不需要你准备：

• 不需要提前装编程语言
• 不需要买 API 密钥
• 不需要任何编程经验

第零步：安装环境（10 分钟）

如果你的电脑已经有 Node.js 和 AtomCode，可以跳到第一步，右侧体验环境已经安装AtomCode，可直接使用体验。请跳到0.3启动环节；

0.1 安装 Node.js

我们开发的大赛平台是一个 Web 应用，需要 Node.js 来运行。

macOS / Linux：

# 使用 nvm 安装 Node.js（推荐方式）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# 重新打开终端，然后安装 Node.js
nvm install 20

Windows：

# 打开 PowerShell，使用 winget 安装
winget install OpenJS.NodeJS.LTS

验证安装：

node --version
# 应该输出 v20.x.x 或更高版本

npm --version
# 应该输出 10.x.x 或更高版本

💡 如果 node --version 输出了版本号，说明安装成功。如果提示"命令不存在"，试试重新打开终端。

0.2 安装 AtomCode

最简单的方式：一键脚本安装（推荐）

macOS / Linux / 鸿蒙 PC：

curl -fsSL https://atomgit.com/atomgit_atomcode/atomcode/releases/download/v4.23.1/install.sh | sh

Windows（PowerShell）：

irm https://atomgit.com/atomgit_atomcode/atomcode/releases/download/v4.23.1/install.ps1 | iex

验证安装：

atomcode --version
# 应该输出 v4.23.1 或更高版本

💡 一键脚本安装不需要 Rust，也不需要编译，30 秒就能装好。

0.3 首次启动 AtomCode

在终端里运行：

atomcode

🎬 开场：今天我们要做什么（1 分钟）

今天的任务很简单：用 AtomCode 从零开发一个大赛平台。

业务方提了两个需求：

1. 重构大赛平台
2. 设计一个获奖用户的荣誉墙

我们要在 20 分钟内把这两个需求全部实现，交出一个可运行的产品。

你不需要写一行代码，只需要告诉 AtomCode 你想要什么，它来帮你写。

📋 第一步：创建项目 + 查看 CodingPlan（2 分钟）

1.1 创建项目目录

新建一个文件夹，进入后启动 AtomCode：

mkdir 大赛平台
cd 大赛平台
atomcode

1.2 查看 CodingPlan

在 AtomCode 里输入：

/login

你会看到 CodingPlan 的配置信息：

关键信息：

• 已登录账号：显示你的 AtomGit 用户名
• 套餐状态：CodingPlan Lite 已领取成功（Max 和 Pro 尚未开放）
• 可用模型：
  • ● DeepSeek-v4-flash（默认模型）
  • ● Qwen3.6-35B-A3B
  • ● Qwen3-VL-8B-Instruct（视觉预处理器）
• 用量信息：当前时间窗口用量约 7%，5 小时后自动重置

💡 CodingPlan 是 AtomCode 的免费算力池。内置 DeepSeek V4 Flash 和 Qwen 3.6，5 小时一个周期，Token 用完会自动重置。对于学习和开发来说完全够用，不用花一分钱。GLM-5.1 等模型需要 Pro 套餐，当前 Lite 套餐的模型已经足够强大。

记住当前的消耗百分比（约 7%），我们开发完了再看变化。

🏆 第二步：开发荣誉墙 — 3 分钟出活（5 分钟）

2.1 告诉 AtomCode 你要什么

在 AtomCode 的输入框里，直接输入这段话：

帮我设计大赛的荣誉墙，展示每一位获奖用户，并为每一位获奖者设计用户卡片，卡片上展示用户的获奖里程碑、贡献历史

按 Enter 发送。

2.2 观察 AtomCode 的工作过程

发送后，你会看到 AtomCode 开始自主工作：

1. 读取 — 它会扫描当前目录，了解项目状态
2. 分析 — 并行读取已有文件，理解项目结构
3. 编辑 — 开始创建文件、写代码
4. 验证 — 检查代码有没有语法错误

你不需要做任何事情，只需要看着它工作。

如果它询问你是否确认某个操作（比如"是否允许运行 bash 命令"），输入 y 然后按 Enter 即可。

2.3 AtomCode 生成了什么

AtomCode 完成后，会输出一份设计总结，告诉你它做了什么：

它生成了一个完整的荣誉墙页面 honor-wall.html，包含：

• Hero 区域：渐变背景 + 统计数据（80+ 赛事、256 选手、15K+ Stars）
• 筛选栏：支持按赛事类型、奖项等级、关键词搜索
• 本月之星：自动轮播的焦点展示区
• 获奖网格：响应式 1~4 列自适应布局，支持网格/列表视图切换
• 选手卡片：头像、姓名、赛事、奖项徽章、项目简介、技术标签、荣誉轨迹条
• 详情弹窗：用户档案、统计面板、GitHub 式贡献热力图、获奖里程碑时间线

2.4 预览荣誉墙

告诉 AtomCode 启动预览：

用浏览器打开看看效果

你会看到一个科技感十足的荣誉墙页面，蓝紫色渐变主色调，卡片式布局展示获奖选手。

2.5 点击用户卡片查看详情

点击任意一个获奖选手的卡片，会弹出详细的贡献历史：

弹窗包含：

• 用户信息：头像、姓名、认证标签、个人简介
• 核心统计：获奖次数、项目 Stars、累计奖金（用不同颜色区分）
• 贡献热力图：类似 GitHub 的活跃度可视化
• 获奖里程碑：时间线式展示所有获奖记录

💡 这就是 AtomCode 的核心体验：你只说"做什么"，不说"怎么做"，3 分钟就能出一个包含交互细节的完整页面。

🤝 第三步：添加合作伙伴板块（3 分钟）

3.1 继续在同一个 AtomCode 会话里输入

荣誉墙做完了，我们继续给它加一个合作伙伴板块：

在荣誉墙页面最下面，增加感谢合作伙伴，分别为：企业合作伙伴、高校合作伙伴、社区合作伙伴，并填充一些 Logo 和数据营造，左右随机滚动

按 Enter 发送。

3.2 预览效果

AtomCode 会自动在荣誉墙页面底部添加合作伙伴区域，分为三列：

• 企业合作伙伴：腾讯云、华为、字节跳动、360 等，标注"合作赛事 24+ 场 · 赞助总额 ¥500W+"
• 高校合作伙伴：清华、北大、浙大等，标注"合作高校 30+ 所 · 覆盖学生 10W+"
• 社区合作伙伴：开源中国、CSDN、Apache 等，标注"合作社区 18+ 家 · 覆盖开发者 50W+"

每个合作伙伴用彩色圆形 Logo + 名称 + 业务方向呈现，风格统一又有辨识度。

💡 看到没？你只需要说"加一个合作伙伴板块"，AtomCode 就能把分类、数据、Logo 布局全部做好。

🏟️ 第四步：开发大赛首页 — 双卡片布局（5 分钟）

4.1 让 AtomCode 设计大赛首页

在 AtomCode 里输入：

帮我设计大赛首页，每个横屏放两个大赛卡片让他输出

按 Enter 发送。

4.2 预览第一版效果

AtomCode 生成了大赛首页，包含：

• 顶部 Banner：赛事名称、核心数据、报名按钮
• 分类筛选：AI 开发、模型开发、征文大赛等标签
• 赛事卡片：两列布局，每个卡片展示赛事名称、简介、奖金池、时间线进度条

💡 第一版已经很不错了，但有些细节我们不满意——这就是 AI 协作的核心：你做决策，AI 执行。不满意就让 AI 改。

✏️ 第五步：迭代修改 — 不满意就让 AI 改（5 分钟）

这一步是最重要的。 很多新手会觉得 AI 生成的第一版就应该是完美的——不是的。

看看第一版的问题：左侧色块不好看，"进行中/已结束"标签位置不对，数据太少筛选用不了。

5.1 告诉 AtomCode 你要改什么

左侧的色块很难看，取消掉，让他们看起来更加整体，进行中/已结束放在卡片右上侧，并且每一个分类下多增加一些大赛数据，使筛选功能可用

按 Enter 发送。

5.2 看修改效果

AtomCode 完成了三项修改：

1. 去掉左侧色块 — 删除了 .card-banner 相关代码，卡片变成白底干净风格
2. 状态标签移到右上角 — 用 status-badge 徽章替代原来的侧边色条
3. 数据扩充到 22 张卡片 — 6 个分类各 3~4 张，筛选功能真正可用了

页面效果明显提升：

• 卡片更整洁，没有多余的色块干扰
• 状态标签在右上角一目了然（进行中绿色、已结束灰色、未开始橙色）
• 6 个分类的赛事数据充足，筛选功能完全可用

💡 迭代修改的技巧：

• 说清楚"改哪里"和"改成什么样"
• 一次提 2-3 个修改点，AtomCode 能一次处理多个修改
• 每次改完检查效果，再决定下一步改什么

📑 第六步：开发赛事详情页 — 五大功能一次生成（8 分钟）

6.1 一次性列出所有功能需求

这次我们一口气把赛事详情页的所有功能都告诉 AtomCode：

现在我们开始设计赛事卡片里面的信息，现在大赛详情页的信息是：赛事介绍、赛题发布、团队管理、作品投票、获奖名单这几类信息，分别有用户界面和管理员界面，用户界面主要是操作的，管理员界面可以模块化去复用功能，拼装上线至该大赛，请你设计这个产品功能，并方便我预览试用。

按 Enter 发送。

6.2 观察多功能的生成过程

这次 AtomCode 的工作量更大，它需要：

• 设计五个功能模块的用户界面
• 设计管理员界面
• 实现模块化复用的架构
• 确保预览可用

整个过程可能需要 3-5 分钟，耐心等待。

6.3 预览赛事详情页

赛事详情页包含五个 Tab 页：

顶部还有核心操作入口：立即报名、收藏赛事、分享。

🔧 第七步：微调赛题发布页 — 多赛道设计（3 分钟）

7.1 继续在 AtomCode 里输入

赛题发布页的默认设计是按赛题列表展示，但我们希望按赛道来组织，更加清晰：

赛题发布页的设计：可以设置多个赛道，以横条的形式来展示，比如：赛道一：模型适配赛道，赛道介绍、提交要求、模型列表、开始答题、提交作品；赛道二：模型优化，赛题介绍、提交要求、模型列表、开始答题、提交作品。

按 Enter 发送。

7.2 预览赛道效果

AtomCode 把赛题发布页改成了赛道式布局：

• 赛道一：模型适配 — 绿色"进行中"标签，包含赛道介绍、提交要求、开始答题、提交作品按钮
• 赛道二：模型调优 — 橙色"即将开始"标签，同样的操作流程
• 下方统一的提交要求模块：截止时间、提交物说明、技术报告要求

每个赛道都是独立的横条卡片，信息架构清晰，操作流程标准化。

💡 这就是 AtomCode 的另一个优势：你可以持续迭代，每次只改一个模块。不需要重做整个页面，只需要描述你想改的部分。

✅ 第八步：整体检查与微调（3 分钟）

8.1 整体走一遍

在浏览器里从头到尾浏览一遍你的大赛平台：

• 荣誉墙 — 卡片展示、贡献热力图、合作伙伴滚动 ✓
• 大赛首页 — 双列卡片、筛选功能、状态标签 ✓
• 赛事详情页 — 五大功能 Tab、报名入口 ✓
• 赛题发布 — 多赛道布局、操作流程 ✓

8.2 有小问题就微调

发现任何不满意的地方，直接在 AtomCode 里描述：

荣誉墙的卡片间距再大一点

赛事介绍部分加一段示例文字

投票功能加一个投票按钮的动画效果

8.3 确认最终效果

当你对整体效果满意时，我们的开发就完成了！

📊 第九步：回顾 CodingPlan — 算力消耗复盘（1 分钟）

在 AtomCode 里输入：

/codingplan

看看现在的 Token 消耗：

• 起始值：约 7%
• 开发完成后：约 34%
• 本次消耗：约 27%

5 小时后这个额度会自动重置，不用担心用完。

💡 这意味着：即使你反复修改、反复迭代，CodingPlan 的免费额度也完全够用。AtomCode 的设计理念就是让你放心用，不用为 Token 费用焦虑。

🧠 总结：你学到了什么

你刚才完成的事情

你全程没有写一行代码，但交付了一个完整的大赛平台。

AtomCode 的三个核心体验

1. 快 — 3 分钟出荣誉墙，30 分钟出完整产品
2. 免费 — CodingPlan 无限续杯，内置 DeepSeek V4 Flash / Qwen 3.6
3. 协作 — 你做决策，AI 执行；不满意就让 AI 改，直到满意

给新手的三个建议

1. 先说你要什么，别说怎么写代码 — AtomCode 比你更懂怎么写代码，你只需要描述需求
2. 不满意就直说 — "去掉色块""标签放右上角""增加数据"，越具体越好
3. 分步来 — 先做荣誉墙，再做首页，再做详情页，一步一步推进，不要一次塞太多需求

📎 附录：本课程所有指令汇总

方便你复制使用：

# ===== 环境安装 =====

# 安装 Node.js（macOS/Linux）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
nvm install 20

# 安装 Node.js（Windows PowerShell）
winget install OpenJS.NodeJS.LTS

# 验证 Node.js
node --version
npm --version

# 安装 AtomCode（macOS/Linux/鸿蒙）
curl -fsSL https://atomgit.com/atomgit_atomcode/atomcode/releases/download/v4.23.1/install.sh | sh

# 安装 AtomCode（Windows PowerShell）
irm https://atomgit.com/atomgit_atomcode/atomcode/releases/download/v4.23.1/install.ps1 | iex

# 验证 AtomCode
atomcode --version


# ===== 开始开发 =====

# 创建项目并启动
mkdir 大赛平台
cd 大赛平台
atomcode

# 在 AtomCode 中依次输入以下指令：

# 查看模型和用量
/codingplan

# 【荣誉墙】
帮我设计大赛的荣誉墙，展示每一位获奖用户，并为每一位获奖者设计用户卡片，卡片上展示用户的获奖里程碑、贡献历史

# 【合作伙伴板块】
在荣誉墙页面最下面，增加感谢合作伙伴，分别为：企业合作伙伴、高校合作伙伴、社区合作伙伴，并填充一些 Logo 和数据营造，左右随机滚动

# 【大赛首页】
帮我设计大赛首页，每个横屏放两个大赛卡片让他输出

# 【迭代修改】
左侧的色块很难看，取消掉，让他们看起来更加整体，进行中/已结束放在卡片右上侧，并且每一个分类下多增加一些大赛数据，使筛选功能可用

# 【赛事详情页】
现在我们开始设计赛事卡片里面的信息，现在大赛详情页的信息是：赛事介绍、赛题发布、团队管理、作品投票、获奖名单这几类信息，分别有用户界面和管理员界面，用户界面主要是操作的，管理员界面可以模块化去复用功能，拼装上线至该大赛，请你设计这个产品功能，并方便我预览试用。

# 【赛道设计微调】
赛题发布页的设计：可以设置多个赛道，以横条的形式来展示，比如：赛道一：模型适配赛道，赛道介绍、提交要求、模型列表、开始答题、提交作品；赛道二：模型优化，赛题介绍、提交要求、模型列表、开始答题、提交作品。

# 查看最终用量
/codingplan

❓ 常见问题

Q：安装 AtomCode 时报错怎么办？ A：确保你的网络能访问 atomgit.com。如果是公司网络有限制，试试手机热点。Windows 用户确保用的是 PowerShell 而不是 CMD。

Q：首次如何启动？ A：输入 /AtomCode ，扫码登录即可主动领取 /Codingplan 还可以查看当前配置和模型。

Q：CodingPlan Lite 的模型够用吗？ A：完全够用！DeepSeek V4 Flash 生成速度快，Qwen 3.6 能力强。日常开发和课程实操绰绰有余。GLM-5.1 等模型需要 Pro 套餐，当前尚未开放。

Q：AtomCode 运行中卡住了怎么办？ A：按 Ctrl+C 取消当前操作，然后重新输入指令。如果完全没反应，按两次 Ctrl+C 退出 AtomCode，重新运行 atomcode。

Q：生成的页面在浏览器里打不开？ A：告诉 AtomCode："用浏览器打开看看效果"，它会帮你启动预览，或者进去制定的路径文件夹中，找到对应的Html文件，打开即可。

Q：CodingPlan 的 Token 用完了怎么办？ A：等 5 小时自动重置，无限续杯，每月的额度完全够用。

Q：我能不能用其他模型？ A：可以！输入 /model 查看可用模型列表并切换。当前 CodingPlan Lite 提供 DeepSeek V4 Flash 和 Qwen 3.6 两个模型。

Q：为什么 GLM-5.1 显示红色不可用？ A：GLM-5.1 需要 Pro 以上套餐，目前 Pro 和 Max 套餐尚未开放。等开放后可以升级使用。

Q：管理员界面是什么？ A：赛事详情页区分了用户界面和管理员界面。用户界面是参赛者操作的（报名、提交作品、投票），管理员界面是赛事组织者用的（模块化配置赛事功能、拼装上线）。