Pencil MCP: Дизайн-макет миттєво перетворюється на код, ефективність фронтенд-розробки зростає у 8 разів

Всім привіт, я Лян Сяо, який робить продукти для виходу на міжнародний ринок. Скоро Новий рік, тож перед святами поділюся з вами своїми останніми здобутками.

Коли ви робите веб-сторінки або додатки, чи відчували ви коли-небудь таке:

Хочете зробити гарну сторінку, але самі не вмієте проектувати Пошук дизайнера занадто дорогий, а безкоштовні шаблони не підходять Нарешті отримали дизайн-макет, але перетворення його на код – це купа проблем Чесно кажучи, коли я раніше робив фронтенд-проекти, то міг пів дня налаштовувати стилі відповідно до дизайн-макету. Відстань відрізняється на 2 пікселі, колір не зовсім той, радіус заокруглення забули додати... Знову і знову, це жахливо.

Хороша новина: тепер є Pencil MCP, і ці проблеми в основному можна вирішити.

Нещодавно я використовував його для створення кількох сторінок і виявив, що він дійсно чудовий – ефективність переходу від дизайн-макету до коду зросла в кілька разів. І найголовніше, якість дизайн-макету, згенерованого штучним інтелектом, досить непогана, а точність відтворення коду також дуже висока.

У цій статті ми поговоримо про те, що таке Pencil, чому його варто використовувати і як швидко почати ним користуватися.

01. Що таке Pencil? Пояснюємо простими словами

Простіше кажучи, Pencil – це інструмент, який може поєднати дизайн і код.

Раніше процес виглядав так:

Створення дизайн-макету у Figma Дизайнер позначає розміри, кольори, відстані Розробник пише код рядок за рядком відповідно до дизайн-макету Після написання порівнюють з дизайн-макетом і виявляють, що точність відтворення становить лише 70-80% Постійне коригування, спілкування...

Рішення Pencil:

Вам просто потрібно описати вимоги природною мовою (наприклад, «допоможіть мені розробити музичний плеєр у стилі Apple»), і штучний інтелект зможе безпосередньо згенерувати дизайн-макет на полотні, а потім одним клацанням миші згенерувати відповідний код (підтримуються Next.js, Flutter, Vue тощо).

І що дивно, ви можете коригувати дизайн на ходу. Наприклад:

«Занадто багато фіолетового, додайте трохи зеленого» «Збільште відстань» «Зверніться до стилю цього веб-сайту» Штучний інтелект допоможе вам коригувати дизайн і код у режимі реального часу, вам зовсім не потрібно робити це самостійно.

02. Чому я думаю, що Pencil варто використовувати?

1) Ефективність дійсно висока

Традиційний спосіб створення дизайн-макету сторінки може зайняти 4-6 годин. З Pencil це можна зробити за 20-40 хвилин.

І точність відтворення коду може досягати 98%+, вам майже не потрібно налаштовувати стилі.

Я сам спробував і зробив просту цільову сторінку. Від дизайну до коду все було зроблено приблизно за півгодини.

2) Стабільна якість дизайну

Раніше, коли штучний інтелект генерував дизайн-макет, часто виникали такі проблеми:

Незбалансована колірна схема Безладні відстані Неоднорідний розмір шрифту Pencil має власну систему дизайну та естетичні стандарти, тому якість згенерованого дизайн-макету відносно стабільна. Хоча це не обов'язково ідеально, але принаймні не надто потворно.

3) Підтримка різних технологічних стеків

Незалежно від того, чи робите ви Next.js, Flutter, Vue або SwiftUI, Pencil може автоматично генерувати відповідний код.

Це дійсно зручно для таких людей, як я, які займаються розробкою для кількох платформ – один дизайн-макет, і код для кількох платформ готовий.

03. Як встановити та використовувати Pencil?

Нижче я поділюся своїм власним процесом встановлення та використання, який, мабуть, є найпростішим на даний момент.

Крок 1: Встановіть Pencil MCP

Знайдіть «pencil» безпосередньо у вашому IDE (VS Code, Cursor тощо)

Просто натисніть «Встановити», не завантажуйте з інших місць (щоб уникнути завантаження піратської версії)

Примітка: Пошук безпосередньо в IDE – це найбезпечніший спосіб.

Крок 2: Дозвольте штучному інтелекту допомогти вам з налаштуванням

Як налаштувати після встановлення?

Чесно кажучи, я спочатку не дуже розумів. Пізніше я виявив, що найпростіший спосіб – це дозволити штучному інтелекту допомогти вам з налаштуванням.

Відкрийте свого помічника з програмування зі штучним інтелектом (Claude Code або Codex) і скажіть йому:

Я вже встановив MCP «pencil» у цьому IDE, будь ласка, допоможіть мені налаштувати його, щоб мої Claude Code, Codex, VS Code могли використовувати цей MCP

Потім просто дочекайтеся, поки він допоможе вам з налаштуванням.

Крок 3: Почніть використовувати 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 (спеціалізується на зборі мобільних інтерфейсів)

Знімки екрана різних чудових веб-сайтів

2) Складну взаємодію все одно потрібно писати самостійно

Pencil підходить для створення статичних сторінок і звичайної взаємодії, але якщо мова йде про складні анімації, жести тощо, вам все одно потрібно писати код самостійно.

Однак для більшості сценаріїв Pencil вже достатньо.

3) Вибір правильної моделі AI дуже важливий

Я спробував кілька моделей і виявив, що Claude Opus 4.5 має найкращу візуальну продуктивність.

Якщо ви використовуєте інші моделі, якість згенерованого макету може бути гіршою.

06. Дані порівняння ефективності

Нарешті, поділюся набором даних, які я перевірив сам:

Для мене найбільша цінність полягає в тому, щоб перенести зусилля з "як реалізувати" на "які функції робити".

07. Підсумок

Pencil, по суті, об'єднує дизайн і розробку, дозволяючи вам керувати всім процесом за допомогою природної мови.

Якщо ви також займаєтесь фронтенд-розробкою, створюєте власний продукт, настійно рекомендую спробувати Pencil: Код стабільної якості: точність відтворення 98%+, практично не потрібно налаштовувати стилі

Підтримка різних технологічних стеків: Next.js, Flutter, Vue тощо можна використовувати

Керування природною мовою: опишіть вимоги людською мовою, AI автоматично генерує

Насамкінець, якщо ви також займаєтесь незалежною розробкою, AI-програмуванням, ласкаво просимо залишити коментар:

Як ви зазвичай робите дизайн?

Ви використовували Pencil? Який ефект?

Я уважно перегляну кожен коментар. До наступної статті.