qvacode-ltda/calco
GitHub: qvacode-ltda/calco
Calco 是一款基于 Claude Code 驱动的网站克隆工具，能将任意生产网站逆向重建为干净的静态 Astro + Tailwind CSS 代码库。
Stars: 0 | Forks: 0
English · Español
# Calco
**将任何生产环境的网站克隆为完全属于你的、干净的静态 Astro 代码库。**
*Calco* 在西班牙语中意为描摹、精确的复制品。只需在 Claude Code 中提供一个 URL，它就能
捕获网站真实的 HTML 和 CSS，将设计系统提取为可审计的产出物，
并逐个部分重建页面，将其构建为可通过一条命令部署到 Cloudflare 的 [Astro 7](https://astro.build) +
[Tailwind CSS v4](https://tailwindcss.com) 项目。
## 为什么创始人会使用它
一家严谨公司的生产环境网站并不是简单的模型。它是历经数月的设计、UX 和转化率研究后
留存下来的成果——每一个间距的决策、每一个标题的层级、每一个交互都已经过真实流量的
测试。Calco 将这些经过验证的基础转化为你的初始代码库：
- **经过验证的高速产出。** 数小时内完成像素级重建，而不是数周的重设计项目。
从已经奏效的模式开始，然后将其转化为你的专属设计。
- **真实的代码，而非粗暴抓取。** 干净的 `.astro` 组件，`@theme` 中的设计 token，
自托管的静态资源，用于动效的 vanilla JS + GSAP。默认零框架 runtime。
- **默认生产就绪。** 已内置 TypeScript strict、ESLint、Prettier、SEO 基础架构，
以及一条命令即可完成的 Cloudflare Workers 部署。
## 效果验证
亲自评判一下吧——我们将 Calco 指向了互联网上最难还原的主页之一：
| | |
| ------------ | ---------------------------------------------------------------------- |
| **原始网站** |
|
| **克隆版** | (从此仓库自动部署) |
| **源码** | [`examples/tailwindcss.com`](examples/tailwindcss.com) |
演示中的所有内容都是用真实代码重建的：网格轨道框架、实时的 bento demo
组件、内联 SVG 的赞助商 Logo 以及字体。没有截图，没有 iframes。
## 快速开始
你需要 **Node 20+**（推荐 22 版本）以及 **[Claude Code](https://claude.com/claude-code)**。
```
# 1. 获取代码 — 或者在 GitHub 上点击 "Use this template"
git clone https://github.com/qvacode-ltda/calco my-site && cd my-site
# 2. 安装所有内容：deps + 用于提取的 Playwright 浏览器
npm run setup
# 3. 打开 Claude Code 并克隆你的第一个网站
claude
/clone-website https://example.com
# 4. 发布它
npm run deploy # astro build && wrangler deploy
```
Calco 所需的 MCP server —— 用于实时代码检查的 **Playwright** 和用于获取最新
Astro/Tailwind 文档的 **context7** —— 都已在 [`.mcp.json`](.mcp.json) 中声明。当你打开文件夹时，
Claude Code 会自动加载它们；无需其他配置。
## 工作原理
Calco 是**源码优先**的：它基于目标网站的真实标记工作，而非基于截图或
记忆。`/clone-website` 技能编排了五个阶段：
1. **捕获** — `scripts/inspection/fetch-source.mjs` 将真实的 HTML + CSS 快照保存到磁盘中。
2. **提取** — `design-extractor` agent 将 token、字体、资产和行为
提炼为可审计的产出物（`DESIGN.md`、`BEHAVIORS.md` 以及各部分规格说明）。
3. **构建** — `astro-builder` agent 基于真实的标记并行展开（最多同时 3 个，失败自动重试），在 git worktree 中重建全局框架和各个部分。
4. **组装** — 合并 worktree，批量下载资源，接入字体和 SEO。
5. **QA** — `design-critic` agent 会在 1440 和 390 分辨率下对克隆版和原始版进行截图对比，并标记出
每一个保真度差距；`npm run verify` 会把关类型检查、lint 和构建。
| Agent | 角色 |
| ------------------ | ----------------------------------------------------------------- |
| `design-extractor` | 检查实时的网站 → 输出 token、资源、行为、规格说明 |
| `astro-builder` | 根据规格说明构建一个 `.astro` 组件 |
| `code-reviewer` | 审查 diff 的正确性、a11y、性能和保真度 |
| `design-critic` | 针对原版的视觉 QA diff 审查 + "AI slop"（AI 垃圾内容）审计 |
| `commit-crafter` | 按变更分组的 Conventional Commits 提交 |
提取过程在可能的情况下是确定性的：颜色转换、样式捕获和下载都在
Node/浏览器脚本（`scripts/inspection/*`）中运行，因此模型将 token 花在判断上，而不是
繁重的体力活上。请参阅 [`docs/research/INSPECTION_GUIDE.md`](docs/research/INSPECTION_GUIDE.md)。
## 命令
**在 Claude Code 中：** `/clone-website ` · `/extract-design ` · `/build-section `
· `/review` · `/qa ` · `/refine` · `/commit` · `/deploy`
**npm scripts：**
| Script | 作用 |
| --------------------------------- | --------------------------------------------- |
| `setup` | 安装依赖 + Playwright 浏览器，运行检查 |
| `dev` / `build` / `preview` | Astro dev / 构建 `dist/` / 预览 |
| `check` / `lint` / `format` | `astro check` / ESLint / Prettier |
| `verify` | check + lint + 构建 (发布前运行) |
| `deploy` / `cf:preview` | `wrangler deploy` / 本地 Workers 预览 |
| `assets:download ` | 批量下载克隆资产 (并发数 3) |
## 你将获得什么
```
src/
pages/ # routes (index.astro → /)
layouts/ # BaseLayout.astro (HTML shell + SEO)
components/ # section components + icons/ (extracted SVGs)
styles/global.css # @import "tailwindcss" + @theme tokens (the design contract)
scripts/
inspection/ # deterministic extraction: source capture, styles, colors
setup.mjs # one-shot environment setup
.claude/ # agents, skills, commands, workflows for the pipeline
.mcp.json # Playwright + context7, preconfigured
examples/
tailwindcss.com/ # the finished demo clone (auto-deploys to GitHub Pages)
```
## 设计原则
- **像素级完美复刻。** 目标网站*就是*设计系统；保真度胜过花哨的创意。
- **真实内容，真实资产。** 真实的文本、图像、视频和 SVG —— 拒绝占位符。
- **拒绝 AI 垃圾代码。** 品味准则会守护每一个模棱两可的决策：没有平庸的字体，没有
莫名其妙的渐变或玻璃拟态，只有真实的层级结构。
- **有目的地增强。** 想要超越 1:1 的复刻？`/refine` 会在克隆的基础上应用品味调节选项，而不是盲目发挥。
## 负责任地使用
Calco 是一款用于研究和加速原型设计的工具，而不是剽窃机器。对他人网站的克隆只是
**你自身产品的一个起点**：请尊重商标、版权和品牌资产；在公开发布任何内容之前，
请务必将内容、图像和品牌替换为你自己的。内置的 tailwindcss.com 演示仅用于证明保真度，
已被标记为 `noindex`，且未获得 Tailwind Labs 的附属认可或背书。
## License
[MIT](LICENSE) © 2026 David E. Hernández
由 QVACODE 打造 — 面向创始人和 SaaS 的增长工程。
qvacode.com.br ·
LinkedIn ·
X
标签：Astro, Claude Code, MITM代理, Syscall, Tailwind CSS, Web开发, 云资产清单, 代码生成, 前端工程, 渗透测试工具, 特征检测, 程序员工具, 自定义脚本, 逆向工程