Pencil MCP: Дизайныг шууд код болгож, фронт-энд хөгжүүлэлтийн үр ашгийг 8 дахин нэмэгдүүлнэ

Сайн байцгаана уу, би гадаад зах зээлд зориулсан бүтээгдэхүүн гаргадаг Лян Сяо байна. Удахгүй шинэ жил болох гэж байгаа тул жилийн эцсээр хамгийн сүүлийн үеийн ололт амжилтаа та бүхэнтэй хуваалцах гэж байна.

Вэб хуудас, App хийх үед танд ийм мэдрэмж төрж байсан уу?

• Сайхан хуудас хийхийг хүсч байна, гэхдээ өөрөө дизайн хийж чадахгүй.
• Дизайнер хөлслөх нь хэтэрхий үнэтэй, үнэгүй загвар олоход тохиромжгүй.
• Дизайн бэлэн болсон ч кодыг нь гаргахад асуудал их гардаг.

Үнэнийг хэлэхэд, би өмнө нь фронт-энд төсөл дээр ажиллахдаа дизайны дагуу стилийг тааруулахад хагас өдрийг зарцуулдаг байсан. Зай 2px-ээр зөрүүтэй, өнгө нь таарахгүй, бөөрөнхий ирмэг нэмэхээ мартчихсан гэх мэтээр дахин дахин засаж залруулсаар залхмаар санагддаг байсан.

Сайн мэдээ гэвэл: Одоо 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 харилцах цонхонд ямар загвар хүсч байгаагаа хэлнэ үү.

Жишээ нь:

"Надад алимны загвартай хөгжим тоглуулагч зохиож өгөөч"

"Цэнхэр өнгийн гол өнгөтэй, энгийн Landing Page хийж өгөөч"

"Энэ вэбсайтын загварыг ашиглан үүнтэй төстэй загвар хийж өгөөч"

AI нь зураг дээр загвар үүсгэх болно. Хэрэв танд таалагдахгүй бол үргэлжлүүлэн тохируулах боломжтой:

"Үсгийн хэмжээ хэтэрхий жижиг байна, томруулж өгөөч"

"Зайг нь томруулж өгөөч"

"Илүү зөөлөн өнгөөр сольж өгөөч"

Таалагдах хүртлээ тохируулна уу.

Дөрөвдүгээр алхам: Код үүсгэх

Загварыг бэлэн болгосны дараа AI-аар код үүсгүүлж болно.

Та шууд хэлж болно:

"Надад Next.js код үүсгэж өгөөч"

"Flutter код үүсгэж өгөөч"

"Vue 3 код үүсгэж өгөөч"

AI нь таны загварын дагуу автоматаар холбогдох кодыг үүсгэх болно.

Бодит үр дүн:

04. Бодит хэрэглээний туршлага

Хэд хэдэн удаа ашигласны дараа хуваалцах хэд хэдэн мэдрэмж байна:

1) Хэрэгцээгээ тодорхой тайлбарлах

Эхэндээ би "Надад вэбсайт хийж өгөөч" гэж хэлсэн, гэтэл AI-ийн үүсгэсэн зүйл надад огт таалагдаагүй.

Дараа нь тайлбар хэдий чинээ тодорхой байх тусам үр дүн нь төдий чинээ сайн байхыг олж мэдсэн.

Жишээ нь:

Муу тайлбар: "Надад нэвтрэх хуудас хийж өгөөч"

Сайн тайлбар: "Надад энгийн нэвтрэх хуудас хийж өгөөч, дээд талд Logo, дунд хэсэгт имэйл болон нууц үгийн талбар, доод талд нэвтрэх товчлуур, загвар нь 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 ашиглаж байсан уу? Үр дүн нь ямар байсан бэ?

Би сэтгэгдэл бүрийг анхааралтай уншина. Дараагийн нийтлэлээр уулзацгаая.