Pencil MCP: Projekt graficzny zmienia się w kod w kilka sekund, wydajność programowania front-end wzrasta 8-krotnie

Witam wszystkich, jestem Liang Xiao, który tworzy produkty na rynki zagraniczne. Zaraz Nowy Rok, więc przed Nowym Rokiem opublikuję artykuł, aby podzielić się z Wami moimi najnowszymi osiągnięciami.

Czy podczas tworzenia stron internetowych lub aplikacji miałeś kiedyś takie uczucie:

Chcę stworzyć ładną stronę, ale moje umiejętności projektowania są słabe

Znalezienie projektanta jest zbyt drogie, a darmowe szablony nie pasują

Z trudem dopracowuję projekt graficzny, a jego przekształcenie w kod to kolejna masa problemów

Mówiąc szczerze, kiedyś, pracując nad projektami front-end, potrafiłem spędzić pół dnia na dopasowywaniu stylów do projektu graficznego. Odstęp o 2 piksele za mały, kolor nie do końca odpowiedni, zapomniałem dodać zaokrąglenia... Powtarzanie tego w kółko było strasznie irytujące.

Dobra wiadomość: teraz, dzięki Pencil MCP, te problemy można w zasadzie rozwiązać.

Ostatnio użyłem go do stworzenia kilku stron i okazało się, że jest naprawdę świetny – od projektu graficznego do kodu, wydajność wzrosła kilkukrotnie. A co najważniejsze, projekty graficzne generowane przez AI są całkiem dobrej jakości, a wierność odwzorowania kodu jest również bardzo wysoka.

Ten artykuł opowie o tym: czym właściwie jest Pencil, dlaczego warto go używać i jak szybko zacząć.

01. Czym jest Pencil? Wyjaśnienie prostym językiem

Prosto mówiąc, Pencil to narzędzie, które łączy projektowanie i kod.

Wcześniej proces wyglądał tak:

Tworzenie projektu graficznego w Figma

Projektant zaznacza wymiary, kolory, odstępy

Programista pisze kod linia po linii na podstawie projektu graficznego

Po napisaniu porównuje się z projektem graficznym i okazuje się, że wierność odwzorowania wynosi tylko 70-80%

Powtarzające się poprawki, komunikacja...

Rozwiązanie Pencil:

Wystarczy opisać wymagania językiem naturalnym (np. „Zaprojektuj mi odtwarzacz muzyki w stylu Apple”), a AI wygeneruje projekt graficzny bezpośrednio na płótnie, a następnie jednym kliknięciem wygeneruje odpowiadający mu kod (obsługiwane są Next.js, Flutter, Vue itp.).

Co więcej, co zadziwiające, możesz projektować i dostosowywać jednocześnie. Na przykład:

„Za dużo fioletu, zmień na trochę zieleni”

„Zwiększ odstępy”

„Zainspiruj się stylem tej strony”

AI pomoże Ci dostosować projekt i kod w czasie rzeczywistym, bez konieczności robienia czegokolwiek samodzielnie.

02. Dlaczego uważam, że warto używać Pencil?

1) Wydajność jest naprawdę wysoka

Tradycyjna metoda tworzenia projektu graficznego strony może zająć 4-6 godzin. Z Pencil można to zrobić w 20-40 minut.

A wierność odwzorowania kodu może sięgać 98%+, więc w zasadzie nie trzeba już dopasowywać stylów.

Sam spróbowałem i stworzenie prostej strony Landing Page, od projektu do kodu, zajęło mi w sumie około pół godziny.

2) Stabilna jakość projektu

Wcześniej, gdy pozwalałem AI generować projekty graficzne, często spotykałem się z takimi problemami:

Niespójna kolorystyka

Chaotyczne odstępy

Niejednolita wielkość czcionki

Pencil ma wbudowany system projektowania i standardy estetyczne, dzięki czemu generowane projekty graficzne są stosunkowo stabilnej jakości. Choć niekoniecznie idealne, to przynajmniej nie są zbyt brzydkie.

3) Obsługa wielu stosów technologicznych

Niezależnie od tego, czy tworzysz w Next.js, Flutter, Vue czy SwiftUI, Pencil może automatycznie generować odpowiadający mu kod.

To naprawdę wygodne dla kogoś takiego jak ja, kto zajmuje się tworzeniem na wiele platform – jeden projekt graficzny, a kod dla wielu platform jest gotowy.

03. Jak zainstalować i używać Pencil?

Poniżej podzielę się moim własnym procesem instalacji i użytkowania, który powinien być obecnie najprostszy.

Krok pierwszy: Zainstaluj Pencil MCP

Wyszukaj „pencil” bezpośrednio w swoim IDE (VS Code, Cursor itp.)

Kliknij, aby zainstalować, nie pobieraj z innych miejsc (aby uniknąć pobrania pirackiej wersji)

Uwaga: Wyszukiwanie bezpośrednio w IDE jest najbezpieczniejszym sposobem.

Krok drugi: Pozwól AI pomóc Ci w konfiguracji

Jak skonfigurować po instalacji?

Mówiąc szczerze, na początku też nie bardzo rozumiałem. Później odkryłem, że najprostszym sposobem jest: po prostu pozwól AI Ci pomóc.

Otwórz swojego asystenta programowania AI (Claude Code lub Codex) i powiedz mu:

Zainstalowałem już MCP o nazwie „pencil” w tym IDE, skonfiguruj go tak, aby moje Claude Code, Codex i VS Code mogły korzystać z tego MCP

A następnie poczekaj, aż Ci pomoże w konfiguracji.

Krok trzeci: Zacznij projektować za pomocą Pencil

Po konfiguracji zobaczysz ikonę ołówka po lewej stronie IDE, kliknij ją, aby otworzyć płótno Pencil.

Następnie w okienku dialogowym AI po prawej stronie powiedz mu, jaki projekt chcesz.

Na przykład:

"Zaprojektuj dla mnie odtwarzacz muzyczny w stylu Apple"

"Stwórz prostą stronę docelową, której głównym kolorem jest niebieski"

"Zrób coś podobnego w stylu tej strony internetowej, pomóż mi"

AI wygeneruje projekt na płótnie. Jeśli nie jesteś zadowolony, możesz poprosić go o dalsze dostosowanie:

"Czcionka jest za mała, powiększ ją trochę"

"Zwiększ odstępy"

"Użyj bardziej stonowanego koloru"

Dostosowuj, aż będziesz zadowolony.

Krok czwarty: Generowanie kodu

Gdy projekt jest gotowy, możesz poprosić AI o wygenerowanie kodu.

Możesz po prostu powiedzieć:

"Wygeneruj kod Next.js"

"Wygeneruj kod Flutter"

"Wygeneruj kod Vue 3"

AI automatycznie wygeneruje odpowiedni kod na podstawie Twojego projektu.

Rzeczywisty efekt:

04. Kilka praktycznych doświadczeń z użytkowania

Po kilku użyciach mam kilka przemyśleń, którymi chciałbym się podzielić:

1) Opisuj wymagania konkretnie

Na początku mówiłem "Zrób dla mnie stronę internetową", ale to, co wygenerował AI, wcale nie było tym, czego chciałem.

Potem odkryłem, że im bardziej szczegółowy opis, tym lepszy efekt.

Na przykład:

Zły opis: "Zrób dla mnie stronę logowania"

Dobre opis: "Zrób dla mnie prostą stronę logowania z logo na górze, polami wprowadzania adresu e-mail i hasła pośrodku oraz przyciskiem logowania na dole, w stylu strony Apple"

2) Możesz przesłać obrazy referencyjne

Jeśli widzisz projekt strony internetowej, który Ci się podoba, możesz zrobić zrzut ekranu i przesłać go do AI, aby się nim zainspirował.

W ten sposób wygenerowany projekt będzie bliższy Twoim oczekiwaniom.

3) Iteracja jest ważniejsza niż osiągnięcie celu za jednym razem

Nie myśl o wygenerowaniu idealnego projektu za jednym razem, to nierealne.

Właściwym sposobem jest: najpierw wygenerować ogólny zarys, a następnie dostosowywać go krok po kroku.

Dostosowuj tylko jedną lub dwie rzeczy na raz, na przykład "Zwiększ odstępy" "Użyj bardziej stonowanego koloru", to najskuteczniejszy sposób.

4) Jakość kodu jest całkiem dobra

Próbowałem kilka razy i jakość wygenerowanego kodu jest całkiem wysoka:

Struktura kodu jest przejrzysta

Stopień odtworzenia stylów jest wysoki (98% +)

Układ responsywny również jest dobrze zrobiony

Zasadniczo można go użyć po niewielkich modyfikacjach.

05. Kilka punktów, na które należy zwrócić uwagę

Mimo że Pencil jest bardzo przydatny, jest kilka rzeczy, o których należy pamiętać:

1) Estetyka nadal zależy od Ciebie

AI może pomóc w wygenerowaniu projektu, ale to, czy jest on ładny, zależy od Twojej oceny.

Więc regularnie oglądaj dobre projekty, aby poprawić swoją estetykę, aby móc udzielać lepszych wskazówek podczas korzystania z Pencil.

Oto kilka miejsc, w których można znaleźć inspiracje projektowe:

Dribbble

Mobbin (specjalizuje się w zbieraniu interfejsów użytkownika dla urządzeń mobilnych)

Zrzuty ekranu różnych doskonałych stron internetowych

2) Złożone interakcje nadal musisz pisać sam

Pencil nadaje się do tworzenia stron statycznych i konwencjonalnych interakcji, ale jeśli chodzi o złożone animacje, gesty itp., nadal musisz pisać kod samodzielnie.

Jednak w większości przypadków Pencil jest wystarczający.

3) Wybór odpowiedniego modelu AI jest bardzo ważny

Próbowałem kilku modeli i odkryłem, że Claude Opus 4.5 ma najlepszą wydajność wizualną.

Jeśli używasz innych modeli, jakość wygenerowanego projektu może być gorsza.

06. Dane porównawcze dotyczące wydajności

Na koniec podzielę się zestawem danych, które sam przetestowałem:

WskaźnikTradycyjna metodaUżywanie PencilPoprawa wydajnościTworzenie projektu4-6 godzin20-40 minut8 razyStopień odtworzenia kodu70%-85%98%+Czas debugowaniaZmniejszony o 90%Adaptacja do wielu platformWymaga powtarzalnego rozwojuAutomatyczne generowanieOszczędność 75% czasuDla mnie największą wartością jest: przeniesienie energii z "jak to zrealizować" na "jaką funkcję zrobić".

07. Podsumowanie

Pencil zasadniczo łączy projektowanie i rozwój, umożliwiając sterowanie całym procesem za pomocą języka naturalnego.

Jeśli również zajmujesz się tworzeniem front-endu, tworzeniem własnych produktów, gorąco polecam wypróbowanie Pencil:Stabilna jakość kodu: wierność odwzorowania 98%+, w zasadzie bez potrzeby dostrajania stylów

Obsługa wielu stosów technologicznych: Next.js, Flutter, Vue itp. – wszystko działa

Sterowanie językiem naturalnym: opisz wymagania ludzkim językiem, a AI automatycznie wygeneruje kod

Na koniec, jeśli również zajmujesz się niezależnym rozwojem oprogramowania lub programowaniem AI, zapraszam do dyskusji w komentarzach:

Jak zwykle projektujesz?

Używałeś Pencil? Jakie są efekty?

Uważnie przeczytam każdy komentarz. Do następnego razu.