Atlas for Mac 发文后被催着要下载链接，两个小时，我直接用 Claude Code 做了个 LandingPage上线

大家问得最多的一件事其实很直接：

DMG 安装包下载地址在哪里？

读者私信要安装包

我原想晚一点再coding这个landingpage的，但实在是受不了这个手动发包的烦琐。

所以今天我做了一件很务实的事：

用 AI coding，快速给 Atlas for Mac 做了一个官网首页。

Atlas for Mac landing page 首页

两个小时，AI Coding搞定

这个页面的目标其实很简单，不是做一个复杂官网，而是先把最关键的三件事补上：

很多时候，用户不是不想体验产品，而是第一步没有入口。

我这次主要用的是 Claude Code来做这个需求。

我自己的感受很直接：

AI coding 现在特别适合这种上下文目标明确、结构清楚、又需要快速上线的功能。

如果是以前，这种页面虽然不复杂，但你还是要自己一点点搭结构、调样式、写文案、改布局。不难，但很碎，也很容易拖。

而这次因为git代码仓库已有的信息很充分，用 AI 来配合做，基本一次就成了，几乎没有什么改动。

先把 landing page 的核心需求直接告诉 Claude Code

注意：

我这次并没有让 AI “随便生成一个页面”，而是先把需求直接先写成一个目标清晰明确的产品PRD，讲得很明确，比如：

做一个 Atlas for Mac 的 landing page

它先帮你把第一版页面快速搭出来，后面你再继续微调结构、文案和视觉细节。

/model 开启Opus 1M Context

另外opus4.6 现在1M token上下文版本完全放开了，而且定价保持与200k一致，不再额外收取长上下文溢价（窗口显示的是旧的定价可以忽略，都是25）。

在/model开启选择。

plan mode

读取完信息，plan mode生成了计划，plan mode可以反复调整确认开发疑问和细节。

确认没问题，就可以进入开发模式，这时候可以切屏去干别的事了。

注意：千万不能prd直接扔给模型就开始开发，这种得到的vibe结果，返工率很高，浪费时间浪费钱。

一次性完成开发

吃个早餐的功夫，切屏回来，活干完了，localhost已经可以访问页面。

但是还有问题就是网站还不能给公网的用户访问。

这种静态页面很轻量，自己搞个服务器有点杀鸡用牛刀，GitHub Pages是很好的方案。

GitHub Pages 是一个免费的静态网站托管服务，允许用户直接从 GitHub 仓库构建和发布网站。特别适合个人和项目网页的创建。

这事还简单，交给Claude Code联调，它调用chrome-mcp-server的视觉能力，来操作chrome浏览器，联调git workflow和git action，确保build和deploy成功。

你连手动测试都不用。

github pages完成部署

最后一步，我的域名是托管在cloudflare的，配置下子域名atlas.atomstorm.ai的DNS即可全网访问了。

从零搭建了完整的 Astro 静态站点（Apps/LandingSite/），代码也已经上传开源仓库，你可以直观感受下工作量，包括：

项目脚手架：package.json、astro.config.mjs、tsconfig.json
CSS 设计系统：tokens.css（从 AtlasBrand.swift 精确转译的 CSS自定义属性）、reset.css、global.css、utilities.css
双语 i18n：zh.json + en.json（12 个段落组、6 条 FAQ、完整中英文案）+ 类型安全的utils.ts
Release 数据层：构建时 GitHub API 拉取 → release-manifest.json；静态fallback；release.ts 加载器
15 个 Astro 组件：
NavBar（固定导航 + 语言切换 + 移动端汉堡菜单）
Hero（标题 + CTA + channel badge + 产品截图）
TrustStrip（5 个信任标签）
ProblemOutcome（3 张 pain→solution 卡片）
FeatureGrid（6 张功能卡：概览、智能清理、应用管理、历史、恢复、权限）
HowItWorks（4 步工作流可视化）
DeveloperSection（开发者清理场景）
SafetySection（权限、信任、Gatekeeper 指引）
ScreenshotGallery（5 张产品截图画廊）
OpenSourceSection（GitHub、License、Attribution、Changelog）
FaqSection（6 条 FAQ）• FooterSection（下载 CTA + 导航链接 + 版权）
CtaButton / ChannelBadge / FeatureCard（可复用基础组件）
自托管字体：Space Grotesk（展示）、Instrument Sans（正文）、IBM PlexMono（等宽）共 6 个 woff2 文件
OG 社交图片：中英文各一张 1200×630px，暗色主题 + 品牌截图
CI/CD 管线：.github/workflows/landing-page.yml，push 自动构建 + 部署到 GitHubPages