{"id":493582,"date":"2026-09-05T19:35:56","date_gmt":"2026-09-05T19:35:56","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=493582"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=493582","title":{"rendered":"\u042f \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b Claude Code \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u044b \u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u0432\u044b\u044f\u0441\u043d\u0438\u043b, \u043d\u0430\u00a0\u0447\u0442\u043e\u00a0\u0443\u0445\u043e\u0434\u044f\u0442 \u0442\u043e\u043a\u0435\u043d\u044b"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u00a0\u043a\u043e\u043d\u0446\u0435 \u043c\u0430\u0440\u0442\u0430 2026\u00a0\u0433\u043e\u0434\u0430 <a href=\"https:\/\/www.figma.com\/blog\/the-figma-canvas-is-now-open-to-agents\/\" rel=\"noopener nofollow\">Figma \u043e\u0442\u043a\u0440\u044b\u043b\u0430 \u043a\u0430\u043d\u0432\u0430\u0441 \u0434\u043b\u044f\u00a0AI\u2011\u0430\u0433\u0435\u043d\u0442\u043e\u0432<\/a>. Claude Code, Codex \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u044b \u0447\u0435\u0440\u0435\u0437 MCP\u2011\u0441\u0435\u0440\u0432\u0435\u0440 Figma.<\/p>\n<p>\u042f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e Claude Code \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0430\u0439\u0442\u043e\u0432 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442 \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u043e\u0438\u0442\u044c. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0438\u0445 \u043d\u0430\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u00a0\u2014 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0434\u0430\u0432\u0430\u0442\u044c \u0435\u043c\u0443\u00a0\u043b\u0438\u0431\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442,\u00a0\u043b\u0438\u0431\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u044f \u0441\u043c\u043e\u0442\u0440\u0435\u043b, \u043a\u0430\u043a\u0438\u0435 \u0448\u0430\u0433\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0430\u0433\u0435\u043d\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u00a0\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u043a\u0435\u043d\u043e\u0432 (\u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0435\u043d\u0435\u0433) \u0442\u0440\u0430\u0442\u0438\u0442.<\/p>\n<p>\u041f\u0440\u0438\u00a0\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441\u00a0Figma MCP \u0430\u0433\u0435\u043d\u0442 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043c\u0430\u043a\u0435\u0442 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript. Claude Code \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 Figma Plugin API \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0444\u0440\u0435\u0439\u043c\u044b \u0438 \u0441\u043b\u043e\u0438, \u0437\u0430\u0434\u0430\u0451\u0442 \u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0446\u0432\u0435\u0442\u0430, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a1e\/36a\/302\/a1e36a30243a4739c4f267cdcd74cd77.png\" alt=\"\u0424\u043b\u043e\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u0438 \u0430\u0433\u0435\u043d\u0442\u0430 \u0441 Figma MCP\" title=\"\u0424\u043b\u043e\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u0438 \u0430\u0433\u0435\u043d\u0442\u0430 \u0441 Figma MCP\" width=\"4000\" height=\"1524\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/a1e\/36a\/302\/a1e36a30243a4739c4f267cdcd74cd77.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a1e\/36a\/302\/a1e36a30243a4739c4f267cdcd74cd77.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0424\u043b\u043e\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u0438 \u0430\u0433\u0435\u043d\u0442\u0430 \u0441\u00a0Figma MCP<\/figcaption><\/div>\n<\/figure>\n<h4>\u041a\u0430\u043a\u00a0\u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442<\/h4>\n<p>\u042f \u0432\u044b\u0431\u0440\u0430\u043b \u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<ul>\n<li>\n<p>Hero\u2011\u0441\u0435\u043a\u0446\u0438\u044e <a href=\"https:\/\/hermes-agent.nousresearch.com\" rel=\"noopener nofollow\">Hermes Agent<\/a><\/p>\n<\/li>\n<li>\n<p>\u0413\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <a href=\"https:\/\/posthog.com\" rel=\"noopener nofollow\">PostHog<\/a><\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d <a href=\"https:\/\/tailwindcss.com\" rel=\"noopener nofollow\">Tailwind CSS<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043b\u044f\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 Hermes \u0438 PostHog \u0432\u00a0\u043f\u0440\u043e\u043c\u043f\u0442 \u0430\u0433\u0435\u043d\u0442\u0443 \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0422\u0430\u043a\u00a0\u0436\u0435 \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u0430\u043f\u043a\u0430 \u0441\u00a0\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u043c\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435\u00a0\u0431\u044b\u043b\u0438 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442\u0435. \u0414\u043b\u044f\u00a0Tailwind \u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0430\u0433\u0435\u043d\u0442\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442: \u0430\u0433\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d\u00a0\u0431\u044b\u043b \u0441\u0430\u043c \u0438\u0437\u0443\u0447\u0438\u0442\u044c HTML \u0438 CSS, \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u0438 \u0441\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043c\u043e\u0434\u0435\u043b\u044c Opus 5\u00a0\u0441\u00a0effort \u043d\u0430\u00a0\u0443\u0440\u043e\u0432\u043d\u0435 high. \u0414\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 \u0441\u00a0Claude Code \u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u0447\u0438\u0441\u0442\u044b\u0439 harness\u00a0\u2014 \u0431\u0435\u0437\u00a0\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043a\u0438\u043b\u043b\u043e\u0432, \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0430\u0433\u0435\u043d\u0442 \u043c\u043e\u0433 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e MCP Figma \u0437\u0430\u00a0\u0441\u0435\u0441\u0441\u0438\u044e.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u043e\u043d\u0430 \u0430\u0433\u0435\u043d\u0442\u0430 \u044f \u0441\u0447\u0438\u0442\u0430\u043b:<\/p>\n<ul>\n<li>\n<p>\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043a\u00a0\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c MCP\u2011\u0432\u044b\u0437\u043e\u0432\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043d\u0430\u00a0\u0430\u043d\u0430\u043b\u0438\u0437 \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u043e \u0441\u00a0\u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u043e\u043c<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0430\u0433\u0435\u043d\u0442\u0430 \u044f \u043d\u0435\u00a0\u0432\u043c\u0435\u0448\u0438\u0432\u0430\u043b\u0441\u044f \u0432\u00a0\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0436\u0434\u0430\u043b \u043f\u043e\u043a\u0430 \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u043e\u0442\u043e\u0432.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u043e\u043c\u043f\u0442\u044b \u0434\u043b\u044f\u00a0\u0430\u0433\u0435\u043d\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0414\u043b\u044f\u00a0\u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0441\u0430\u0439\u0442\u043e\u0432\u00a0\u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043f\u043e\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e:<\/p>\n<blockquote>\n<p>Recreate this landing page section as a design: &lt;Image&gt;. Make exactly one frame of the landing page via Figma MCP. Use the assets folder to get the exact illustrations from the page and place them as is: you may only change their size\u00a0\u2014 no CSS filters, blend modes, recoloring, opacity or cropping. Work in this Figma file: &lt;URL<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430\u00a0\u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043f\u043e\u00a0\u0441\u0441\u044b\u043b\u043a\u0435:<\/p>\n<blockquote>\n<p>Recreate the landing page at &lt;SITE\u2011URL&gt; as a design\u00a0\u2014 the first screen as it looks in the browser at 1440px wide. Make exactly one frame via Figma MCP. Use the real logos and images from the site. Work in this Figma file: &lt;URL&gt;<\/p>\n<\/blockquote>\n<\/div>\n<\/details>\n<h4>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/h4>\n<p>\u041f\u043e\u00a0\u0438\u0442\u043e\u0433\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0440\u0451\u0445 \u0441\u0435\u0441\u0441\u0438\u0439 \u0441\u00a0Figma \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\">\u041e\u0431\u0449\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/p>\n<\/td>\n<td>\n<p align=\"left\">$34,21<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0412\u0440\u0435\u043c\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\">98,5\u00a0\u043c\u0438\u043d\u0443\u0442\u044b<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0422\u043e\u043a\u0435\u043d\u044b<\/p>\n<\/td>\n<td>\n<p align=\"left\">40,6\u00a0\u043c\u043b\u043d<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u00a0\u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u0442\u0430\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u0433\u0435\u043d\u0442\u0430 \u0438 \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437\u00a0\u044d\u0442\u0430\u043f\u043e\u0432:<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p align=\"left\">\u042d\u0442\u0430\u043f<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0410\u043d\u0430\u043b\u0438\u0437 \u0434\u043e\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c<\/p>\n<\/td>\n<td>\n<p align=\"left\">$9,10<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">MCP\u2011\u0432\u044b\u0437\u043e\u0432\u044b<\/p>\n<\/td>\n<td>\n<p align=\"left\">$14,96<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 MCP<\/p>\n<\/td>\n<td>\n<p align=\"left\">$10,15<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0441\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c: MCP\u2011\u0432\u044b\u0437\u043e\u0432\u044b + \u0440\u0430\u0431\u043e\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 MCP<\/p>\n<\/td>\n<td>\n<p align=\"left\">$25,11<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0412\u0441\u044f \u0441\u0435\u0441\u0441\u0438\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\">$34,21<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<ol>\n<li>\n<p><strong>\u0410\u043d\u0430\u043b\u0438\u0437 \u0434\u043e\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u0430<\/strong>\u00a0\u2014 \u0432\u0441\u0435 \u043e\u0442\u0432\u0435\u0442\u044b \u0434\u043e\u00a0\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u0430\u0433\u0435\u043d\u0442 \u043d\u0430\u0447\u0430\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c Figma<\/p>\n<\/li>\n<li>\n<p><strong>MCP\u2011\u0432\u044b\u0437\u043e\u0432\u044b<\/strong>\u00a0\u2014 \u043e\u0442\u0432\u0435\u0442\u044b, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u0433\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u043b MCP\u2011\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u044b, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 MCP<\/strong>\u00a0\u2014 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u043c\u0430\u043a\u0435\u0442\u0430: \u043a\u043e\u043c\u0430\u043d\u0434\u044b Bash, \u0447\u0442\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432<\/p>\n<\/li>\n<\/ol>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u044b<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bbe\/fdb\/090\/bbefdb090060724b7acc5717aaf9c4e9.png\" alt=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 HermesAgent \u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\" title=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 HermesAgent \u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\" width=\"2852\" height=\"3300\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/bbe\/fdb\/090\/bbefdb090060724b7acc5717aaf9c4e9.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bbe\/fdb\/090\/bbefdb090060724b7acc5717aaf9c4e9.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 HermesAgent \u0441\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/856\/318\/895\/856318895575cd3c442ad223ed86d6c9.png\" alt=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 PostHog \u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\" title=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 PostHog \u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\" width=\"3120\" height=\"3530\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/856\/318\/895\/856318895575cd3c442ad223ed86d6c9.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/856\/318\/895\/856318895575cd3c442ad223ed86d6c9.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 PostHog \u0441\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7f6\/16b\/d00\/7f616bd00926a614ad50fe406fa25167.png\" alt=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 Tailwind CSS \u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\" title=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 Tailwind CSS \u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\" width=\"3120\" height=\"4314\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/7f6\/16b\/d00\/7f616bd00926a614ad50fe406fa25167.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7f6\/16b\/d00\/7f616bd00926a614ad50fe406fa25167.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 Tailwind CSS \u0441\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<h4>\u041a\u0430\u043a\u00a0\u044f \u0441\u0447\u0438\u0442\u0430\u043b \u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/h4>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 Claude Code \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043b\u043e\u0433 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSONL. \u0412\u00a0\u043d\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0430\u0433\u0435\u043d\u0442\u0430, \u0432\u044b\u0437\u043e\u0432\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u043b\u0435 <code>usage<\/code> \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u043c\u043e\u0434\u0435\u043b\u0438. \u0418\u0437 <code>usage<\/code> \u044f \u0431\u0440\u0430\u043b \u0447\u0435\u0442\u044b\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<ul>\n<li>\n<p><code>input_tokens<\/code>\u00a0\u2014 \u043d\u043e\u0432\u044b\u0435 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b<\/p>\n<\/li>\n<li>\n<p><code>output_tokens<\/code>\u00a0\u2014 \u043e\u0442\u0432\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043a\u043e\u0434 \u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p><code>cache_read_input_tokens<\/code>\u00a0\u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0439 \u0438\u0437\u00a0\u043a\u044d\u0448\u0430<\/p>\n<\/li>\n<li>\n<p><code>cache_creation_input_tokens<\/code>\u00a0\u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u00a0\u043a\u044d\u0448<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u00a0\u0441\u0442\u0440\u043e\u043a\u0435 \u00ab\u0422\u043e\u043a\u0435\u043d\u044b\u00bb \u044f \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b \u0432\u0441\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0414\u043b\u044f\u00a0\u043f\u043e\u0434\u0441\u0447\u0451\u0442\u0430 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u0430\u0440\u0438\u0444 Opus 5\u00a0\u0441\u00a0\u0447\u0430\u0441\u043e\u0432\u044b\u043c \u043a\u044d\u0448\u0435\u043c: $5\u00a0\u0437\u0430\u00a0\u043c\u0438\u043b\u043b\u0438\u043e\u043d \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, $25\u00a0\u0437\u0430\u00a0\u043c\u0438\u043b\u043b\u0438\u043e\u043d \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445, $0,50\u00a0\u0437\u0430\u00a0\u0447\u0442\u0435\u043d\u0438\u0435 \u0438\u0437\u00a0\u043a\u044d\u0448\u0430 \u0438 $10\u00a0\u0437\u0430\u00a0\u0437\u0430\u043f\u0438\u0441\u044c \u0432\u00a0\u043a\u044d\u0448.<\/p>\n<p>\u0412\u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0442\u043e\u043a\u0435\u043d\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0432\u00a0\u0434\u043e\u043b\u043b\u0430\u0440\u044b:<\/p>\n<pre><code class=\"python\">PRICE = {    \"input_tokens\": 5.0,    \"output_tokens\": 25.0,    \"cache_read_input_tokens\": 0.5,    \"cache_creation_input_tokens\": 10.0,}def cost(usage):    return sum(        usage.get(token_type, 0) * price        for token_type, price in PRICE.items()    ) \/ 1_000_000<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u043d\u0430\u00a0\u043f\u0443\u0442\u0438 \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<h4>\u0427\u0442\u043e\u00a0Claude Code \u0434\u0435\u043b\u0430\u0435\u0442 \u0434\u043e\u00a0\u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/h4>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043c\u0430\u043a\u0435\u0442\u0430 \u0430\u0433\u0435\u043d\u0442 \u043d\u0435\u00a0\u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0444\u043e\u0442\u043e \u0438\u043b\u0438\u00a0\u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442: \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u043e\u043a\u043e\u0432, \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0446\u0432\u0435\u0442\u0430, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043e\u0431\u0440\u0435\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u00a0\u0436\u0443\u0440\u043d\u0430\u043b\u0430\u043c \u0442\u0440\u0451\u0445 \u0441\u0435\u0441\u0441\u0438\u0439 \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e\u00a0\u0441\u043f\u043e\u0441\u043e\u0431 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p><strong>\u0415\u0441\u043b\u0438 \u043d\u0430\u00a0\u0432\u0445\u043e\u0434\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442<\/strong><\/p>\n<p>\u0412\u00a0\u0442\u0435\u0441\u0442\u0430\u0445 \u0441\u00a0Hermes \u0438 PostHog \u0443\u00a0\u0430\u0433\u0435\u043d\u0442\u0430\u00a0\u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u043b \u0444\u043e\u0440\u043c\u0430\u0442 \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e file \u0438 sips, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0434\u043b\u044f\u00a0\u043e\u0431\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0440\u0435\u0437\u0430\u043b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0447\u0442\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0421\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0438\u0442\u043e\u043d\u043e\u0432\u0441\u043a\u043e\u0439 \u0431\u0438\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438\u00a0\u2014 Pillow\u00a0\u2014 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b \u0446\u0432\u0435\u0442\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0441\u0442\u0440\u043e\u0438\u043b \u043c\u0430\u0441\u043a\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0444\u043e\u043d\u0430 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 SVG, PNG \u0438 WebP: \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0430\u043b\u044c\u0444\u0430\u2011\u043a\u0430\u043d\u0430\u043b \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 `PIL.ImageFont: \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043b \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0431\u0443\u043a\u0432.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u043e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0438\u0437\u00a0\u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u0440\u0438\u00a0\u0430\u043d\u0430\u043b\u0438\u0437\u0435 \u0441\u0430\u0439\u0442\u0430 Hermes. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u0433\u0435\u043d\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 4070\u00d72056\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430\u00a0\u0437\u043e\u043d\u044b \u0438 \u0432\u0437\u044f\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431 \u0446\u0432\u0435\u0442\u0430:<\/p>\n<pre><code class=\"python\">from PIL import Imageim = Image.open(\"hero.png\").convert(\"RGB\")print(im.size)im.crop((0, 0, 4070, 460)).save(\"crop_nav.png\")im.crop((350, 520, 2000, 1900)).save(\"crop_left.png\")im.crop((400, 1550, 1800, 1850)).save(\"crop_term.png\")for point in [    (20, 20), (2000, 1000), (500, 760),    (700, 1450), (500, 1660), (1000, 1760),]:    print(point, im.getpixel(point))<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0410\u0433\u0435\u043d\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u0446\u0432\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u00a0\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0442\u043e\u0447\u043a\u0430\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d \u0432\u0437\u044f\u043b \u0434\u0432\u0435 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430\u00a0\u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u0430\u0445 \u0444\u043e\u043d\u0430 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>(0, 46, 228)<\/code>. \u0422\u0430\u043a \u043e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0438\u043d\u0438\u0439 \u0446\u0432\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <code>#002ee4<\/code>. \u0417\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u0442\u043e\u0447\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438: \u0438\u0445 \u0446\u0432\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0440\u0430\u0432\u0435\u043d <code>(243, 243, 243)<\/code>, \u0438\u043b\u0438 <code>#f3f3f3<\/code>. \u042d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0433\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u0440\u0438\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u043e\u043d\u0430, \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442\u0435. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430 \u043f\u043e\u043c\u043e\u0433\u043b\u0438 \u0435\u043c\u0443 \u0442\u043e\u0447\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b, \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 Claude Code \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b \u043c\u0430\u0441\u043a\u0443: \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0441\u0447\u0438\u0442\u0430\u043b\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0441\u044f \u043e\u0442\u00a0\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430. \u041d\u0438\u0436\u0435\u00a0\u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0430\u0433\u0435\u043d\u0442:<\/p>\n<pre><code class=\"python\">from PIL import Imageim = Image.open(\"hero.png\").convert(\"RGB\")px = im.load()background = (0, 46, 228)def is_foreground(color):    return sum(abs(color[i] - background[i]) for i in range(3)) &gt; 60def bbox(x0, y0, x1, y1, label, step=1):    min_x, min_y = 10**9, 10**9    max_x, max_y = -1, -1    for y in range(y0, y1, step):        for x in range(x0, x1, step):            if is_foreground(px[x, y]):                min_x, max_x = min(min_x, x), max(max_x, x)                min_y, max_y = min(min_y, y), max(max_y, y)    print(label, min_x, min_y, max_x, max_y)bbox(300, 650, 2100, 1300, \"headline\")bbox(300, 1390, 2100, 1520, \"button\")bbox(300, 1600, 2100, 1860, \"terminal\")<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421\u043a\u0440\u0438\u043f\u0442 \u0438\u0437\u043c\u0435\u0440\u0438\u043b \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u00a0\u044d\u0442\u0438\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u0430\u0433\u0435\u043d\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0438\u0445 \u0448\u0438\u0440\u0438\u043d\u0443, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043e\u043d \u0443\u0442\u043e\u0447\u043d\u0438\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u00a0\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u043c \u0441\u0430\u0439\u0442\u0430 Hermes \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u00a0\u0441\u0435\u043a\u0446\u0438\u0438 Hero. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0451 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442\u0435, \u043e\u043d \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u043b \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u00a0\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u043b \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f\u00a0PostHog.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e\u00a0\u0430\u043d\u0430\u043b\u0438\u0437 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430 \u0432\u00a0\u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432\u00a0\u2014 \u044d\u0442\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439:<\/p>\n<blockquote>\n<p>\u043e\u0431\u0440\u0435\u0437\u043a\u0430 \u2192 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u2192 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u2192 \u043d\u043e\u0432\u0430\u044f \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u2192 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d\u0430 \u043e\u0431\u0440\u0435\u0437\u043a\u0430.<\/p>\n<\/blockquote>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0448\u0430\u0433\u043e\u0432 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0434\u043b\u044f\u00a0\u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0433\u0434\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0433\u0435\u043d\u0442\u0443\u00a0\u0431\u044b\u043b\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<p><strong>\u0415\u0441\u043b\u0438 \u043d\u0430\u00a0\u0432\u0445\u043e\u0434\u0435 \u0441\u0441\u044b\u043b\u043a\u0430<\/strong><\/p>\n<p>\u0421\u00a0Tailwind \u0430\u0433\u0435\u043d\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0438\u043d\u0430\u0447\u0435. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u043b HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u0448\u0451\u043b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u044b\u0435 CSS\u2011\u0444\u0430\u0439\u043b\u044b \u0438 \u0430\u0441\u0441\u0435\u0442\u044b, \u0430\u00a0\u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u043b \u0441\u0430\u0439\u0442 \u0432\u00a0headless Chrome \u043f\u0440\u0438\u00a0\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u043a\u043d\u0430 1440\u00d7900. \u0414\u043b\u044f\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f Chrome DevTools Protocol. \u0412\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0433\u0435\u043d\u0442 \u043e\u0431\u043e\u0448\u0451\u043b DOM \u0438 \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0432\u044b\u0437\u0432\u0430\u043b \u0434\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: <code>getBoundingClientRect()<\/code> \u0438 <code>getComputedStyle()<\/code>.<\/p>\n<p>\u041d\u0438\u0436\u0435 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 JavaScript \u0438\u0437\u00a0\u0441\u0435\u0441\u0441\u0438\u0438\u00a0\u2014 \u044f \u0443\u0431\u0440\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0432\u044f\u0437\u043a\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Chrome \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u00a0WebSocket:<\/p>\n<pre><code class=\"javascript\">(() =&gt; {  const out = [];  const walk = (element, depth) =&gt; {    const rect = element.getBoundingClientRect();    if (rect.bottom &lt; -60 || rect.top &gt; 1450) return;    const style = getComputedStyle(element);    const text = [...element.childNodes]      .filter(node =&gt; node.nodeType === 3)      .map(node =&gt; node.textContent)      .join(\"\")      .trim();    out.push({      depth,      tag: element.tagName,      x: +rect.x.toFixed(1),      y: +rect.y.toFixed(1),      width: +rect.width.toFixed(1),      height: +rect.height.toFixed(1),      font: `${style.fontFamily} ${style.fontSize}\/${style.lineHeight}`,      weight: style.fontWeight,      letterSpacing: style.letterSpacing,      color: style.color,      background: style.backgroundColor,      borderRadius: style.borderRadius,      text: text.slice(0, 90),    });    for (const child of element.children) {      walk(child, depth + 1);    }  };  walk(document.body, 0);  return JSON.stringify(out);})();<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0430\u00a0\u043e\u0434\u0438\u043d \u043e\u0431\u0445\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0433\u0435\u043d\u0442 \u0441\u043e\u0431\u0440\u0430\u043b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 430\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0448\u0440\u0438\u0444\u0442\u044b, \u0446\u0432\u0435\u0442\u0430 \u0438 \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b, \u0447\u0442\u043e\u00a0\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0430\u0431\u0440\u0430\u043d \u0448\u0440\u0438\u0444\u0442\u043e\u043c Inter \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 96\u00d796\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0414\u043b\u044f\u00a0\u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u00a0\u043a\u043e\u0434\u043e\u043c \u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0430\u0433\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0442\u043e\u0447\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0446\u0432\u0435\u0442\u0430 \u0438 \u0442\u0435\u043d\u0438. \u0412\u0441\u0435 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0430\u043b\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u0434\u043b\u044f\u00a0\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u043c\u0430\u043a\u0435\u0442\u0430.<\/p>\n<p>\u0412\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b Claude Code \u0440\u0435\u0448\u0438\u043b \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u043e\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043e\u043d \u0435\u0433\u043e \u0432\u0441\u0435\u0433\u043e 1\u00a0\u0440\u0430\u0437, \u043a\u0430\u043a\u00a0\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u043d\u0435\u00a0\u043f\u043e\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u0430\u00a0\u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041e\u0442\u0441\u044e\u0434\u0430 \u0438 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432\u00a0\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0430. \u041f\u043e\u00a0\u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0443 \u0430\u0433\u0435\u043d\u0442 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u044b, \u0430\u00a0\u0441\u0441\u044b\u043b\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0434\u043d\u0438\u043c \u043e\u0431\u0445\u043e\u0434\u043e\u043c DOM \u0441\u043d\u044f\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>\u041f\u0440\u0438\u0432\u043e\u0436\u0443 \u043d\u0438\u0436\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0443\u2011\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u044d\u0442\u0430\u043f\u0430 \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u00a0\u2014 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430 \u0441\u0430\u0439\u0442\u0430 \u0432\u00a0\u043f\u0440\u043e\u043c\u043f\u0442\u0435 \u0438 \u0441\u0441\u044b\u043b\u043a\u0438.<\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p align=\"left\">\u0412\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0421\u0430\u0439\u0442<\/p>\n<\/th>\n<th>\n<p align=\"left\">\u0421\u0440\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0430\u043d\u0430\u043b\u0438\u0437\u0430<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">Hermes<\/p>\n<\/td>\n<td>\n<p align=\"left\">$8,20<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442<\/p>\n<\/td>\n<td>\n<p align=\"left\">PostHog<\/p>\n<\/td>\n<td>\n<p align=\"left\">$7,86<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0421\u0441\u044b\u043b\u043a\u0430<\/p>\n<\/td>\n<td>\n<p align=\"left\">Tailwind<\/p>\n<\/td>\n<td>\n<p align=\"left\">$3,56<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h4>\u041a\u0443\u0434\u0430 \u0443\u0445\u043e\u0434\u044f\u0442 \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u0440\u0438\u00a0\u0441\u0431\u043e\u0440\u043a\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/h4>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 Claude Code \u0438\u0437\u0443\u0447\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e MCP, \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0441\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0438\u044f.<\/p>\n<p>\u0426\u0438\u043a\u043b \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<blockquote>\n<p>\u0441\u0431\u043e\u0440\u043a\u0430 \u2192 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u2192 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u2192 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u2192 \u043d\u043e\u0432\u044b\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442<\/p>\n<\/blockquote>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>\u0412\u00a0Figma \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 JavaScript \u0438 Plugin API. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u0433\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0448\u0440\u0438\u0444\u0442, \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439, \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u0440\u0430\u0437\u043c\u0435\u0440, \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0438, \u043c\u0435\u0436\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b, \u0446\u0432\u0435\u0442 \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b:<\/p>\n<pre><code class=\"javascript\">await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });const h1 = figma.createText();h1.name = 'Headline';h1.fontName = { family: 'Inter', style: 'Regular' };h1.characters = 'Rapidly build modern websites\\nwithout ever leaving your HTML.';h1.fontSize = 96;h1.lineHeight = { unit: 'PIXELS', value: 96 };h1.letterSpacing = { unit: 'PIXELS', value: -4.8 };h1.fills = [{ type: 'SOLID', color: { r: 0.012, g: 0.027, b: 0.071 } }];h1.resize(1344, 192);h1.x = 48;h1.y = 153;root.appendChild(h1);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0414\u043b\u044f\u00a0\u0441\u043e\u0441\u0442\u0430\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u0434\u043b\u0438\u043d\u043d\u0435\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043d\u043e\u043f\u043a\u0443 \u0430\u0433\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u043a\u0430\u043a\u00a0Auto Layout\u2011\u0444\u0440\u0435\u0439\u043c, \u0430\u00a0\u0442\u0435\u043a\u0441\u0442\u00a0\u2014 \u043a\u0430\u043a\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0441\u043b\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">const button = figma.createAutoLayout('HORIZONTAL', { name: 'Get started' });button.paddingLeft = 16;button.paddingRight = 16;button.paddingTop = 8;button.paddingBottom = 8;button.cornerRadius = 32;button.fills = [S('#000000')];const label = figma.createText();label.fontName = { family: 'Inter', style: 'Semi Bold' };label.characters = 'Get started';label.fontSize = 14;label.lineHeight = { unit: 'PIXELS', value: 24 };label.fills = [S('#ffffff')];button.appendChild(label);button.x = 48;button.y = 481;root.appendChild(button);<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>Figma MCP \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u043b\u043e\u0438. \u0414\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u00a0\u043d\u0438\u0445 \u0430\u0433\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u044f\u0432\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043b\u044f\u00a0\u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u00a0\u043a\u043e\u0434\u043e\u043c.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0f5\/267\/3bd\/0f52673bda1078cb06e976526e1874ea.png\" alt=\"\u041f\u0430\u043d\u0435\u043b\u044c \u0441 \u043a\u043e\u0434\u043e\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u043c\" title=\"\u041f\u0430\u043d\u0435\u043b\u044c \u0441 \u043a\u043e\u0434\u043e\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u043c\" width=\"1560\" height=\"1003\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/0f5\/267\/3bd\/0f52673bda1078cb06e976526e1874ea.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0f5\/267\/3bd\/0f52673bda1078cb06e976526e1874ea.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0430\u043d\u0435\u043b\u044c \u0441\u00a0\u043a\u043e\u0434\u043e\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u043c<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u00a0Figma \u0430\u0433\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 14\u00a0\u0441\u0442\u0440\u043e\u043a, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 <code>y<\/code> \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438 \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u0438\u043b \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u044b \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">lines.forEach((segments, index) =&gt; {  const line = figma.createText();  line.fontName = { family: 'IBM Plex Mono', style: 'Regular' };  line.characters = segments.map(segment =&gt; segment[0]).join('');  line.fontSize = 13;  line.lineHeight = { unit: 'PIXELS', value: 24 };  line.x = 48;  line.y = 12 + 24 * index;  codePanel.appendChild(line);  let start = 0;  for (const [text, color] of segments) {    line.setRangeFills(start, start + text.length, [S(color)]);    start += text.length;  }});<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0412\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c \u0430\u0433\u0435\u043d\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b 221,7\u00a0\u0442\u044b\u0441\u044f\u0447\u0438 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u041d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u044f\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0441\u0442\u043e\u044f\u0442 \u0434\u043e\u0440\u043e\u0436\u0435 \u0432\u0445\u043e\u0434\u043d\u044b\u0445, \u0434\u043b\u0438\u043d\u043d\u044b\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u043b\u0438 \u043d\u0430\u00a0\u0438\u0442\u043e\u0433\u043e\u0432\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c.<\/p>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432<\/strong><\/p>\n<p>\u041f\u0440\u0438\u00a0\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 Tailwind \u0430\u0433\u0435\u043d\u0442 \u0443\u0432\u0438\u0434\u0435\u043b, \u0447\u0442\u043e\u00a0\u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u00a0\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u00abRapidly build modern websites\u2026\u00bb \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0438\u043d\u0430\u0447\u0435, \u0447\u0435\u043c \u043d\u0430\u00a0\u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435. \u041e\u043d \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u043f\u0435\u0440\u0435\u043d\u043e\u0441 \u0432\u00a0\u043d\u0443\u0436\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u0448\u0438\u0440\u0438\u043d\u0443 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u043b \u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0430\u0433\u0435\u043d\u0442 \u0434\u0435\u043b\u0430\u043b \u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043b \u0441\u00a0\u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u043e\u043c. MCP\u2011\u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>get_screenshot<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0430 \u043d\u0435\u00a0\u0441\u0430\u043c\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0430\u00a0\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430\u00a0PNG\u2011\u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"json\">{  \"image_url\": \"https:\/\/www.figma.com\/api\/mcp\/asset\/...png\",  \"width\": 1440,  \"height\": 900}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u0430\u0433\u0435\u043d\u0442 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043b \u0444\u0430\u0439\u043b \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b \u0435\u0433\u043e:<\/p>\n<pre><code class=\"bash\">curl -L -o screenshot.png \"https:\/\/www.figma.com\/api\/mcp\/asset\/...png\"<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u0446\u0438\u043a\u043b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<blockquote>\n<p>\u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u2192 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u2192 \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u2192 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u2192 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/p>\n<\/blockquote>\n<p>\u0412\u043e\u00a0\u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 Tailwind \u0430\u0433\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 JavaScript\u2011\u0441\u043a\u0440\u0438\u043f\u0442 \u0434\u043b\u044f\u00a0\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0441\u00a0\u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u043e\u043c. \u041e\u0431\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0438\u0441\u044c \u0432\u00a0Canvas, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b \u043f\u043e\u00a0\u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 \u0441\u0447\u0438\u0442\u0430\u043b \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">let different = 0;for (let i = 0; i &lt; reference.length; i += 4) {  const difference =    Math.abs(reference[i] - result[i]) +    Math.abs(reference[i + 1] - result[i + 1]) +    Math.abs(reference[i + 2] - result[i + 2]);  if (difference &gt; 60) {    different++;  }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u0438\u00a0\u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0438\u0441\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f\u00a0\u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0444\u0430\u0439\u043b\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u00ab\u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u043e\u043a\u0440\u0443\u0433 MCP\u00bb \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u00a0\u0430\u0433\u0435\u043d\u0442 \u043d\u0430\u0447\u0430\u043b \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442.<\/p>\n<h4>\u0418\u0442\u043e\u0433<\/h4>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u043d\u0435\u00a0\u0441\u00a0\u0441\u0430\u043c\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043c\u0430\u043a\u0435\u0442\u0430, \u0430\u00a0\u0441\u00a0\u0442\u0435\u043c, \u043a\u0430\u043a\u00a0\u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0432\u044b\u0433\u043e\u0434\u043d\u0435\u0435 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430: \u0433\u043e\u0442\u043e\u0432\u044b\u0435 HTML \u0438 CSS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0441\u0442\u0438\u043b\u0438 \u0438 \u0430\u0441\u0441\u0435\u0442\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043d\u0435\u00a0\u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044f \u0438\u0445 \u043f\u043e\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c.<\/p>\n<p>\u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e\u00a0\u043c\u0430\u043a\u0435\u0442\u00a0\u2014 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u043f\u0443\u0442\u0438. \u0412\u043e\u00a0\u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u043f\u0440\u043e\u0432\u0435\u0434\u0443 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442: \u043f\u0435\u0440\u0435\u0434\u0430\u043c Claude Code \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u0438 \u043f\u043e\u043f\u0440\u043e\u0448\u0443 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0438\u0445 \u0432\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u0434.<\/p>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1078882\/\">https:\/\/habr.com\/ru\/articles\/1078882\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412\u00a0\u043a\u043e\u043d\u0446\u0435 \u043c\u0430\u0440\u0442\u0430 2026\u00a0\u0433\u043e\u0434\u0430 Figma \u043e\u0442\u043a\u0440\u044b\u043b\u0430 \u043a\u0430\u043d\u0432\u0430\u0441 \u0434\u043b\u044f\u00a0AI\u2011\u0430\u0433\u0435\u043d\u0442\u043e\u0432. Claude Code, Codex \u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u044b \u0447\u0435\u0440\u0435\u0437 MCP\u2011\u0441\u0435\u0440\u0432\u0435\u0440 Figma.\u042f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448\u043e Claude Code \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0434\u0438\u0437\u0430\u0439\u043d \u0441\u0430\u0439\u0442\u043e\u0432 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442 \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u043e\u0438\u0442\u044c. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u043e\u0432 \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0438\u0445 \u043d\u0430\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u00a0\u2014 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0434\u0430\u0432\u0430\u0442\u044c \u0435\u043c\u0443\u00a0\u043b\u0438\u0431\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442,\u00a0\u043b\u0438\u0431\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u044f \u0441\u043c\u043e\u0442\u0440\u0435\u043b, \u043a\u0430\u043a\u0438\u0435 \u0448\u0430\u0433\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0430\u0433\u0435\u043d\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u00a0\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u043a\u0435\u043d\u043e\u0432 (\u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0435\u043d\u0435\u0433) \u0442\u0440\u0430\u0442\u0438\u0442.\u041f\u0440\u0438\u00a0\u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441\u00a0Figma MCP \u0430\u0433\u0435\u043d\u0442 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043c\u0430\u043a\u0435\u0442 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript. Claude Code \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 Figma Plugin API \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0444\u0440\u0435\u0439\u043c\u044b \u0438 \u0441\u043b\u043e\u0438, \u0437\u0430\u0434\u0430\u0451\u0442 \u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0446\u0432\u0435\u0442\u0430, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430.\u0424\u043b\u043e\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0438\u0438 \u0430\u0433\u0435\u043d\u0442\u0430 \u0441\u00a0Figma MCP\u041a\u0430\u043a\u00a0\u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u042f \u0432\u044b\u0431\u0440\u0430\u043b \u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:Hero\u2011\u0441\u0435\u043a\u0446\u0438\u044e Hermes Agent\u0413\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 PostHog\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d Tailwind CSS\u0414\u043b\u044f\u00a0\u0441\u0430\u0439\u0442\u043e\u0432 Hermes \u0438 PostHog \u0432\u00a0\u043f\u0440\u043e\u043c\u043f\u0442 \u0430\u0433\u0435\u043d\u0442\u0443 \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0422\u0430\u043a\u00a0\u0436\u0435 \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043f\u0430\u043f\u043a\u0430 \u0441\u00a0\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u043c\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435\u00a0\u0431\u044b\u043b\u0438 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442\u0435. \u0414\u043b\u044f\u00a0Tailwind \u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0430\u0433\u0435\u043d\u0442\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442: \u0430\u0433\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d\u00a0\u0431\u044b\u043b \u0441\u0430\u043c \u0438\u0437\u0443\u0447\u0438\u0442\u044c HTML \u0438 CSS, \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u0438 \u0441\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043c\u043e\u0434\u0435\u043b\u044c Opus 5\u00a0\u0441\u00a0effort \u043d\u0430\u00a0\u0443\u0440\u043e\u0432\u043d\u0435 high. \u0414\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 \u0441\u00a0Claude Code \u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u0447\u0438\u0441\u0442\u044b\u0439 harness\u00a0\u2014 \u0431\u0435\u0437\u00a0\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043a\u0438\u043b\u043b\u043e\u0432, \u043f\u0430\u043c\u044f\u0442\u0438 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0430\u0433\u0435\u043d\u0442 \u043c\u043e\u0433 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e MCP Figma \u0437\u0430\u00a0\u0441\u0435\u0441\u0441\u0438\u044e.\u041f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u043e\u043d\u0430 \u0430\u0433\u0435\u043d\u0442\u0430 \u044f \u0441\u0447\u0438\u0442\u0430\u043b:\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0439 \u0441\u0435\u0441\u0441\u0438\u0438\u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0439 \u043a\u00a0\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c MCP\u2011\u0432\u044b\u0437\u043e\u0432\u043e\u0432\u0440\u0430\u0441\u0445\u043e\u0434\u044b \u043d\u0430\u00a0\u0430\u043d\u0430\u043b\u0438\u0437 \u0438 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u043e \u0441\u00a0\u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u043e\u043c\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0430\u0433\u0435\u043d\u0442\u0430 \u044f \u043d\u0435\u00a0\u0432\u043c\u0435\u0448\u0438\u0432\u0430\u043b\u0441\u044f \u0432\u00a0\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0436\u0434\u0430\u043b \u043f\u043e\u043a\u0430 \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u043e\u0442\u043e\u0432.\u041f\u0440\u043e\u043c\u043f\u0442\u044b \u0434\u043b\u044f\u00a0\u0430\u0433\u0435\u043d\u0442\u0430\u0414\u043b\u044f\u00a0\u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0441\u0430\u0439\u0442\u043e\u0432\u00a0\u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043f\u043e\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e:Recreate this landing page section as a design: &lt;Image&gt;. Make exactly one frame of the landing page via Figma MCP. Use the assets folder to get the exact illustrations from the page and place them as is: you may only change their size\u00a0\u2014 no CSS filters, blend modes, recoloring, opacity or cropping. Work in this Figma file: &lt;URL\u0414\u043b\u044f\u00a0\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430\u00a0\u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043f\u043e\u00a0\u0441\u0441\u044b\u043b\u043a\u0435:Recreate the landing page at &lt;SITE\u2011URL&gt; as a design\u00a0\u2014 the first screen as it looks in the browser at 1440px wide. Make exactly one frame via Figma MCP. Use the real logos and images from the site. Work in this Figma file: &lt;URL&gt;\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b\u041f\u043e\u00a0\u0438\u0442\u043e\u0433\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0440\u0451\u0445 \u0441\u0435\u0441\u0441\u0438\u0439 \u0441\u00a0Figma \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:\u041e\u0431\u0449\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c$34,21\u0412\u0440\u0435\u043c\u044f98,5\u00a0\u043c\u0438\u043d\u0443\u0442\u044b\u0422\u043e\u043a\u0435\u043d\u044b40,6\u00a0\u043c\u043b\u043d\u0415\u0441\u043b\u0438 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u00a0\u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u0442\u0430\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u0433\u0435\u043d\u0442\u0430 \u0438 \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437\u00a0\u044d\u0442\u0430\u043f\u043e\u0432:\u042d\u0442\u0430\u043f\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u0410\u043d\u0430\u043b\u0438\u0437 \u0434\u043e\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c$9,10MCP\u2011\u0432\u044b\u0437\u043e\u0432\u044b$14,96\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 MCP$10,15\u0420\u0430\u0431\u043e\u0442\u0430 \u0441\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c: MCP\u2011\u0432\u044b\u0437\u043e\u0432\u044b + \u0440\u0430\u0431\u043e\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 MCP$25,11\u0412\u0441\u044f \u0441\u0435\u0441\u0441\u0438\u044f$34,21\u0410\u043d\u0430\u043b\u0438\u0437 \u0434\u043e\u00a0\u043a\u0430\u043d\u0432\u0430\u0441\u0430\u00a0\u2014 \u0432\u0441\u0435 \u043e\u0442\u0432\u0435\u0442\u044b \u0434\u043e\u00a0\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u0430\u0433\u0435\u043d\u0442 \u043d\u0430\u0447\u0430\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c FigmaMCP\u2011\u0432\u044b\u0437\u043e\u0432\u044b\u00a0\u2014 \u043e\u0442\u0432\u0435\u0442\u044b, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u0433\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u043b MCP\u2011\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0430\u00a0\u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u044b, \u0432\u00a0\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 MCP\u00a0\u2014 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u043c\u0430\u043a\u0435\u0442\u0430: \u043a\u043e\u043c\u0430\u043d\u0434\u044b Bash, \u0447\u0442\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432\u041f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u044b\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 HermesAgent \u0441\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 PostHog \u0441\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 Tailwind CSS \u0441\u00a0\u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u043c\u0441\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u043c\u041a\u0430\u043a\u00a0\u044f \u0441\u0447\u0438\u0442\u0430\u043b \u0442\u043e\u043a\u0435\u043d\u044b \u0438 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u041f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0435\u0441\u0441\u0438\u0438 Claude Code \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043b\u043e\u0433 \u0432\u00a0\u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSONL. \u0412\u00a0\u043d\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0430\u0433\u0435\u043d\u0442\u0430, \u0432\u044b\u0437\u043e\u0432\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u043e\u043b\u0435 usage \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u043c\u043e\u0434\u0435\u043b\u0438. \u0418\u0437 usage \u044f \u0431\u0440\u0430\u043b \u0447\u0435\u0442\u044b\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:input_tokens\u00a0\u2014 \u043d\u043e\u0432\u044b\u0435 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044boutput_tokens\u00a0\u2014 \u043e\u0442\u0432\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043a\u043e\u0434 \u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432cache_read_input_tokens\u00a0\u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0439 \u0438\u0437\u00a0\u043a\u044d\u0448\u0430cache_creation_input_tokens\u00a0\u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u00a0\u043a\u044d\u0448\u0412\u00a0\u0441\u0442\u0440\u043e\u043a\u0435 \u00ab\u0422\u043e\u043a\u0435\u043d\u044b\u00bb \u044f \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b \u0432\u0441\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0414\u043b\u044f\u00a0\u043f\u043e\u0434\u0441\u0447\u0451\u0442\u0430 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u0430\u0440\u0438\u0444 Opus 5\u00a0\u0441\u00a0\u0447\u0430\u0441\u043e\u0432\u044b\u043c \u043a\u044d\u0448\u0435\u043c: $5\u00a0\u0437\u0430\u00a0\u043c\u0438\u043b\u043b\u0438\u043e\u043d \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, $25\u00a0\u0437\u0430\u00a0\u043c\u0438\u043b\u043b\u0438\u043e\u043d \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445, $0,50\u00a0\u0437\u0430\u00a0\u0447\u0442\u0435\u043d\u0438\u0435 \u0438\u0437\u00a0\u043a\u044d\u0448\u0430 \u0438 $10\u00a0\u0437\u0430\u00a0\u0437\u0430\u043f\u0438\u0441\u044c \u0432\u00a0\u043a\u044d\u0448.\u0412\u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442 \u0442\u043e\u043a\u0435\u043d\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u0432\u00a0\u0434\u043e\u043b\u043b\u0430\u0440\u044b:PRICE = {    &#171;input_tokens&#187;: 5.0,    &#171;output_tokens&#187;: 25.0,    &#171;cache_read_input_tokens&#187;: 0.5,    &#171;cache_creation_input_tokens&#187;: 10.0,}def cost(usage):    return sum(        usage.get(token_type, 0) * price        for token_type, price in PRICE.items()    ) \/ 1_000_000\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0433 \u043d\u0430\u00a0\u043f\u0443\u0442\u0438 \u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.\u0427\u0442\u043e\u00a0Claude Code \u0434\u0435\u043b\u0430\u0435\u0442 \u0434\u043e\u00a0\u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430\u041f\u0435\u0440\u0435\u0434 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043c\u0430\u043a\u0435\u0442\u0430 \u0430\u0433\u0435\u043d\u0442 \u043d\u0435\u00a0\u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0444\u043e\u0442\u043e \u0438\u043b\u0438\u00a0\u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430\u00a0\u0441\u0430\u0439\u0442: \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0431\u043b\u043e\u043a\u043e\u0432, \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0446\u0432\u0435\u0442\u0430, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043e\u0431\u0440\u0435\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u00a0\u0436\u0443\u0440\u043d\u0430\u043b\u0430\u043c \u0442\u0440\u0451\u0445 \u0441\u0435\u0441\u0441\u0438\u0439 \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e\u00a0\u0441\u043f\u043e\u0441\u043e\u0431 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442\u00a0\u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.\u0415\u0441\u043b\u0438 \u043d\u0430\u00a0\u0432\u0445\u043e\u0434\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0412\u00a0\u0442\u0435\u0441\u0442\u0430\u0445 \u0441\u00a0Hermes \u0438 PostHog \u0443\u00a0\u0430\u0433\u0435\u043d\u0442\u0430\u00a0\u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u043b \u0444\u043e\u0440\u043c\u0430\u0442 \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e file \u0438 sips, \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0434\u043b\u044f\u00a0\u043e\u0431\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430.\u0412\u044b\u0440\u0435\u0437\u0430\u043b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u00a0\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u043b \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0447\u0442\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.\u0421\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0438\u0442\u043e\u043d\u043e\u0432\u0441\u043a\u043e\u0439 \u0431\u0438\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438\u00a0\u2014 Pillow\u00a0\u2014 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b \u0446\u0432\u0435\u0442\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0441\u0442\u0440\u043e\u0438\u043b \u043c\u0430\u0441\u043a\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0444\u043e\u043d\u0430 \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 SVG, PNG \u0438 WebP: \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u0430\u043b\u044c\u0444\u0430\u2011\u043a\u0430\u043d\u0430\u043b \u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430.\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 `PIL.ImageFont: \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043b \u0448\u0438\u0440\u0438\u043d\u0443 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0431\u0443\u043a\u0432.\u0412\u043e\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0438\u0437\u00a0\u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u0440\u0438\u00a0\u0430\u043d\u0430\u043b\u0438\u0437\u0435 \u0441\u0430\u0439\u0442\u0430 Hermes. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u0433\u0435\u043d\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 4070\u00d72056\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430\u00a0\u0437\u043e\u043d\u044b \u0438 \u0432\u0437\u044f\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431 \u0446\u0432\u0435\u0442\u0430:from PIL import Imageim = Image.open(&#171;hero.png&#187;).convert(&#171;RGB&#187;)print(im.size)im.crop((0, 0, 4070, 460)).save(&#171;crop_nav.png&#187;)im.crop((350, 520, 2000, 1900)).save(&#171;crop_left.png&#187;)im.crop((400, 1550, 1800, 1850)).save(&#171;crop_term.png&#187;)for point in [    (20, 20), (2000, 1000), (500, 760),    (700, 1450), (500, 1660), (1000, 1760),]:    print(point, im.getpixel(point))\u0410\u0433\u0435\u043d\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u0446\u0432\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u00a0\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0442\u043e\u0447\u043a\u0430\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d \u0432\u0437\u044f\u043b \u0434\u0432\u0435 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430\u00a0\u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u0430\u0445 \u0444\u043e\u043d\u0430 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (0, 46, 228). \u0422\u0430\u043a \u043e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0438\u043d\u0438\u0439 \u0446\u0432\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b #002ee4. \u0417\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b \u0442\u043e\u0447\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438: \u0438\u0445 \u0446\u0432\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0440\u0430\u0432\u0435\u043d (243, 243, 243), \u0438\u043b\u0438 #f3f3f3. \u042d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0433\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u0440\u0438\u00a0\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0444\u043e\u043d\u0430, \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442\u0435. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430 \u043f\u043e\u043c\u043e\u0433\u043b\u0438 \u0435\u043c\u0443 \u0442\u043e\u0447\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b, \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b.\u0414\u043b\u044f\u00a0\u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 Claude Code \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b \u043c\u0430\u0441\u043a\u0443: \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u0441\u0447\u0438\u0442\u0430\u043b\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0441\u044f \u043e\u0442\u00a0\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430. \u041d\u0438\u0436\u0435\u00a0\u2014 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d\u043d\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0430\u0433\u0435\u043d\u0442:from PIL import Imageim = Image.open(&#171;hero.png&#187;).convert(&#171;RGB&#187;)px = im.load()background = (0, 46, 228)def is_foreground(color):    return sum(abs(color[i] &#8212; background[i]) for i in range(3)) &gt; 60def bbox(x0, y0, x1, y1, label, step=1):    min_x, min_y = 10**9, 10**9    max_x, max_y = -1, -1    for y in range(y0, y1, step):        for x in range(x0, x1, step):            if is_foreground(px[x, y]):                min_x, max_x = min(min_x, x), max(max_x, x)                min_y, max_y = min(min_y, y), max(max_y, y)    print(label, min_x, min_y, max_x, max_y)bbox(300, 650, 2100, 1300, &#171;headline&#187;)bbox(300, 1390, 2100, 1520, &#171;button&#187;)bbox(300, 1600, 2100, 1860, &#171;terminal&#187;)\u0421\u043a\u0440\u0438\u043f\u0442 \u0438\u0437\u043c\u0435\u0440\u0438\u043b \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u00a0\u044d\u0442\u0438\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u0430\u0433\u0435\u043d\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0438\u0445 \u0448\u0438\u0440\u0438\u043d\u0443, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043e\u043d \u0443\u0442\u043e\u0447\u043d\u0438\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u00a0\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.\u0412\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u043c \u0441\u0430\u0439\u0442\u0430 Hermes \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u00a0\u0441\u0435\u043a\u0446\u0438\u0438 Hero. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0435\u0451 \u0432\u00a0\u043c\u0430\u043a\u0435\u0442\u0435, \u043e\u043d \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u043b \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430\u00a0\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0430\u0433\u0435\u043d\u0442 \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u043b \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f\u00a0PostHog.\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e\u00a0\u0430\u043d\u0430\u043b\u0438\u0437 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430 \u0432\u00a0\u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432\u00a0\u2014 \u044d\u0442\u043e \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439:\u043e\u0431\u0440\u0435\u0437\u043a\u0430 \u2192 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u2192 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u2192 \u043d\u043e\u0432\u0430\u044f \u0433\u0438\u043f\u043e\u0442\u0435\u0437\u0430 \u2192 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d\u0430 \u043e\u0431\u0440\u0435\u0437\u043a\u0430.\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0448\u0430\u0433\u043e\u0432 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0434\u043b\u044f\u00a0\u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0433\u0434\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0433\u0435\u043d\u0442\u0443\u00a0\u0431\u044b\u043b\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.\u0415\u0441\u043b\u0438 \u043d\u0430\u00a0\u0432\u0445\u043e\u0434\u0435 \u0441\u0441\u044b\u043b\u043a\u0430\u0421\u00a0Tailwind \u0430\u0433\u0435\u043d\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0438\u043d\u0430\u0447\u0435. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u043b HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u0448\u0451\u043b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d\u043d\u044b\u0435 CSS\u2011\u0444\u0430\u0439\u043b\u044b \u0438 \u0430\u0441\u0441\u0435\u0442\u044b, \u0430\u00a0\u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u043b \u0441\u0430\u0439\u0442 \u0432\u00a0headless Chrome \u043f\u0440\u0438\u00a0\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043e\u043a\u043d\u0430 1440\u00d7900. \u0414\u043b\u044f\u00a0\u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f Chrome DevTools Protocol. \u0412\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0433\u0435\u043d\u0442 \u043e\u0431\u043e\u0448\u0451\u043b DOM \u0438 \u0434\u043b\u044f\u00a0\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0432\u044b\u0437\u0432\u0430\u043b \u0434\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: getBoundingClientRect() \u0438 getComputedStyle().\u041d\u0438\u0436\u0435 \u0441\u043e\u043a\u0440\u0430\u0449\u0451\u043d \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 JavaScript \u0438\u0437\u00a0\u0441\u0435\u0441\u0441\u0438\u0438\u00a0\u2014 \u044f \u0443\u0431\u0440\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0432\u044f\u0437\u043a\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Chrome \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u00a0WebSocket:(() =&gt; {  const out = [];  const walk = (element, depth) =&gt; {    const rect = element.getBoundingClientRect();    if (rect.bottom &lt; -60 || rect.top &gt; 1450) return;    const style = getComputedStyle(element);    const text = [&#8230;element.childNodes]      .filter(node =&gt; node.nodeType === 3)      .map(node =&gt; node.textContent)      .join(&#171;&#187;)      .trim();    out.push({      depth,      tag: element.tagName,      x: +rect.x.toFixed(1),      y: +rect.y.toFixed(1),      width: +rect.width.toFixed(1),      height: +rect.height.toFixed(1),      font: `${style.fontFamily} ${style.fontSize}\/${style.lineHeight}`,      weight: style.fontWeight,      letterSpacing: style.letterSpacing,      color: style.color,      background: style.backgroundColor,      borderRadius: style.borderRadius,      text: text.slice(0, 90),    });    for (const child of element.children) {      walk(child, depth + 1);    }  };  walk(document.body, 0);  return JSON.stringify(out);})();\u0417\u0430\u00a0\u043e\u0434\u0438\u043d \u043e\u0431\u0445\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0433\u0435\u043d\u0442 \u0441\u043e\u0431\u0440\u0430\u043b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 430\u00a0\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432: \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0448\u0440\u0438\u0444\u0442\u044b, \u0446\u0432\u0435\u0442\u0430 \u0438 \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b, \u0447\u0442\u043e\u00a0\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0430\u0431\u0440\u0430\u043d \u0448\u0440\u0438\u0444\u0442\u043e\u043c Inter \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 96\u00d796\u00a0\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-493582","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/493582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=493582"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/493582\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=493582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=493582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=493582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}