Энэ нийтлэлийг Penpot ивээн тэтгэсэн болно Таны Penpot файл нь дизайнаас гадна зарим дүрсийг ашигладаг боловч бүх дүрсийг ашигладаггүй гэж төсөөлөөд үз дээ. Хэрэв та Claude эсвэл Gemini зэрэг хиймэл оюун ухаанаас зөвхөн ашиглаж байгаа дүрсүүдийг экспортлохыг хүсэх юм бол тэр үүнийг хийх боломжгүй. Энэ нь Penpot файлуудтай харилцах боломжгүй. Гэсэн хэдий ч Penpot MCP сервер боломжтой. Энэ нь тогтоосон дүрэм, зөвшөөрлийн дагуу сонгогдсон тооны үйлдлүүдийг гүйцэтгэх боломжтой, ялангуяа Penpot нь өргөн API-тай, тэр ч байтугай нээлттэй эх сурвалжтай учраас илүү олон үйлдэл хийх боломжтой. AI-ийн ажил бол зүгээр л таны зорилгыг ойлгох, MCP серверийн гүйцэтгэх зөв үйлдлийг сонгох (энэ тохиолдолд экспорт хийх) болон аливаа параметрүүдийг (жишээ нь, ашиглаж буй дүрс) дамжуулах явдал юм. Дараа нь MCP сервер үүнийг бүтэцлэгдсэн API хүсэлт болгон хөрвүүлж, гүйцэтгэнэ. Энэ нь хиймэл оюун ухааныг таны захиалгыг хүлээн авдаг рестораны сервер, MCP серверийг цэс болон тогооч, API хүсэлтийг (найдаж) дулаан тавган дээрх халуун пицца гэж үзэхэд тустай байж болох юм. Яагаад MCP серверүүд вэ? Penpot нь LLM биш учраас таны зорилгыг ойлгох боломжгүй, мөн гуравдагч этгээдийн LLM-д таны Penpot өгөгдлийн аюулгүй байдал, нууцлалыг хангах үүднээс Penpot файлуудтай харилцахыг зөвшөөрдөггүй. Хэдийгээр Penpot MCP серверүүд нь аюулгүй гүүр болж ажилладаг ч таны Penpot файлууд болон өгөгдлийг контекст болгон ашиглан хиймэл оюун ухааны зорилгыг API хүсэлт болгон хөрвүүлдэг. Пенпот нь дизайныг код болгон илэрхийлдэг тул дизайныг программчлан үүсгэж, засварлаж, нарийн түвшинд дүн шинжилгээ хийх боломжтой байдаг нь илүү дээр юм. Энэ нь бусад MCP серверүүдийн санал болгож буй зүйлтэй харьцуулахад илүү контекст, илүү тодорхой, тиймээс илүү хүчирхэг бөгөөд "Тодорхойлох → Үүсгэх" AI ажлын урсгалаас хамаагүй илүү бодолтой байдаг бөгөөд үүнийг хэн ч хүсэхгүй байна. Penpot-ийн AI-ийн танилцуулгад үүнийг муу хандлага, "Код руу хөрвүүлэх" аргыг муухай арга гэж тодорхойлсон бол MCP серверүүд илүү боловсронгуй, дасан зохицох чадвартай байдаг. Онцлогууд ба техникийн дэлгэрэнгүй мэдээлэл Бид кейсүүдийг ашиглахаасаа өмнө Penpot MCP серверүүд хэрхэн ажилладгийг тайлбарлах зарим онцлог, техникийн дэлгэрэнгүй мэдээллийг энд оруулав.
MCP стандартыг дагаж мөрдөх; Бодит цагийн дизайны өгөгдөлд зориулж Penpot API-тай нэгтгэдэг; Python SDK, REST API, залгаасын систем, CLI хэрэгслүүд багтана; MCP-ийг дэмждэг аливаа хиймэл оюун ухааны туслахтай ажилладаг (VS код дахь Клауд, курсор дахь Клауд, Клод Ширээний компьютер гэх мэт); AI загваруудтай дизайны нөхцөлийг хуваалцахыг дэмжиж, бүрэлдэхүүн хэсгүүдийг харж, ойлгох боломжийг олгодог; Байгалийн хэлээр Penpot-той харилцах боломжийг хөнгөвчилдөг.
Тэгвэл MCP серверүүд бидэнд Penpot-д юу хийж чадах вэ, одоо байгаа туршилтууд юунд хүрсэн бэ? Ингээд харцгаая. Penpot MCP серверийн хэрэглээний тохиолдол Хэрэв та Penpot MCP серверүүд юу хийж чадахыг алгасахыг хүсч байвал Penpot-д Google Drive-д хэдэн MCP demo хадгалсан байгаа бөгөөд үүнийг үзэхээс ч илүүдэхгүй. Penpot-ийн гүйцэтгэх захирал Пабло Руиз-Музкиз 03, 04, 06, 08, 12-р видеонууд нь тэдний дуртай видеонууд гэдгийг дурджээ. MCP серверүүдийг нэгтгэн дүгнэх илүү хурдан арга бол Penpot Fest 2025-ийн нээлтийг үзэх явдал юм. Үгүй бол Пенпотын олон нийтэд дэлгэн үзүүлсэн илүү боловсронгуй жишээнүүдийг харцгаая. Дизайн-код болон дахин (болон бусад) Penpot дизайныг хэрхэн код болгон илэрхийлдэг талаар миний өмнө хэлсэн зүйлээс харахад энэ нь MCP серверүүдийг хиймэл оюун ухаан ашиглан дизайныг код болгон хөрвүүлэхэд ашиглаж болохоос гадна дизайн хийхэд код, дизайныг баримт бичиг болгон хувиргах, системийн элементүүдийг дизайн хийхэд баримтжуулалт, дээрх дизайны системд суурилсан дахин код болгон дизайн хийх, дараа нь дээрх дизайны системд суурилсан цоо шинэ бүрэлдэхүүн хэсгүүдийг ашиглах боломжтой гэсэн үг юм. Энэ нь үнэхээр гайхалтай сонсогдож байгаа ч доорх үзүүлэн нь энэхүү хувиргах чадварыг харуулж байгаа бөгөөд энэ нь тодорхой бус зааварчилгаанаас биш харин өмнөх дизайны сонголтуудыг хэрхэн илэрхийлснээс үл хамааран (дизайн, код эсвэл баримт бичиг) юм. Гайхах зүйл байхгүй - эдгээр нь зүгээр л өмнөх шийдвэрүүд дээр үндэслэн хурдан шуурхай гүйцэтгэсэн шийдвэрүүд юм. Үзүүлэн дээр, Хуан де ла Круз Гарсиа, Penpot-ийн дизайнер, зарим энгийн бүрэлдэхүүн хэсгүүдийг баримт бичиг, дизайны системийн элементүүд, код, шинэ бүрэлдэхүүн хэсгүүд, тэр ч байтугай Play-Doh-ийн нэг хэсэг шиг бүрэн түүх номын төсөл болгон хувиргадаг. Дизайн-код, дизайн/кодын баталгаажуулалт, энгийн үйлдлүүд Доорх ижил төстэй үзүүлэн дээр Oraios AI-ийн үүсгэн байгуулагч Доминик Жэйн урд талын загваруудыг шинэчлэхийн өмнө дизайн дээр суурилсан Node.js вэб програмыг бүтээж, дизайнаас код руу хөрвүүлэхийн тулд тэдгээрийн нийцтэй байдлыг шалгахын тулд нэр, танигчийг санах ойд хадгалдаг.Penpot дахь сонгосон дүрсний хажууд тайлбар бичиж, Penpot дахь сараачийг тохируулсан бүрэлдэхүүнээр солино. Энд маш их зүйл болж байна, гэхдээ та Доминик Клодын ширээний компьютерт яг юу бичиж байгааг, мөн Клодын хариултыг харж болно, энэ нь маш бат бөх юм: Дашрамд хэлэхэд, өмнөх үзүүлбэр нь Клодыг VS Code-д ашигласан тул Penpot MCP серверүүд нь LLM-агностик шинж чанартай байдаг гэдгийг анхаарах хэрэгтэй. Таны технологийн стек танд бүрэн хамаарна. IvanTheGeek MCP серверээ JetBrains Rider IDE болон Junie AI ашиглан тохируулж чадсан. Илүү олон хэрэглээний тохиолдол Аливаа Penpot дизайны токенуудыг ашиглахын зэрэгцээ Penpot самбарыг үйлдвэрлэлд бэлэн семантик HTML болон модульчлагдсан CSS болгон хөрвүүлээрэй (Penpot дизайныг аль хэдийн код хэлбэрээр илэрхийлсэн тул энэ нь харанхуйд буусан зураг биш гэдгийг санаарай): Одоо байгаа HTML-г өөрчлөхгүйгээр интерактив вэб прототип үүсгэх: Өмнө үзүүлсэнчлэн, одоо байгаа дизайн ба/эсвэл дизайны системийн элементүүдийг ашиглан сараач бичгийг бүрэлдэхүүн хэсэг болгон хөрвүүлээрэй. Penpot файлаас дизайны системийн баримт бичгийг үүсгэх: Пенпот болон нийгэмлэгийн хэрэглээний зарим жишээг энд оруулав.
Дэвшилтэт экспорт, Байгалийн хэлээр дизайны элементүүдийг хайх, Байгалийн хэлийг ашиглан гадны API-аас өгөгдөл татах, Penpot-ийг бусад гадаад хэрэгсэлд хялбархан холбох, Дахин давтагдах даалгавруудыг санах ойд хадгалах, гүйцэтгэх, Харааны регрессийн тест, Дизайн тууштай байдал, илүүдлийг шалгах, Хүртээмж, ашиглах боломжтой байдлын шинжилгээ, санал хүсэлт, Дизайн системийн нийцлийг шалгах, Зааварт нийцэж байгаа эсэхийг шалгах (брэнд, контент гэх мэт), Дизайн аналитик ашиглан хэрэглээ, хэрэглээг хянах, Баримт бичгийг дизайнтай автоматаар синхрончлох, Дизайн файлын зохион байгуулалт (жишээ нь, шошго/ангилах).
Үндсэндээ Penpot MCP серверүүд нь таны сонгосон LLM/LLM үйлчлүүлэгчийн үр ашиг, хялбар байдлын ачаар хязгааргүй олон тооны ажлын урсгалд хүргэдэг боловч таны өгөгдлийг үүн дээр харуулахгүй. Та MCP серверүүдийг юунд ашиглах вэ? Penpot MCP серверүүд бета шатандаа ч ороогүй байгаа ч энэ нь таны нэг хэсэг байж болох идэвхтэй туршилт юм. Penpot хэрэглэгчид MCP серверт ашиглах тохиолдлуудыг аль хэдийн судалж эхэлсэн боловч Penpot илүү ихийг харахыг хүсч байна. Дараагийн үеийн дизайны хэрэгслүүд нь дизайнерууд, хөгжүүлэгчид, ерөнхийдөө бүтээгдэхүүний багуудын хэрэгцээг хангахын тулд тэдгээрийг хамтын болон хамтран бүтээх ёстой, ялангуяа хиймэл оюун ухаантай холбоотой. Тэмдэглэл: Penpot нь Penpot-ийн MCP серверийг судлах, турших, сайжруулахад нь туслах хүсэлтэй бета тестерүүдийг хайж байна. Нэгдэхийн тулд support@penpot.app хаяг руу "MCP бета тестийн сайн дурын ажилтан" гэсэн гарчигтай бичнэ үү. Penpot MCP серверүүд одоогийн хэрэглүүрүүд хангалттай сайн, хангалттай хурдан ажиллахгүй эсвэл огт хийх боломжгүй гэж та бодож байгаа зүйл байна уу? Та яг эндээс Penpot MCP серверийг хэрхэн тохируулах талаар суралцаж, өнөөдрөөс эхлэн оролдож эхлэх боломжтой, эсвэл таны тархинд аль хэдийн санаанууд эргэлдэж байгаа бол Пенпот таныг хэлэлцүүлэгт нэгдэж, санал хүсэлтээ хуваалцаж, хэрэглээнийхээ талаар ярихыг хүсч байна. Өөрөөр хэлбэл, доорх тайлбар хэсэг нь эхлэхэд тийм ч муу газар биш юм!
