{"id":481989,"date":"2026-06-01T19:52:04","date_gmt":"2026-06-01T19:52:04","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=481989"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=481989","title":{"rendered":"De-SaaSifying Next.js: \u043a\u0430\u043a \u043c\u044b \u043e\u0431\u043e\u0448\u043b\u0438 \u043f\u043b\u0430\u0442\u043d\u044b\u0439 Design API \u0438 \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0445 \u0433\u0430\u0439\u0434\u043e\u0432"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p><strong>\u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 <\/strong><a href=\"http:\/\/Context.dev\" rel=\"noopener noreferrer nofollow\"><strong>Context.dev<\/strong><\/a><strong> API \u043d\u0430 Jina Reader \u0438 Vercel AI SDK, \u0447\u0442\u043e\u0431\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <\/strong><a href=\"http:\/\/DESIGN.md\" rel=\"noopener noreferrer nofollow\"><strong>DESIGN.md<\/strong><\/a><strong> \u0434\u043b\u044f AI-\u0430\u0433\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.<\/strong><\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u043a\u043e\u0440\u043c\u0438\u0442\u044c \u0441\u044b\u0440\u043e\u0439 HTML \u0441 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 LLM-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u044d\u0442\u0443 \u0431\u043e\u043b\u044c: 20 000 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0443\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 <code>&lt;div&gt;<\/code>-\u0441\u0443\u043f \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0442\u0435\u0433\u0438. \u0418\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 <a href=\"http:\/\/designmd.supply\" rel=\"noopener noreferrer nofollow\"><code>designmd.supply<\/code><\/a> \u2014 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u0442 \u0441\u0430\u0439\u0442 \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <a href=\"http:\/\/DESIGN.md\" rel=\"noopener noreferrer nofollow\"><code>DESIGN.md<\/code><\/a> \u0434\u043b\u044f AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0433\u043e \u044f\u0434\u0440\u043e \u043e\u043f\u0438\u0440\u0430\u043b\u043e\u0441\u044c \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u044b\u0439 <a href=\"http:\/\/Context.dev\" rel=\"noopener noreferrer nofollow\">Context.dev<\/a> API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u043b \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f.<\/p>\n<p>&lt;!&#8212; cut &#8212;&gt;<\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0444\u043e\u0440\u043a <code>open-designmd<\/code> \u0440\u0435\u0448\u0438\u043b \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438\u043d\u0430\u0447\u0435: \u0432\u0441\u0435 \u043f\u0440\u043e\u043f\u0440\u0438\u0435\u0442\u0430\u0440\u043d\u044b\u0435 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u044b \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u043d\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u2014 Jina Reader \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 HTML \u0432 Markdown, Microlink \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432, \u0438 \u043b\u044e\u0431\u043e\u0439 LLM-\u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 OpenRouter \u0438\u043b\u0438 Ollama. \u0412\u0435\u0441\u044c \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0431\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438 \u043a\u0440\u0435\u0434\u0438\u0442\u043d\u044b\u0445 \u043a\u0430\u0440\u0442.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u2014 \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u044d\u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u043b\u043e\u0432\u0443\u0448\u043a\u0430\u043c\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u043f\u043e \u0445\u043e\u0434\u0443.<\/p>\n<h3>\u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/h3>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u044b \u2014 Cursor, Windsurf, Copilot \u2014 \u0443\u043c\u0435\u044e\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u0432\u0430\u0448 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u043c \u043d\u0443\u0436\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0446\u0432\u0435\u0442\u0430, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0430\u0442\u044c \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 <a href=\"http:\/\/DESIGN.md\" rel=\"noopener noreferrer nofollow\"><code>DESIGN.md<\/code><\/a> \u2014 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u043c\u0438 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438, \u0432\u044b\u0442\u0430\u0449\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u044f\u043c\u043e \u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p><a href=\"http:\/\/designmd.supply\" rel=\"noopener noreferrer nofollow\"><code>designmd.supply<\/code><\/a> \u0434\u0435\u043b\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e: \u0437\u0430\u0431\u0438\u0440\u0430\u043b URL, \u043f\u0430\u0440\u0441\u0438\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u0447\u0435\u0440\u0435\u0437 LLM \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u0435\u0432\u043e\u0439 \u0433\u0430\u0439\u0434. \u041d\u043e \u043a\u043e\u0433\u0434\u0430 <a href=\"http:\/\/Context.dev\" rel=\"noopener noreferrer nofollow\">Context.dev<\/a> \u0437\u0430\u043a\u0440\u044b\u043b \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u043f\u043b\u043e\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u2014 API \u043e\u0442\u0432\u0435\u0447\u0430\u043b 502 \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u043a\u043b\u044e\u0447.<\/p>\n<p>\u0424\u043e\u0440\u043a <code>open-designmd<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u043e \u0442\u0440\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<ol start=\"NaN\">\n<li>\n<p>\u041f\u0430\u0440\u0441\u0438\u043d\u0433 HTML \u2192 Markdown \u0431\u0435\u0440\u0451\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f <strong>Jina Reader<\/strong> (<a href=\"http:\/\/r.jina.ai\" rel=\"noopener noreferrer nofollow\"><code>r.jina.ai<\/code><\/a>) \u2014 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439, \u0431\u0435\u0437 \u043b\u0438\u043c\u0438\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0435\u043b\u0430\u0435\u0442 <strong>Microlink<\/strong> \u0438\u043b\u0438 <a href=\"http:\/\/Thum.io\" rel=\"noopener noreferrer nofollow\"><strong>Thum.io<\/strong><\/a> \u2014 \u0442\u043e\u0436\u0435 \u0431\u0435\u0437 \u043e\u043f\u043b\u0430\u0442\u044b.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e <a href=\"http:\/\/DESIGN.md\" rel=\"noopener noreferrer nofollow\"><code>DESIGN.md<\/code><\/a> \u0431\u0435\u0440\u0451\u0442 \u043b\u044e\u0431\u043e\u0439 LLM \u2014 DeepSeek \u0447\u0435\u0440\u0435\u0437 OpenRouter, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 Ollama, \u0438\u043b\u0438 \u043f\u0440\u044f\u043c\u043e\u0439 API \u043a Anthropic\/Google.<\/p>\n<\/li>\n<\/ol>\n<h3>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u0430<\/h3>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435:<\/p>\n<pre><code class=\"text\">[ Target URL ]  \u00a0 \u00a0  \u2502 \u00a0 \u00a0  \u251c\u2500\u2500\u2500\u25ba [ Jina Reader (Free Markdown) ] \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u00a0  \u2514\u2500\u2500\u2500\u25ba [ Microlink (Full HD Screenshot) ] \u2500\u2500\u2500\u253c\u2500\u25ba [ Open DesignMD Backend ] \u2500\u2500\u2500\u25ba [ Local LLM \/ OpenRouter ] \u2500\u2500\u2500\u25ba [ DESIGN.md ]<\/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>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 \u2014 <a href=\"http:\/\/Context.dev\" rel=\"noopener noreferrer nofollow\">Context.dev<\/a> \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0433\u0434\u0435 \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u043d\u0435\u0442. Jina Reader \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0432 \u0447\u0438\u0441\u0442\u044b\u0439 Markdown, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432, \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0431\u043b\u043e\u043a\u043e\u0432 \u043a\u043e\u0434\u0430. LLM \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 Markdown \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b: \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0448\u043a\u0430\u043b\u0443, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 CSS-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b.<\/p>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u043d\u043e Markdown, \u0430 \u043d\u0435 \u0441\u044b\u0440\u044b\u0435 CSS? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 React-\u0441\u0430\u0439\u0442\u044b \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439. Tailwind, CSS-in-JS, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043b\u0435\u0442\u0443, \u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u2014 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 DOM. Jina Reader \u043f\u0430\u0440\u0441\u0438\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e, \u0438 LLM \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043c\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b\u0438 \u044d\u0442\u043e \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u0445 \u0441\u0430\u0439\u0442\u043e\u0432: \u043d\u0430 Tailwind-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0430 \u043e\u043a\u043e\u043b\u043e 95%.<\/p>\n<h3>\u0427\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 Next.js \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 Next.js 16 \u0441 Turbopack \u0438 Tailwind CSS v4. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0434\u043b\u044f App Router:<\/p>\n<pre><code class=\"text\">open-designmd\/\u251c\u2500\u2500 app\/\u2502 \u00a0 \u251c\u2500\u2500 api\/\u2502 \u00a0 \u2502 \u00a0 \u2514\u2500\u2500 design-md\/\u2502 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u2514\u2500\u2500 route.ts \u00a0 \u00a0 \u00a0 \u2190 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 API-\u0440\u043e\u0443\u0442\u2502 \u00a0 \u251c\u2500\u2500 layout.tsx\u2502 \u00a0 \u2514\u2500\u2500 page.tsx\u251c\u2500\u2500 components\/\u251c\u2500\u2500 lib\/\u251c\u2500\u2500 .env \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2190 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u251c\u2500\u2500 .gitignore\u251c\u2500\u2500 package.json\u2514\u2500\u2500 install.bat \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  \u2190 Windows-\u043f\u043e\u0440\u0442\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/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\u043e\u0440\u0442\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u043c\u0430. \u0414\u043b\u044f Windows \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043f\u0430\u043f\u043a\u0430 <code>designmd-portable\/node\/<\/code> \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0431\u0438\u043d\u0430\u0440\u043d\u0438\u043a\u0430\u043c\u0438 Node.js v20. \u0421\u043a\u0440\u0438\u043f\u0442\u044b <code>install.bat<\/code> \u0438 <code>run.bat<\/code> \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442 NPM-\u043a\u044d\u0448 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c Windows-\u041f\u041a \u0431\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Node \u0438\u043b\u0438 Git.<\/p>\n<h3>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u043c<\/h3>\n<p>\u0421\u0430\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u2014 \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a LLM \u0432 \u0444\u0430\u0439\u043b\u0435 <code>app\/api\/design-md\/route.ts<\/code>. \u041a\u043e\u0434 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u044f\u0442\u044c \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432: OpenRouter, Ollama (\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e), Google AI Studio, Anthropic \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 OpenAI.<\/p>\n<pre><code class=\"typescript\">\/\/ app\/api\/design-md\/route.ts\u200bimport { createOpenAI } from '@ai-sdk\/openai';import { createOllama } from 'ollama-ai-provider';import { createGoogle } from '@ai-sdk\/google';import { createAnthropic } from '@ai-sdk\/anthropic';\u200bconst AI_PROVIDER = process.env.AI_PROVIDER || 'openrouter';const AI_MODEL = process.env.AI_MODEL || 'deepseek\/deepseek-chat';\u200bfunction getActiveModel() { \u00a0switch (AI_PROVIDER) { \u00a0 \u00a0case 'ollama': \u00a0 \u00a0 \u00a0return createOllama({ \u00a0 \u00a0 \u00a0 \u00a0baseURL: process.env.OLLAMA_URL || 'http:\/\/127.0.0.1:11434\/api', \u00a0 \u00a0  })(AI_MODEL); \u00a0 \u00a0 \u00a0 \u00a0case 'google': \u00a0 \u00a0 \u00a0return createGoogle({ \u00a0 \u00a0 \u00a0 \u00a0apiKey: process.env.GOOGLE_API_KEY, \u00a0 \u00a0  })(AI_MODEL); \u00a0 \u00a0 \u00a0 \u00a0case 'anthropic': \u00a0 \u00a0 \u00a0return createAnthropic({ \u00a0 \u00a0 \u00a0 \u00a0apiKey: process.env.ANTHROPIC_API_KEY, \u00a0 \u00a0  })(AI_MODEL); \u00a0 \u00a0 \u00a0 \u00a0case 'openrouter': \u00a0 \u00a0default: \u00a0 \u00a0 \u00a0return createOpenAI({ \u00a0 \u00a0 \u00a0 \u00a0baseURL: 'https:\/\/openrouter.ai\/api\/v1', \u00a0 \u00a0 \u00a0 \u00a0apiKey: process.env.OPENROUTER_API_KEY, \u00a0 \u00a0 \u00a0 \u00a0compatibility: 'compatible', \u00a0 \u00a0  }).chat(AI_MODEL);  }}<\/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>\u0411\u043b\u043e\u043a <code>switch<\/code> \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>AI_PROVIDER<\/code>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u0430\u0432\u0438\u0442\u0435 <code>ollama<\/code>, SDK \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 <code>11434<\/code> \u2014 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u043c\u0430\u0448\u0438\u043d\u0435. \u0414\u043b\u044f OpenRouter \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0436\u0435 <code>createOpenAI<\/code>, \u043d\u043e \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c <code>baseURL<\/code>, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0440\u043e\u0443\u0442\u0435\u0440 \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u043c \u0434\u0435\u0448\u0451\u0432\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439.<\/p>\n<h3>\u0411\u0430\u0433 Vercel AI SDK 5+: \u043c\u0435\u0442\u043e\u0434 .chat() \u0432\u043c\u0435\u0441\u0442\u043e \/v1\/responses<\/h3>\n<p>\u0412\u043e\u0442 \u043b\u043e\u0432\u0443\u0448\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435, \u043a\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u0434\u043e Vercel AI SDK 5+. \u041d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 SDK \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 <code>\/v1\/responses<\/code> \u2014 \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 OpenAI \u0434\u043b\u044f \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u00abresponses API\u00bb. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0448\u043b\u044e\u0437\u043e\u0432 \u2014 FreeLLMAPI, LiteLLM, OpenRouter \u2014 \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: <code>404 Not Found<\/code>.<\/p>\n<p>\u041c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0434\u0432\u0430 \u0447\u0430\u0441\u0430, \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044f\u0441\u044c \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c. \u0412 \u043b\u043e\u0433\u0430\u0445 \u0431\u044b\u043b\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e SDK \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u043d\u0430 <code>\/v1\/chat\/completions<\/code>, \u0430 \u043d\u0430 <code>\/v1\/responses<\/code> \u2014 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 OpenAI \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0430 \u043a\u0430\u043a \u0431\u0435\u0442\u0430-\u0444\u0438\u0447\u0443 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 2025 \u0433\u043e\u0434\u0430. Vercel AI SDK 5+ \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u0438\u043b \u044d\u0442\u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0448\u043b\u044e\u0437\u043e\u0432 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0447\u0430\u0442-\u043a\u043e\u043c\u043f\u043b\u0438\u0448\u0435\u043d\u0441\u043e\u043c.<\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>.chat()<\/code> \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u043e\u0434\u0435\u043b\u0438:<\/p>\n<pre><code class=\"typescript\">\/\/ \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e (\u0432\u044b\u0437\u043e\u0432\u0435\u0442 404 \u043d\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0448\u043b\u044e\u0437\u0430\u0445):const model = openai('deepseek\/deepseek-chat');\u200b\/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u043e:const model = openai.chat('deepseek\/deepseek-chat');<\/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>\u041c\u0435\u0442\u043e\u0434 <code>.chat()<\/code> \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 SDK \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u2014 \u043d\u0430 <code>\/v1\/chat\/completions<\/code>. \u042d\u0442\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e \u0441 \u043b\u044e\u0431\u044b\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u043c \u0441 OpenAI \u0448\u043b\u044e\u0437\u043e\u043c, \u0432\u043a\u043b\u044e\u0447\u0430\u044f Ollama, LiteLLM \u0438 OpenRouter. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u2014 \u043e\u0434\u043d\u043e \u0441\u043b\u043e\u0432\u043e \u0432 \u0432\u044b\u0437\u043e\u0432\u0435, \u043d\u043e \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0444\u0438\u043a\u0441\u0430 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u043c\u043e\u043b\u0447\u0430 \u043f\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435.<\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0431\u0430\u0433 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043a\u043e\u0432\u0430\u0440\u0435\u043d \u0442\u0435\u043c, \u0447\u0442\u043e SDK \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u044f\u0432\u043d\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u2014 \u043e\u043d \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 <code>404<\/code>, \u0438 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0442\u0438\u0445\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0434\u0440\u0443\u0433 \u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e <a href=\"http:\/\/DESIGN.md\" rel=\"noopener noreferrer nofollow\"><code>DESIGN.md<\/code><\/a> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c \u0438\u043b\u0438 \u043e\u0431\u0440\u0435\u0437\u0430\u043d\u043d\u044b\u043c \u2014 \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0432 DevTools-\u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n<h3>Hydration Mismatch: \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043b\u043e\u043c\u0430\u044e\u0442 React<\/h3>\n<p>\u0414\u0440\u0443\u0433\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u2014 \u043e\u0448\u0438\u0431\u043a\u0430 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0432 Next.js. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u0430: \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00abBookmark Sidebar\u00bb) \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 DOM \u0435\u0449\u0451 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a React \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044e. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 HTML \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e, \u0438 React \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 <code>layout.tsx<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>suppressHydrationWarning<\/code> \u043d\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"tsx\">\/\/ app\/layout.tsx\u200bexport default function RootLayout({ children }: { children: React.ReactNode }) { \u00a0return ( \u00a0 \u00a0&lt;html lang=\"en\" suppressHydrationWarning&gt; \u00a0 \u00a0 \u00a0&lt;body&gt;{children}&lt;\/body&gt; \u00a0 \u00a0&lt;\/html&gt;  );}<\/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>\u042d\u0442\u043e \u043d\u0435 \u043a\u043e\u0441\u0442\u044b\u043b\u044c \u2014 \u044d\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 React-\u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432. <code>suppressHydrationWarning<\/code> \u043d\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 React: \u00ab\u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u044b\u0445 \u0434\u0435\u0442\u0435\u0439\u00bb. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0411\u0435\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043a\u0443\u0447\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 .env: \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0432\u044b\u0431\u0440\u0430\u0442\u044c<\/h3>\n<p>\u0424\u0430\u0439\u043b <code>.env<\/code> \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c:<\/p>\n<pre><code class=\"bash\"># .env\u200bAI_PROVIDER=openrouterAI_MODEL=deepseek\/deepseek-chatOPENROUTER_API_KEY=your_key_here<\/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 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u2014 \u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043d\u0430:<\/p>\n<pre><code class=\"bash\">AI_PROVIDER=ollamaAI_MODEL=llama3<\/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 \u044d\u0442\u043e\u043c Ollama \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e (<code>ollama serve<\/code>). \u041c\u043e\u0434\u0435\u043b\u044c \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435.<\/p>\n<p>\u0414\u043b\u044f Google AI Studio:<\/p>\n<pre><code class=\"bash\">AI_PROVIDER=googleAI_MODEL=gemini-2.0-flashGOOGLE_API_KEY=your_key_here<\/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>\u041a\u043b\u044e\u0447\u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 <code>.env<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0432 <code>.gitignore<\/code>:<\/p>\n<pre><code class=\"gitignore\"># .gitignore\u200bdesignmd-portable\/.envnode_modules\/.next\/<\/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<h3>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/h3>\n<p>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 \u2014 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. Microlink API \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043d\u0438\u043c\u043e\u043a \u0441\u0440\u0430\u0437\u0443, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 JavaScript-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0414\u043b\u044f React-\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 CSS-\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u043c\u0438 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>\u0412 <code>app\/api\/screenshot\/route.ts<\/code> \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a Microlink API \u0441 3-\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u043c \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435\u043c \u0438 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439:<\/p>\n<pre><code class=\"typescript\">\/\/ app\/api\/screenshot\/route.tsconst microlinkApi = `https:\/\/api.microlink.io\/` + \u00a0`?url=${encodeURIComponent(targetUrl)}` + \u00a0`&amp;screenshot=true` + \u00a0`&amp;waitForTimeout=3000` + \u00a0`&amp;animations=false` + \u00a0`&amp;viewport.width=1920` + \u00a0`&amp;viewport.height=1080` + \u00a0`&amp;viewport.deviceScaleFactor=1`;<\/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<h3>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u043e\u043c<\/h3>\n<p>\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u0435\u043d. <a href=\"http:\/\/Context.dev\" rel=\"noopener noreferrer nofollow\">Context.dev<\/a> API \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u044b\u0440\u044b\u0435 CSS-\u0441\u0442\u0438\u043b\u0438 \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u043b \u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435: <code>--primary-color: #3B82F6<\/code>, <code>font-size: clamp(1rem, 2.5vw, 1.5rem)<\/code>. Jina Reader \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a CSS-\u0444\u0430\u0439\u043b\u0430\u043c \u2014 \u043e\u043d \u043f\u0430\u0440\u0441\u0438\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 HTML \u0438 Markdown.<\/p>\n<p>LLM \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e, \u0440\u0435\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u044f \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 95% \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0430: \u0446\u0432\u0435\u0442\u0430, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u2014 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442.<\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u2014 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f SVG-\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0435\u043d\u0434\u0430. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 <a href=\"http:\/\/Context.dev\" rel=\"noopener noreferrer nofollow\">Context.dev<\/a> \u044d\u0442\u043e \u0443\u043c\u0435\u043b; \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0444\u043e\u0440\u043a \u2014 \u043d\u0435\u0442.<\/p>\n<h3>\u041f\u043e\u0440\u0442\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043d\u0430 Windows<\/h3>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Windows \u0431\u0435\u0437 Git \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e Node.js, \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0430\u043a\u0435\u0442\u043d\u0443\u044e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443:<\/p>\n<pre><code class=\"bat\">@echo offREM install.bat\u200becho Downloading portable Node.js v20...curl -L -o node.zip https:\/\/nodejs.org\/dist\/v20.11.0\/node-v20.11.0-win-x64.ziptar -xzf node.zipren node-v20.11.0-win-x64 node\u200becho Installing dependencies...set \"PATH=%NODE_DIR%;%PATH%\"call npm install --no-audit --no-fund\u200becho Done! Edit .env and run run.batpause<\/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 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0440\u0442\u0430\u0442\u0438\u0432\u043d\u044b\u0439 Node.js, \u0440\u0430\u0441\u043f\u0430\u043a\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 <code>designmd-portable\/node\/<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438. NPM-\u043a\u044d\u0448 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>npm_config_cache<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432 <code>%AppData%<\/code>.<\/p>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a: \u0432\u044b \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 <code>install.bat<\/code>, \u0438 \u0447\u0435\u0440\u0435\u0437 \u0434\u0432\u0435 \u043c\u0438\u043d\u0443\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u043a \u0440\u0430\u0431\u043e\u0442\u0435. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 <code>npm install -g<\/code>, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0430\u0432 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 Node \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 Open DesignMD \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u2014 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>\u041e\u0434\u043d\u0430 \u043b\u043e\u0432\u0443\u0448\u043a\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c: \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c <code>install.bat<\/code> \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c\u0438 \u0432 \u043f\u0443\u0442\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>C:\\My Projects\\<\/code>), NPM \u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0440\u0442\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e Node.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u0445. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435: \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043f\u0443\u0442\u044c \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>D:\\tools\\open-designmd\\<\/code>.<\/p>\n<h3>\u0418\u0442\u043e\u0433\u0438 \u0438 CTA<\/h3>\n<p>Open DesignMD \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u043e\u0440\u043a. \u042d\u0442\u043e \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0442\u0440\u0435\u043d\u0434 SaaS-\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438: \u043a\u043e\u0433\u0434\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u043d\u044b\u043c, \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c. Jina Reader, Microlink \u0438 OpenRouter \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0437\u0440\u0435\u043b\u044b\u0435, \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442 \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u043f\u0440\u0438\u0435\u0442\u0430\u0440\u043d\u044b\u0439 API.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u043b\u0441\u044f \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0431\u043e\u0440 \u2014 \u043f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0432\u0451\u0437\u0434\u043a\u0443 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044e <a href=\"https:\/\/github.com\/context-dot-dev\/designmd-supply\" rel=\"noopener noreferrer nofollow\">context-dot-dev\/designmd-supply<\/a> \u0437\u0430 \u0441\u0430\u043c\u0443 \u0438\u0434\u0435\u044e, \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c\u0443 \u0444\u043e\u0440\u043a\u0443 <a href=\"https:\/\/github.com\/Yp-pro\/open-designmd\" rel=\"noopener noreferrer nofollow\">Yp-pro\/open-designmd<\/a> \u0437\u0430 \u0435\u0451 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0423\u0434\u0430\u0447\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0441\u0430\u0439\u0442\u043e\u0432!<\/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\/1042406\/\">https:\/\/habr.com\/ru\/articles\/1042406\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 Context.dev API \u043d\u0430 Jina Reader \u0438 Vercel AI SDK, \u0447\u0442\u043e\u0431\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c DESIGN.md \u0434\u043b\u044f AI-\u0430\u0433\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.\u0415\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u043a\u043e\u0440\u043c\u0438\u0442\u044c \u0441\u044b\u0440\u043e\u0439 HTML \u0441 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 LLM-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 \u044d\u0442\u0443 \u0431\u043e\u043b\u044c: 20 000 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0443\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 &lt;div&gt;-\u0441\u0443\u043f \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0442\u0435\u0433\u0438. \u0418\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 designmd.supply \u2014 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0430\u0440\u0441\u0438\u0442 \u0441\u0430\u0439\u0442 \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 DESIGN.md \u0434\u043b\u044f AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0433\u043e \u044f\u0434\u0440\u043e \u043e\u043f\u0438\u0440\u0430\u043b\u043e\u0441\u044c \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u044b\u0439 Context.dev API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u043b \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f.&lt;!&#8212; cut &#8212;&gt;\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0444\u043e\u0440\u043a open-designmd \u0440\u0435\u0448\u0438\u043b \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u0438\u043d\u0430\u0447\u0435: \u0432\u0441\u0435 \u043f\u0440\u043e\u043f\u0440\u0438\u0435\u0442\u0430\u0440\u043d\u044b\u0435 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u044b \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u043d\u0430 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u2014 Jina Reader \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 HTML \u0432 Markdown, Microlink \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432, \u0438 \u043b\u044e\u0431\u043e\u0439 LLM-\u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 OpenRouter \u0438\u043b\u0438 Ollama. \u0412\u0435\u0441\u044c \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0431\u0435\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438 \u043a\u0440\u0435\u0434\u0438\u0442\u043d\u044b\u0445 \u043a\u0430\u0440\u0442.\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u2014 \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u044d\u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u043b\u043e\u0432\u0443\u0448\u043a\u0430\u043c\u0438 \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u043f\u043e \u0445\u043e\u0434\u0443.\u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0451 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u044b \u2014 Cursor, Windsurf, Copilot \u2014 \u0443\u043c\u0435\u044e\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u0432\u0430\u0448 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u041d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u043c \u043d\u0443\u0436\u0435\u043d \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442: \u0446\u0432\u0435\u0442\u0430, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0430\u0442\u044c \u043d\u0435\u0439\u0440\u043e\u0441\u0435\u0442\u0438 DESIGN.md \u2014 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u043c\u0438 \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438, \u0432\u044b\u0442\u0430\u0449\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u044f\u043c\u043e \u0441 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430.designmd.supply \u0434\u0435\u043b\u0430\u043b \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e: \u0437\u0430\u0431\u0438\u0440\u0430\u043b URL, \u043f\u0430\u0440\u0441\u0438\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438 \u0447\u0435\u0440\u0435\u0437 LLM \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u0435\u0432\u043e\u0439 \u0433\u0430\u0439\u0434. \u041d\u043e \u043a\u043e\u0433\u0434\u0430 Context.dev \u0437\u0430\u043a\u0440\u044b\u043b \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0435\u043f\u043b\u043e\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u2014 API \u043e\u0442\u0432\u0435\u0447\u0430\u043b 502 \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u043a\u043b\u044e\u0447.\u0424\u043e\u0440\u043a open-designmd \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u043e \u0442\u0440\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:\u041f\u0430\u0440\u0441\u0438\u043d\u0433 HTML \u2192 Markdown \u0431\u0435\u0440\u0451\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f Jina Reader (r.jina.ai) \u2014 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439, \u0431\u0435\u0437 \u043b\u0438\u043c\u0438\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435.\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0435\u043b\u0430\u0435\u0442 Microlink \u0438\u043b\u0438 Thum.io \u2014 \u0442\u043e\u0436\u0435 \u0431\u0435\u0437 \u043e\u043f\u043b\u0430\u0442\u044b.\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e DESIGN.md \u0431\u0435\u0440\u0451\u0442 \u043b\u044e\u0431\u043e\u0439 LLM \u2014 DeepSeek \u0447\u0435\u0440\u0435\u0437 OpenRouter, \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 Ollama, \u0438\u043b\u0438 \u043f\u0440\u044f\u043c\u043e\u0439 API \u043a Anthropic\/Google.\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d\u0430\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435:[ Target URL ]  \u00a0 \u00a0  \u2502 \u00a0 \u00a0  \u251c\u2500\u2500\u2500\u25ba [ Jina Reader (Free Markdown) ] \u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u00a0 \u00a0  \u2514\u2500\u2500\u2500\u25ba [ Microlink (Full HD Screenshot) ] \u2500\u2500\u2500\u253c\u2500\u25ba [ Open DesignMD Backend ] \u2500\u2500\u2500\u25ba [ Local LLM \/ OpenRouter ] \u2500\u2500\u2500\u25ba [ DESIGN.md ]\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 \u2014 Context.dev \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0433\u0434\u0435 \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u043d\u0435\u0442. Jina Reader \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0432 \u0447\u0438\u0441\u0442\u044b\u0439 Markdown, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432, \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438 \u0431\u043b\u043e\u043a\u043e\u0432 \u043a\u043e\u0434\u0430. LLM \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 Markdown \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u0438\u0437 \u043d\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b: \u043f\u0430\u043b\u0438\u0442\u0440\u0443, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0448\u043a\u0430\u043b\u0443, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 CSS-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b.\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u043d\u043e Markdown, \u0430 \u043d\u0435 \u0441\u044b\u0440\u044b\u0435 CSS? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 React-\u0441\u0430\u0439\u0442\u044b \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439. Tailwind, CSS-in-JS, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043b\u0435\u0442\u0443, \u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u2014 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 DOM. Jina Reader \u043f\u0430\u0440\u0441\u0438\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e, \u0438 LLM \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043c\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u041c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b\u0438 \u044d\u0442\u043e \u043d\u0430 \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u0445 \u0441\u0430\u0439\u0442\u043e\u0432: \u043d\u0430 Tailwind-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0430 \u043e\u043a\u043e\u043b\u043e 95%.\u0427\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 Next.js \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u041f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 Next.js 16 \u0441 Turbopack \u0438 Tailwind CSS v4. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0434\u043b\u044f App Router:open-designmd\/\u251c\u2500\u2500 app\/\u2502 \u00a0 \u251c\u2500\u2500 api\/\u2502 \u00a0 \u2502 \u00a0 \u2514\u2500\u2500 design-md\/\u2502 \u00a0 \u2502 \u00a0 \u00a0 \u00a0 \u2514\u2500\u2500 route.ts \u00a0 \u00a0 \u00a0 \u2190 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 API-\u0440\u043e\u0443\u0442\u2502 \u00a0 \u251c\u2500\u2500 layout.tsx\u2502 \u00a0 \u2514\u2500\u2500 page.tsx\u251c\u2500\u2500 components\/\u251c\u2500\u2500 lib\/\u251c\u2500\u2500 .env \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u2190 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u251c\u2500\u2500 .gitignore\u251c\u2500\u2500 package.json\u2514\u2500\u2500 install.bat \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0  \u2190 Windows-\u043f\u043e\u0440\u0442\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u041f\u043e\u0440\u0442\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u043c\u0430. \u0414\u043b\u044f Windows \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043f\u0430\u043f\u043a\u0430 designmd-portable\/node\/ \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0431\u0438\u043d\u0430\u0440\u043d\u0438\u043a\u0430\u043c\u0438 Node.js v20. \u0421\u043a\u0440\u0438\u043f\u0442\u044b install.bat \u0438 run.bat \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442 NPM-\u043a\u044d\u0448 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c Windows-\u041f\u041a \u0431\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Node \u0438\u043b\u0438 Git.\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430\u043c\u0421\u0430\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u2014 \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a LLM \u0432 \u0444\u0430\u0439\u043b\u0435 app\/api\/design-md\/route.ts. \u041a\u043e\u0434 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u044f\u0442\u044c \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432: OpenRouter, Ollama (\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e), Google AI Studio, Anthropic \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 OpenAI.\/\/ app\/api\/design-md\/route.ts\u200bimport { createOpenAI } from &#8216;@ai-sdk\/openai&#8217;;import { createOllama } from &#8216;ollama-ai-provider&#8217;;import { createGoogle } from &#8216;@ai-sdk\/google&#8217;;import { createAnthropic } from &#8216;@ai-sdk\/anthropic&#8217;;\u200bconst AI_PROVIDER = process.env.AI_PROVIDER || &#8216;openrouter&#8217;;const AI_MODEL = process.env.AI_MODEL || &#8216;deepseek\/deepseek-chat&#8217;;\u200bfunction getActiveModel() { \u00a0switch (AI_PROVIDER) { \u00a0 \u00a0case &#8216;ollama&#8217;: \u00a0 \u00a0 \u00a0return createOllama({ \u00a0 \u00a0 \u00a0 \u00a0baseURL: process.env.OLLAMA_URL || &#8216;http:\/\/127.0.0.1:11434\/api&#8217;, \u00a0 \u00a0  })(AI_MODEL); \u00a0 \u00a0 \u00a0 \u00a0case &#8216;google&#8217;: \u00a0 \u00a0 \u00a0return createGoogle({ \u00a0 \u00a0 \u00a0 \u00a0apiKey: process.env.GOOGLE_API_KEY, \u00a0 \u00a0  })(AI_MODEL); \u00a0 \u00a0 \u00a0 \u00a0case &#8216;anthropic&#8217;: \u00a0 \u00a0 \u00a0return createAnthropic({ \u00a0 \u00a0 \u00a0 \u00a0apiKey: process.env.ANTHROPIC_API_KEY, \u00a0 \u00a0  })(AI_MODEL); \u00a0 \u00a0 \u00a0 \u00a0case &#8216;openrouter&#8217;: \u00a0 \u00a0default: \u00a0 \u00a0 \u00a0return createOpenAI({ \u00a0 \u00a0 \u00a0 \u00a0baseURL: &#8216;https:\/\/openrouter.ai\/api\/v1&#8217;, \u00a0 \u00a0 \u00a0 \u00a0apiKey: process.env.OPENROUTER_API_KEY, \u00a0 \u00a0 \u00a0 \u00a0compatibility: &#8216;compatible&#8217;, \u00a0 \u00a0  }).chat(AI_MODEL);  }}\u0411\u043b\u043e\u043a switch \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 AI_PROVIDER. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0442\u0430\u0432\u0438\u0442\u0435 ollama, SDK \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 11434 \u2014 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u043c\u0430\u0448\u0438\u043d\u0435. \u0414\u043b\u044f OpenRouter \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0436\u0435 createOpenAI, \u043d\u043e \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u043c baseURL, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0440\u043e\u0443\u0442\u0435\u0440 \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0434\u0435\u0441\u044f\u0442\u043a\u0430\u043c \u0434\u0435\u0448\u0451\u0432\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439.\u0411\u0430\u0433 Vercel AI SDK 5+: \u043c\u0435\u0442\u043e\u0434 .chat() \u0432\u043c\u0435\u0441\u0442\u043e \/v1\/responses\u0412\u043e\u0442 \u043b\u043e\u0432\u0443\u0448\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435, \u043a\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0441\u044f \u0434\u043e Vercel AI SDK 5+. \u041d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 SDK \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \/v1\/responses \u2014 \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442 OpenAI \u0434\u043b\u044f \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u00abresponses API\u00bb. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0448\u043b\u044e\u0437\u043e\u0432 \u2014 FreeLLMAPI, LiteLLM, OpenRouter \u2014 \u044d\u0442\u043e\u0442 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: 404 Not Found.\u041c\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0434\u0432\u0430 \u0447\u0430\u0441\u0430, \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044f\u0441\u044c \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c. \u0412 \u043b\u043e\u0433\u0430\u0445 \u0431\u044b\u043b\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e SDK \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 POST-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u043d\u0430 \/v1\/chat\/completions, \u0430 \u043d\u0430 \/v1\/responses \u2014 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 OpenAI \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0430 \u043a\u0430\u043a \u0431\u0435\u0442\u0430-\u0444\u0438\u0447\u0443 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 2025 \u0433\u043e\u0434\u0430. Vercel AI SDK 5+ \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u0438\u043b \u044d\u0442\u043e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0448\u043b\u044e\u0437\u043e\u0432 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0447\u0430\u0442-\u043a\u043e\u043c\u043f\u043b\u0438\u0448\u0435\u043d\u0441\u043e\u043c.\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 .chat() \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u043e\u0434\u0435\u043b\u0438:\/\/ \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e (\u0432\u044b\u0437\u043e\u0432\u0435\u0442 404 \u043d\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0448\u043b\u044e\u0437\u0430\u0445):const model = openai(&#8216;deepseek\/deepseek-chat&#8217;);\u200b\/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u043e:const model = openai.chat(&#8216;deepseek\/deepseek-chat&#8217;);\u041c\u0435\u0442\u043e\u0434 .chat() \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 SDK \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u2014 \u043d\u0430 \/v1\/chat\/completions. \u042d\u0442\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e \u0441 \u043b\u044e\u0431\u044b\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u043c \u0441 OpenAI \u0448\u043b\u044e\u0437\u043e\u043c, \u0432\u043a\u043b\u044e\u0447\u0430\u044f Ollama, LiteLLM \u0438 OpenRouter. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u2014 \u043e\u0434\u043d\u043e \u0441\u043b\u043e\u0432\u043e \u0432 \u0432\u044b\u0437\u043e\u0432\u0435, \u043d\u043e \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0444\u0438\u043a\u0441\u0430 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u043c\u043e\u043b\u0447\u0430 \u043f\u0430\u0434\u0430\u0435\u0442 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435.\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0431\u0430\u0433 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043a\u043e\u0432\u0430\u0440\u0435\u043d \u0442\u0435\u043c, \u0447\u0442\u043e SDK \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u044f\u0432\u043d\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u2014 \u043e\u043d \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 404, \u0438 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0442\u0438\u0445\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0434\u0440\u0443\u0433 \u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e DESIGN.md \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c \u0438\u043b\u0438 \u043e\u0431\u0440\u0435\u0437\u0430\u043d\u043d\u044b\u043c \u2014 \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442 \u0432 DevTools-\u043a\u043e\u043d\u0441\u043e\u043b\u0438.Hydration Mismatch: \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043b\u043e\u043c\u0430\u044e\u0442 React\u0414\u0440\u0443\u0433\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u2014 \u043e\u0448\u0438\u0431\u043a\u0430 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0432 Next.js. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u0430: \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00abBookmark Sidebar\u00bb) \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 DOM \u0435\u0449\u0451 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a React \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044e. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 HTML \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e, \u0438 React \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435.\u0412 layout.tsx \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442 suppressHydrationWarning \u043d\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:\/\/ app\/layout.tsx\u200bexport default function RootLayout({ children }: { children: React.ReactNode }) { \u00a0return ( \u00a0 \u00a0&lt;html lang=&#187;en&#187; suppressHydrationWarning&gt; \u00a0 \u00a0 \u00a0&lt;body&gt;{children}&lt;\/body&gt; \u00a0 \u00a0&lt;\/html&gt;  );}\u042d\u0442\u043e \u043d\u0435 \u043a\u043e\u0441\u0442\u044b\u043b\u044c \u2014 \u044d\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 React-\u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432. suppressHydrationWarning \u043d\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u0430 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 React: \u00ab\u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0435\u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u044b\u0445 \u0434\u0435\u0442\u0435\u0439\u00bb. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u0411\u0435\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043a\u0443\u0447\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 .env: \u043a\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0432\u044b\u0431\u0440\u0430\u0442\u044c\u0424\u0430\u0439\u043b .env \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c:# .env\u200bAI_PROVIDER=openrouterAI_MODEL=deepseek\/deepseek-chatOPENROUTER_API_KEY=your_key_here\u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u2014 \u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043d\u0430:AI_PROVIDER=ollamaAI_MODEL=llama3\u041f\u0440\u0438 \u044d\u0442\u043e\u043c Ollama \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e (ollama serve). \u041c\u043e\u0434\u0435\u043b\u044c \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435.\u0414\u043b\u044f Google AI Studio:AI_PROVIDER=googleAI_MODEL=gemini-2.0-flashGOOGLE_API_KEY=your_key_here\u041a\u043b\u044e\u0447\u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 .env, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0432 .gitignore:# .gitignore\u200bdesignmd-portable\/.envnode_modules\/.next\/\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u0438 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439\u041e\u0434\u043d\u0430 \u0438\u0437 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 \u2014 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. Microlink API \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043d\u0438\u043c\u043e\u043a \u0441\u0440\u0430\u0437\u0443, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 JavaScript-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u0414\u043b\u044f React-\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 CSS-\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u043c\u0438 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.\u0412 app\/api\/screenshot\/route.ts \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a Microlink API \u0441 3-\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u043c \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435\u043c \u0438 \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u043a\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439:\/\/ app\/api\/screenshot\/route.tsconst microlinkApi = `https:\/\/api.microlink.io\/` + \u00a0`?url=${encodeURIComponent(targetUrl)}` + \u00a0`&amp;screenshot=true` + \u00a0`&amp;waitForTimeout=3000` + \u00a0`&amp;animations=false` + \u00a0`&amp;viewport.width=1920` + \u00a0`&amp;viewport.height=1080` + \u00a0`&amp;viewport.deviceScaleFactor=1`;\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u043e\u043c\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u0435\u043d. Context.dev API \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u044b\u0440\u044b\u0435 CSS-\u0441\u0442\u0438\u043b\u0438 \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u043b \u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435: &#8212;primary-color: #3B82F6, font-size: clamp(1rem, 2.5vw, 1.5rem). Jina Reader \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a CSS-\u0444\u0430\u0439\u043b\u0430\u043c \u2014 \u043e\u043d \u043f\u0430\u0440\u0441\u0438\u0442 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 HTML \u0438 Markdown.LLM \u043a\u043e\u043c\u043f\u0435\u043d\u0441\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e, \u0440\u0435\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u044f \u0441\u0442\u0438\u043b\u0435\u0432\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u043f\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 95% \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0430: \u0446\u0432\u0435\u0442\u0430, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u0447\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u2014 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442.\u0412\u0442\u043e\u0440\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u2014 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f SVG-\u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 \u0438 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0435\u043d\u0434\u0430. \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 Context.dev \u044d\u0442\u043e \u0443\u043c\u0435\u043b; \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\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-481989","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/481989","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=481989"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/481989\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=481989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=481989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=481989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}