# 策展 · X (Twitter) 🔥🔥 > 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt) > 作者：Zach Lloyd (@zachlloydtweets) · 平台：X (Twitter) · 日期：2026-06-24 > 原始來源：https://x.com/zachlloydtweets/status/2069428152338665622 ## 中文摘要 # 建立 skill 優化迴圈 這篇文章將展示如何建立一個具備自動化回饋的迴圈，讓 Agent 可以執行該迴圈來優化自身的 Skills。我們將使用一個結合電腦操作（computer use）的自動化評分系統，來評估 Skill 的執行成效，並透過迭代方式不斷改進該 Skill。 只要 Skill 擁有明確的驗證標準，你就可以運用這項技術來建立改進迴圈。 我將以一個將網站從 WYSIWYG 平台遷移至自架程式碼的 Skill 為例（我們最近剛為自家的行銷網站執行過此操作）。我們將這個 Skill 命名為 `/replatform-site`（原始碼在此）。這是一個相當實用的 Skill，但這篇文章的重點不在於這個特定案例，而是要展示如何透過循環流程來評估並改進 Skills 的「後設流程」（meta-process）。 ![這是一份名為「replatform-site」的技術文件，說明如何將託管網站遷移至靜態程式碼的自動化技能。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/f1479cf48b952f8c.jpg)
展開畫面重點
文件標題：~/Projects/replatformer/.agents/skills/replatform-site/SKILL.md name: replatform-site description: Re-platform a website off a hosted provider (Squarespace, Webflow, Wix, WordPress, Shopify, etc.) into static, source-controlled code in a modern JavaScript framework that deploys to a static host like Vercel, Netlify, or Cloudflare Pages. Use when the user wants to migrate a hosted site to static code, move a site off Squarespace/Webflow/Wix/WordPress/Shopify, or asks to "replatform" a website. replatform-site Re-platform a hosted website into static, deployable code — one shot, end to end. Overview Given a source site URL and (optionally) a destination framework + static host, this skill produces a deploy-ready static site project in the current directory. It gathers content from the source provider (preferring that provider's MCP/API when one is available, falling back to scraping the live site), scaffolds a project in a modern JS framework, converts pages/assets/navigation, re-points dynamic features to static-friendly equivalents, generates the host's deploy config, and verifies the build locally. The skill is designed to run one shot: after the user supplies the source site and (optionally) the target platform, it proceeds end to end using the defaults below and does not stop to ask further questions. Only halt for user input if a decision is genuinely blocking and has no sensible default (rare).
假設我為了好玩，開了一個名為「Talking Slop」的 Podcast，與其他喜歡討論 AI 趨勢的人交流。你可以看到我已經在 talkingslop.ai 架設了這個網站，目前它是託管在一個 WYSIWYG 無程式碼平台上。我覺得如果能將其轉為託管在 Vercel 上的程式碼，網站運作會更順暢，所以我打算對它執行 `/replatform-site`。 在初次執行時，它完成度相當高，但因為下拉選單的圖示遺失，導致了一個明顯的視覺缺陷。 ![這是一個名為「Talking Slop」的網站首頁截圖，展示了播客節目的視覺設計與導覽介面。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/e1aef878a412e763.jpg)
展開畫面重點
該畫面為一個網站的頂部導覽列與首頁內容。 導覽列文字包含：Talking Slop（網站名稱）、Episodes（集數）、About（關於）、Blog（部落格）、Support（支援）以及一個「Subscribe」（訂閱）按鈕。 頁面中央標題文字為：「NEW EPISODE OUT NOW」（最新一集現已推出）以及大字標題「Synergizing Next-Gen Paradigm」。 畫面左側展示了一張錄音室的照片，包含鼓組、吉他與麥克風；右側則展示了一張多人圍繞圓桌開會的照片。 畫面中有兩個黃色框線標記，分別框選了「Episodes」與「Support」旁邊的圖示。
你可以比較 talkingslop.ai 與產出的 talking-slop.vercel.app 之間的差異。 這就是迴圈派上用場的地方。由於這是一個可驗證的任務，你可以建立迴圈來自動改善它。事實上，你可以實作兩種迴圈： 1. 確保這次特定遷移任務成功的迴圈。 2. 讓遷移 Skill 本身在下次執行時表現更好的迴圈。 我這裡將重點放在第二種迴圈，也就是「外部迴圈」。關於內部與外部迴圈的區別，請參閱我關於自我改進迴圈的文章。 我透過另一個 Skill 建立了這個迴圈，採用了建立一個「觀察者（observer）」Skill（原始碼）的模式，用來評分「內部」Skill 的品質。這個觀察者 Skill 會輸入 N 個要遷移的網站，呼叫 `/replatform-site` 進行遷移，接著建置這些網站，並利用電腦操作與瀏覽器操作來檢查它們在行為與視覺上的差異。它還會追蹤遷移過程消耗的 token 數量，並在維持品質的前提下嘗試優化成本。 它會使用最先進的（SOTA）模型來綜合分析結果，找出失敗模式與改進機會，然後建立一個 diff 來更新內部 Skill。由於 Skills 本質上就是檔案，你可以使用任何像 Warp 這樣的程式開發 Agent 來執行此分析，並提交 PR 來更新該 Skill。 ![這是一份關於名為「replatforming-observer」的技術代理程式技能定義文件。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/aa1e5bf88b722471.jpg)
展開畫面重點
該文件內容為 `SKILL.md`，定義了 `replatforming-observer` 的功能與運作方式： - **描述**：該技能用於針對一個或多個公開網站執行 `replatform-site` 技能，啟動生成的應用程式，並透過瀏覽器與電腦視覺技術比較原始網站與遷移後的網站。它能測量品質、延遲、Token 使用量及成本，診斷遷移失敗模式，並透過實證迭代改進 `replatform-site`。 - **相容性**：需要 Shell 存取權限以及具備瀏覽器/電腦操作能力的子代理程式進行視覺比較。 - **輸入與預設值**： - Sites：一個或多個公開來源 URL（必要）。 - Inner skill：預設為 `../replatform-site/SKILL.md`。 - Framework/host：傳遞給內部技能。 - Viewports：預設為桌機 1440x900 與手機 390x844。 - Maximum DIF iterations：預設為 3。 - Workspace：預設為 `./.replatforming-observer/runs/<UTC timestamp>/`。 - **注意事項**：不可部署生成的網站，未經明確授權不得測試需要驗證或私有的網站。 - **運作原則**：目標是評估遷移結果而非重新設計，視覺相似度是主要的品質指標。
遷移「觀察者」Skill 觀察者 Skill 使用結構化資料結果，以便在建議內部 Skill 的修正方案時能盡可能聰明。雖然它相當複雜，但基本概念很簡單：執行內部 Skill、記錄失敗原因、製作改進 diff、重複上述步驟。 為了執行這個迴圈，你會需要一個支援多個 Agent 編排與電腦操作的平台。我使用的是內建於 Warp 中的 Oz，它支援跨多個 SOTA 模型的電腦操作，不過市面上也有很多其他選擇（如果你想在 Oz 中嘗試，我為此製作了一個獨立的 Skill，稱為 `/oz-orchestrated-replatforming`）。 以下是它在 talkingslop.ai 的早期執行中建立的 diff 版本。在這裡，它發現了下拉選單的問題並建議了改進方案： ![這是一份關於網站遷移（replatforming）流程的技術文件片段，詳細說明了從現有網站提取資料、映射架構到建立新專案的步驟。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/3c5ca130cd34a32f.jpg)
展開畫面重點
該文件為 `.agents/skills/replatform-site/SKILL.md`，內容包含以下技術指導步驟： 37 1. **Provider MCP/API**: if the provider has an MCP server or a documented API the age 38 2. **Live scrape fallback**: if no MCP/API is available or credentials aren't configur 40 Capture a manifest of: pages (URL -> title -> route path), assets (URL -> local path), na 41 Also capture provider-runtime presentation behavior that affects visible parity: gener 43 ### 3. Inventory and map the site 47 - Page tree and URL -> route mapping (e.g. `/about` -> `app/about/page.tsx` for Next.js 48 - Asset inventory with local filenames. 49 - Navigation (header, footer, menus). 50 - SEO metadata (titles, descriptions, Open Graph, sitemap, robots). 51 - Dynamic features to re-point (forms, search, ecommerce cart, comments). 52 - Provider-runtime behavior to reproduce (responsive menus, dropdowns, generated grid 54 ### 4. Scaffold the destination project 65 - Create one route/page per source page, preserving URL structure. 66 - Localize all assets into the repo (copy downloaded files under `public/` or the fran 67 - Rebuild navigation from the inventory. 68 - Preserve SEO metadata, sitemap, and robots. 69 - Translate provider-generated layout rules that materially affect parity into explici 文件重點在於定義網站遷移的標準化流程，從確認資料來源（API 或爬蟲）、建立網站清單（Inventory）、映射路由與資源，到最終在目標框架（如 Next.js）中重建專案結構與 SEO 設定。
如果你想在龐大的語料庫上調整此 Skill 以供更廣泛使用，你可以擴大輸入網站的數量，並持續迭代，直到觀察者產生的 diff 變得不再那麼有意義為止。觀察者本身內建了退出標準，當達到該標準時就會停止迴圈，這樣你就不用為了優化而無止盡地消耗 token。 ![顯示系統執行流程與狀態更新的介面截圖。](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/e0d4ce594b9e95e3.jpg)
展開畫面重點
畫面中包含兩項系統執行紀錄： 1. 第一項顯示「Orchestrator >」，下方文字為「to observe-talkingslop-ai • Validate centralized replatform-site candidate」。 2. 第二項顯示「observe-talkingslop-ai >」，下方文字為「Status: corrected site-result JSON delivered in d5e55aee」。
這套系統並非完美——透過調整 Skills 能達到的改進程度有限，且容易陷入局部最佳解（local maxima）——但作為確保 Skills 表現良好的一種簡單方法，它相當實用。 如果你想試試看，所有相關的 Skills 都已開源在此：https://github.com/warpdotdev-demos/replatformer 敬請期待我的第一集 Talking Slop 😉 ## 標籤 Skills, Agent, 自動化, 開源專案, 教學資源, Warp