ให้ Claude Code, Codex หรือ Gemini CLI ออกแบบสกรีนช็อตร้านค้าแอปของคุณ เอเจนต์สร้างโปรเจกต์ที่แก้ไขได้ ตรวจทานในเบราว์เซอร์ แล้วส่งลิงก์ให้คุณส่งออก
https://appscreenshots.net/api/mcpเพิ่มด้วยคำสั่งเดียว รวมอยู่ในแผนฟรีและแผนเสียเงิน
MCP คืออะไร?
AppScreenshots ให้บริการ MCP (Model Context Protocol) เซิร์ฟเวอร์แบบโฮสต์ที่ https://appscreenshots.net/api/mcp ซึ่งให้ AI tool อย่าง Claude Code, Codex และ Gemini CLI สร้าง แก้ไข และตรวจทานโปรเจกต์สกรีนช็อตร้านค้าแอปในบัญชีของคุณได้ — ด้วยการล็อกอิน OAuth ผ่านเบราว์เซอร์ ไม่ต้องใช้ API key
งานออกแบบและข้อความมาจาก AI เอเจนต์ของคุณ MCP เซิร์ฟเวอร์บันทึกโปรเจกต์จริงที่แก้ไขได้ เทมเพลต ม็อกอัพเครื่อง พาดหัว และพื้นหลังกลายเป็นโปรเจกต์ที่คุณขัดเกลาได้ทีละเฟรม
การพรีวิวและส่งออกอยู่ที่เอดิเตอร์บนเว็บ ดังนั้นไม่มีอะไรถูกเผยแพร่ก่อนผ่านสายตาคุณ
มันสร้างสกรีนช็อตการตลาดพร้อมขึ้นร้าน — ม็อกอัพเครื่อง พาดหัว กราเดียนต์ และข้อความแปลภาษา — เป็นโปรเจกต์ที่แก้ไขได้ จากเทมเพลตและ asset ที่คุณอนุญาต
เครื่องมืออย่าง simctl หรือ fastlane snapshot ถ่ายสิ่งที่แสดงอยู่บนหน้าจอเครื่องอยู่แล้ว ใช้มันเก็บภาพดิบ แล้วนำรูปเหล่านั้นมาอัปโหลดที่นี่เป็น asset
เริ่มต้น
เพิ่ม endpoint ด้านล่างเข้าไปในไคลเอนต์ แล้วเสร็จสิ้นการล็อกอินผ่านเบราว์เซอร์เพื่ออนุญาตการเข้าถึง ไคลเอนต์ทุกตัวในหน้านี้รองรับ Streamable HTTP และ OAuth
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 ในเบราว์เซอร์
{
"mcpServers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}{
"mcpServers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}codex mcp add appscreenshots --url https://appscreenshots.net/api/mcpcodex mcp add appscreenshots --url https://appscreenshots.net/api/mcpจากนั้น: รัน codex mcp login appscreenshots เพื่อเปิดการล็อกอินผ่านเบราว์เซอร์
[mcp_servers.appscreenshots]
url = "https://appscreenshots.net/api/mcp"[mcp_servers.appscreenshots]
url = "https://appscreenshots.net/api/mcp"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
{
"mcpServers": {
"appscreenshots": {
"httpUrl": "https://appscreenshots.net/api/mcp",
"oauth": {
"enabled": true
}
}
}
}{
"mcpServers": {
"appscreenshots": {
"httpUrl": "https://appscreenshots.net/api/mcp",
"oauth": {
"enabled": true
}
}
}
}https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcpจากนั้น: เปิด /mcp-config ใน Kimi Code เพิ่ม HTTP server ด้านบน แล้วรัน /mcp-config login appscreenshots รีสตาร์ทเซสชันหลังบันทึก
{
"mcpServers": {
"appscreenshots": {
"url": "https://appscreenshots.net/api/mcp"
}
}
}{
"mcpServers": {
"appscreenshots": {
"url": "https://appscreenshots.net/api/mcp"
}
}
}https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcpจากนั้น: รวม config เข้า ~/.zcode/cli/config.json ใต้ mcp.servers หรือเพิ่ม HTTP service ใน Settings → MCP รีสตาร์ทเซสชันแล้วเสร็จสิ้นการล็อกอิน OAuth เมื่อปรากฏ
{
"mcp": {
"servers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}
}{
"mcp": {
"servers": {
"appscreenshots": {
"type": "http",
"url": "https://appscreenshots.net/api/mcp"
}
}
}
}https://appscreenshots.net/api/mcphttps://appscreenshots.net/api/mcpจากนั้น: ใช้รายการเชื่อมต่อ MCP แบบกำหนดเองของบัญชีหรือ workspace ของคุณ กับ endpoint ด้านบนและ OAuth ความพร้อมใช้งานขึ้นอยู่กับการตั้งค่า workspace
ชุดเชื่อมต่อสาธารณะบน GitHub มีไฟล์ config สำเร็จรูปของทุกไคลเอนต์ด้านบน Skill เสริมสอนขั้นตอนการทำงาน และคำสั่ง doctor ที่ตรวจสอบเซิร์ฟเวอร์จากเทอร์มินัล
ดู appscreenshots-mcp บน GitHubเครื่องมือ
เครื่องมืออ่านตรวจดูความสามารถ เทมเพลต โปรเจกต์ และ asset เครื่องมือเขียนสร้างโปรเจกต์และแก้ไขแบบมีโครงสร้างพร้อมตรวจสอบเวอร์ชัน
| เครื่องมือ | หน้าที่ |
|---|---|
get_capabilities | อ่านสิทธิ์ ขอบเขตการออกแบบ เครื่อง และโหมดพรีวิว/ส่งออกของคุณ |
search_templates | ค้นหาข้อมูลเมตาของเทมเพลตสาธารณะ |
get_template | อ่านเทมเพลตที่คุณมีสิทธิ์ใช้ |
list_projects | แสดงโปรเจกต์ที่อนุญาต หน้าละ 25 รายการ |
get_project | อ่านเวอร์ชันปัจจุบันของโปรเจกต์และดีไซน์ที่แก้ไขได้ |
get_project_preview | รับลิงก์เอดิเตอร์ เวอร์ชัน หน้า และคำแนะนำการตรวจทานบนเบราว์เซอร์ |
list_assets | แสดง asset ที่แชร์และ asset ในโปรเจกต์ที่อนุญาต |
| เครื่องมือ | หน้าที่ |
|---|---|
create_project | สร้างโปรเจกต์จากเทมเพลตหรือผืนผ้าใบเปล่า |
update_project | ใช้การแก้ไขแบบมีโครงสร้าง พร้อมการป้องกันเวอร์ชันและ idempotency |
วิธีการทำงาน
วงจรเริ่มต้นที่เอเจนต์ที่เชื่อมต่อทุกตัวทำตามได้
เพิ่ม MCP เซิร์ฟเวอร์ในไคลเอนต์แล้วล็อกอินด้วยบัญชี AppScreenshots ในหน้าขอความยินยอม เลือกโปรเจกต์และ asset ที่ tool ใช้ได้ และว่าอนุญาตให้สร้างโปรเจกต์หรือไม่
ขอชุดสกรีนช็อตด้วยภาษาธรรมดา เอเจนต์อ่านความสามารถ ค้นหาเทมเพลต และสร้างโปรเจกต์ที่แก้ไขได้
เครื่องมือพรีวิวคืนลิงก์เอดิเตอร์ เอเจนต์ที่มีเครื่องมือเบราว์เซอร์จะเปิดลิงก์ ตรวจสกรีนช็อต และแก้ปัญหาด้านภาพผ่าน MCP
การเขียนทุกครั้งมีการตรวจสอบเวอร์ชันและ idempotency จึงสั่งแปลภาษา เปลี่ยนเครื่อง หรือเปลี่ยนสไตล์ได้โดยไม่ทำลายเฟรมเดิม
เปิดโปรเจกต์เดิมในเอดิเตอร์บนเว็บแล้วส่งออกภาพพร้อมขึ้นร้าน การพรีวิวและส่งออกอยู่ในมือคุณเสมอ
สร้างโปรเจกต์สกรีนช็อต App Store ภาษาอังกฤษจากเทมเพลตที่มี โดยใช้ asset ที่อนุญาตของฉัน ใช้พาดหัวสั้นและเลย์เอาต์สะอาดตา เปิดเอดิเตอร์ด้วยเครื่องมือเบราว์เซอร์ที่มี ตรวจสกรีนช็อตและแก้ปัญหาด้านภาพ แล้วส่งลิงก์โปรเจกต์ให้ฉันเพื่อส่งออกบนเว็บ
ตัวอย่าง
โปรเจกต์ยังแก้ไขได้เสมอ การแก้ตามหลังจึงไม่แพง
“ทำสำเนาเฟรมปัจจุบันเป็นเวอร์ชันภาษาญี่ปุ่นและเยอรมัน คงเลย์เอาต์เดิม แปลพาดหัว และคุมความยาวข้อความแปลไม่เกิน 20% จากฉบับอังกฤษ”
“เปลี่ยนม็อกอัพเครื่องเป็นรุ่น Pro Max ที่ใหญ่กว่า และปรับกราเดียนต์พื้นหลังให้องค์ประกอบยังสมดุล”
“เปลี่ยนเฟรมที่สองเป็นพื้นหลังเข้ม ย้ายพาดหัวไปส่วนบนหนึ่งในสาม และใช้สีเน้นรองสำหรับคำบรรยาย”
ความปลอดภัยและขีดจำกัด
การเข้าถึง MCP ถูกจำกัดขอบเขต ตรวจสอบได้ และยกเลิกได้ทุกเมื่อ
คำถามที่พบบ่อย
สิ่งที่นักพัฒนาถามก่อนเชื่อมต่อ AI tool
เพิ่ม AppScreenshots MCP เซิร์ฟเวอร์เข้ากับ AI tool ของคุณ แล้วเปลี่ยนพรอมป์ต์เดียวเป็นโปรเจกต์สกรีนช็อตที่แก้ไขได้และพร้อมขึ้นร้าน