Screenshot ke UI dengan Kimi K3: Aliran Kerja Vibe Coding yang Praktikal

"Hantar tangkapan skrin reka bentuk, terima antara muka yang berjalan" adalah salah satu aliran kerja AI coding paling popular dua tahun kebelakangan. Ia menguji dua perkara: sama ada model benar-benar melihat imej (bukan meneka), dan sama ada kod yang dijana cukup betul secara struktural untuk berjalan. Kimi K3 mempunyai sokongan kukuh pada kedua-duanya — kefahaman imej natif memastikan ia melihat, dan skor 80.6% pada benchmark frontend Arena, hasil open-weight terbaik, membuktikan ia menulis. Panduan ini menelusuri aliran pemulihan lengkap, dari format mesej hingga iterasi, dengan kod yang boleh anda salin dan jalankan.

Mengapa pemulihan tangkapan skrin kini berfungsi

Cubaan awal "lihat imej, tulis kod" kerap gagal kerana vision disambung melalui enkodir berasingan, dan hierarki susun atur, hubungan jarak, serta sempadan komponen dalam imej kerap tersalah dibaca. Model multimodal natif meletakkan vision dan bahasa dalam satu ruang perwakilan, jadi maklumat imej tidak lagi melalui lapisan "penterjemahan" — itulah tempat lompatan ketepatan berlaku.

Kimi K3 multimodal natif untuk imej dan video, dengan vision dan bahasa berkongsi satu perwakilan merentas MoE 2.8T parameter-nya. Skor 80.6% pada benchmark frontend Arena termasuk yang terbaik di open-weight — benchmark itu mengukur tepat tugas ini: memulihkan antara muka daripada mock reka bentuk. Bagi pembangun yang sudah menjalankan gelung vibe coding, ini ialah pilihan open-weight yang berjalan dalam stack anda sendiri.

Format mesej multimodal

EXAIV bertutur dalam bahasa yang serasi OpenAI, jadi imej masuk ke medan image_url dan menerima base64 mahupun URL awam:

import base64
import os
from openai import OpenAI

client = OpenAI(
    api_key=os.environ["EXAIV_API_KEY"],
    base_url="https://exaiv.com/api/ai/v1",
)

def image_data_url(path):
    with open(path, "rb") as f:
        return "data:image/png;base64," + base64.b64encode(f.read()).decode()

resp = client.chat.completions.create(
    model="kimi-k3",
    messages=[{
        "role": "user",
        "content": [
            {"type": "text", "text": "Restore this design mock as a React + Tailwind component"},
            {"type": "image_url", "image_url": {"url": image_data_url("mock.png")}},
        ],
    }],
)
print(resp.choices[0].message.content)

Menukar fail setempat ke base64 ialah laluan paling boleh dipercayai; jika mock sudah ada URL awam, menggunakannya secara langsung lebih ringkas.

Templat prompt yang berkesan

Kualiti pemulihan separuh bergantung pada imej, separuh pada prompt. Struktur templat yang teruji:

Restore this design mock as runnable frontend code.

Stack: React 18 + TypeScript + Tailwind CSS
Requirements:
1. Split into standalone components, one code block each
2. Rebuild layout with flex/grid, match spacing as closely as possible
3. Use lucide-react for icons, placeholders for images
4. Leave data as props interfaces — do not hard-code
5. End with how App.tsx assembles everything

Beberapa nota lapangan:

• Nyatakan stack. Tanpanya model berimprovisasi, dan anda mungkin mendapat rangka kerja yang tidak digunakan.
• Minta pemisahan per komponen. Ketulan halaman monolitik sukar diselenggara; output yang terbahagi mengikut komponen terus masuk projek sebenar.
• Tetapkan dasar pemegang tempat. Untuk imej, ikon, dan data luaran yang tidak dapat dilihat daripada screenshot, putuskan di awal bagaimana mengendalikannya supaya model tidak mereka pautan sumber.
• Huraikan kontrak data. Beritahu model kawasan mana yang data dinamik, dan ia akan membiarkannya sebagai props alih-alih hard-code.

Beriterasi menuju penumpuan

Output pertama jarang tepat; kelajuan iterasi menentukan pengalaman keseluruhan. Dua teknik yang berkesan:

Teknik satu: tampal tangkapan skrin ralat alih-alih memparafrasanya. Hantar ralat penyemak imbas sebagai imej bersama keadaan halaman semasa:

messages = [{
    "role": "user",
    "content": [
        {"type": "text", "text": "Here is the current page and the browser error. Fix the layout issue."},
        {"type": "image_url", "image_url": {"url": current_page}},
        {"type": "image_url", "image_url": {"url": error_screenshot}},
    ],
}]

Melihat serentak "bagaimana rupanya sekarang" dan "apa yang salah" menjadikan pembetulan jauh lebih tepat daripada huraian teks semata seperti "sidebar terlalu lebar".

Teknik dua: satu masalah setiap giliran. Menggabungkan "betulkan susun atur, tukar palet, tambah animasi" dalam satu mesej membuat model berjuggling. Huraikan satu masalah setiap giliran — penumpuan lebih pantas dan diff kekal bersih.

Mengekstrak token reka bentuk dengan structured output

Selain menghasilkan kod komponen, K3 boleh menyusun inventari token reka bentuk daripada mock — berguna apabila anda perlu mendamaikan reka bentuk dengan sistem tema sedia ada:

resp = client.chat.completions.create(
    model="kimi-k3",
    messages=[{
        "role": "user",
        "content": [
            {"type": "text", "text": "Extract design tokens from this mock as JSON: colors, font sizes, spacing values, border radii. Use hex and px."},
            {"type": "image_url", "image_url": {"url": image_data_url("mock.png")}},
        ],
    }],
    response_format={"type": "json_object"},
)
print(resp.choices[0].message.content)

Dengan token dalam bentuk JSON, anda boleh membuat diff terhadap fail tema, menandai sisihan, dan menjana pemboleh ubah CSS secara automatik. Padanan yang bagus untuk panduan structured output.

Mod kegagalan biasa dan pembetulannya

Kebanyakan kegagalan pemulihan masuk ke beberapa kategori dengan pembetulan yang diketahui:

Dari pemulihan ke produksi

Kod yang dijana ialah titik mula. Tiga semakan sebelum masuk ke cabang utama:

Tiga perkara ini masih tidak boleh dipercayai bila dilakukan sepenuhnya oleh AI — satu pusingan manusia sebelum merge adalah langkah yang bertanggungjawab. Sahkan juga bahawa anda memegang hak guna atas data pengguna sebenar, logo jenama, atau aset pihak ketiga yang kelihatan dalam mock; model tidak menyemak hak cipta untuk anda.

Menggabungkan dengan aliran kerja lain

Pemulihan tangkapan skrin mengukuhkan panduan lain di laman ini:

• Dengan ejen pengekodan: serahkan komponen hasil pemulihan kepada ejen untuk logik perniagaan dan ujian — lihat panduan integrasi ejen pengekodan.
• Dengan integrasi IDE: jatuhkan hasil ke dalam ruang kerja Continue atau Cursor dan teruskan menyunting — lihat panduan integrasi IDE.
• Dengan structured output: apabila anda perlu inventari token reka bentuk berstruktur (warna, saiz fon, jarak), gunakan mod json_object — lihat panduan structured output.

Bekerja dengan beberapa tangkapan skrin

Antara muka yang kompleks jarang cukup dalam satu tangkapan skrin. Format mesej menerima beberapa imej dalam satu permintaan, membuka tiga pola praktikal:

• Varian mudah alih dan desktop serentak: hantar kedua-dua saiz mock dan minta pelaksanaan responsif yang meliputi kedua-duanya breakpoint
• Aliran pelbagai keadaan: hantar keadaan kosong, loading, dan error dalam satu permintaan supaya kod yang dijana mengendalikan ketiga-tiganya, bukan hanya happy path
• Rujukan sistem reka bentuk: hantar helaian komponen sedia ada bersama mock baharu supaya kod yang dijana menggunakan semula gaya yang telah dibina alih-alih mencipta baharu

content = [
    {"type": "text", "text": "Build this screen as a responsive component. The second image is the mobile variant; the third is our design system. Reuse existing tokens."},
    {"type": "image_url", "image_url": {"url": desktop_mock}},
    {"type": "image_url", "image_url": {"url": mobile_mock}},
    {"type": "image_url", "image_url": {"url": design_system}},
]

Kekalkan setiap imej pada resolusi yang munasabah — screenshot yang terlalu besar menaikkan kos token tanpa menambah maklumat yang boleh digunakan model.

Streaming semasa penjanaan

Penjanaan komponen boleh mengambil masa puluhan saat pada mock yang kompleks — cukup lama sehingga textarea yang diam terasa rosak. Stream responsnya agar kod muncul beransur:

stream = client.chat.completions.create(
    model="kimi-k3",
    messages=[{
        "role": "user",
        "content": [
            {"type": "text", "text": "Restore this mock as a React + Tailwind component"},
            {"type": "image_url", "image_url": {"url": image_data_url("mock.png")}},
        ],
    }],
    stream=True,
)

partial = ""
for chunk in stream:
    delta = chunk.choices[0].delta
    if delta and delta.content:
        partial += delta.content
        render_preview(partial)  # live-render the growing component

Live-render output separa mengubah masa menunggu menjadi maklum balas: pengguna melihat antara muka merakit dirinya sendiri dan boleh menandakan arah yang salah di tengah jalan alih-alih selepasnya. Bagi tooling yang dibina di atas gelung ini, penghurai sandaran sepatutnya menoleransi JSX yang belum lengkap di tepi akhir — chunk terakhir akan melengkapkan komponen.

Nota untuk pasukan kecil di Asia Tenggara

Banyak produk di rantau ini dibina oleh pasukan dua hingga lima orang yang memakai Cursor atau Continue setiap hari. Aliran screenshot-to-UI berguna justru kerana tidak menuntut pereka sepenuh masa: mock Figma atau bahkan lakaran di papan putih boleh difoto, lalu kimi-k3 menghasilkan rangka komponen yang jurutera baik pulih.

Tiga tabiat yang terbukti menjimatkan masa:

• Simpan mock dan hasil janaan dalam folder yang sama. Semasa iterasi berikutnya, model melihat versi terdahulu dan tidak mengulang kesilapan yang sama.
• Tulis stack sekali dalam system prompt. React, Tailwind, dan nama token reka bentuk tidak perlu diulang dalam setiap mesej.
• Jangan merge sebelum satu pusingan manusia. Susun atur biasanya sudah hampir; aria, breakpoint mudah alih, dan data sebenar masih perlukan tangan.

Kos per permintaan tetap per token. Tangkapan skrin beresolusi tinggi menaikkan bil tanpa menambah ketepatan, jadi mampatkan dahulu ke lebar sekitar 1200 piksel. Kadar langsung ada di halaman harga, bukan dalam artikel ini.

FAQ

Apa yang dijawab artikel ini

• menjana kod frontend daripada screenshot
• aliran screenshot-to-UI berfungsi
• ulangi dalam vibe coding

Peta senario ringkas

Pandangan ke hadapan

Katalog dan weights terus berubah; konvensi integrasi dan panggilan di sini mengikut dokumen rasmi pada masa penerbitan.

Sumber dan pengesahan

Fakta utama dalam artikel ini datang daripada kad model rasmi Kimi dan data penanda aras bahagian hadapan Arena.ai yang diterbitkan dan disahkan pada 2026-11-09. ID model, harga dan ketersediaan mengikut katalog langsung platform — sengaja tidak menulis angka tetap yang cepat lapuk. Contoh kod mengikut kontrak API pada masa penerbitan; semak dokumen rasmi sebelum menyambung ke produksi.

Skop dan khalayak

Khalayak: pembangun yang menukar screenshot atau mock reka bentuk kepada kod frontend. Skop: aliran pemulihan screenshot dan cara pengulangannya. Tidak merangkumi: reka bentuk visual, garis panduan jenama, atau pelaksanaan interaksi kompleks.

Nota editorial dan pembetulan

Ditulis oleh pasukan kandungan EXAIV daripada fakta yang boleh disahkan, dengan sumber dan kod disemak sebelum penerbitan. Jika ada yang lapuk atau salah, halaman keluaran rasmi dan katalog langsung yang muktamad — maklumkan melalui saluran maklum balas halaman supaya kami membetulkannya.

Bacaan berkaitan

• Panduan API Kimi K3
• Panduan konteks panjang Kimi K3
• Panduan integrasi ejen pengekodan
• Panduan integrasi IDE
• Panduan structured output