Pencil MCP: Дизајнот станува код за секунди, ефикасноста на развојот на предниот дел се зголемува за 8 пати

Здраво на сите, јас сум Лианг Ксиао кој прави производи за прекуокеански пазари. Наскоро е Нова година, па пред Нова година ќе објавам уште една статија за да ги споделам моите неодамнешни придобивки со вас.

Кога правите веб-страници или апликации, дали некогаш сте го имале ова чувство:

Сакам да направам убава страница, но мојот дизајн не е добар

Премногу е скапо да се најде дизајнер, а бесплатните шаблони не се соодветни

Конечно добив дизајн, но враќањето во код е куп проблеми

Искрено, кога правев проекти за предниот дел, можев да поминам половина ден само прилагодувајќи ги стиловите според дизајнот. Растојанието е различно за 2 px, бојата не е сосема точна, а заборавам да додадам заоблени агли... Повторно и повторно, тоа е многу досадно.

Добрата вест е: сега со Pencil MCP, овие проблеми во основа може да се решат.

Неодамна го користев за да направам неколку страници и открив дека е навистина добар - од дизајн до код, ефикасноста директно се зголеми за неколку пати. И најважно е што квалитетот на дизајнот генериран од AI е прилично добар, а реставрацијата на кодот е исто така многу висока.

Оваа статија ќе разговара за: Што е Pencil, зошто вреди да се користи и како брзо да се започне.

01. Што е Pencil? Објаснете го јасно на обичен јазик

Едноставно кажано, Pencil е алатка која може да ги поврзе дизајнот и кодот.

Претходниот процес беше вака:

Направете дизајн во Figma

Дизајнерот ги означува димензиите, боите и растојанијата

Развојот пишува код линија по линија според дизајнот

По пишувањето, споредете го со дизајнот и откријте дека реставрацијата е само 70%-80%

Повторено прилагодување, комуникација...

Решението на Pencil е:

Само треба да ги опишете барањата на природен јазик (како што е „помогни ми да дизајнирам музички плеер во стилот на Apple“), а AI може директно да генерира дизајн на платното, а потоа да генерира соодветен код со еден клик (Next.js, Flutter, Vue итн. се поддржани).

И што е уште почудно, можете да прилагодувате додека дизајнирате. На пример:

„Има премногу виолетова, смени малку зелена“

„Растојанието нека биде малку поголемо“

„Погледнете го стилот на оваа веб-страница“

AI ќе ви помогне да ги прилагодите дизајнот и кодот во реално време, без да мора сами да кревате прст.

02. Зошто мислам дека Pencil вреди да се користи?

1) Ефикасноста е навистина висока

Традиционалниот начин на правење дизајн за страница може да потрае 4-6 часа. Со Pencil, може да се направи за 20-40 минути.

И реставрацијата на кодот може да достигне 98%+, во основа нема потреба да се прилагодуваат стиловите.

Јас самиот пробав и направив едноставна Landing Page, од дизајн до код, се беше готово за половина час.

2) Квалитетот на дизајнот е стабилен

Претходно, кога дозволував AI да генерира дизајни, често се среќавав со вакви проблеми:

Некоординирани шеми на бои

Хаотични растојанија

Неконзистентни големини на фонтови

Pencil има систем за дизајн и естетски стандарди зад себе, а квалитетот на генерираните дизајни е релативно стабилен. Иако не е совршен, барем не е премногу грд.

3) Поддржува повеќе технички стекови

Без разлика дали правите Next.js, Flutter, Vue или SwiftUI, Pencil може автоматски да го генерира соодветниот код.

Ова е навистина погодно за луѓе како мене кои прават развој на повеќе платформи - имам код за повеќе платформи од еден дизајн.

03. Како да инсталирате и користите Pencil?

Подолу ќе го споделам мојот процес на инсталација и употреба, што треба да биде наједноставниот начин во моментов.

Прв чекор: Инсталирајте Pencil MCP

Директно пребарајте „pencil“ во вашето IDE (VS Code, Cursor итн.)

Само кликнете за да инсталирате, не преземајте од други места (избегнувајте преземање пиратски верзии)

Забелешка: Директното пребарување во IDE е најбезбедниот начин.

Втор чекор: Дозволете AI да ви помогне да конфигурирате

Како да конфигурирате по инсталирањето?

Искрено, на почетокот не разбирав многу. Подоцна открив дека наједноставниот начин е: директно да дозволите AI да ви помогне да конфигурирате.

Отворете го вашиот AI асистент за програмирање (Claude Code или Codex) и кажете му:

Веќе го инсталирав овој MCP „pencil“ во ова IDE, ве молам помогнете ми да го конфигурирам, така што моите Claude Code, Codex, VS Code можат да го користат овој MCP

Потоа почекајте да ви помогне да конфигурирате.

Трет чекор: Започнете да користите Pencil за да дизајнирате

Откако ќе завршите со конфигурацијата, ќе видите икона за молив на левата страна на IDE, кликнете за да го отворите платното на Pencil.

Потоа, во AI дијалог прозорецот од десната страна, кажете му што сакате да дизајнира.

На пример:

"Дизајнирај ми музички плеер во стилот на Apple"

"Направи едноставна Landing Page, главната боја е сина"

"Користи го стилот на оваа веб-страница и направи ми слична"

AI ќе генерира дизајн на платното. Ако не сте задоволни, можете да продолжите да го прилагодувате:

"Фонтот е премал, зголеми го"

"Растојанието нека биде поголемо"

"Смени ја бојата во поблага"

Продолжете да прилагодувате додека не сте задоволни.

Чекор 4: Генерирање на код

Откако ќе го завршите дизајнот, можете да му дозволите на AI да ви генерира код.

Можете директно да кажете:

"Генерирај ми Next.js код"

"Генерирај Flutter код"

"Генерирај Vue 3 код"

AI автоматски ќе го генерира соодветниот код според вашиот дизајн.

Вистински ефект:

04. Некои практични искуства

Откако го користев неколку пати, имам неколку впечатоци да споделам:

1) Опишете ги барањата конкретно

На почетокот ќе кажев "Направи ми веб-страница", но AI генерираше нешто што воопшто не го сакав.

Подоцна открив дека колку е поспецифичен описот, толку е подобар ефектот.

На пример:

Лош опис: "Направи ми страница за најавување"

Добар опис: "Направи ми едноставна страница за најавување, со лого на врвот, поле за внесување е-пошта и лозинка во средината и копче за најавување на дното, во стилот на официјалната веб-страница на Apple"

2) Можете да прикачите референтни слики

Ако видите добар дизајн на некоја веб-страница, можете да направите скриншот и да го прикачите на AI за да го користи како референца.

Дизајнот што ќе се генерира ќе биде поблиску до вашите очекувања.

3) Итерацијата е поважна од тоа да се направи сè одеднаш

Не очекувајте да генерирате совршен дизајн одеднаш, тоа не е реално.

Правилниот начин е: прво генерирајте груб дизајн, а потоа прилагодувајте го малку по малку.

Прилагодувајте само едно или две места секој пат, на пример, "Растојанието нека биде поголемо", "Бојата нека биде поблага", тоа е најефикасно.

4) Квалитетот на кодот е пристоен

Пробав неколку пати и открив дека генерираниот код е со прилично висок квалитет:

Структурата на кодот е јасна

Степенот на реставрација на стилот е висок (98% +)

Респонзивниот распоред е исто така добро направен

Во основа, може да се користи со мали измени.

05. Неколку точки на кои треба да се внимава

Иако Pencil е многу корисен, има некои работи на кои треба да се внимава:

1) Естетиката сепак зависи од вас

AI може да ви помогне да генерирате дизајн, но дали е добар или не, треба сами да процените.

Затоа, гледајте повеќе добри дизајни во текот на неделата за да ја подобрите вашата естетика, за да можете да дадете подобри упатства кога го користите Pencil.

Препорачувам неколку места каде што можете да најдете дизајнерски референци:

Dribbble

Mobbin (специјализиран за собирање на мобилен UI)

Слики од екранот на различни одлични веб-страници

2) Комплексните интеракции сепак треба сами да ги напишете

Pencil е погоден за правење статични страници и конвенционални интеракции, но ако се вклучени сложени анимации, гестови итн., сепак треба сами да напишете код.

Но, за повеќето сценарија, Pencil е веќе доволен.

3) Изборот на вистинскиот AI модел е многу важен

Пробав неколку модели и открив дека Claude Opus 4.5 има најдобра визуелна изведба.

Ако користите други модели, квалитетот на дизајнот што ќе се генерира може да биде полош.

06. Податоци за споредба на ефикасноста

На крајот, споделувам група податоци што сами ги тестирав:

За мене, најголемата вредност е: да ја префрлам енергијата од "како да се имплементира" на "кои функции да се направат".

07. Заклучок

Pencil во суштина ги поврзува дизајнот и развојот, овозможувајќи ви да го водите целиот процес со природен јазик.

Ако исто така се занимавате со развој на предниот дел, правите свои производи, топло препорачувам да го пробате Pencil:Код со стабилен квалитет: 98%+ прецизност на репродукција, во основа нема потреба од прилагодување на стиловите

Поддршка за повеќе технологии: Next.js, Flutter, Vue, итн. се поддржани

Управувано од природен јазик: Опишете ги барањата со човечки зборови, а AI автоматски генерира код

Конечно, ако и вие се занимавате со независен развој, AI програмирање, добредојдени сте да оставите коментар за да разговараме:

Како обично правите дизајн?

Дали сте го користеле Pencil? Какви се резултатите?

Ќе го прочитам секој коментар внимателно. Се гледаме во следната статија.