X (Twitter)

連接 Claude Code、Codex、Gemini CLI 等 MCP 用戶端，用 AI 建立和編輯截圖專案，透過瀏覽器檢查效果，在網站編輯器匯出。

連接 AI 工具

目前部署啟用 MCP 後，可在相容的 AI 工具中加入以下服務位址：

https://appscreenshots.net/api/mcp

選擇 HTTP / Streamable HTTP 和 OAuth，在瀏覽器中登入 AppScreenshots，選擇允許存取的專案和素材，並決定是否允許建立新專案。不需要提供資料庫權限或 API 金鑰。

想先看總覽和範例提示詞，請前往 MCP 落地頁。

連接你的用戶端

下面的命令會把服務位址註冊到各個用戶端。連接後，用戶端彈出登入視窗時完成瀏覽器登入即可。

claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

然後在 Claude Code 中執行 /mcp 並授權。如需專案級連接，改用合併 .mcp.json 的方式，不要與使用者級註冊同時設定，除非你有意覆蓋作用域。

codex mcp add appscreenshots --url https://appscreenshots.net/api/mcp
codex mcp login appscreenshots

也可以在用戶端的 config.toml 中合併 [mcp_servers.appscreenshots] 段，寫入 url = "..."。

gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcp

在 Gemini CLI 內執行 /mcp auth appscreenshots。設定檔寫法使用 httpUrl 表示 Streamable HTTP，並加上 "oauth": {"enabled": true}。

開啟 /mcp-config，新增以服務位址為端點的 HTTP 伺服器，然後執行 /mcp-config login appscreenshots。設定檔位於 ~/.kimi-code/mcp.json：

{
  "mcpServers": {
    "appscreenshots": {
      "url": "https://appscreenshots.net/api/mcp"
    }
  }
}

新增設定後重新啟動工作階段。舊版 kimi-cli 發行版則使用 kimi mcp add --transport http --auth oauth。

把伺服器合併進 ~/.zcode/cli/config.json 的 mcp.servers，或在 Settings → MCP 中新增名為 appscreenshots 的 HTTP 服務：

{
  "mcp": {
    "servers": {
      "appscreenshots": {
        "type": "http",
        "url": "https://appscreenshots.net/api/mcp",
        "oauth": {
          "type": "authorization_code",
          "scope": "projects:read projects:write assets:read offline_access"
        }
      }
    }
  }
}

重新啟動工作階段，用戶端彈出時完成 OAuth 瀏覽器登入。請盡快完成登入：桌面用戶端約 180 秒後會取消等待中的授權。

使用你的帳戶或工作區可用的自訂 MCP 連接入口，選擇 OAuth 並填入上面的服務位址。可用性取決於帳號和工作區設定——公開的 GitHub 儲存庫不會自動產生 ChatGPT 目錄條目。

用戶端接入說明基於官方文件和一次完整的協定級端對端測試（OAuth、專案建立、編輯、網站預覽、匯出）。單一用戶端的逐一認證仍在進行中，目前狀態見連接套件的驗證矩陣。

連接套件

公開儲存庫 appscreenshots-mcp 提供上述所有用戶端的現成設定檔、一個教授截圖工作流的可選代理 Skill，以及一條從終端機檢查服務的 doctor 命令：

git clone https://github.com/horace68/appscreenshots-mcp.git
node bin/appscreenshots.mjs config claude    # 印出用戶端設定片段
node bin/appscreenshots.mjs install-skill claude
node bin/appscreenshots.mjs doctor

這個輔助工具只負責印出設定和安裝 Skill，它不是本地 stdio 伺服器——請使用用戶端原生的遠端連接功能。

工具

以下九個工具透過 Streamable HTTP 提供。用戶端可能會給名稱加前綴。輸入結構描述和帳號權限以託管伺服器為準。

工具	類型	用途
`get_capabilities`	讀取	權益、設計邊界（100–5000 px）、裝置、元素類型、`maxFrames`（20）、`maxElementsPerFrame`（100）、預覽/匯出模式
`search_templates`	讀取	搜尋公開範本中繼資料（`query`、`offset`）
`get_template`	讀取	按 id 讀取你有權使用的範本
`list_projects`	讀取	列出已授權專案，每頁 25 個
`get_project`	讀取	讀取目前版本與可編輯設計，含 `editorUrl`
`get_project_preview`	讀取	編輯器連結、版本、幀與瀏覽器審查說明——是文字而非圖片
`list_assets`	讀取	列出共用素材與已授權專案內的素材，每頁 50 個
`create_project`	寫入	從範本或空白畫布建立（`name`、可選 `templateId`、`width`、`height`、`idempotencyKey`）
`update_project`	寫入	每次呼叫套用 1–100 個結構化操作，帶 `expectedRevision` 與 `idempotencyKey`

編輯操作

update_project 接受以下可判別的操作清單：

set_name —— 重新命名專案
add_frame / remove_frame / reorder_frames —— 管理幀
upsert_element —— 插入或取代元素；要求完整幾何資訊，同類型元素省略的欄位會被保留
patch_element —— 按元素 id 做部分修改；不允許改變元素類型
remove_element —— 刪除元素
set_background —— 設定單幀背景；共用背景會按幀固化
set_locales —— 設定 1–20 個語言和預設語言
set_canvas —— 畫布尺寸（100–5000）與模式（separate 或 continuous）

元素攜帶排版、裝置樣機欄位、圖片 assetId 參照、形狀、圖示、rotation 與 stackOrder。圖片只能透過已授權的 assetId 參照——不能用 URL 或本機路徑；既有的圖片參照由伺服器端保留，不要回傳。

每次邏輯寫入都應使用新的冪等鍵；僅在完全相同的重試中重用它。版本衝突後，先讀取最新版本再繼續。絕不要把 SQL、HTML 或指令碼當作編輯指令。

錯誤

錯誤以 JSON {code, message} 並帶 isError: true 傳回：

錯誤碼	含義
`REVISION_CONFLICT`	專案在 `expectedRevision` 之後被修改——重新讀取後重試
`ASSET_NOT_AUTHORIZED`	素材未在授權頁勾選
`FRAME_NOT_FOUND` / `ELEMENT_NOT_FOUND`	參照的幀或元素不存在
`ELEMENT_TYPE_CHANGE_NOT_ALLOWED`	`patch_element` 不能改變元素類型
`INVALID_FRAME_ORDER` / `INVALID_DEFAULT_LOCALE`	幀順序或預設語言不合法
`DUPLICATE_ID`	id 與現有內容衝突
`PROJECT_SIZE_LIMIT`	超出幀、元素或負載限制
`RATE_LIMITED`	呼叫過多——HTTP 429 並附 `Retry-After`

授權與限制

伺服器使用 OAuth 2.1 + PKCE 瀏覽器登入：

作用域：projects:read、projects:write（僅在你允許建立或編輯時）、assets:read 與 offline_access。
存取權杖有效期為一小時，更新權杖有效期為 30 天。
存取權杖依賴有效的授權記錄：撤銷連線後，現有權杖立即失效。
頻率限制：免費方案每分鐘 60 次 MCP 呼叫，付費方案每分鐘 120 次。超限傳回 HTTP 429，Retry-After: 60。
請求主體上限 2 MB；專案上限 20 幀、每幀 100 個元素。

套餐權益照常生效：專案數量、付費範本、自訂字型和批次匯出限制不變，也沒有託管 AI 費用——設計與文案由所連接的 AI 提供。

準備素材並開始製作

先在網站編輯器上傳原始截圖，再授權該專案或在授權頁勾選單獨的素材。MCP 不提供二進位上傳工具；聊天裡的附件不會自動變成服務可讀取的檔案。

可以這樣提出需求：

使用我授權的素材，從可用範本建立一組英文 App Store 截圖。標題簡短、版面清晰。使用可用的瀏覽器工具開啟編輯器，截圖檢查並修正文案和版面問題，再給我專案連結，由我在網站匯出。

設計和文案由 AI 工具產生，MCP 儲存可編輯專案。get_project_preview 傳回專案連結和審查指引，不是圖片位元組。帶瀏覽器工具的 AI 可以開啟編輯器、截圖檢查、透過 MCP 修改並安全地重新載入複查。瀏覽器登入與 MCP 授權相互獨立；重新載入編輯器前應儲存或處理未儲存的修改。你在網站編輯器完成預覽和匯出。

管理授權

在 設定 → 已連接的 AI 工具 中調整專案、素材範圍或撤銷連線。AI 工具不能存取未授權的專案。網站與 AI 同時修改專案時，請先讀取最新版本再儲存，避免互相覆蓋。

瀏覽器檢查流程不需要 Browserless 或背景渲染佇列。MCP 只提供專案工具與瀏覽器審查指引，不提供雲端渲染。沒有瀏覽器/影像工具時，AI 應傳回專案連結並說明視覺檢查尚未完成，而不是聲稱已驗證。

故障排除

現象	處理
`invalid_redirect_uri: web clients require https redirect URIs`	使用環回位址（`http://127.0.0.1:<連接埠>/callback` 或 `http://localhost:<連接埠>/callback`），讓環回註冊預設按原生用戶端處理
401 並帶 `WWW-Authenticate: Bearer resource_metadata=…`	這是未認證呼叫的正常探索回應——在用戶端完成 OAuth 流程即可
授權頻繁過期	從用戶端重新連接；授權被撤銷或過期後更新權杖即失效
用戶端取消瀏覽器登入	儘快完成登入（部分用戶端約 180 秒後取消），然後重新發起連接
429 `RATE_LIMITED`	等待 `Retry-After`（60 秒）後重試；升級付費方案可提升至每分鐘 120 次

用戶端專屬說明和最新驗證矩陣見連接套件故障排除指南。