如果您的專案驗證器能夠真正看到您的UI？

Cairn — 將「我想成為AI工程師」轉化為認證作品集

我所建構的

每年，數百萬人輸入類似「我想成為AI工程師」的內容 嘗試搜尋 Google，接著花兩週時間瀏覽無數分頁。沒有明確起點的路線圖。沒有結構的 YouTube 編輯清單。完成率僅有 13% 的免費課程。關閉分頁後就消失的 ChatGPT 路線圖.

我創建了 Cairn，因為這個差距確實存在，而比編程營隊便宜 100 倍的替代方案確實還不存在。

Cairn 是一個個人化的人工智能學習和職業發展引擎。你用簡單的英文告訴它你的目標 — "我希望六個月內找到一個人工智能工程師的職位，我懂 Python 基礎並且建過一個 Flask 應用程式" — 它為您建立一個結構化的12週路徑：階段、每週的里程碑與實際交付成果、經過策選的免費資源（根據真實學習成果評分），以及專案來進行建構。這不是一份靜態的文件。一個隨著您的進展而適應的活系統。

但我最自豪的部分是當您交付某個產品時發生的情況。

您提交您的GitHub專案。Cairn下載程式碼，運行它通過一三階段評估流程 — 結構檢查、由大語言模型驅動的程式碼審查，以及一個多模態視覺審查，其中Gemma 4 12B實際上會查看您正在執行的應用程式的螢幕擷取圖像 — 如果您通過，它會發出一個加密簽署的憑證，並放置在您的公開作品集上cairn.dev/u/your-handle。那就是您放在履歷上的URL。不是「完成課程X」。經過驗證的工作。

每個學習產品都會犯的三個錯誤：

問題	Cairn 如何解決它
路徑癱瘓 — "我到底該學什麼？"	根據您的實際起點生成的個人化 12 個月路徑，而不是通用的模板
缺乏責任感 — 您放棄自己的目標	每日提醒、連續記錄、當生活發生時的自適應重新規劃
沒有工作證明 — 教程克隆不會獲得面試	使用HMAC簽名憑證的公共作品集進行多階段項目驗證

這款產品最初是為印度工程學生和職業轉換者設計的 — 一個有1千萬以上活躍學習者的市場，他們因（₹3萬+）的費用而被創業營排除在外，但從免費資源中獲得零結構。但同樣的問題在全球也存在，其架構反映了這一點。

示範

🎬5分鐘快速指南

🌐應用程式 (https://cairnapp.netlify.app/)

👤範例公開作品集 — 不需註冊 https://cairnapp.netlify.app/example

範例作品集是查看經過驗證的 Cairn 個人檔案長什麼樣子的最快方式——那是用戶在 12 個月後放在他們履歷上的東西.

代碼

🔗 GitHub 存儲庫 (https://github.com/Soham-0047/cairn)

該存儲庫是一個全栈 TypeScript 单一仓库:

frontend/    → Next.js 15 (App Router, SSR, Tailwind)
backend/     → Express + TypeScript + MongoDB + Mongoose
              └── llm/   → provider-agnostic router with fallback chains

所有品牌顯示元素 — 名稱、標誌、顏色、主題文案、行動呼籲文字、LLM 供應鏈 — 都可在執行時通過/admin進行編輯，而無需觸及程式碼。這不是巧合；這正是讓代碼庫在下一屆黑客大賽中無需重寫即可重用的原因.

我如何使用 Gemma 4

這是我想要仔細解釋的部分，因為我認為有趣之處不在於我使用的Gemma 4 模型 — 而在於我為三個不同工作使用三個不同模型的理由.

「只要使用最大的模型」的問題

路徑生成需要將50+經過策展的資源、類似過往學習者完成的路徑以及使用者的完整個人資料載入到單一提示中 — 然後對所有這些進行推理以產生一個連貫的12週計劃。這需要一個大型模型和一個長的上下文窗口.

從文本方塊中解析目標陳述 — 提取結構化欄位如current_skills、target_roletimeline_weeks — 是一個小型的延遲敏感的萃取任務。使用 31B 模型來處理這個任務會是浪費且慢的。

檢查某人正在運行的應用程式的螢幕擷取畫面，以確認用戶介面是否符合程式碼聲稱的內容？這根本不是一個文字問題。

三種不同的工作形態。三種不同的模型。

模型 1 — Gemma 4 4B: 在首次登錄時解析目標

當使用者以平白英文輸入其目標時，該文本會傳送至Gemma 4 4B進行結構化提取。

為何選擇 4B？它在 Google AI Studio 的免費方案上運行約 600 毫秒。這個呼叫在用戶登陸過程中會多次發生，因為用戶會不斷調整他們的輸入。這裡使用 27B 模型會感覺緩慢，並且在用戶甚至開始他們的路徑之前就會超出速率限制。任務是有界的：從一個短段落中提取幾個字段。4B 能夠乾淨、快速且免費地處理這個任務.

// backend/src/llm/router.ts
{
  task: "parse_goal",
  primary: "gemma-4-4b",  // fast + cheap; perfect for extraction
  fallback: ["gemini-flash"]
}

模型 2 — Gemma 4 27B: 路徑生成與程式碼審查

重任由 Gemma 4 27B 負責，透過 Google AI Studio 和 OpenRouter 的免費 Gemma 4 端點。

路徑生成載入用戶的結構化個人資料，這是一組經過策展的資源語料庫的子集（約50項與用戶目標角色相匹配），以及來自類似過往學習者的總結結果數據——所有這些都在單一提示中，且完全在128K的上下文窗口內。這個模型必須推理主題之間的依賴關係、實際的每週小時數，以及哪些類型的專案實際上能夠展現目標角色所需的技能。這不是一個小型模型能夠完成的任務。

同一模型處理代碼審查於專案評估第二階段：閱讀多檔案儲存庫快照，並回應代碼是否如README聲稱的那樣運作，是否展現了使用者聲稱練習的技能，以及具體在哪裡有所不足。多檔案代碼推理與長文本上下文，正是27B展現其價值的所在。

SYSTEM: You are an expert career coach generating a personalized learning path.
You have access to {N} similar-profile learners' actual completed paths and outcomes.
Prefer concrete projects over passive content...

[resource corpus subset]
[similar past learner paths with outcomes]
[user's profile + target role + weekly hours]

OUTPUT: JSON path schema only, no preamble.

Model 3 — Gemma 4 12B Vision: 最亮眼的特色

這是我最期待的功能.

當使用者提交專案時，他們可以上傳最多4張他們運行應用程式的截圖，並搭配GitHub連結.Gemma 4 12B — 具備視覺功能的變體 — 會檢視實際的用戶介面，並將其與代碼和 README 的聲稱進行交叉參照.

這能捕捉到純粹代碼審查所錯過的兩種失敗模式.

"看起來很精緻但代碼很混亂" — 一個漂亮的模板包圍著別人的邏輯
"代碼在技術上沒問題但用戶介面是預留位置" — 標題聲稱應用程式可正常運作；截圖顯示為 404

我所知沒有其他評估方法會這樣做。不僅僅是「測試是否通過。」而是「向我展示你實際發布的內容。」

// eval.service.ts — Stage 3
const visualReview = await llmRouter.call({
  task: "visual_eval",
  model: "gemma-4-12b-vision",
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: visualEvalPrompt(repo, readme) },
        ...screenshots.map(s => ({ type: "image_url", image_url: s }))
      ]
    }
  ]
});

評估頁面會顯示用戶確切是哪個供應商和型號執行每個階段。這種透明度是故意的 — 整個模型選擇的故事對任何提交專案的人都可見，而不仅仅僅僅隱藏在文件中.

完整的流程

User submits GitHub repo + screenshots
         │
         ▼
Stage 1: Structural (deterministic)
  • README present?
  • Commit count + history
  • Tests exist?
  • File tree size reasonable?
         │
         ▼
Stage 2: Code review  →  Gemma 4 27B
  • Does code match README claims?
  • Originality vs known tutorial repos
  • Domain-specific checks (ML training loops? Backend auth?)
         │
         ▼
Stage 3: Visual review  →  Gemma 4 12B (vision)
  • Does the UI match what the code claims?
  • Polish level: shipped / demo / prototype?
  • Per-screenshot findings
         │
         ▼
Stage 4: Synthesis
  • Weighted score (pass threshold: ≥0.65 + originality ≥0.55)
  • If passing: HMAC-signed credential → public portfolio
  • If failing: specific, actionable feedback

供應商路由 + 應用備援

LLM 路由器是一個約 300 行程的模組，它在 Redis 中追蹤每個提供者的速率限制剩餘空間，當免費層級用盡時會自動切換回降級模式.

Google AI Studio  →  OpenRouter (Gemma 4 free)  →  Gemini 2.5 Pro  →  DeepSeek V3

沒有任何用戶可見的失敗。沒有意外帳單 — 每條路徑都有每月費用上限；如果每個免費層級都已用盡，路由器會拒絕呼叫並顯示一則優雅的降級消息，而不是無控制地觸發付費終端點。

整個路由表可以在運行時透過 /admin/providers 進行編輯。用其他型號系列替換 Gemma 4 是一項 UI 變更，而不是代碼變更。我是故意這樣設計的。

為何這是一份 Gemma 4 提交，而不是一份「帶有 Gemma 品牌標識的 Gemini 提交」

所有三種 Gemma 變體都運行在 Google AI Studio 的免費套餐上，作為主要供應商。27B 任務的備用選項是 OpenRouter 的免費版本google/gemma-4-27b 端點 — 並非 Gemini。視覺評估沒有非 Gemma 的備用方案；如果 Gemma 4 12B 不可用，Stage 3 會被跳過，評估會被標記為「僅代碼審查」。多模態故事僅與 Gemma 4 一起工作.

技術堆疊

前端： Next.js 15 (App Router, SSR), React 18, TypeScript, Tailwind CSS, NextAuth
後端： Node.js 20, Express, TypeScript, Mongoose, MongoDB Atlas
LLM 路由： 自訂提供者無關的路由器 — Google AI Studio, OpenRouter, Groq, Cerebras, Together AI
儲存： MongoDB Atlas (路徑/進度), Cloudflare R2 (螢幕截圖)
驗證： GitHub OAuth 透過 NextAuth
支付： Razorpay (印度UPI + 卡片), Stripe (全球)

獨力開發，公開發布，為那些試圖獲得第一份AI工程職位且無法負擔支付30萬盧比給bootcamp的人們。如果你符合這個描述——或者你認識符合這個描述的人——Cairn就是為了這個目的而建立的。

推薦訂閱源

DEV Community