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 орнату

Тікелей IDE-де (VS Code, Cursor және т.б.) "pencil" деп іздеңіз

Орнатуды басыңыз, басқа жерден жүктемеңіз (жалған нұсқаны жүктеп алудан сақтаныңыз)

Ескерту: Тікелей IDE-де іздеу – ең қауіпсіз тәсіл.

Екінші қадам: AI сізге конфигурациялауға көмектессін

Орнатқаннан кейін қалай конфигурациялау керек?

Шынымды айтсам, басында мен де түсінбедім. Кейін ең қарапайым жолы – AI-ға конфигурациялауға көмектесу екенін байқадым.

AI бағдарламалау көмекшісін (Claude Code немесе Codex) ашыңыз, оған былай деңіз:

Мен осы IDE-ге "pencil" деген MCP орнаттым, маған 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. Тиімділікті салыстыру деректері

Соңында, өзімнің нақты өлшенген деректерімнің жиынтығын бөлісемін:

Көрсеткіштер дәстүрлі әдіс Pencil тиімділігін арттыру Дизайн жобасын жасау 4-6 сағат 20-40 минут 8 есе Кодты қалпына келтіру дәрежесі 70%-85% 98%+ Қателерді түзету уақытын 90%-ға азайту Көп терминалды бейімдеуді қайта әзірлеу қажет Автоматты түрде жасау 75% уақытты үнемдейді Мен үшін ең үлкен құндылық: күш-жігерді "қалай жүзеге асыруға" емес, "қандай функцияларды жасауға" аудару.

07. Қорытынды

Pencil негізінен дизайн мен әзірлемені біріктіреді, бұл бүкіл процесті табиғи тілмен басқаруға мүмкіндік береді.

Егер сіз де фронтенд әзірлеумен айналыссаңыз, өз өнімдеріңізді жасасаңыз, Pencil-ді сынап көруге кеңес беремін:Код сапасы тұрақты: 98%+ дәлдік, стильді реттеудің қажеті жоқ деуге болады

Көптеген технологиялық стектерді қолдайды: Next.js, Flutter, Vue және т.б. бәрін қолдануға болады

Жаратылыстану тілімен басқарылады: Сұранысты қарапайым тілмен сипаттаңыз, AI автоматты түрде жасайды

Соңында, егер сіз де тәуелсіз әзірлеумен, AI бағдарламалаумен айналыссаңыз, пікір қалдыруға шақырамын:

Сіз әдетте дизайнды қалай жасайсыз?

Pencil-ді қолдандыңыз ба? Нәтижесі қандай?

Мен әрбір пікірді мұқият оқимын. Келесі мақалада кездескенше.