Pencil MCP: Reka Bentuk Bertukar Menjadi Kod dalam Sekelip Mata, Kecekapan Pembangunan Front-End Meningkat 8 Kali Ganda

Hai semua, saya Liang Xiao yang membuat produk untuk pasaran luar negara. Tahun Baru Cina akan tiba, jadi saya ingin berkongsi penemuan terbaru saya dengan anda sebelum tahun baru.

Apabila membuat laman web atau aplikasi, adakah anda pernah merasakan perkara ini:

Ingin membuat halaman yang cantik, tetapi reka bentuk anda tidak bagus

Mencari pereka terlalu mahal, mencari templat percuma tidak sesuai

Setelah berjaya mendapatkan reka bentuk, menukarkannya menjadi kod menimbulkan banyak masalah

Sejujurnya, ketika saya mengerjakan projek front-end sebelum ini, saya menghabiskan masa yang lama hanya untuk menyesuaikan gaya berdasarkan reka bentuk. Jaraknya berbeza 2px, warnanya tidak betul, sudut bulat terlupa ditambah... Berulang-ulang, sangat menjengkelkan.

Berita baiknya ialah: sekarang dengan Pencil MCP ini, masalah ini pada dasarnya dapat diselesaikan.

Baru-baru ini saya menggunakannya untuk membuat beberapa halaman, dan saya mendapati ia sangat berguna—dari reka bentuk hingga kod, kecekapan meningkat beberapa kali ganda. Dan yang paling penting, kualiti reka bentuk yang dihasilkan oleh AI adalah baik, dan ketepatan pemulihan kod juga sangat tinggi.

Artikel ini akan membincangkan: Apakah sebenarnya Pencil, mengapa ia berbaloi untuk digunakan, dan bagaimana untuk memulakannya dengan cepat.

01. Apakah Pencil? Penjelasan Mudah

Secara ringkas, Pencil ialah alat yang boleh menghubungkan reka bentuk dan kod.

Proses sebelumnya adalah seperti ini:

Membuat reka bentuk dalam Figma

Pereka menandakan saiz, warna, dan jarak

Pembangun menulis kod baris demi baris berdasarkan reka bentuk

Selepas menulis, membandingkan dengan reka bentuk, dan mendapati ketepatan pemulihan hanya 70%-80%

Menyesuaikan dan berkomunikasi berulang kali...

Penyelesaian Pencil ialah:

Anda hanya perlu menerangkan keperluan dalam bahasa semula jadi (contohnya, <img src="https://tipclaw.com/uploads/1770976432022-h77lne7.png">

Kemudian dalam kotak dialog AI di sebelah kanan, beritahu ia reka bentuk apa yang anda inginkan.

Contohnya:

"Bantu saya mereka bentuk pemain muzik gaya Apple"

"Buat Halaman Pendaratan yang ringkas, warna utama adalah biru"

"Rujuk gaya laman web ini, bantu saya buat yang serupa"

AI akan menjana draf reka bentuk pada kanvas. Jika anda tidak berpuas hati, anda boleh terus memintanya untuk menyesuaikan:

"Fon terlalu kecil, besarkan sedikit"

"Jarak lebih besar"

"Tukar warna yang lebih lembut"

Terus laraskan sehingga anda berpuas hati.

Langkah Keempat: Jana Kod

Selepas draf reka bentuk selesai, anda boleh membiarkan AI membantu anda menjana kod.

Anda boleh terus berkata:

"Bantu saya menjana kod Next.js"

"Jana kod Flutter"

"Jana kod Vue 3"

AI akan menjana kod yang sepadan secara automatik berdasarkan draf reka bentuk anda.

Kesan sebenar:

04. Beberapa Pengalaman Penggunaan Sebenar

Selepas menggunakannya beberapa kali, terdapat beberapa perasaan untuk dikongsi:

1) Huraikan Keperluan Secara Khusus

Pada mulanya saya akan berkata "Bantu saya membuat laman web", tetapi perkara yang dijana oleh AI sama sekali bukan apa yang saya mahukan.

Kemudian saya mendapati bahawa semakin khusus huraian, semakin baik kesannya.

Contohnya:

Huraian yang tidak baik: "Bantu saya membuat halaman log masuk"

Huraian yang baik: "Bantu saya membuat halaman log masuk yang ringkas, dengan Logo di bahagian atas, kotak input e-mel dan kata laluan di tengah, dan butang log masuk di bahagian bawah, gaya rujukan laman web rasmi Apple"

2) Anda Boleh Memuat Naik Gambar Rujukan

Jika anda melihat reka bentuk laman web tertentu yang bagus, anda boleh mengambil tangkapan skrin dan memuat naiknya ke AI untuk rujukan.

Draf reka bentuk yang dijana dengan cara ini akan lebih dekat dengan jangkaan anda.

3) Iterasi Lebih Penting Daripada Selesai Sekali

Jangan berfikir untuk menjana reka bentuk yang sempurna sekali gus, ini tidak realistik.

Cara yang betul ialah: jana anggaran dahulu, kemudian laraskan sedikit demi sedikit.

Laraskan hanya satu atau dua tempat setiap kali, seperti "jarak lebih besar" "warna lebih lembut", ini adalah cara yang paling cekap.

4) Kualiti Kod Tidak Buruk

Saya telah mencubanya beberapa kali, dan kualiti kod yang dijana agak tinggi:

Struktur kod yang jelas

Tahap pemulihan gaya yang tinggi (98% +)

Susun atur responsif juga dilakukan dengan baik

Pada asasnya, ia boleh digunakan selepas sedikit pengubahsuaian.

05. Beberapa Perkara yang Perlu Diperhatikan

Walaupun Pencil sangat mudah digunakan, terdapat beberapa perkara yang perlu diperhatikan:

1) Estetika Masih Bergantung Kepada Diri Sendiri

AI boleh membantu anda menjana draf reka bentuk, tetapi anda sendiri perlu menilai sama ada ia kelihatan baik atau tidak.

Oleh itu, lihat lebih banyak reka bentuk yang baik pada masa biasa untuk meningkatkan estetika anda, supaya anda boleh memberikan panduan yang lebih baik apabila menggunakan Pencil.

Berikut ialah beberapa tempat yang disyorkan untuk mencari rujukan reka bentuk:

Dribbble

Mobbin (khusus dalam mengumpul UI mudah alih)

Tangkapan skrin pelbagai laman web yang sangat baik

2) Interaksi Kompleks Masih Perlu Ditulis Sendiri

Pencil sesuai untuk membuat halaman statik dan interaksi konvensional, tetapi jika ia melibatkan animasi yang kompleks, gerak isyarat, dll., anda masih perlu menulis kod sendiri.

Walau bagaimanapun, untuk kebanyakan senario, Pencil sudah mencukupi.

3) Memilih Model AI yang Betul Adalah Sangat Penting

Saya telah mencuba beberapa model dan mendapati bahawa Claude Opus 4.5 mempunyai prestasi visual yang terbaik.

Jika anda menggunakan model lain, kualiti draf reka bentuk yang dijana mungkin lebih teruk.

06. Data Perbandingan Kecekapan

Akhir sekali, saya ingin berkongsi satu set data yang saya uji sendiri:

Bagi saya, nilai terbesar ialah: mengalihkan tenaga daripada "bagaimana untuk melaksanakan" kepada "fungsi apa yang perlu dilakukan".

07. Ringkasan

Pada dasarnya, Pencil menghubungkan reka bentuk dan pembangunan, membolehkan anda memacu keseluruhan proses dengan bahasa semula jadi.

Jika anda juga melakukan pembangunan bahagian hadapan, membuat produk anda sendiri, saya amat mengesyorkan untuk mencuba Pencil: Kualiti Kod Stabil: Ketepatan 98%+, Pada Asasnya Tidak Perlu Melaraskan Gaya

Menyokong Pelbagai Tindanan Teknologi: Next.js, Flutter, Vue, dll. Boleh Digunakan

Dikuasakan oleh Bahasa Semula Jadi: Terangkan Keperluan dalam Bahasa Mudah, AI Menjana Secara Automatik

Akhir sekali, jika anda juga terlibat dalam pembangunan bebas, pengaturcaraan AI, dialu-alukan untuk meninggalkan komen dan berbual:

Bagaimanakah anda biasanya melakukan reka bentuk?

Adakah anda pernah menggunakan Pencil? Bagaimana hasilnya?

Saya akan membaca setiap komen dengan teliti. Jumpa anda dalam artikel seterusnya.