MCP เซิร์ฟเวอร์สกรีนช็อตสำหรับ App Store
ให้ Claude Code, Codex หรือ Gemini CLI ออกแบบสกรีนช็อตร้านค้าแอปของคุณ เอเจนต์สร้างโปรเจกต์ที่แก้ไขได้ ตรวจทานในเบราว์เซอร์ แล้วส่งลิงก์ให้คุณส่งออก
https://appscreenshots.net/api/mcpเพิ่มด้วยคำสั่งเดียว รวมอยู่ในแผนฟรีและแผนเสียเงิน
MCP คืออะไร?
MCP เซิร์ฟเวอร์สกรีนช็อต App Store คืออะไร?
AppScreenshots ให้บริการ MCP (Model Context Protocol) เซิร์ฟเวอร์แบบโฮสต์ที่ https://appscreenshots.net/api/mcp ซึ่งให้ AI tool อย่าง Claude Code, Codex และ Gemini CLI สร้าง แก้ไข และตรวจทานโปรเจกต์สกรีนช็อตร้านค้าแอปในบัญชีของคุณได้ — ด้วยการล็อกอิน OAuth ผ่านเบราว์เซอร์ ไม่ต้องใช้ API key
งานออกแบบและข้อความมาจาก AI เอเจนต์ของคุณ MCP เซิร์ฟเวอร์บันทึกโปรเจกต์จริงที่แก้ไขได้ เทมเพลต ม็อกอัพเครื่อง พาดหัว และพื้นหลังกลายเป็นโปรเจกต์ที่คุณขัดเกลาได้ทีละเฟรม
การพรีวิวและส่งออกอยู่ที่เอดิเตอร์บนเว็บ ดังนั้นไม่มีอะไรถูกเผยแพร่ก่อนผ่านสายตาคุณ
สร้างสกรีนช็อตการตลาด ไม่ใช่แค่ capturing หน้าจอ
เซิร์ฟเวอร์นี้ทำหน้าที่สร้าง (compose)
มันสร้างสกรีนช็อตการตลาดพร้อมขึ้นร้าน — ม็อกอัพเครื่อง พาดหัว กราเดียนต์ และข้อความแปลภาษา — เป็นโปรเจกต์ที่แก้ไขได้ จากเทมเพลตและ asset ที่คุณอนุญาต
เครื่องมือ capture ทำงานต่างหาก
เครื่องมืออย่าง simctl หรือ fastlane snapshot ถ่ายสิ่งที่แสดงอยู่บนหน้าจอเครื่องอยู่แล้ว ใช้มันเก็บภาพดิบ แล้วนำรูปเหล่านั้นมาอัปโหลดที่นี่เป็น asset
เริ่มต้น
เชื่อมต่อ AI tool ด้วยคำสั่งเดียว
เพิ่ม endpoint ด้านล่างเข้าไปในไคลเอนต์ แล้วเสร็จสิ้นการล็อกอินผ่านเบราว์เซอร์เพื่ออนุญาตการเข้าถึง ไคลเอนต์ทุกตัวในหน้านี้รองรับ Streamable HTTP และ OAuth
Claude Code
claude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcpclaude mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcpจากนั้น: รัน /mcp ใน Claude Code แล้วอนุญาต AppScreenshots ในเบราว์เซอร์
หรือรวมไฟล์ config
{
"mcpServers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}{
"mcpServers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}Codex
codex mcp add appscreenshots --url https://appscreenshots.net/api/mcpcodex mcp add appscreenshots --url https://appscreenshots.net/api/mcpจากนั้น: รัน codex mcp login appscreenshots เพื่อเปิดการล็อกอินผ่านเบราว์เซอร์
หรือรวมไฟล์ config
[mcp_servers.appscreenshots]
url = "https://appscreenshots.net/api/mcp"[mcp_servers.appscreenshots]
url = "https://appscreenshots.net/api/mcp"Gemini CLI
gemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcpgemini mcp add --transport http --scope user appscreenshots https://appscreenshots.net/api/mcpจากนั้น: ใน Gemini CLI รัน /mcp auth appscreenshots
หรือรวมไฟล์ config
{
"mcpServers": {
"appscreenshots": {
"httpUrl": "https://appscreenshots.net/api/mcp",
"oauth": {
"enabled": true
}
}
}
}{
"mcpServers": {
"appscreenshots": {
"httpUrl": "https://appscreenshots.net/api/mcp",
"oauth": {
"enabled": true
}
}
}
}Kimi Code
https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcpจากนั้น: เปิด /mcp-config ใน Kimi Code เพิ่ม HTTP server ด้านบน แล้วรัน /mcp-config login appscreenshots รีสตาร์ทเซสชันหลังบันทึก
หรือรวมไฟล์ config
{
"mcpServers": {
"appscreenshots": {
"url": "https://appscreenshots.net/api/mcp"
}
}
}{
"mcpServers": {
"appscreenshots": {
"url": "https://appscreenshots.net/api/mcp"
}
}
}ZCode
https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcpจากนั้น: รวม config เข้า ~/.zcode/cli/config.json ใต้ mcp.servers หรือเพิ่ม HTTP service ใน Settings → MCP รีสตาร์ทเซสชันแล้วเสร็จสิ้นการล็อกอิน OAuth เมื่อปรากฏ
หรือรวมไฟล์ config
{
"mcp": {
"servers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}
}{
"mcp": {
"servers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}
}ChatGPT
https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcpจากนั้น: ใช้รายการเชื่อมต่อ MCP แบบกำหนดเองของบัญชีหรือ workspace ของคุณ กับ endpoint ด้านบนและ OAuth ความพร้อมใช้งานขึ้นอยู่กับการตั้งค่า workspace
อยากได้ไฟล์สำเร็จรูปให้ copy และ Skill เสริม?
ชุดเชื่อมต่อสาธารณะบน GitHub มีไฟล์ config สำเร็จรูปของทุกไคลเอนต์ด้านบน Skill เสริมสอนขั้นตอนการทำงาน และคำสั่ง doctor ที่ตรวจสอบเซิร์ฟเวอร์จากเทอร์มินัล
ดู appscreenshots-mcp บน GitHubเครื่องมือ
9 เครื่องมือที่เอเจนต์เรียกใช้ได้
เครื่องมืออ่านตรวจดูความสามารถ เทมเพลต โปรเจกต์ และ asset เครื่องมือเขียนสร้างโปรเจกต์และแก้ไขแบบมีโครงสร้างพร้อมตรวจสอบเวอร์ชัน
เครื่องมืออ่าน
| เครื่องมือ | หน้าที่ |
|---|---|
get_capabilities | อ่านสิทธิ์ ขอบเขตการออกแบบ เครื่อง และโหมดพรีวิว/ส่งออกของคุณ |
search_templates | ค้นหาข้อมูลเมตาของเทมเพลตสาธารณะ |
get_template | อ่านเทมเพลตที่คุณมีสิทธิ์ใช้ |
list_projects | แสดงโปรเจกต์ที่อนุญาต หน้าละ 25 รายการ |
get_project | อ่านเวอร์ชันปัจจุบันของโปรเจกต์และดีไซน์ที่แก้ไขได้ |
get_project_preview | รับลิงก์เอดิเตอร์ เวอร์ชัน หน้า และคำแนะนำการตรวจทานบนเบราว์เซอร์ |
list_assets | แสดง asset ที่แชร์และ asset ในโปรเจกต์ที่อนุญาต |
เครื่องมือเขียน
| เครื่องมือ | หน้าที่ |
|---|---|
create_project | สร้างโปรเจกต์จากเทมเพลตหรือผืนผ้าใบเปล่า |
update_project | ใช้การแก้ไขแบบมีโครงสร้าง พร้อมการป้องกันเวอร์ชันและ idempotency |
วิธีการทำงาน
จากพรอมป์ต์ถึงสกรีนช็อตพร้อมขึ้นร้าน
วงจรเริ่มต้นที่เอเจนต์ที่เชื่อมต่อทุกตัวทำตามได้
- 1
เชื่อมต่อและอนุญาต
เพิ่ม MCP เซิร์ฟเวอร์ในไคลเอนต์แล้วล็อกอินด้วยบัญชี AppScreenshots ในหน้าขอความยินยอม เลือกโปรเจกต์และ asset ที่ tool ใช้ได้ และว่าอนุญาตให้สร้างโปรเจกต์หรือไม่
- 2
บอกสิ่งที่ต้องการ
ขอชุดสกรีนช็อตด้วยภาษาธรรมดา เอเจนต์อ่านความสามารถ ค้นหาเทมเพลต และสร้างโปรเจกต์ที่แก้ไขได้
- 3
ตรวจทานในเบราว์เซอร์
เครื่องมือพรีวิวคืนลิงก์เอดิเตอร์ เอเจนต์ที่มีเครื่องมือเบราว์เซอร์จะเปิดลิงก์ ตรวจสกรีนช็อต และแก้ปัญหาด้านภาพผ่าน MCP
- 4
วนซ้ำจนเสร็จ
การเขียนทุกครั้งมีการตรวจสอบเวอร์ชันและ idempotency จึงสั่งแปลภาษา เปลี่ยนเครื่อง หรือเปลี่ยนสไตล์ได้โดยไม่ทำลายเฟรมเดิม
- 5
ส่งออกในเอดิเตอร์
เปิดโปรเจกต์เดิมในเอดิเตอร์บนเว็บแล้วส่งออกภาพพร้อมขึ้นร้าน การพรีวิวและส่งออกอยู่ในมือคุณเสมอ
สร้างโปรเจกต์สกรีนช็อต App Store ภาษาอังกฤษจากเทมเพลตที่มี โดยใช้ asset ที่อนุญาตของฉัน ใช้พาดหัวสั้นและเลย์เอาต์สะอาดตา เปิดเอดิเตอร์ด้วยเครื่องมือเบราว์เซอร์ที่มี ตรวจสกรีนช็อตและแก้ปัญหาด้านภาพ แล้วส่งลิงก์โปรเจกต์ให้ฉันเพื่อส่งออกบนเว็บ
ตัวอย่าง
สิ่งที่คุณสั่งได้
โปรเจกต์ยังแก้ไขได้เสมอ การแก้ตามหลังจึงไม่แพง
แปลชุดสกรีนช็อต
“ทำสำเนาเฟรมปัจจุบันเป็นเวอร์ชันภาษาญี่ปุ่นและเยอรมัน คงเลย์เอาต์เดิม แปลพาดหัว และคุมความยาวข้อความแปลไม่เกิน 20% จากฉบับอังกฤษ”
เปลี่ยนเครื่อง
“เปลี่ยนม็อกอัพเครื่องเป็นรุ่น Pro Max ที่ใหญ่กว่า และปรับกราเดียนต์พื้นหลังให้องค์ประกอบยังสมดุล”
เปลี่ยนสไตล์ด้วยประโยคเดียว
“เปลี่ยนเฟรมที่สองเป็นพื้นหลังเข้ม ย้ายพาดหัวไปส่วนบนหนึ่งในสาม และใช้สีเน้นรองสำหรับคำบรรยาย”
ความปลอดภัยและขีดจำกัด
คุณคุมทุกอย่างอยู่เสมอ
การเข้าถึง MCP ถูกจำกัดขอบเขต ตรวจสอบได้ และยกเลิกได้ทุกเมื่อ
- การยืนยันตัวตน
- OAuth 2.1 กับ PKCE ล็อกอินผ่านเบราว์เซอร์ — ไม่มี API key หรือรหัสผ่านถูกเก็บในไคลเอนต์
- ความยินยอมรายโปรเจกต์
- tool แต่ละตัวเห็นเฉพาะโปรเจกต์และ asset ที่คุณเลือก ที่เหลือมองไม่เห็น
- ยกเลิกเมื่อไหร่ก็ได้
- Settings → Connected AI tools ยกเลิกการเชื่อมต่อได้ทันที — access และ refresh token หยุดทำงานในทันที
- อายุ token
- access token และ refresh token อยู่ได้ 30 วัน
- ขีดจำกัดอัตรา
- แผนฟรี 60 MCP call ต่อนาที แผนเสียเงิน 120 ต่อนาที
- ขีดจำกัดโปรเจกต์
- สูงสุด 20 เฟรมต่อโปรเจกต์ 100 องค์ประกอบต่อเฟรม ขนาดผืนผ้าใบ 100–5000 px
- ราคา
- ไม่มีค่าใช้จ่ายเพิ่ม — ใช้สิทธิ์ เทมเพลต และขีดจำกัดการส่งออกของแผนปัจจุบันตามเดิม
คำถามที่พบบ่อย
คำถามที่พบบ่อยเกี่ยวกับ MCP เซิร์ฟเวอร์
สิ่งที่นักพัฒนาถามก่อนเชื่อมต่อ AI tool
ให้เอเจนต์จัดหน้าร้านครั้งต่อไปให้คุณ
เพิ่ม AppScreenshots MCP เซิร์ฟเวอร์เข้ากับ AI tool ของคุณ แล้วเปลี่ยนพรอมป์ต์เดียวเป็นโปรเจกต์สกรีนช็อตที่แก้ไขได้และพร้อมขึ้นร้าน