Pencil MCP：Дизајн се тренутно претвара у код, ефикасност развоја фронтенда се повећава 8 пута

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

Када правите веб странице или апликације, да ли сте икада имали овај осећај:

Желите да направите лепу страницу, али ваш дизајн није добар

Проналажење дизајнера је прескупо, а проналажење бесплатних шаблона није прикладно

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

Искрено, када сам раније радио на фронтенд пројектима, могао сам да подешавам стилове према дизајну пола дана. Размак је за 2 пиксела мањи, боја није сасвим у реду, заборавио сам да додам заобљене углове... Изнова и изнова, то је било ужасно.

Добра вест је: сада са овим 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) и реците му:

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

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

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

Након конфигурисања, видећете икону оловке са леве стране IDE-а, кликните да бисте отворили Pencil платно.

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

На пример:

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

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

"Направите нешто слично овом сајту, користећи његов стил као референцу"

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

"Фонт је премали, увећајте га мало"

"Увећајте размак"

"Промените у нежнију боју"

Наставите да прилагођавате док не будете задовољни.

Четврти корак: Генерисање кода

Када је нацрт дизајна готов, можете дозволити 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:Stabilan kvalitet koda: Preciznost 98%+, uglavnom nema potrebe za podešavanjem stilova

Podrška za više tehnoloških stekova: Next.js, Flutter, Vue, itd. su podržani

Pokretano prirodnim jezikom: Opišite zahteve ljudskim jezikom, AI automatski generiše

Na kraju, ako se i vi bavite samostalnim razvojem, AI programiranjem, dobrodošli ste da ostavite komentar:

Kako obično radite dizajn?

Da li ste koristili Pencil? Kakvi su rezultati?

Pažljivo ću pročitati svaki komentar. Vidimo se u sledećem članku.