Bisakah LongCat-2.5 Mengubah Tangkapan Layar Menjadi Halaman Web Utuh? Mengupas Kemampuan Pemrograman Visual dan Kasus Kegagalan dalam 5 Dimensi

Catatan penulis: Berdasarkan demo resmi serta pengujian independen oleh Zhidx dan TOKRACE, artikel ini mengulas kemampuan nyata LongCat-2.5 dalam mengubah tangkapan layar menjadi halaman web, membuat halaman interaktif, dan menghasilkan konten 3D, termasuk contoh kegagalan dan batasan penerimaannya.

Meituan resmi merilis LongCat-2.5 pada 2026-11-02. Salah satu kemampuan yang diunggulkan adalah Visual Coding (pemrograman visual), dengan demo seperti simulasi fluida real-time, tampilan 3D Pohon Suci Perunggu Sanxingdui, dan halaman undangan acara yang dibuat dari foto. Setelah melihatnya, banyak pengembang front-end langsung bertanya: kalau kita memberikan desain atau tangkapan layar situs web, bisakah model ini langsung menghasilkan halaman yang siap diserahkan?

Artikel ini bukan sekadar mengulang promosi resmi. Demo resmi menampilkan contoh keberhasilan yang telah dipilih, sementara pengujian independen menunjukkan hasil yang beragam: ada karya yang sangat matang, tetapi ada juga proyek dengan dimensi yang meleset hingga 1000 kali. Artikel ini membandingkan kedua jenis bukti tersebut dan menjelaskan kesimpulan mana yang didukung bukti, serta mana yang belum.

Manfaat utama: Setelah membaca artikel ini, Anda akan memahami sejauh mana kemampuan pemrograman visual LongCat-2.5, lima aspek untuk memeriksa kelayakan halaman web sebelum diserahkan, serta bagian mana yang tetap harus diperiksa manusia.

Sekilas informasi utama pemrograman visual LongCat-2.5

Berikut rangkuman fakta publik terkait pemrograman visual dari blog teknis resmi Meituan, dokumentasi API, dan berita peluncuran. Bobot model belum tersedia untuk diunduh saat dirilis, jadi “API resmi sudah tersedia” tidak berarti “sudah bersifat open source”.

Perlu diperhatikan: dokumentasi resmi mendukung pemahaman gambar dan video, tetapi itu tidak berarti LongCat-2.5 menyediakan antarmuka untuk pembuatan gambar atau video. Gambar dan video dalam pengujian pihak ketiga dibuat dengan merender kode yang ditulis model melalui alat seperti Blender dan browser.

Membuat ulang tangkapan layar dan membuat halaman web dari referensi visual itu berbeda

Sebelum membahas “mengubah tangkapan layar menjadi halaman web”, kita perlu membedakan dua jenis tugas. Yang pertama adalah pembuatan berdasarkan referensi visual: berikan foto lokasi atau gambar yang menggambarkan suasana beserta kebutuhan dalam bentuk teks, lalu minta model merancang halaman web dengan gaya yang sesuai. Dalam tugas ini, model bebas menentukan tata letak selama hasilnya terasa cocok.

Yang kedua adalah membuat ulang tangkapan layar secara presisi: berikan tangkapan layar halaman web yang sudah ada, lalu minta model menyamakan tata letak, jarak, font, interaksi, dan perilaku responsif sedekat mungkin. Standar penerimaannya jauh lebih ketat karena setiap pergeseran akan terlihat. Contoh halaman undangan acara dari tim resmi termasuk jenis pertama. Saat ini belum ada cukup sampel independen yang membuktikan tingkat akurasi LongCat-2.5 secara umum untuk tugas kedua, apalagi menyatakan bahwa model ini sudah mampu membuat ulang halaman secara piksel demi piksel.

Sekilas tentang mekanisme token visual LongCat-2.5

Kemampuan “multimodal native” LongCat-2.5 berasal dari cara model memproses gambar. Menurut penjelasan resmi, model terlebih dahulu menggunakan SAE (encoder penyelarasan semantik) untuk mengekstrak fitur visual. Kemudian, RVQ (kuantisasi vektor residual) mengodekan fitur tersebut menjadi token diskret bertingkat, yang selanjutnya diproses bersama token teks oleh model utama.

Desain ini juga mencakup diskretisasi visual pada resolusi asli, prakomputasi token visual secara offline, serta pembelajaran bersama embedding codebook visual dan model utama. Bagi developer, sederhananya: gambar tidak “diterjemahkan menjadi deskripsi teks” sebelum diberikan kepada model, melainkan ikut digunakan dalam penalaran dan penulisan kode dalam bentuk yang mendekati aslinya. Namun, keunggulan arsitektur hanyalah landasan kemampuan, bukan jaminan bahwa setiap tangkapan layar dapat dibuat ulang secara akurat.

Cara membaca skor Vision2Web LongCat-2.5

Meituan merilis hasil dua benchmark yang berkaitan langsung dengan pemrograman visual. Semua data berasal dari tabel evaluasi resmi Meituan. Model pembandingnya hanya dua model dalam tabel, sehingga tidak mencakup semua model terbaru hingga 2026-11-03.

Dari angkanya, LongCat-2.5 unggul di Text→3D dalam tabel perbandingan resmi. Di Vision2Web, skornya 5.1 poin lebih tinggi daripada GPT-5.6-Sol, tetapi 1.6 poin lebih rendah daripada Claude Opus 5. DeepSWE penting disertakan sebagai referensi: hasil pemrograman visual pada akhirnya tetap harus menjadi kode yang bisa digunakan, dan dalam perbaikan masalah di repositori perangkat lunak nyata, LongCat-2.5 masih tertinggal 8.1 poin dari GPT-5.6-Sol.

Yang lebih penting, skor benchmark tidak sama dengan tingkat kesesuaian piksel, dan juga tidak sama dengan tingkat keberhasilan penerimaan produk. Pengaturan evaluasi default LongCat-2.5 mengaktifkan mode berpikir, temperature=1.0, dan top_p=0.95. Sebagian skor model berasal dari laporan publik, sementara sebagian lainnya diuji sendiri oleh Meituan, sehingga kondisi pengujiannya tidak sepenuhnya seragam.

💡 Saran memilih: Papan peringkat publik hanya bisa dijadikan referensi. Yang benar-benar penting adalah mengujinya dengan tangkapan layar dan kebutuhanmu sendiri. Melalui antarmuka agregasi yang kompatibel dengan OpenAI seperti APIYI apiyi.com, kamu bisa menggunakan skrip pengujian yang sama untuk membandingkan hasil beberapa model visual sebelum menentukan model utama.

Perbandingan kasus pemrograman visual LongCat-2.5: keberhasilan dan kegagalan

Berikut adalah kasus dari tiga sumber. Demonstrasi resmi merupakan contoh keberhasilan yang telah dipilih, sedangkan 智东西 dan TOKRACE melakukan pengujian pihak ketiga dengan sampel kecil. Kekuatan bukti dari ketiganya berbeda, jadi penting untuk membedakannya saat membaca.

Demo resmi: contoh sukses referensi visual + logika interaksi

Blog resmi menampilkan delapan tugas end-to-end. Yang berkaitan langsung dengan web mencakup simulasi fluida, tampilan tiga dimensi Pohon Suci Perunggu Sanxingdui, maket kota, desain visual bergaya Tiongkok, dan halaman undangan acara. Contoh Sanxingdui harus menangani struktur tiga dimensi, material, serta interaksi rotasi dan zoom sekaligus. Sementara itu, halaman undangan perlu menerjemahkan suasana foto menjadi gaya halaman, sekaligus menyediakan pendaftaran, pengelolaan daftar peserta, dan ekspor tabel.

Contoh-contoh ini membuktikan bahwa LongCat-2.5 mampu mengubah kebutuhan visual menjadi kode frontend yang dapat dijalankan. Namun, contoh tersebut tidak membuktikan bahwa “semua halaman web interaktif bisa diselesaikan dalam sekali pengerjaan”, atau bahwa performanya sudah memenuhi standar untuk peluncuran komersial.

Pengujian Zhidx: hasil keseluruhan baik, tetapi beberapa detail masih perlu diperbaiki

Pada 2026-11-02, Zhidx meminta LongCat-2.5 membuat animasi HTML pelikan yang sedang mengendarai sepeda. Reporter mengamati bahwa animasinya secara keseluruhan cukup lengkap, dengan subjek yang jelas, gaya yang konsisten, dan detail yang kaya. Namun, posisi sebagian syalnya sedikit meleset.

Dalam tugas lain untuk membuat PPT laporan keuangan kuartal ketiga Amazon, kerangka analisisnya lengkap, dengan grafik tren, diagram struktur, dan catatan risiko. Dari perbandingan awal, reporter tidak menemukan kesalahan data yang mencolok. Masalahnya terutama ada pada penyajian: beberapa halaman terlalu padat informasi, ukuran font terlalu kecil, dan sejumlah kesimpulan disampaikan terlalu mutlak. Ini juga menjadi pelajaran untuk pengembangan web: konten yang pada dasarnya benar belum tentu memiliki keterbacaan dan tata letak yang memadai.

Pengujian TOKRACE: Semakin Jelas Batasannya, Semakin Tinggi Tingkat Keberhasilan

TOKRACE menghubungkan LongCat-2.5 ke Claude Code, lalu menggunakan Blender dan browser untuk menyelesaikan 15 tugas kreatif: 6 tugas 3D, 4 video pengetahuan, 4 SVG statis, dan 1 animasi. Kasus yang berhasil punya satu kesamaan: batasannya jelas dan strukturnya sederhana.

• Rak buku parametrik: Dimensi versi tiga sekat 0.8m dan versi empat sekat 1.0m sudah benar, ketebalan papan 18mm sesuai persyaratan, dan keenam gambar dari berbagai sudut pandang diserahkan lengkap. Pengerjaannya memakan waktu sekitar 36 menit, 47 permintaan, dan menghasilkan 69,708 token.
• Poster acara berbahasa Mandarin: Selesai dalam sekitar 3 menit dan 10 permintaan. Keenam bagian teks Mandarin dipertahankan dengan benar, dan ikon tidak mendesak teks utama.
• Animasi bersepeda 4 detik: Roda, pedal, dan kedua kaki bergerak selaras. Tim penguji memeriksa 40 titik waktu secara acak dan menemukan selisih maksimum sekitar 0.19px antara kaki dan pedal, tetapi kontras objek utama yang berwarna terang masih kurang.

Kasus yang gagal memperlihatkan masalah yang paling mudah terlewat dalam pemrograman visual. Pada tugas reduktor planet, posisi ketiga roda gigi planet pada dasarnya sudah benar, tetapi 140mm ditulis sebagai 140m—kesalahan satuan sebesar 1000 kali lipat. Video yang diminta juga tidak diserahkan. Model apartemen dua kamar tidur “terlihat seperti ruang tamu”, tetapi memiliki kesalahan struktural: tidak ada bukaan untuk pintu dan jendela, tempat tidur bertumpang tindih dengan dinding partisi, dan beberapa sudut kamera terhalang dinding. Pada SVG jam, sudut jarum untuk pukul 9:41 sudah benar, tetapi angka-angkanya bertumpang tindih dengan tanda jam yang tebal.

TOKRACE juga membandingkan mode berpikir: saat diaktifkan, tata letak beberapa gambar menjadi lebih jelas, tetapi biaya penalaran dan permintaan bisa meningkat secara signifikan. Dalam perbandingan SVG pelikan bersepeda, gambar berhasil dibuat pada permintaan pertama saat mode berpikir dimatikan, sedangkan saat diaktifkan gambar baru terbentuk pada permintaan ke-5. Ini hanya pengamatan dari satu tugas dan tidak bisa digunakan untuk menyimpulkan tingkat keberhasilan rata-rata saat mode berpikir diaktifkan atau dimatikan.

Lima dimensi penerimaan untuk pemrograman visual LongCat-2.5

Dari contoh-contoh di atas, terlihat bahwa ada setidaknya empat tahapan antara “terlihat benar” dan “siap diserahkan”. Kerangka penerimaan berikut adalah metode pemeriksaan teknis yang disusun berdasarkan contoh-contoh tersebut, bukan standar evaluasi resmi LongCat.

Dari kelima dimensi ini, akurasi konten dan kesiapan penyerahan teknis paling mudah luput saat menilai hasil buatan AI. Halaman dengan warna yang menarik dan animasi yang mulus bisa membuat kita melewatkan sumber data fiktif yang ditambahkan atau file yang tidak ikut diserahkan. Saat mengubah tangkapan layar menjadi halaman web, sebaiknya jadikan “apa yang ditambahkan model” sebagai poin pemeriksaan tersendiri.

Cara menguji konversi tangkapan layar ke halaman web dengan API LongCat-2.5

Jika ingin menguji LongCat-2.5 dengan desain sendiri, kamu bisa mengirim “gambar + instruksi teks” menggunakan format yang kompatibel dengan OpenAI. Gambar dapat dikirim sebagai Base64 atau URL publik, dengan ukuran maksimal 10 MB per gambar dan maksimal 50 gambar per permintaan. Rasio lebar dan tinggi asli yang melebihi 200:1 akan menyebabkan error, jadi tangkapan layar yang panjang perlu dipotong terlebih dahulu.

Perlu dicatat, hingga tanggal verifikasi artikel ini (2026-11-03), belum ada kepastian bahwa LongCat-2.5 sudah tersedia di platform APIYI. Untuk memastikan ketersediaannya, periksa daftar model APIYI. Skrip di bawah menggunakan format standar OpenAI, sehingga kamu bisa memakai kode yang sama untuk menguji alur dengan model visi yang sudah tersedia di platform. Setelah LongCat-2.5 tersedia, kamu cukup mengganti nama modelnya.

Contoh paling sederhana

import base64, openai

client = openai.OpenAI(api_key="YOUR_API_KEY", base_url="https://api.apiyi.com/v1")
img = base64.b64encode(open("screenshot.png", "rb").read()).decode()

resp = client.chat.completions.create(
    model="LongCat-2.5",  # Gunakan nama sebenarnya dalam daftar model APIYI
    messages=[{"role": "user", "content": [
        {"type": "text", "text": "按截图复刻为单文件 HTML,只用截图中出现的文字,不要补充任何数据"},
        {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{img}"}}
    ]}],
)
print(resp.choices[0].message.content)

import base64
import time
import openai
from pathlib import Path

client = openai.OpenAI(
    api_key="YOUR_API_KEY",
    base_url="https://api.apiyi.com/v1"  # Antarmuka APIYI yang kompatibel dengan OpenAI
)

SYSTEM_PROMPT = """你是前端工程师。根据截图生成单文件 HTML(内联 CSS/JS)。
硬性要求:
1. 只使用截图中可见的文字,禁止补充数据、单位、来源或年份
2. 无法辨认的文字用 [待确认] 占位
3. 支持 375px / 768px / 1440px 三个断点
4. 代码末尾用注释列出:你做的假设、未实现的交互"""

def encode_image(path: str) -> str:
    data = Path(path).read_bytes()
    if len(data) > 10 * 1024 * 1024:
        raise ValueError("单张图片超过 10MB,请压缩后再试")
    return base64.b64encode(data).decode()

def screenshot_to_html(path: str, model: str = "LongCat-2.5",
                       retries: int = 3) -> str:
    img = encode_image(path)
    messages = [
        {"role": "system", "content": SYSTEM_PROMPT},
        {"role": "user", "content": [
            {"type": "text", "text": "请复刻这张网页截图。"},
            {"type": "image_url",
             "image_url": {"url": f"data:image/png;base64,{img}"}},
        ]},
    ]
    for i in range(retries):
        try:
            resp = client.chat.completions.create(
                model=model, messages=messages, max_tokens=16000
            )
            return resp.choices[0].message.content
        except openai.RateLimitError:
            time.sleep(2 ** i)  # Backoff eksponensial saat terkena batas laju 429
    raise RuntimeError("多次重试失败")

if __name__ == "__main__":
    html = screenshot_to_html("screenshot.png")
    Path("output.html").write_text(html, encoding="utf-8")
    print("已生成 output.html,请按五维清单验收")

Ada dua keputusan desain dalam kode ini yang perlu dijelaskan. Pertama, petunjuk sistem secara tegas melarang penambahan data, satuan, dan sumber. Ini adalah perlindungan langsung terhadap masalah “mengarang tahun fiskal dan sumber data” pada contoh grafik TOKRACE. Kedua, model diminta mencantumkan asumsinya di akhir kode, sehingga bagian yang “ditebak” bisa cepat ditemukan saat peninjauan manual. Untuk struktur permintaan mode berpikir, ikuti dokumentasi parameter resmi LongCat dan jangan langsung menggunakan parameter reasoning dari model lain.

🚀 Mulai cepat: Coba dapatkan kredit uji coba gratis untuk pengguna baru melalui APIYI apiyi.com. Jalankan seluruh proses dengan 3-5 tangkapan layar yang tingkat kerumitannya berbeda (halaman landing, formulir, dan dasbor data), lalu beri skor berdasarkan daftar periksa lima dimensi sebelum memutuskan apakah akan memasukkannya ke alur kerja resmi.

Analisis Dampak Pemrograman Visual LongCat-2.5

Dampaknya bagi developer frontend

• Tahap prototipe jadi jauh lebih efisien: Halaman interaktif dapat dibuat dengan cepat dari referensi visual. Ini cocok untuk demo konsep, draf awal halaman acara, dan alat internal. Contohnya adalah halaman undangan acara resmi dan poster TOKRACE.
• Pekerjaan validasi tetap diperlukan: Model bisa menulis halaman yang “terlihat benar”, tetapi kesalahan pada satuan, teks, dan hubungan antarstruktur lebih sulit dikenali. Sebagian peran developer pun bergeser dari “menulis kode” menjadi “menetapkan batasan dan memvalidasi hasil”.
• Semakin jelas batasannya, semakin baik: Contoh rak buku menunjukkan hasil yang baik setelah dimensi dan daftar deliverable ditentukan secara jelas. Sebaliknya, kebutuhan yang ambigu lebih mudah membuat model berimprovisasi.

Dampaknya pada alur kerja AI Coding

Dokumentasi resmi LongCat-2.5 menyediakan panduan integrasi untuk Claude Code, Codex, OpenCode, Cline, dan alat lainnya. Biasanya, pengguna hanya perlu mengubah Base URL, kunci API, dan nama model. Artinya, pemrograman visual bisa dimasukkan ke alur kerja Agent yang sudah ada, tanpa perlu membuka jendela chat terpisah. Namun, kompatibilitas format API tidak berarti semua fitur dan parameter alat bekerja persis sama. Tugas yang panjang juga bisa mengalami timeout atau terputus; beberapa tugas video TOKRACE tidak selesai karena hal ini.

Dari sisi biaya, harga promosi terbatas yang saat ini tercantum secara resmi adalah ¥2.00 untuk input yang tidak terkena cache, ¥0.04 untuk input yang terkena cache, dan ¥8.00 untuk output (per satu juta token). Biaya aktual tetap mengacu pada platform resmi dan tagihan. Tugas multi-putaran seperti rak buku menghasilkan hampir 70 ribu token output. Saat merencanakan tugas pemrograman visual dalam jumlah besar, jumlah permintaan dan panjang output lebih perlu diperhatikan daripada harga per satuan.

Batas penggunaan LongCat-2.5 untuk mengubah tangkapan layar menjadi halaman web

Berdasarkan seluruh bukti, skenario penggunaan dapat dibagi menjadi tiga tingkat:

💰 Saran biaya: Pemrograman visual sering membutuhkan beberapa putaran iterasi. Sebaiknya uji sejumlah kecil tangkapan layar terlebih dahulu untuk memperkirakan rata-rata konsumsi token per halaman. APIYI apiyi.com menggunakan tarif berdasarkan pemakaian dan menyediakan tagihan terpadu, sehingga biaya per halaman lebih mudah dibandingkan antar-model.

Pertanyaan Umum FAQ

Poin Utama Pemrograman Visual LongCat-2.5

• Kemampuan utama: LongCat-2.5 dapat mengubah referensi visual menjadi kode halaman web yang bisa dijalankan, tetapi bukan berarti mampu mereplikasi tangkapan layar hingga tingkat piksel.
• Hasil resmi: Vision2Web mencapai 78.6, sedikit di bawah Claude Opus 5; Text→3D mencapai 55.4 dan memimpin dalam tabel perbandingan resmi.
• Pola keberhasilan: Tugas dengan batasan jelas dan struktur sederhana memiliki tingkat penyelesaian tinggi, seperti poster SVG dan rak buku parametrik.
• Pola kegagalan: Satuan, hubungan spasial, konten yang dikarang, dan kelengkapan hasil menjadi titik risiko utama.
• Cara evaluasi: Periksa satu per satu dari lima aspek: kesesuaian visual, fungsi, responsivitas, akurasi konten, dan kesiapan teknis untuk diserahkan.
• Cara mulai: Gunakan skrip yang kompatibel dengan OpenAI di APIYI apiyi.com untuk membangun alur pengujian. Ketersediaan LongCat-2.5 mengacu pada daftar model.

Kesimpulan

Berikut kesimpulan utama tentang kemampuan LongCat-2.5 mengubah tangkapan layar menjadi halaman web:

1. Bisa membuat prototipe, tetapi belum tentu siap langsung diserahkan: Contoh resmi dan pengujian pihak ketiga membuktikan kemampuan pemrograman visualnya, tetapi masih ada kesenjangan yang jelas antara tangkapan layar dan halaman yang siap diluncurkan.
2. Tampilan yang sesuai baru langkah pertama: Interaksi, responsivitas, akurasi konten, dan kelengkapan teknis perlu diperiksa secara terpisah. Hal yang paling mudah terlewat adalah “apa saja yang ditambahkan model sendiri”.
3. Gunakan batasan untuk meningkatkan stabilitas: Tentukan dimensi, teks, breakpoint, dan daftar hasil yang harus diserahkan secara jelas. Larang juga penambahan data dalam petunjuk untuk mengurangi kesalahan akibat improvisasi model.

Jika ingin memasukkan pemrograman visual ke alur pengembangan sehari-hari, sebaiknya lakukan pengujian sampel kecil dengan tangkapan layar Anda sendiri, lalu tentukan cakupan penggunaannya berdasarkan tiga tingkat batasan dalam artikel ini. Anda bisa menggunakan antarmuka terpadu di APIYI apiyi.com untuk membandingkan performa nyata beberapa model visual. Platform ini menyediakan kuota gratis untuk pengguna baru, sehingga pengujian bisa dilakukan dengan biaya rendah.

📚 Referensi

1. Blog teknis resmi LongCat-2.5: Arsitektur model, benchmark, dan contoh demonstrasi resmi
2. Tautan: longcat.ai/blog/longcat-2.5

3. Keterangan: Sumber asli hasil Vision2Web, 3DCodeBench, dan kondisi evaluasi

4. Blog tim teknis Meituan: Penjelasan teknis token visual LongCat-2.5

5. Tautan: tech.meituan.com/2026/11/02/Meituan-LongCat-2.5.html

6. Keterangan: Pengenalan mekanisme pengodean visual seperti SAE dan RVQ

7. Dokumentasi antarmuka pemahaman visual LongCat: Batasan input gambar dan video

8. Tautan: longcat.ai/platform/docs/image-video-understanding

9. Keterangan: Batasan format, ukuran, jumlah, dan rasio aspek gambar

10. Laporan pengujian Zhidx: Pengujian animasi pelikan dan PPT laporan keuangan

11. Tautan: tech.ifeng.com/c/8xjHpT7wJEN

12. Keterangan: Pengalaman menggunakan versi resmi dari sudut pandang media

13. Pengujian versi resmi oleh TOKRACE: Catatan 15 contoh tugas kreatif

14. Tautan: www.tokrace.com/zh-CN/guides/longcat-2-5-release
15. Keterangan: Mencakup gambar asli, proyek, dan catatan eksekusi, termasuk contoh yang berhasil maupun gagal

Penulis: Tim teknis APIYI
Diskusi teknis: Kunjungi halaman utama APIYI di apiyi.com untuk menghubungi kami. Materi integrasi lainnya tersedia di pusat dokumentasi docs.apiyi.com