{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Михаила Озорнина: заметки с тегом дизайн",
    "_rss_description": "Главная · Блог · Работы ·",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/dizayn\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/dizayn\/json\/",
    "icon": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384",
    "author": {
        "name": "Михаил Озорнин",
        "url": "https:\/\/mikeozornin.ru\/blog\/",
        "avatar": "https:\/\/mikeozornin.ru\/blog\/user\/userpic@2x.jpg?1614204384"
    },
    "items": [
        {
            "id": "224",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/llm-and-ui-design\/",
            "title": "Дизайн с помощью ИИ: протестировал 35 модели с сгенерировал 138 картинок",
            "content_html": "<p class=\"lead\">Я сгенерировал одну и ту же задачу 38 разными агентами\/моделями, и показываю вам 150 итоговых картинок. Разница в стоимости между самым дорогим и дешевым вариантами — 410 раз.<\/p>\n<p>У этого поста есть еще версия на английском: <a href=\"https:\/\/mikeozornin.ru\/blog\/all\/llm-and-ui-design-en\/\">mikeozornin.ru\/blog\/all\/llm-and-ui-design-en<\/a><\/p>\n<p>Иногда коллеги, часто не дизайнеры, после анонсов всяких Клод-дизайнов, спрашивают каково оно. Как оно дизайнит, что это вообще. Насколько хороший дизайн можно ожидать, можно ли взять дизайн-систему и как потом довести до продакшена. Возможно, они хотят услышать, что нейросети заменят не только их, разработчиков, но и дизайнеров тоже, — тогда мы вместе выпиливать столы, жарить кофе или работать курьерами.<\/p>\n<p>Я решил проверить, как дела с ИИ-дизайном обстоят на начало мая 2026 года. Ситуацию быстро меняется, через полгода всё это будет уже неактуально, но сейчас вот так.<\/p>\n<h2>1 План эксперимента<\/h2>\n<p>Я опишу план эксперимента: процедуру и ограничения, чтобы вы могли во-первых, понять, насколько можно верить результатам, во-вторых, могли провалидировать или повторить их самостоятельно.<\/p>\n<p>TL;DR; Агенты рисовали три экрана: десктоп, мобильный и промостраницу через Paper MCP.<\/p>\n<h3>1.1 Процедура<\/h3>\n<p><aside class=\"aside-margin-right\"><a href=\"https:\/\/recipe-scaler.ru\/#\/about\">recipe-scaler.ru\/#\/about<\/a><\/aside><\/p>\n<p>Я дал одну и ту же задачу 34-м разным агентами + моделями. Задача звучала как «сделай три экрана для одного и того же продукта»: десктопный экран, мобильный экран и промостраницу. В качестве продукта взял свою рецептилку и скормил агентам текст со страницы about.<\/p>\n<p>Я взял все популярные агенты и модели, которые сейчас представляю интерес.<\/p>\n<p>Агенты:<\/p>\n<ul>\n<li>Агенты основных вендоров моделей: Claude Code, Codex, даже Antigravity<\/li>\n<li>Самый популярный независимый закрытый агент рынке: Cursor<\/li>\n<li>Два самых популярных открытых агента (и единственные на сейчас, которые заслуживают внимания): Opencode и Kilo Code.<\/li>\n<\/ul>\n<p>Забегая вперед скажу, что в этой задаче агент не был принципиально важен.<\/p>\n<p>Модели использовались как в нативных провайдерах, так и сторонних через Openrouter. Модели:<\/p>\n<ul>\n<li>Флагманские модели американских лаб: Opus 4.7, Sonnet 4.6, Haiku 4.5, GPT 5.5 и 5.4, Gemini 3.1 Pro.<\/li>\n<li>Модели Cursor Auto, Composer 2 и Composer 2.5, а также нишевые игроки типа Grok 4.3,<\/li>\n<li>Все популярные китайские модели: Qwen 3.7, Qwen 3.6 Max Preview (и более старая Qwen3.5 397B A17B), GLM 5.1, MiniMax 2.7, DeepSeek V4 Pro, Kimi 2.6.<\/li>\n<\/ul>\n<p>Всем моделям на входе передавалось задание в файле, оно было одинаковым,отличался только адрес файла — каждой модели выдавался свежий файл Paper, чтобы исключить любое влияние предыдущих запусков.<\/p>\n<p>Полный промт для Пейпера ниже (вариант для фигмы отличался только сменой инструмента и ссылки).<\/p>\n<pre class=\"e2-text-code\"><code class=\"markdown\">I am creating a design for a product.\r\n\r\n# Task\r\nCreate new pages:\r\n1. A desktop screen interface — choose the main screen and design it. Screen width: 1400px.\r\n2. A recipe screen interface for mobile. You need to design a recipe screen. Screen width: 375px.\r\n3. A promo page describing the product. Screen width: 1400px.\r\n\r\n# Where to create it and expected result\r\nWhere to create: TODO\r\n\r\nIf the mockups are long, you can make a tall frame\/artboard\/layout. You do not have to fit standard screen proportions.\r\n\r\nUse Paper MCP to create the design.\r\n\r\nUse English for the content inside the mockups.\r\n\r\nYou can use pregenerated images for illustations: '\/Users\/mike\/work\/git-repos\/projects\/ai workshops\/design with ai-tmp'. If you have built-in tools for drawing images, you can use them too.\r\n\r\nBelow is the product information, which also describes the product capabilities.\r\n\r\n# Product information\r\n\r\n```\r\nRecipe Scaler — app for those who cook\r\nIt reliably stores your recipes, helps you cook, works on your phone and computer, even offline.\r\n\r\nAccess from phone and computer\r\nYou will have access to your recipes both on your phone and computer. The apps will sync automatically, even from offline.\r\nOn each platform, the web application uses familiar ways of working: hotkeys on the computer, and standard gesture controls on the phone.\r\nOn the phone it works as PWA — install it on your home screen and you won't tell the difference from other apps.\r\n\r\nRecalculate recipes for different serving sizes\r\nThis is where the app started: recalculating recipes for different serving sizes.\r\nWhen recalculating, not only the ingredient list is updated, but also the recipe text.\r\n\r\nCooking assistance\r\nThe app will help you cook: it won't turn off the screen while cooking, will track time and even send push notifications. Timers are, of course, available on the computer too.\r\n\r\nShopping list\r\nAdd ingredients to your shopping list one by one from a recipe, or add the whole recipe at once.\r\nMark purchased items, sort the list the way you like, and share the list with the person going to the store.\r\n\r\nAutomagical recipe import\r\nRecipe Scaler can import a recipe from text, a single link, or multiple links at once.\r\nYou can also upload a file in almost any text format and even photos of pages from a cookbook, notebook, or handwritten recipe journal.\r\n\r\nAI assistant for recipes\r\nIf something goes wrong while you cook, the AI assistant can help you save the dish and figure out what to do next.\r\nIt can also explain the recipe, suggest the next step, and point out the equipment you may need.\r\nIt's like having a chef always at your fingertips, ready to answer your questions.\r\n\r\nDiscover section\r\nFind new recipes in Discover.\r\nExplore interesting authors, save recipes to your collection, and build your own shortlist of the best finds.\r\n\r\nHealth-friendly: nutrition calculation\r\nRecipe Scaler will calculate the nutritional value (Kcal, protein, fat, carbs) for a dish and let you view it conveniently: for the entire dish, per 100 grams, or per serving.\r\nIf artificial intelligence makes a mistake in the numbers, you can always correct the nutritional value of the needed ingredient.\r\n\r\nCookbook\r\nDownload a public recipe collection (your own or someone else's) as a beautifully formatted PDF.\r\nThe cookbook includes recipes with photos, ingredients, and cooking instructions.\r\n\r\nTelegram bot\r\nSend the bot a recipe text or a link to it and the bot will save the recipe to your account.\r\n\r\nChrome extension for quick import\r\nInstall the Recipe Scaler Importer extension and import the recipe into your account in one click.\r\n\r\nAI assistant integration\r\nConnect your AI assistant to recipes. It can search recipes, add new ones, or help you cook the way you're used to: in chat, by voice. To connect, use the link: recipe-scaler.ru\/mcp\r\nFor techies: yes, this is an MCP server.\r\n\r\nCareful handling of your data\r\nWe are paranoid about your privacy.\r\nThe app works without sign-up: we don't know your email or your Google login. Even Telegram is only needed for saving recipes. Don't want it? Don't use it.\r\nWe don't use trackers or product analytics.\r\nWe don't allow AI models to train on your recipes.\r\nData export and an API are available, so we don't hold your data hostage.\r\nMore details: recipe-scaler.ru\/#\/privacy\r\n\r\nIf we've convinced you to try:\r\nGo to app\r\n\r\nIf we haven't convinced you:\r\nWrite what's missing\r\n\r\nMade by Mikhail Ozornin with Cursor. App idea inspired by app by Roman Shamin.\r\n© Mikhail Ozornin, 2025<\/code><\/pre><h3>1.2 Особенности эксперимента<\/h3>\n<ul>\n<li>Моделям были даны базовые ограничения и инструкции, не было никаких уточнений по стилю, дизайн-системе и прочему. На уточняющие вопросы я не отвечал, скипал их. Вмешательства в процессе не было, максимум — если агент чего-то ждал, я просил начать или продолжить.<\/li>\n<li>Все модели, кроме Опуса 4.7 работали на максимально возможной установке ризонинга или параметра его замещающего (эффорт для клод кода).<\/li>\n<li>Я специально не давал пожеланий по стилю, не прикладывал никакую дизайн-систему, не описывал более  важные и менее важные сценарии. Мне хотелось проверить не что я смогу задизайнить с ллм, а что сможет сам агент.<\/li>\n<li>Все тексты были на английском. Это небольшой чит для моделей — хороших шрифтов для английского заметно больше, чем для кириллицы. С кириллицей было бы похуже, я думаю. И шрифтовой выбор был бы более примитивный, и вообще смело бы выбрали шрифты, в которых вообще не бывает кириллицы.<\/li>\n<li>Для дизайна использовался Paper MCP, в качестве резервного варианта — Figma MCP. Paper MCP работает лучше, быстрее и открыт к большему числу агентов. Фигма не позволяет открытым агентам Опенкод и Кило с ними работать. С Figma MCP я тоже проверил, просто запусти вариантов поменьше.<\/li>\n<li>Чтобы сравнение было честнее, я не чинил макеты руками, максимум — изредка растягивал фрейм, если агент сделал артборд меньше собственного контента. Обидно было видеть, что вот же оно.<\/li>\n<\/ul>\n<h3>1.3 Формальные цели<\/h3>\n<p>Что я хотел посмотреть и проверить:<\/p>\n<ul>\n<li>Результат: насколько сделанные макеты вообще похожи на решение задачи, насколько результат можно использовать в работе, насколько красиво, аккуратно и в целом хорошо.<\/li>\n<li>Внутренности: насколько чисто сверстано внутри, хочется ли помыть после этого руки.<\/li>\n<li>Что по стоимости решения.<\/li>\n<li>Насколько сильно результат зависит от агента.<\/li>\n<li>Насколько сильно результат зависит от уровня ризонинга.<\/li>\n<\/ul>\n<p>В целом я хотел понять, какие модели и агенты имеет смысле для чего-то использовать, а какие не имеет.<\/p>\n<h2>2 Результаты<\/h2>\n<p>Разрыв между моделями огромный — некоторые верстали интересно и красиво. Другие верстали нейрослоп в худшем его понимании, третьи — вообще не могли справиться с тулами и выдавали сломанный макет.<\/p>\n<p>Лучший результат (всё — Опус 4.7 xhigh):<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__all@2x.png\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__all-2400@2x.png\" width=\"658.5\" height=\"1200\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__all@2x.png\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__all-2400@2x.png\" width=\"566\" height=\"1200\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__all@2x.png\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__all-2400@2x.png\" width=\"756.5\" height=\"1200\" alt=\"\" \/>\n<\/a><\/div>\n<p>Худший результат (Хайку, Квен 3.5 и одна из итераций Дипсика)<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__all@2x.png\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__all-2400@2x.png\" width=\"1200\" height=\"665.5\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__all@2x.png\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__all-2400@2x.png\" width=\"922\" height=\"1200\" alt=\"\" \/>\n<\/a><\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__all-2400@2x.png\" width=\"1200\" height=\"903\" alt=\"paper__opencode__deepseek-v4-pro-2__all@2x.png\" \/>\n<\/a><\/div>\n<p>Остальные находятся где-то между. Ниже будет табличка с результатами, а пока поделюсь впечатлениями.<\/p>\n<h3>2.1 Качество результата<\/h3>\n<p>Модели разбились на четыре категории:<\/p>\n<p><b>Фенси-дизайн, из которого можно выжать что-то интересное<\/b><br \/>\nТакая модель один — Opus 4.7. Каждым этажом и микроформатом видно, что она выпендривается. Самые интересные и сложные промостраницы. Единственные промостраницы, которые не сверстаны как растянутая мобилка. Покажи такой дизайн издалека программисту, он подумает, что без дизайнера не обошлось.<\/p>\n<p>Примеры мелочей оттуда:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-1.1@2x.png\" width=\"375\" height=\"505\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-1.2@2x.png\" width=\"1160\" height=\"602\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Image-1.3@2x.png\" width=\"1123\" height=\"657\" alt=\"\" \/>\n<\/div>\n<p><b>Середнячки<\/b><br \/>\nДесктопный и мобильный интерфейс простой, но понятный, промостраница скучная (ну прямо как у меня сейчас). Нейродизайн видно сразу, но он хотя бы аккуратный и чистый. При этом явных косяков нет, использовать такое когда под рукой нет дизайнера вполне можно. Opus 4.6, Sonnet 4.6, GPT 5.4, Cursor Auto, Qwen 3.6 и с натяжкой GLM 5.1 (если справится с тулами).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-2.1@2x.png\" width=\"375\" height=\"840\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-2.2@2x.png\" width=\"375\" height=\"840\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-2.3@2x.png\" width=\"736\" height=\"414\" alt=\"\" \/>\n<\/div>\n<p><b>Совсем уже типичный нейрослоп-дизайн<\/b><br \/>\nНейрослоп в худших его проявлениях, заметней всего его на промостранице. Буквально не за что зацепиться глазами. Например, Minimax 2.7, Kimi 2.6 (чуть лучше, но все же здесь), Composer 2 Cursor (доученный Kimi 2.5) тоже недалеко ушел. Даже в целом неплохой Gemini 3.1 Про тут. Grok 4.3 тоже говорит «всем чмоки в этом чате».<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-3.1@2x.png\" width=\"1400\" height=\"2931\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-3.2@2x.png\" width=\"1400\" height=\"2038\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-3.3@2x.png\" width=\"1400\" height=\"2646\" alt=\"\" \/>\n<\/div>\n<p><b>Те модели, что не смогли справиться с тулами<\/b><br \/>\nЭто были Qwen 3.5 39, и в 50% случаев GLM 5.1 с DeepSeek V4  Pro — иногда они справлялись, иногда нет. В эту категорию попадает Haiku 4.5 Антропика, а он, на минуточку, в 1.5 раза дороже GLM 5.1 и в 4 раза дороже, чем Minimax 2.7, которые показали себя лучше его.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-4.1@2x.png\" width=\"1225\" height=\"628\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Images-4.2@2x.png\" width=\"755\" height=\"449\" alt=\"\" \/>\n<\/div>\n<p>Многим не давалась концепция десктоп-приложения, некоторые делали эдиториал-сайт. Это было бы нормально в целом для сайта рецептов, но не для личного приложения менеджера рецептов. Явно я этого не формулировал, но как будто из контекста можно было догадаться.<\/p>\n<p>Мне кажется, что вот таким было пользоваться ежедневно было бы не очень удобно. Усиливается это с добавлением скилла (будет ниже), там у модели начинается просто горе от ума.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__desktop@2x.png\" width=\"1400\" height=\"2101\" alt=\"\" \/>\n<\/div>\n<p>У самых слабых моделей всплывают типичный нейрослоп: рамки на рамках, градиенты или цветные плашки, мусор везде, эмодзи, плохая иерархия и ритм. Ощущение, что экраны собрали из того, что не пригодилось моделям получше.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-1@2x.png\" width=\"1400\" height=\"670\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-2@2x.png\" width=\"1400\" height=\"916\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-3@2x.png\" width=\"1320\" height=\"480\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-4@2x.png\" width=\"1400\" height=\"633\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-5@2x.png\" width=\"1400\" height=\"2000\" alt=\"\" \/>\n<\/div>\n<p>Заметно, что у всех с мобильной версии лучше, чем с промо. Там в целом более простая верстка, меньше элементов, сильные ограничения (узкая колонка). Как следствие — верстка лучше, надежнее и крепче. Как только появляется широкая страница, многие не могут сделать лучше, чем просто растянуть мобильную верстку по ширина 375 → 1400.<\/p>\n<p>Кими 2.6 как-то справился с мобилкой, но не смог ничего на подобном уровне сделать с промостранице. Десктоп тоже плохой.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/Mobile-vs-Promo@2x.png\" width=\"907.5\" height=\"739\" alt=\"\" \/>\n<\/div>\n<h3>2.2 Качество верстки<\/h3>\n<p>В Paper все модели верстают примерно одинаково — нормально, в Фигме же ГПТ верстал совсем плохо. Все в одном фрейме, по сути — абсолютами. Кожаного дизайнера за такое бы на ревью не похвалили. Он же (ГПТ) в Пейпере верстал нормально, видимо тулы Пейпера попроще, получше и более понятны.<\/p>\n<p>Фигма — все сверстано в одном фрейме, размеры рандомные, по сути если бы в вебе все верстали абсолютами, это ГПТ 5.5.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/inside-figma-gpt-5.5-light@2x.png\" width=\"1440\" height=\"900\" alt=\"\" \/>\n<\/div>\n<p>Тот же ГПТ 5.5 в Пейпере — в целом все чисто, дом-структура нормальная, некоторые слои даже хорошо названы. Кратная разница.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/inside-paper-gpt-5.5-light@2x.png\" width=\"1440\" height=\"900\" alt=\"\" \/>\n<\/div>\n<h3>2.3 Размышления и удивления по ходу эксперимента<\/h3>\n<ol start=\"1\">\n<li>Поразительно, насколько модели ГПТ плохи в дизайне. Как модели для разработки они в целом нормальные, и отторжения не вызывают, а для дизайна ужас. Причем на том одном эксперименте, что я делал, 5.5 оказалась даже хуже, чем 5.4, хотя дороже примерно вдвое. Единственная СОТА-модель (state of the art), которая проигрывает многим более слабым, в том числе китайцам.<\/li>\n<li>Гемини 3.1 показал себя очень плохо. И в Антигравити (их агент, форк винсёрфа) и в Курсоре. И если про Антигравити я могу понять, он очень плохо сделан, то Курсор — нормальный агент. Недопустимо плохо для модели такого уровня.<\/li>\n<li>Агент в целом не принципиально влияет на результат, он не может сделать из не-опус-модели опус-результат. Т. е. результат в этой простой задаче в первую очередь определяется моделью, и лишь потом агентом. При этом, разница все еще есть. ГПТ 5.4 в Курсоре показал себя даже лучше, чем в родном Кодексе.<\/li>\n<li>Курсор + Опус 4.7 оказался вдвое дороже чем та же модель в Кило, Курсор очень активно собирал обратную связь и постоянно себя скриншотил. Результат в целом мне тоже нравится больше. Особенно должна помочь такая<\/li>\n<li>У моделей есть стиль. ГПТ во всех агентах узнается, Опус 4.7 тоже узнается во всех. По результату я бы предположил, что Опус 4.7 и Опус 4.6 явно тяготеют к одной модели, стиль похожий. У Соннета стиль другой, это не просто обрезанный Опус, это разные модели. А вот Опус от снижение рисонинга (xhigh → med) делает хуже, но остается тем же Опусом по стилю.<\/li>\n<li>Модели, которые по ценам за токены совпадают, не совпадают в финальной цене. Формально ГПТ 5.5 и Опус 4.7 стоит одинаково (ГПТ — 30 долларов, Опус 4.7 — 25). Но это цена за миллион токенов, а тратят они по-разному. Именно 5.5 у меня нет, но был в Курсоре ГПТ 5.4 — у него 4.5 М токенов, а у Опуса (тоже в Курсоре) — 15 М.<\/li>\n<li>Разница между самым дорогим и дешевым вариантами — 410 раз. Понятно, что и разница между ними в качестве — тоже дофига, может даже больше, чем в 410 раз.<\/li>\n<li>Визуально работы Опуса неплохие, но разваливаются в мелочах. Начиная с того, что решение не той задачи, не того продукта, заканчивая версткой. Издалека красиво, но как начнешь смотреть — клинит от кринжа. Наверное примерно такой же уровень кринжа у технарей, когда приносишь им вайбкод-код. Почти все варианты проще выкинуть, чем пытаться доработать.<\/li>\n<li>Еще один неприятный результат — аккаунт на Опенроутере забанили от моделей ОпенАПИ, Клода и Гемини. Пока не могу сказать почему, пытаюсь разобраться.<\/li>\n<\/ol>\n<h2>3 Все результаты по одному<\/h2>\n<p>Квоты для Клод кода указаны до недавнего двухкратного увеличения пятичасовой квоты. Т. е. нужно делить предположительно на два. Я не везде засек время или квоту, не везде квоту в целом можно было понять. Там, где написано токены — это и входящие, и исходящие токены, с учетом кеша, поэтому так много.<\/p>\n<p>Полная таблица результатов ниже.<\/p>\n<h3>3.1 Paper MCP<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Агент<\/b><\/td>\n<td><b>Модель + параметры<\/b><\/td>\n<td><b>Время<\/b><\/td>\n<td><b>Токены<\/b><\/td>\n<td><b>Стоимость<\/b><\/td>\n<td><b>Комментарий<\/b><\/td>\n<\/tr>\n<tr>\n<td>Antigravity<\/td>\n<td>Gemini 3.1 Pro, high<\/td>\n<td>15 мин<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>Очень плохо использует тулы, чудовищная интеграция в инструмент<\/td>\n<\/tr>\n<tr>\n<td>Antigravity<\/td>\n<td>Gemini 3.5 Flash<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>Заметно лучше, чем Gemini 3.1 Pro (но рост от его уровня несложный). Единственный, кто решил сделать дарк-мод.<\/td>\n<\/tr>\n<tr>\n<td>Claude Code<\/td>\n<td>Opus 4.7, xhigh<\/td>\n<td>10—15 мин<\/td>\n<td>—<\/td>\n<td>75%+ квоты pro · 5h<\/td>\n<td>Недолго. Дорого. Офигенно.<\/td>\n<\/tr>\n<tr>\n<td>Claude Code<\/td>\n<td>Opus 4.8, xhigh<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>53% квоты pro · 5h (уже удвоенной)<\/td>\n<td>Жрет больше, делает не факт, что лучше, чем 4.7. За три экрана съел половину уже удвоенной 5h pro-квоты.<\/td>\n<\/tr>\n<tr>\n<td>Claude Code<\/td>\n<td>Opus 4.7, med<\/td>\n<td>5—10 мин<\/td>\n<td>—<\/td>\n<td>56% квоты pro · 5h<\/td>\n<td>Сохраняет стиль Опуса 4.7, упрощает реализацию<\/td>\n<\/tr>\n<tr>\n<td>Claude Code<\/td>\n<td>Opus 4.6, Max reasoning<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>37% квоты pro · 5h<\/td>\n<td>В целом выглядит как упрощенный Опус 4.7, сильно ближе к Соннету по общему лейауту<\/td>\n<\/tr>\n<tr>\n<td>Claude Code<\/td>\n<td>Sonnet 4.5, xhigh<\/td>\n<td>8 мин<\/td>\n<td>—<\/td>\n<td>25% квоты pro · 5h<\/td>\n<td>Существенно ближе к китайским моделям и моделям попроще. Аккуратно, но совсем нейтрально, совсем упрощено<\/td>\n<\/tr>\n<tr>\n<td>Claude Code<\/td>\n<td>Haiku 4.5<\/td>\n<td>3 мин<\/td>\n<td>—<\/td>\n<td>6% квоты pro · 5h<\/td>\n<td>Не справился даже с тулами. Нет ни одной причины использовать<\/td>\n<\/tr>\n<tr>\n<td>Codex<\/td>\n<td>GPT 5.5, xhigh<\/td>\n<td>15 мин<\/td>\n<td>—<\/td>\n<td>26% квоты plus · 5h<\/td>\n<td>Очень дешево по сравнению с опусом, результат соответствующий. Худший результат из СОТА-моделей (state of the art, которые)<\/td>\n<\/tr>\n<tr>\n<td>Codex<\/td>\n<td>GPT 5.4, xhigh<\/td>\n<td>15 мин<\/td>\n<td>—<\/td>\n<td>17% квоты plus · 5h<\/td>\n<td>Удивительно, что мне этот вариант нравится даже больше, чем у ГПТ 5.5<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>Auto<\/td>\n<td>25 мин<\/td>\n<td>13.7M<\/td>\n<td>$4.33<\/td>\n<td>Поразительно хороший результат для Авто-режима. Не знаю кто делал, может быть общую задачу делал как раз Опус на лоу-ризонинге, а реализация была каким-то ГПТ-нано. Выбор стиля как будто от Опуса<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>Opus 4.7<\/td>\n<td>35 мин<\/td>\n<td>15M<\/td>\n<td>$12.30<\/td>\n<td>Вдвое дороже, чем Опус 4.7 у Кило. Очень много проверяет себя, скриншотил буквально каждый этап и каждый блок. Результат чуть лучше<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>GPT 5.4, xhigh<\/td>\n<td>11 мин<\/td>\n<td>4.5M<\/td>\n<td>$2.20<\/td>\n<td>Агент другой, модель узнается, это все тот же ГПТ 5.4, что был в Кодексе. Но тут как будто чуть лучше вышло.<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>Gemini 3.1 Pro<\/td>\n<td>8 мин<\/td>\n<td>3.4M<\/td>\n<td>$2.01<\/td>\n<td>Результат сопоставимый с Гемини в Антигравити. Очень плохо для модели такого уровня.<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>Grok 4.3<\/td>\n<td>~18 мин<\/td>\n<td>3M<\/td>\n<td>$1.65<\/td>\n<td>От Грока впечатления смешанные. Мобилка в целом норм, на уровне других. Промо хуже чем собраться. Я думал будет дешевле, Грок 4.1 был очень классный именно за счет того, что стоил ну очень мало.<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>GLM 5.1 (z.ai coding plan)<\/td>\n<td>~7 мин<\/td>\n<td>—<\/td>\n<td>37% квоты lite · 5h<\/td>\n<td>ГЛМ в Курсоре почему-то не смог справиться с тулами<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>Composer 2<\/td>\n<td>5 мин<\/td>\n<td>1.3M<\/td>\n<td>$0.33<\/td>\n<td>Очень примитивно, но и зато очень дешево. Не соответствует тому уровню, что Курсор заявляет о своей модели, конечно. Но они честно говорили, что делают модель для кода в первую очередь<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>Composer 2.5<\/td>\n<td>—<\/td>\n<td>1.6M<\/td>\n<td>$0.21<\/td>\n<td>Сопоставим по стоимости с Composer 2, качество подросло, но все еще сильно не очень<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>MiMo V2.5 Pro<\/td>\n<td>—<\/td>\n<td>4.8M<\/td>\n<td>4.8M из 4,1B включённых попугаев<\/td>\n<td>Включённая модель Курсора; в подписке очень дёшево, в дизайне слабо<\/td>\n<\/tr>\n<tr>\n<td>Source Craft<\/td>\n<td>Default<\/td>\n<td>7 мин<\/td>\n<td>—<\/td>\n<td>65 попугаев из 4500 квоты<\/td>\n<td>Вроде недорого, но пользоваться смысла нет, нейрослописный нейрослоп<\/td>\n<\/tr>\n<tr>\n<td>Source Craft<\/td>\n<td>Default Thinking<\/td>\n<td>10 мин<\/td>\n<td>—<\/td>\n<td>74 попугаев из 4500 квоты<\/td>\n<td>Как будто Default и Default Thinkign модели в Яндекс Сорс Крафте не просто разные режимы одной модели, а разные модели: слишком разный результат, у рисонинг модели даже хуже.<\/td>\n<\/tr>\n<tr>\n<td>Kilo Code<\/td>\n<td>Opus 4.7 (Kilo cloud)<\/td>\n<td>27 мин<\/td>\n<td>6.3M<\/td>\n<td>$6.96<\/td>\n<td>Типичный Опус 4.7. Местами чисто, интересно, издалека дак прямо супер-пупер<\/td>\n<\/tr>\n<tr>\n<td>Kilo Code<\/td>\n<td>Hy3 preview (Kilo cloud)<\/td>\n<td>—<\/td>\n<td>1.6M<\/td>\n<td>$0.06<\/td>\n<td>Самая модная опенсорс-модель на опенроутере. Очень так себе.<\/td>\n<\/tr>\n<tr>\n<td>Kilo Code<\/td>\n<td>Qwen 3.6 Max Preview (Kilo cloud)<\/td>\n<td>17 мин<\/td>\n<td>2.2M<\/td>\n<td>$0.42<\/td>\n<td>В целом Квен для меня справился неплохо. Туповато, по крепко вполне. В промо просел как все. 1\/30 от Опуса по цене.<\/td>\n<\/tr>\n<tr>\n<td>Kilo Code<\/td>\n<td>Qwen 3.5 397<\/td>\n<td>6 мин<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>Не справился с тулами<\/td>\n<\/tr>\n<tr>\n<td>Kilo Code<\/td>\n<td>Grok Build 0.1 + Google Skill<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>$0.83<\/td>\n<td>Тот же промт со скиллом Google design; сравните с OpenCode Grok Build 0.1 без скилла<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>Opus 4.7, xhigh reasoning (OpenRouter)<\/td>\n<td>—<\/td>\n<td>2.7M<\/td>\n<td>$2.74<\/td>\n<td>Неплохо, что было бы в мобилке не знаю, потому что после этого экрана опенроутер меня забанил от американских СОТА-моделей<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>Kimi 2.6 (OpenRouter)<\/td>\n<td>42 мин<\/td>\n<td>3.62M<\/td>\n<td>$1.78<\/td>\n<td>Мобилка лучше остального, остальное плохо. Из забавного все дублировалось, но он потом через скриншоты обнаруживал и стирал сам. Из-за этого возился очень долго — 40+ минут.<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>Grok 4.3 (OpenRouter)<\/td>\n<td>—<\/td>\n<td>1.57M<\/td>\n<td>$1.09<\/td>\n<td>Грок уже был выше, но в отличие от Курсора, Опенкод с моделью вообще не справился, результат сильно хуже, чем у Курсора<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>Grok Build 0.1 (OpenRouter)<\/td>\n<td>—<\/td>\n<td>3.7M<\/td>\n<td>$1.24<\/td>\n<td>Быстро, слабо, дорого для такого качества<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>DeepSeek V4 Pro (Deepseek Cloud), Max Reasoning<\/td>\n<td>—<\/td>\n<td>4.1M<\/td>\n<td>$0.09<\/td>\n<td>Дипсик очень дешев, но справился лишь один раз. Мобилку можно смотреть, остальное плохо<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>DeepSeek V4 Pro (Deepseek Cloud), Max Reasoning<\/td>\n<td>—<\/td>\n<td>2.5M<\/td>\n<td>$0.05<\/td>\n<td>Дипсик очень дешев, но справился лишь один раз. Мобилку можно смотреть, остальное плохо<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>GLM 5.1 (z.ai coding plan)<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>В отличие от Курсора Опенкод смог добиться чего-то от ГЛМ, вышло в целом ок для его цены. Он стоит дешевле Хайку, которы не смог буквально ничего<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>Qwen 3.5 397<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>—<\/td>\n<td>Не смогло ничего<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>MiniMax 2.7 (OpenRouter)<\/td>\n<td>3 мин<\/td>\n<td>242K<\/td>\n<td>$0.03<\/td>\n<td>Невероятно быстро, невероятно дешево, качество соответствующее<\/td>\n<\/tr>\n<tr>\n<td>OpenCode<\/td>\n<td>Qwen 3.7 Max Preview (OpenRouter)<\/td>\n<td>—<\/td>\n<td>3.13M<\/td>\n<td>$7.95<\/td>\n<td>Дорого для своего результата, не улучшилось с 3.6 Max. Очень плохо работал с тулами (может быть особенность опенкода)<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>3.2 Figma MCP<\/h3>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Агент<\/b><\/td>\n<td><b>Модель + параметры<\/b><\/td>\n<td><b>Время<\/b><\/td>\n<td><b>Токены<\/b><\/td>\n<td><b>Стоимость<\/b><\/td>\n<td><b>Комментарий<\/b><\/td>\n<\/tr>\n<tr>\n<td>Claude Code<\/td>\n<td>Opus 4.7, xhigh<\/td>\n<td>~19 мин<\/td>\n<td>—<\/td>\n<td>121% квоты pro · 5h<\/td>\n<td>Опус в своем стиле, издалека особенно, но сожрал больше целой 5-часовой квоты<\/td>\n<\/tr>\n<tr>\n<td>Codex<\/td>\n<td>GPT 5.5, xhigh<\/td>\n<td>20 мин<\/td>\n<td>—<\/td>\n<td>16% квоты plus · 5h<\/td>\n<td>В фигме смог чуть лучше, чем в пейпере. Верстает чудовищно просто<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>GLM 5.1 (z.ai coding plan)<\/td>\n<td>25 мин<\/td>\n<td>—<\/td>\n<td>13% квоты lite · 5h<\/td>\n<td>В целом похуже чем в пейпере. Макет десктопа снизу это я перетащил слой куда нужно, ГЛМ не осилил корректный ДОМ<\/td>\n<\/tr>\n<tr>\n<td>Cursor<\/td>\n<td>Composer 2<\/td>\n<td>6 мин<\/td>\n<td>1.4M<\/td>\n<td>$0.43<\/td>\n<td>Катастрофически плохо, хуже чем в пейпере<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>Полный список всех картинок<\/h3>\n<h4>Paper MCP<\/h4>\n<h3>Antigravity + Gemini 3.1 Pro, high<\/h3>\n<p>Очень плохо использует тулы, чудовищная интеграция в инструмент.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"2.3668639053254\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__all-2400@2x.png\" width=\"1200\" height=\"507\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__mobile-2400@2x.png\" width=\"375\" height=\"1009\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__promo-2400@2x.png\" width=\"2400\" height=\"2373\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Antigravity + Gemini 3.5 Flash<\/h3>\n<p>Заметно лучше, чем Gemini 3.1 Pro (но рост от его уровня несложный). Единственный, кто решил сделать дарк-мод.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.6371077762619\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__all-2400@2x.png\" width=\"1200\" height=\"733\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__desktop-2400@2x.png\" width=\"2400\" height=\"1629\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__mobile-2400@2x.png\" width=\"667\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__promo-2400@2x.png\" width=\"840\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Claude Code + Opus 4.7, xhigh<\/h3>\n<p>Недолго. Дорого. Офигенно.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1317\" data-ratio=\"0.54875\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__all-2400@2x.png\" width=\"1317\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__desktop-2400@2x.png\" width=\"1200\" height=\"923\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__mobile-2400@2x.png\" width=\"505\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__promo-2400@2x.png\" width=\"563\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Claude Code + Opus 4.8, xhigh<\/h3>\n<p>Всё ещё уровень Опуса; на три экрана съел половину уже удвоенной 5h pro-квоты.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"734\" data-ratio=\"0.61166666666667\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__all-2400@2x.png\" width=\"734\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__desktop-2400@2x.png\" width=\"2400\" height=\"1817\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__mobile-2400@2x.png\" width=\"533\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__promo-2400@2x.png\" width=\"314\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Claude Code + Opus 4.7, med<\/h3>\n<p>Сохраняет стиль Опуса 4.7, упрощает реализацию.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1723\" data-ratio=\"0.71791666666667\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__all-2400@2x.png\" width=\"1723\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__desktop-2400@2x.png\" width=\"2400\" height=\"1509\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__mobile-2400@2x.png\" width=\"228\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__promo-2400@2x.png\" width=\"737\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Claude Code + Opus 4.6, max<\/h3>\n<p>В целом выглядит как упрощенный Опус 4.7, сильно ближе к Соннету по общему лейауту.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1997\" data-ratio=\"0.83208333333333\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__all-2400@2x.png\" width=\"1997\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__desktop-2400@2x.png\" width=\"2400\" height=\"1797\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__mobile-2400@2x.png\" width=\"485\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__promo-2400@2x.png\" width=\"427\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Claude Code + Sonnet 4.5, xhigh<\/h3>\n<p>Существенно ближе к китайским моделям и моделям попроще. Аккуратно, но совсем нейтрально, совсем упрощено.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.6382252559727\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__all-2400@2x.png\" width=\"2400\" height=\"1465\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__mobile-2400@2x.png\" width=\"269\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__promo-2400@2x.png\" width=\"1681\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Claude Code + Haiku 4.5<\/h3>\n<p>Не справился даже с тулами. Нет ни одной причины использовать.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.8031555221638\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__all-2400@2x.png\" width=\"2400\" height=\"1331\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__mobile-2400@2x.png\" width=\"375\" height=\"812\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__promo-2400@2x.png\" width=\"925\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Codex + GPT 5.5, xhigh<\/h3>\n<p>Очень дешево по сравнению с опусом, результат соответствующий. Худший результат из СОТА-моделей (state of the art, которые).<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"2.3976023976024\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__all-2400@2x.png\" width=\"2400\" height=\"1001\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__desktop-2400@2x.png\" width=\"1200\" height=\"840\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__mobile-2400@2x.png\" width=\"703\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__promo-2400@2x.png\" width=\"1200\" height=\"1171\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Codex + GPT 5.4, xhigh<\/h3>\n<p>Удивительно, что мне этот вариант нравится даже больше, чем у ГПТ 5.5.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.5345268542199\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__all-2400@2x.png\" width=\"1200\" height=\"782\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__desktop-2400@2x.png\" width=\"1185\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__mobile-2400@2x.png\" width=\"289\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__promo-2400@2x.png\" width=\"1575\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + Auto<\/h3>\n<p>Поразительно хороший результат для Авто-режима. Не знаю кто делал, может быть общую задачу делал как раз Опус на лоу-ризонинге, а реализация была каким-то ГПТ-нано. Выбор стиля как будто от Опуса.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"581\" data-ratio=\"0.48416666666667\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__all-2400@2x.png\" width=\"581\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__desktop-2400@2x.png\" width=\"1599\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__mobile-2400@2x.png\" width=\"569\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__promo-2400@2x.png\" width=\"497\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + Opus 4.7<\/h3>\n<p>Вдвое дороже, чем Опус 4.7 у Кило. Очень много проверяет себя, скриншотил буквально каждый этап и каждый блок. Результат чуть лучше.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"566\" data-ratio=\"0.47166666666667\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__all-2400@2x.png\" width=\"566\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__desktop-2400@2x.png\" width=\"778\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__mobile-2400@2x.png\" width=\"193\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__promo-2400@2x.png\" width=\"242\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + GPT 5.4, xhigh<\/h3>\n<p>Агент другой, модель узнается, это все тот же ГПТ 5.4, что был в Кодексе. Но тут как будто чуть лучше вышло.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.5065913370998\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__all-2400@2x.png\" width=\"2400\" height=\"1593\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__desktop-2400@2x.png\" width=\"2400\" height=\"2091\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__mobile-2400@2x.png\" width=\"695\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__promo-2400@2x.png\" width=\"773\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + Gemini 3.1 Pro<\/h3>\n<p>Результат сопоставимый с Гемини в Антигравити. Очень плохо для модели такого уровня.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.7416545718433\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__all-2400@2x.png\" width=\"1200\" height=\"689\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__mobile-2400@2x.png\" width=\"479\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__promo-2400@2x.png\" width=\"903\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + Grok 4.3<\/h3>\n<p>От Грока впечатления смешанные. Мобилка в целом норм, на уровне других. Промо хуже чем собраться. Я думал будет дешевле, Грок 4.1 был очень классный именно за счет того, что стоил ну очень мало.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.4888337468983\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__all-2400@2x.png\" width=\"1200\" height=\"806\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__desktop-2400@2x.png\" width=\"2400\" height=\"2057\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__mobile-2400@2x.png\" width=\"563\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__promo-2400@2x.png\" width=\"1527\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + GLM 5.1 (z.ai coding plan)<\/h3>\n<p>ГЛМ в Курсоре почему-то не смог справиться с тулами.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.4705882352941\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__all-2400@2x.png\" width=\"1200\" height=\"816\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__desktop-2400@2x.png\" width=\"2400\" height=\"1329\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__mobile-2400@2x.png\" width=\"152\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__promo-2400@2x.png\" width=\"975\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + Composer 2<\/h3>\n<p>Очень примитивно, но и зато очень дешево. Не соответствует тому уровню, что Курсор заявляет о своей модели, конечно. Но они честно говорили, что делают модель для кода в первую очередь.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"2.247191011236\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__all-2400@2x.png\" width=\"1200\" height=\"534\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__desktop-2400@2x.png\" width=\"2400\" height=\"859\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__mobile-2400@2x.png\" width=\"375\" height=\"1158\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__promo-2400@2x.png\" width=\"1153\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + Composer 2.5<\/h3>\n<p>Сопоставим по стоимости с Composer 2, качество подросло, но все еще сильно не очень.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"2.0050125313283\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__all-2400@2x.png\" width=\"2400\" height=\"1197\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__desktop-2400@2x.png\" width=\"1000\" height=\"698\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__mobile-2400@2x.png\" width=\"619\" height=\"2000\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__promo-2400@2x.png\" width=\"1191\" height=\"2000\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + MiMo V2.5 Pro<\/h3>\n<p>Включённая модель Курсора; в подписке очень дёшево, в дизайне слабо.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.2145748987854\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__all-2400@2x.png\" width=\"1200\" height=\"988\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__desktop-2400@2x.png\" width=\"1200\" height=\"755\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__mobile-2400@2x.png\" width=\"302\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__promo-2400@2x.png\" width=\"623\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Source Craft + Default<\/h3>\n<p>Вроде недорого, но пользоваться смысла нет, нейрослописный нейрослоп.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.1173184357542\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__all-2400@2x.png\" width=\"1200\" height=\"1074\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__desktop-2400@2x.png\" width=\"1853\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__mobile-2400@2x.png\" width=\"326\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__promo-2400@2x.png\" width=\"573\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Source Craft + Default Thinking<\/h3>\n<p>Как будто Default и Default Thinkign модели в Яндекс Сорс Крафте не просто разные режимы одной модели, а разные модели: слишком разный результат, у рисонинг модели даже хуже.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"2.7272727272727\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__all-2400@2x.png\" width=\"1200\" height=\"440\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__mobile-2400@2x.png\" width=\"375\" height=\"800\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__promo-2400@2x.png\" width=\"2400\" height=\"2057\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Kilo Code + Opus 4.7 (Kilo cloud)<\/h3>\n<p>Типичный Опус 4.7. Местами чисто, интересно, издалека дак прямо супер-пупер.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1513\" data-ratio=\"0.63041666666667\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__all-2400@2x.png\" width=\"1513\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__desktop-2400@2x.png\" width=\"2400\" height=\"1289\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__mobile-2400@2x.png\" width=\"553\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__promo-2400@2x.png\" width=\"647\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Kilo Code + Hy3 preview (Kilo cloud)<\/h3>\n<p>Самая модная опенсорс-модель на опенроутере. Очень так себе.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"2.1447721179625\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__all-2400@2x.png\" width=\"2400\" height=\"1119\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__desktop-2400@2x.png\" width=\"2400\" height=\"1239\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__mobile-2400@2x.png\" width=\"375\" height=\"996\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__promo-2400@2x.png\" width=\"1100\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Kilo Code + Qwen 3.6 Max Preview (Kilo cloud)<\/h3>\n<p>В целом Квен для меня справился неплохо. Туповато, по крепко вполне. В промо просел как все. 1\/30 от Опуса по цене.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.1544011544012\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__all-2400@2x.png\" width=\"2400\" height=\"2079\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__desktop-2400@2x.png\" width=\"2400\" height=\"2313\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__mobile-2400@2x.png\" width=\"643\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__promo-2400@2x.png\" width=\"592\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Kilo Code + Qwen 3.5 397<\/h3>\n<p>Не справился с тулами.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"922\" data-ratio=\"0.76833333333333\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__all-2400@2x.png\" width=\"922\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__desktop-2400@2x.png\" width=\"867\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__mobile-2400@2x.png\" width=\"262\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__promo-2400@2x.png\" width=\"394\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Kilo Code + Grok Build 0.1 + Google Skill<\/h3>\n<p>Тот же промт со скиллом Google design; сравните с OpenCode Grok Build 0.1 без скилла.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"2.2813688212928\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__all-2400@2x.png\" width=\"1200\" height=\"526\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__desktop-2400@2x.png\" width=\"2400\" height=\"1629\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__mobile-2400@2x.png\" width=\"394\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__promo-2400@2x.png\" width=\"2341\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + Opus 4.7, xhigh reasoning (OpenRouter)<\/h3>\n<p>Неплохо, что было бы в мобилке не знаю, потому что после этого экрана опенроутер меня забанил от американских СОТА-моделей.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__opus-4.7__desktop-2400@2x.png\" width=\"1200\" height=\"1097\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__opus-4.7__desktop@2x.png\">Десктоп<\/a><\/div>\n<\/div>\n<h3>OpenCode + Kimi 2.6 (OpenRouter)<\/h3>\n<p>Мобилка лучше остального, остальное плохо. Из забавного все дублировалось, но он потом через скриншоты обнаруживал и стирал сам. Из-за этого возился очень долго — 40+ минут.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.3644115974986\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__all-2400@2x.png\" width=\"2400\" height=\"1759\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__desktop-2400@2x.png\" width=\"2400\" height=\"2287\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__mobile-2400@2x.png\" width=\"609\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__promo-2400@2x.png\" width=\"700\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + Grok 4.3 (OpenRouter)<\/h3>\n<p>Грок уже был выше, но в отличие от Курсора, Опенкод с моделью вообще не справился, результат сильно хуже, чем у Курсора.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.6371077762619\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__all-2400@2x.png\" width=\"1200\" height=\"733\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__desktop-2400@2x.png\" width=\"1200\" height=\"823\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__mobile-2400@2x.png\" width=\"331\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__promo-2400@2x.png\" width=\"840\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + Grok Build 0.1 (OpenRouter)<\/h3>\n<p>Быстро, слабо, дорого для такого качества.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"2.8571428571429\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__all-2400@2x.png\" width=\"1200\" height=\"420\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__desktop-2400@2x.png\" width=\"2400\" height=\"1611\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__mobile-2400@2x.png\" width=\"901\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__promo-2400@2x.png\" width=\"2400\" height=\"1965\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + DeepSeek V4 Pro (Deepseek Cloud), Max Reasoning<\/h3>\n<p>Дипсик очень дешев, но справился лишь один раз. Мобилку можно смотреть, остальное плохо.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.2377514182568\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__all-2400@2x.png\" width=\"2400\" height=\"1939\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__desktop-2400@2x.png\" width=\"2400\" height=\"2261\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__mobile-2400@2x.png\" width=\"579\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__promo-2400@2x.png\" width=\"635\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.328903654485\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__all-2400@2x.png\" width=\"1200\" height=\"903\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__mobile-2400@2x.png\" width=\"190\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__promo-2400@2x.png\" width=\"840\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + GLM 5.1 (z.ai coding plan)<\/h3>\n<p>В отличие от Курсора Опенкод смог добиться чего-то от ГЛМ, вышло в целом ок для его цены. Он стоит дешевле Хайку, которы не смог буквально ничего.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.1363636363636\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__all-2400@2x.png\" width=\"1200\" height=\"1056\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__desktop-2400@2x.png\" width=\"2400\" height=\"1545\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__mobile-2400@2x.png\" width=\"332\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__promo-2400@2x.png\" width=\"583\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + Qwen 3.5 397<\/h3>\n<p>Не смогло ничего.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.3644115974986\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__all-2400@2x.png\" width=\"2400\" height=\"1759\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__mobile-2400@2x.png\" width=\"375\" height=\"812\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__promo-2400@2x.png\" width=\"700\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + MiniMax 2.7 (OpenRouter)<\/h3>\n<p>Невероятно быстро, невероятно дешево, качество соответствующее.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2400\" data-ratio=\"1.819560272934\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__all-2400@2x.png\" width=\"2400\" height=\"1319\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__desktop-2400@2x.png\" width=\"1200\" height=\"1069\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__mobile-2400@2x.png\" width=\"665\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__promo-2400@2x.png\" width=\"1867\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>OpenCode + Qwen 3.7 Max Preview (OpenRouter<\/h3>\n<p>Дорого для своего результата, не улучшилось с 3.6 Max. Очень плохо работал с тулами (может быть особенность опенкода).<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"2560\" data-ratio=\"1.46625\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__all-2400@2x.png\" width=\"2560\" height=\"1745.9505541347\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__desktop-2400@2x.png\" width=\"2400\" height=\"1543\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__mobile-2400@2x.png\" width=\"905\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__promo-2400@2x.png\" width=\"1505\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Figma: Claude Code + Opus 4.7, xhigh<\/h3>\n<p>Опус в своем стиле, издалека особенно, но сожрал больше целой 5-часовой квоты.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1663\" data-ratio=\"0.69291666666667\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__all-2400@2x.png\" width=\"1663\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__desktop-2400@2x.png\" width=\"1001\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__mobile-2400@2x.png\" width=\"266\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__promo-2400@2x.png\" width=\"711\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Figma: Codex + GPT 5.5, xhigh<\/h3>\n<p>В фигме смог чуть лучше, чем в пейпере. Верстает чудовищно просто.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.4616321559074\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__all-2400@2x.png\" width=\"1200\" height=\"821\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__desktop-2400@2x.png\" width=\"1200\" height=\"840\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__mobile-2400@2x.png\" width=\"703\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__promo-2400@2x.png\" width=\"750\" height=\"1200\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Figma: Cursor + GLM 5.1 (z.ai coding plan)<\/h3>\n<p>В целом похуже чем в пейпере. Макет десктопа снизу это я перетащил слой куда нужно, ГЛМ не осилил корректный ДОМ.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.5625\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__all-2400@2x.png\" width=\"1200\" height=\"768\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__desktop-2400@2x.png\" width=\"1645\" height=\"2400\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__mobile-2400@2x.png\" width=\"318\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__promo-2400@2x.png\" width=\"1603\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<h3>Cursor + Composer 2<\/h3>\n<p>Катастрофически плохо, хуже чем в пейпере.<\/p>\n<div class=\"e2-text-picture\">\n<div class=\"fotorama\" data-width=\"1200\" data-ratio=\"1.4888337468983\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__all-2400@2x.png\" width=\"1200\" height=\"806\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__desktop-2400@2x.png\" width=\"1200\" height=\"823\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__mobile-2400@2x.png\" width=\"268\" height=\"1200\" alt=\"\" \/>\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__promo-2400@2x.png\" width=\"1527\" height=\"2400\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-caption\">Полные картинки: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__all@2x.png\">Всё вместе<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__desktop@2x.png\">Десктоп<\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__mobile@2x.png\">Мобильный <\/a> · <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__promo@2x.png\">Промо<\/a><\/div>\n<\/div>\n<p>После основного эксперимента я реши попробовать дать скилл Impeccable и посмотреть как он повлияет. Тот же самый промт, но со скиллом. Полный конфиг — Claude Code + Opus 4.7, xhigh + Frontend Design Skill<\/p>\n<p>Сделал только один десктопный экран, много жрет, еще более фенси, чем было. Один экран сожрал 44% 5h · pro-квоты в клод коде. Как будто Опус стал еще более опусным и началось какое-то горе от дизайн-ума. Каждый пиксель кричит «смотри какой я красивый». Ошибки есть, но дизайн стал еще более дизайнерским.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-frontend-design__desktop-2400@2x.png\" width=\"513.5\" height=\"1200\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Полная картинка: <a href=\"https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-frontend-design__desktop@2x.png\">Десктоп<\/a><\/div>\n<\/div>\n<h2>4 Сколько все это стоило, вы спросите<\/h2>\n<p>В целом в таблице есть цены, доллары в Курсоре виртуальные (входили в подписку), остальные реальные.<\/p>\n<p>~20 $ — модели<br \/>\n16 $ — Paper Pro с бо́льшим лимитом на MCP.<br \/>\n3×20 $ — подписки Клод, Кодекса и Курсора, но они уже были.<\/p>\n<p><aside class=\"aside-margin-right\">См. график тут: <a href=\"https:\/\/www.anthropic.com\/news\/claude-opus-4-7\">anthropic.com\/news\/claude-opus-4-7<\/a><\/aside><\/p>\n<p>Самый дорогой вариант стоил бы 12,30 $ (Курсор + Опус 4.7), самый дешевый — 0,03 (Минимакс 2.7), разница — 410 раз. Опус работал не на 100%, если бы я включил макс-ризонинг, то было бы примерно ×2.<\/p>\n<h2>5 Будущие эксперименты<\/h2>\n<p>Что хотелось бы проверить еще, что не вошло в эту серию:<\/p>\n<ul>\n<li>Проверить со скиллами: насколько те или иные скиллы могут улучшить дизайн.<\/li>\n<li>Проверить, задав стили, юзерсценарии и прочий контекст.<\/li>\n<li>Проверить, разрешив задавать уточняющие вопросы: про задачи, продукт, стиль и пользователя.<\/li>\n<li>Проверить, что будет, если дать ему грубый скетч интерфейса и довести до ума.<\/li>\n<li>Дать существующий экран и попросить добавить стиля или улучшить только интерфейс без полной переделки структуры.<\/li>\n<li>Дать почитать советы Горбунова по верстке и проверить снова.<\/li>\n<\/ul>\n<h2>6 Выводы<\/h2>\n<ol start=\"1\">\n<li>Опус — на коне. Дорого и офигенно. Удивительно, что следующим идет даже не GPT. Ни 5.4, ни даже 5.5 и близко не стоят. Китайские модели, да даже авто-режим Cursor, делает лучше. Код GPT 5.4 пишет хорошо, объясняет и делает анализы — хорошо. Дизайн — провально.<\/li>\n<li>Китайские модели оверфиттятся на метрики и бенчмарки. В целом все модели за пределами больших лаб такие. По метрикам SWE они уже догнали и обогнали Опус, в реальной же жизни не способны сделать простую задачу. Некоторые даже не справляются с корректным вызовом тулов. Типичный пример — Минимакс 2.7, по всем метрикам — он очень хорош, в дизайне не может ничего. Хорош он в итоге только по скорости и цене (там прямо вау). Кто-то скажет, что дипсик тоже оверфит. Про него так однозначно не скажу: во-первых, дипсик один из макетов сделал заметно лучше, во-вторых у него до сих пор какие-то проблемы с вызовом тулов, как было в версии в 3.2. Лучший результат у тех китайских моделей, которые делают свою работу, не особенно крича — Квен 3.6 (но 3.5 так себе).<\/li>\n<li>Хорошая модель делает достататочно бессмысленным дизайн самими разработчиками и продактами, если только они не разбираются в дизайне. Редко, но бывают такие. Если нет, то модель сделает быстрее и лучше. Дизайнерам пока еще есть работа, можно выдохнуть на квартал.<\/li>\n<\/ol>\n<h2>P. S.<\/h2>\n<p>Раз уж зашли, попробуйте <a href=\"http:\/\/recipe-scaler.ru\/#\/about\">recipe-scaler.ru<\/a>, зря я что ли столько дизайн-экспериментов проводил? Если каждый десятый зайдет, у меня будет +1000% пользователей сразу.<\/p>\n<p>Если вдруг у кого есть подкаст, внутренние созвоны команды или просто захотите созвониться и поговорить про все это — зовите. В Мск и Питере могу и очно. <a href=\"mailto:mike.ozornin@gmail.com\">mike.ozornin@gmail.com<\/a> или <a href=\"https:\/\/t.me\/mikeozornin\">t.me\/mikeozornin<\/a>.<\/p>\n<p>Кстати, вот как выгдядит блок аттачей поста:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/llm-and-ui-design@2x.png\" width=\"858\" height=\"1293\" alt=\"\" \/>\n<\/div>\n<p>upd. Добавлены новые модели: gemini 3.5 flash, grok build, mimo 2.5, opus 4.8<\/p>\n",
            "date_published": "2026-05-12T09:53:32+03:00",
            "date_modified": "2026-05-29T00:49:15+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__all-2400@2x.png",
            "_date_published_rfc2822": "Tue, 12 May 2026 09:53:32 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "224",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/jquery\/jquery.js",
                    "system\/library\/fotorama\/fotorama.css",
                    "system\/library\/fotorama\/fotorama.js"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-2.4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-frontend-design__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo__hy3-preview__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__opus-4.7__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default__w-0__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__sourcecraft__default-thinking__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__mobile-2400@2x-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__all@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__mobile@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-1.1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-1.2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Image-1.3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-2.1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-2.2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-2.3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-3.1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-3.2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-3.3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-4.1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Images-4.2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__desktop@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Slop-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/Mobile-vs-Promo@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/inside-figma-gpt-5.5-light@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/inside-paper-gpt-5.5-light@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.1-pro__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__antigravity__gemini-3.5-flash__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.8__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.7-med__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-4.6__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__sonnet-4.6__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__haiku__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.5__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__codex__gpt-5.4__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__auto__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__opus-4.7__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gpt-5.4__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__gemini-3.1-pro__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__grok-4.3__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__glm-5.1__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__composer-2.5__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__cursor__mimo-v2.5-pro__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default__w-0__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sourcecraft__default-thinking__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__opus-4.7__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/kilo__hy3-preview__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen-3.6__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__qwen35-397b-qwen-397__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__kilo-code__grok-build-0.1-google-skill__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__opus-4.7__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__kimi-2.6__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-4.3__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__grok-build-0-1__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__deepseek-v4-pro-2__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__glm-5.1__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen35-397b-qwen-397__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__minimax-2.7__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__opencode__qwen-3.7__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__claude-code__opus-4.7__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__codex__gpt-5.5__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__glm-5.1__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__all-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__mobile-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/figma__cursor__composer-2__promo-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/paper__claude-code__opus-frontend-design__desktop-2400@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/llm-and-ui-design@2x.png"
                ]
            }
        },
        {
            "id": "218",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/llm-i-dizayn\/",
            "title": "ЛЛМ и дизайн",
            "content_html": "<p class=\"lead\">Я шарю скилл несколько раз, самое время кинуть в пост<\/p>\n<p>Как делать дизайн с ЛЛМ, чтобы не было дефолтно и ИИшно:<\/p>\n<ul>\n<li>Не делать, делать руками<\/li>\n<li>Кидать референсы<\/li>\n<li>Дать скиллов<\/li>\n<\/ul>\n<p>Пост про опцию три.<\/p>\n<ol start=\"1\">\n<li><a href=\"https:\/\/impeccable.style\">https:\/\/impeccable.style<\/a><br \/>\nЕсть вот такой набор скиллов, в нем разные вещи, чтобы делать дизайн и верстку:<\/li>\n<\/ol>\n<ul>\n<li>Аудит того, что есть и критика<\/li>\n<li>Есть работа с текстом<\/li>\n<li>Есть работа с визуалкой<\/li>\n<\/ul>\n<p>На промостранице есть объяснения, начните с них.<\/p>\n<p>Это не серебрянная пуля, по начать, например, можно с этого.<\/p>\n<ol start=\"2\">\n<li><a href=\"https:\/\/developers.openai.com\/blog\/designing-delightful-frontends-with-gpt-5-4\/\">https:\/\/developers.openai.com\/blog\/designing-delightful-frontends-with-gpt-5-4\/<\/a><br \/>\nСкилл и объяснение от опенаи<\/li>\n<\/ol>\n",
            "date_published": "2026-03-27T10:18:59+03:00",
            "date_modified": "2026-03-24T14:24:36+03:00",
            "_date_published_rfc2822": "Fri, 27 Mar 2026 10:18:59 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "218",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "200",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/ai-browser-vs-just-ok-browser\/",
            "title": "ИИ-браузер vs нормальный браузер",
            "content_html": "<p>Тут Браузер кампани, которая делала Арк, анонсировала <a href=\"http:\/\/diabrowser.com\">новый браузер Диа с ИИ<\/a>. А мне хочется не браузер с ИИ, а просто нормальный браузер. Хочу браузер, который встает на сторону пользователя. Не на сторону сайта, не на сторону рекламодателя, не на сторону государства, а на мою. В идеале в 100% случаев, но я готов потерпеть и поменьше.<\/p>\n<p>Нормальный это какой? Вот такой:<\/p>\n<ol start=\"1\">\n<li>С поддержкой расширений и из хрома, и из фф, — откуда угодно. У вас и там, и там есть WebExtensions API, браузеры уже сейчас поддерживают и Манифест V2, и V3. Дак к чему эти различия в расширениях, сделайте поддержку всех сторов и форматов.<\/li>\n<li>Разрешающий сохранить картинку, даже если она вставлена хитро: через background-image, blob или как-то еще. Сохранять картину из веб-страницы это прямо базовая штука.<\/li>\n<li>Провокационный пункт: разрешающий скачать видео. Любое видео в интернете все все равно можно через yt-dlp скачать. Только сейчас нужно запустить консольное приложение, а мог бы и сам браузер скачать, ему же даже легче.<\/li>\n<li>Разрешающий выделить текст на странице. Всегда. Без вот этих «копирайт, поэтому выделить нельзя».<\/li>\n<li>С нормальным адблоком. В сафари нормального адблока нет уже много лет, скоро нормальный пропадет из хромов. Я бы бы рад браузеру, где нормальный адблок сохранился.<br \/>\nХотите прикрутить куда-то ИИ? Встройте ИИ в адблок, чтобы мне проще было указать где реклама. Это же абсурд, что человеческий глаз выделяет её за 50 миллисекунд, а браузерный адблок «ой, тут сложные цсс-классы, не могу понять где баннер».<\/li>\n<li>Блокирующий трекинг фейсбука и гугла.<\/li>\n<li>Режим не беспокоить по умолчанию, чтобы сайтам было сложнее начать играть какой-то видос или музыку, пиликать и блюмкать.<\/li>\n<li>Восстановление вкладок при падении или перезапуске. Не как сейчас, когда в 2% случаев может все потеряться. У вас диск пишет со скоростью 2 гигабайта в секунду, а читает 5, вы можете дампить вкладки раз в секунду так, что никто не заметит.<\/li>\n<\/ol>\n<p>Под некоторые пункты тут подходит <a href=\"https:\/\/kagi.com\/orion\/\">Орион<\/a>, но у него нет синхронизации истории с телефоном.<\/p>\n<p>Понятно, что такой браузер будут банить все сервисы: ютуб, маркетплейсы, все новостные сайты. Ну вы технари, придумайте, как сделать так, чтобы не банили.<\/p>\n<p>А фичи этого ИИ браузера в виде «возьми товары из этой заметки и добавь их все в корзину» — ну не знаю...<\/p>\n",
            "date_published": "2025-05-27T14:43:36+03:00",
            "date_modified": "2026-01-12T18:32:17+03:00",
            "_date_published_rfc2822": "Tue, 27 May 2025 14:43:36 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "200",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "191",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/ios-hotspot-wtf\/",
            "title": "Одна небольшая тупость в iOS",
            "content_html": "<p class=\"lead\">Джобса на вас нет<\/p>\n<p>Если при включенном хотспоте попробовать включить вай-фай, айфон покажет вот такое сообщение:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/ios-hotspot-wtf-1@2x.png\" width=\"621\" height=\"427\" alt=\"\" \/>\n<\/div>\n<p>Чтобы сфокусироваться на главном, применим дизайнерский хак:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/ios-hotspot-wtf-2@2x.png\" width=\"621\" height=\"427\" alt=\"\" \/>\n<\/div>\n<p>iOS говорит нам:<br \/>\n— Пс, парень! Хочешь включить хотспот?<\/p>\n<p>Что произойдет при нажатии «Включить»?<br \/>\nХотспот отключится.<\/p>\n<p>Как. Такое. Можно. Было. Сделать.<\/p>\n",
            "date_published": "2022-02-03T01:31:48+03:00",
            "date_modified": "2025-05-20T11:01:42+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/ios-hotspot-wtf-1@2x.png",
            "_date_published_rfc2822": "Thu, 03 Feb 2022 01:31:48 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "191",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/ios-hotspot-wtf-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/ios-hotspot-wtf-2@2x.png"
                ]
            }
        },
        {
            "id": "181",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/games-for-designers\/",
            "title": "Игры для дизайнеров",
            "content_html": "<p class=\"lead\">Собрал разные дизайнерские игры потренировать насмотренность<\/p>\n<h2>Мастхевные<\/h2>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/bezier.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-5@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/bezier.method.ac\">https:\/\/bezier.method.ac<\/a><br \/>\nЧто делать: повторять форму фигуры кривой безье<br \/>\nЗачем: стать гуру вектора, рисовать крутые иконки и векторные иллюстрации<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/cantunsee.space\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-7@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/cantunsee.space\">https:\/\/cantunsee.space<\/a><br \/>\nЧто делать: находить мелочи и ошибки в картинках<br \/>\nЗачем: проводить авторский надзор 85 лвл, за секунду находить ошибки недочеты в реализации<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/bar-or-pie.dianov.org\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-8@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\">Что делать: находить ошибки в инфодизайне<br \/>\nЗачем: натренироваться базовым важным вещам в инфодизайне<\/div>\n<\/div>\n<h2>Если прошли игры выше<\/h2>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/betterwebtype.com\/triangle\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-1@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/betterwebtype.com\/triangle\/\">https:\/\/betterwebtype.com\/triangle\/<\/a><br \/>\nЧто делать: играться с параметрами ширины блока текста, интерлиньяжа и кегля, чтобы собрать идеальный параграф<br \/>\nЗачем: потренировать чувство текстового блока<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/type.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-2@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/type.method.ac\">https:\/\/type.method.ac<\/a><br \/>\nЧто делать: расставлять буквы в строке<br \/>\nЗачем: потренировать чувство букв, потренировать в кернинге, если делаете шрифт (ну да)<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/color.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-3@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/color.method.ac\">https:\/\/color.method.ac<\/a><br \/>\nЧто делать: подбирать цвет по полному совпадению, искать противоположный и гармоничный к заданному<br \/>\nЗачем: потренировать глазомер цвета<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/boolean.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-4@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/boolean.method.ac\">https:\/\/boolean.method.ac<\/a><br \/>\nЧто делать: пользуясь булевыми операциями сделать из запчастей иконку<br \/>\nЗачем: потренироваться, чтобы быстрее собирать иконки<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/shape.method.ac\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-6@2x.png\" width=\"1160\" height=\"767\" alt=\"\" \/>\n<\/a><div class=\"e2-text-caption\"><a href=\"https:\/\/shape.method.ac\">https:\/\/shape.method.ac<\/a><br \/>\nЧто делать: исправлять сломанную форму буквы усиками кривых безье<br \/>\nЗачем: потренировать чувство вектора и букв<\/div>\n<\/div>\n<p>Знаете ещё какие-нибудь?<\/p>\n",
            "date_published": "2021-11-03T00:25:36+03:00",
            "date_modified": "2025-05-20T10:15:11+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-5@2x.png",
            "_date_published_rfc2822": "Wed, 03 Nov 2021 00:25:36 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "181",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-8@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/games-for-designers-6@2x.png"
                ]
            }
        },
        {
            "id": "164",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/what-is-a-good-handoff\/",
            "title": "Как выглядит хороший макет",
            "content_html": "<p class=\"lead\">В продолжении тредов Романа Шамина про дружбу дизайнеров и фронтендеров решил вытащить в блог одну из статей наших гайдов — про то, что такое «хорошо переданный макет». Все вытащенные из гайдов статьи доступны по тегу <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/guidelines\/\">гайдлайны.<\/a><\/p>\n<p>Треды Романа Шамина:<br \/>\n<a href=\"https:\/\/teletype.in\/@romanshamin\/what-design-want-from-frontend\">teletype.in\/@romanshamin\/what-design-want-from-frontend<\/a><br \/>\n<a href=\"https:\/\/teletype.in\/@romanshamin\/what-frontend-want-from-design\">teletype.in\/@romanshamin\/what-frontend-want-from-design<\/a><\/p>\n<p>Дальше привожу статью из наших командных договоренностей.<\/p>\n<h2>О чем эта статья<\/h2>\n<p>Если макет сделан не очень удобно для разработчиков, это плохо: разработчику будет сложно понять как сделать правильно, он потратит больше времени и где-то ошибется. Дизайнеру придется писать больше замечаний, люди будут менее довольны друг другом.<\/p>\n<p>Эта статья описывает как хорошо передать макет в разработку.<\/p>\n<h2>Хранение и состав макетов<\/h2>\n<h3>Список самих экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nВсем членам команды продукта понятно где и как искать макеты:<\/p>\n<ul>\n<li>где найти макеты по нужной фиче,<\/li>\n<li>где найти старый макет,<\/li>\n<li>как понять актуальная версия или нет.<\/li>\n<\/ul>\n<p>Договоренности команды о процессе выкладывания макетов записаны.<\/p>\n<p>При обновлении макетов уведомляется проектная команда (аналитик, фронтенд, тех. писатель, QA).<\/p>\n<h3>Состав экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nДля фичи понятен набор экранов, на которые вносятся изменения: какие экраны новые, какие экраны дорабатываются.<\/p>\n<p>Если экранов несколько, то понятны переходы между экранами.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nДоступна актуальная схема экранов продукта (карта сайта).<\/p>\n<p>Если в фиче несколько экранов, то для них сделан кликабельный прототип с переходами между экранами.<\/p>\n<h2>Экраны<\/h2>\n<h3>Структура экранов<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятна структура экрана: из каких блоков состоит экран, какие между ними соотношения по размерам и отступам.<\/p>\n<p>Как ведут себя блоки экрана при прокрутке и ресайзе.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nУ продукта есть понятная сетка, описаны типовые лейауты страниц: список, дашборд, форма редактирования, страница просмотра и т. д.<\/p>\n<h3>Элементы на странице<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПо каждому визуальному элементу на макете понятно, что это такое: текст, компонент, иконка, паттерн.<\/p>\n<p>По каждому компоненту понятно, что это за компонент, какой его режим используется, понятно, если в коде нет этого компонента или функции существующего компонента.<\/p>\n<p>Понятны размеры элемента, его взаимоотношения с соседними элементами.<\/p>\n<p>Понятно как элемент тянется, что будет, если в элементе будет меньше или больше контента.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nВсе элементы описаны, разработчик знает где искать документацию на каждый используемый тип элемента: текст, компонент, иконку, паттерн.<\/p>\n<p>Размеры элементов и отступы между элементами логичны, ожидаемы и понятны.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png\" width=\"600\" height=\"88\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Случайные размеры блоков, фронтендерам сложно понять отступы<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-2@2x.png\" width=\"595\" height=\"330\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Случайные размеры блоков, фронтендерам сложно понять отступ<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-3@2x.png\" width=\"600\" height=\"88\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Размеры блоков понятны<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-4@2x.png\" width=\"600\" height=\"96\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Размеры блоков понятны, блоки расположены предсказуемо по сетке<\/div>\n<\/div>\n<h3>Кегли<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nДля каждого текста на странице понятен стиль или mixin, который нужно взять, эти стили и mixin’ы однозначно определяются из самого макета.<\/p>\n<p>Эти mixin’ы не противоречат компонентам, паттернам или аналогичным элементам других экранов продуктов.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсть актуальная таблица миксинов, описаны общие принципы их использования.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-5@2x.png\" width=\"453\" height=\"168\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Кегль не замапплен, неясно какой типографический миксин взять<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-6@2x.png\" width=\"453\" height=\"206\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Кегль и цвет замапплен, понятно что указать<\/div>\n<\/div>\n<h3>Цвета<\/h3>\n<p>Речь идет про цвет любого интерфейсного элемента: текста, иконки, рамки, фона, блока, линии.<\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nНе используются цвета не из палитры проекта.<\/p>\n<p>Переменные цветов подписаны, разработчику легко понять, какую переменную использовать (копировать hex-код не норм).<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nСоставлена таблица цветовых токенов: default text, disabled text, error icon для всех используемых в проекте тем.<\/p>\n<p>В макетах прилинкованы цвета из этой таблицы (не error-500, а validation-text-color).<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-7@2x.png\" width=\"453\" height=\"168\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Цвета не замаплены, неясно какой цвет выбирать<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-8@2x.png\" width=\"453\" height=\"206\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Цвета замаплены, понятно что указать<\/div>\n<\/div>\n<h3>Отступы<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятны сами отступы между всеми блоками на странице и их внутренняя логика.<\/p>\n<p>Отступы на макете не противоречат компонентам (например, в компоненте «кнопка» отступы 6 16, а на макете 6 12).<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nОписана интерфейсная микросетка и описание модулей.<\/p>\n<p>Логика отступов описана, есть типовые отступы и их завязка на сетку.<\/p>\n<h3>Пиктограммы<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nРазработчик знает, как вообще подключаются пиктограммы в проект.<\/p>\n<p>Понятно, что это за конкретная пиктограмма, как ее подключить и вставить.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсть общий список пиктограмм, их коды, параметры вставки в код продукта и документацию.<\/p>\n<p><aside class=\"aside-margin-right\">Чтобы не мучиться со сборкой пакетов иконок, <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/icon-font\/\">почитайте как собирать их автоматически<\/a><\/aside><\/p>\n<p>Иконки версионируются, к продукту или в документацию можно подключить нужную версию пакета иконок.<\/p>\n<p>Примеры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-9@2x.png\" width=\"453\" height=\"310\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Плохо:<\/b> Иконка не замаплена, нужно искать её в наборе самостоятельно<\/div>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-10@2x.png\" width=\"453\" height=\"267\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><b>Хорошо:<\/b> Указано какая иконка и из какого набора. Примечание: mc — префикс одного из наших наборов иконок.<\/div>\n<\/div>\n<h2>Текст<\/h2>\n<p>См. также <i>Правильный процесс вычитки<\/i> (ссылки нет, статья не вытащена наружу).<\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nРыба в макете правильная с точки зрения состояний, смысла и точная с точки зрения чисел и значений.<\/p>\n<p>Нет никаких Значение-1, Значение-2, Значение-3 и Лорем ипсумов.<\/p>\n<p>Из текста понятно, о чем он: это важно, чтобы техписатели могли его понять и улучшить.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nТекст в состоянии production-не стыдно, техписатели только полируют его.<\/p>\n<h2>Состояния<\/h2>\n<h3>Другие состояния<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, как сделать все остальные состояния: переключенные вкладки, переключатели, чекбоксы и радиокнопки (если они влияют на компоновку интерфейса).<\/p>\n<p>Отрисованы или описаны (если этого достаточно) все варианты дропдаунов, селектов и других выпадаек.<\/p>\n<p>Кроме самих этих состояний описаны переходы между ними.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nЕсли блоки меняются значительно, то лучше не пытаться описать отдельные выпадайки, а нарисовать блоки целиком, чтобы было меньше путаницы<\/p>\n<p>Пример:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-11@2x.png\" width=\"750\" height=\"1220\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Хорошо: Нарисованы альтернативные состояний экрана<\/div>\n<\/div>\n<h3>Загрузка<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно как загружаются элементы экрана, в какой последовательности, как отображается процесс загрузки.<\/p>\n<p>Как должен вести себя продукт, если загрузка медленная, элементов много, или загрузка не удалась.<\/p>\n<h3>Пустое состояние<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, как выглядит пустое состояние всех блоков и элементов, когда в них нет данных.<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nПустые состояния систематизированы, используются типовые решения.<\/p>\n<p>Пример:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-12@2x.png\" width=\"398.5\" height=\"1000\" alt=\"\" \/>\n<\/div>\n<h3>Валидация<\/h3>\n<p>См. <a href=\"https:\/\/mosaic.ptsecurity.com\/components\/validation\/overview\">Валидация данных<\/a><\/p>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно, когда и как срабатывает валидация.<\/p>\n<p>Как и когда показывается.<\/p>\n<p>Все сообщения об ошибках проходят через дизайнера, для каждой из возможных ошибок дизайнер придумывает способ предотвращения ошибки или способ отображения, если её нельзя предотвратить<\/p>\n<p><b>Уровень «Хорошо»<\/b><br \/>\nВалидация соответствует общему гайдлайну.<\/p>\n<p>Валидация способствует не попаданию с ситуацию срабатывания валидации.<\/p>\n<h3>Много данных<\/h3>\n<p><b>Уровень «Минимально достаточный»<\/b><br \/>\nПонятно как работает экран, когда во всех потенциальных местах (текст, списки, таблицы) будет много данных.<\/p>\n<p>Все вытащенные из гайдов статьи доступны по тегу <a href=\"http:\/\/mikeozornin.ru\/blog\/tags\/guidelines\/\">гайдлайны.<\/a><\/p>\n<h2>См. также<\/h2>\n<p>Гайд Контура: <a href=\"https:\/\/guides.kontur.ru\/principles\/layouts\/\">guides.kontur.ru\/principles\/layouts\/<\/a><br \/>\nЧек-лист <a href=\"https:\/\/twitter.com\/Prit4er1\">Prit4er1<\/a>: <a href=\"https:\/\/www.notion.so\/5c03c7554ff542da9c77a6f420935282\">notion.so\/5c03c7554ff542da9c77a6f420935282<\/a><\/p>\n",
            "date_published": "2021-05-11T10:19:02+03:00",
            "date_modified": "2024-01-07T14:57:25+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png",
            "_date_published_rfc2822": "Tue, 11 May 2021 10:19:02 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "164",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-4@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-5@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-6@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-7@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-8@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-9@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-10@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-11@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/what-is-a-good-handoff-12@2x.png"
                ]
            }
        },
        {
            "id": "155",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-build-icon-pack-from-figma\/",
            "title": "Как собрать пакет иконок из фигмы — 3",
            "content_html": "<p class=\"lead\">Я уже писал как собрать пакет иконок в виде шрифты из скетча. На этот раз из фигмы, в виде svg-спрайта и многоцвете. Сначала будет вступление-рассказ о чем все это, если вы хотите нового, прокрутите до заголовка <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/how-to-build-icon-pack-from-figma#new\" class=\"nu\">«<u>Новое в этой версии<\/u>»<\/a>.<\/p>\n<h2>Что вообще происходит<\/h2>\n<p>У дизайнера есть несколько разных способов передать иконки разработчику:<\/p>\n<ul>\n<li>отдельными файлами или спрайтом в png,<\/li>\n<li>отдельными файлами или спрайтом в svg,<\/li>\n<li>иконочным шрифтом.<\/li>\n<\/ul>\n<p>На формат распространения накладываются и другие ограничения:<\/p>\n<ul>\n<li>платформа: веб, десктоп, мобильные<\/li>\n<li>цветность: монохромные, двухцветные, полноцветные<\/li>\n<li>dpi экранов<br \/>\nи прочее<\/li>\n<\/ul>\n<p><aside class=\"aside-margin-right\">Если вам нужен скетч, <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/how-to-build-icon-font-from-sketch-2\/\">смотри прошлую серию<\/a><\/aside><\/p>\n<p>Разработчики фронтенда просят все время какие-то шрифты, svg-файлы или спрайты. Иногда фронтенд говорит совсем непонятные слова: <i>закоммить в гит<\/i>, <i>пойду соберу пакет в нпм<\/i>, <i>давай настроим в сиай<\/i>. Расскажу как все это сделать, никого не замучив. Понадобится фигма.<\/p>\n<p>Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP.NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.<\/p>\n<h2>Зачем это делать, есть же фонтелло<\/h2>\n<p>Есть много готовых сервисов, которые собирают шрифт по загруженным svg-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:<\/p>\n<p><b>Дизайнер может случайно сломать шрифт<\/b>. Если забыть и не экспортировать иконку, которую уже давал, то следующая версия шрифта будет без него и в неизвестном месте сломается интерфейс. Ситуацию усугубляет факт, что дизайнеров у каждого продукта несколько, а общий набор иконок пополняют 5-6 человек.<\/p>\n<p>Хорошее решение — простое, в нем минимум ручных действий.<\/p>\n<p><b>Нескольким дизайнерам работать непросто<\/b>. Если несколько дизайнеров поддерживают один шрифт, то возникает много вопросов синхронизации: где хранить исходники, файлы svg и файлы шрифта, кто собирает и кому передает, как не забыть иконку.<\/p>\n<p>Хорошее решение позволяет добавлять иконки скольким угодно дизайнерам так, что они не испортят чужую работу.<\/p>\n<p><b>Cложно интегрировать в общий процесс сборки продукта<\/b>. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.<\/p>\n<p>Хорошее решение встраивается в процесс разработки.<\/p>\n<p><b>Не всех устраивает внешний сервис<\/b>. Многие компании не верят во внешние сервисы: они могут изменить набор функций, упасть во время подготовки релиза, стать платными или закрыться. В конце концов, их могут хакнуть. Мы — ИБ-компания, и каждый раз раздражать профессионально деформированных безопасников и разработчиков наличием внешнего сервиса не хочется.<\/p>\n<p>Хорошее решение работает внутри компании.<\/p>\n<p><b>Формируется не всё, что надо<\/b>. Некоторые сервисы выдают шрифт, а иконки кодируют номерами символов. К сожалению, на эти номера полагаться нельзя. Если убрать иконку или поменять порядок, то в следующий раз сервис может выдать совсем другие коды и все иконки непредсказуемо поменяются.<\/p>\n<p>Если не формировать вместе со шрифтом less-файл, то разработчикам придется в каждом использовании иконки указывать размер кегля, они могут забыть или ошибиться.<\/p>\n<p>Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.<\/p>\n<h2>Новое в этой версии <span id=\"new\">&nbsp<\/span><\/h2>\n<p>Раньше я описывал схему сборки шрифта, которая позволяет автоматически собрать шрифтовой файл с иконками из исходника Скетча, сгенерировать для него демо-страницу и less-файл, а также опубликовать пакет в npm-репозиторий.<\/p>\n<p>Сегодня — вариант для фигмы. Еще в нем появились svg-файлы и svg-спрайт. Иконки svg-спрайта поддерживают двухцветность и перекрашивание средствами css.<\/p>\n<h2>Куда смотреть<\/h2>\n<p>Я сделал:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/mikeozornin\/some-icons\">github.com\/mikeozornin\/some-icons<\/a> — тестовый репозиторий<\/li>\n<li><a href=\"https:\/\/www.figma.com\/file\/UaWytmrubMDjIpJnlMn03x\/Some-icons-pack?node-id=0%3A4\">figma.com\/file\/UaWytmrubMDjIpJnlMn03x\/Some-icons-pack<\/a> — тестовый фигма-файл<\/li>\n<\/ul>\n<p>Чтобы сборка завелась, нужно подготовить токен доступа к фигме, ищите в профиле вот такое:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-1@2x.png\" width=\"623\" height=\"169\" alt=\"\" \/>\n<\/div>\n<p>После этого действуйте по инструкции в Readme.md<\/p>\n<p>Сборщик обращается к фигме, через веб-апи экспортирует svg-файлы, запускает сборку шрифта и svg-спрайта.<\/p>\n<p>Я не очень пойму, что ещё комментировать, мне кажется, там все понятно и очевидно, поэтому вставляю только результат:<\/p>\n<h2>КДПВ<\/h2>\n<p>Было:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-2@2x.png\" width=\"900\" height=\"683\" alt=\"\" \/>\n<\/div>\n<p>Стало:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-3@2x.png\" width=\"993\" height=\"633\" alt=\"\" \/>\n<\/div>\n<h2>Разные особенности<\/h2>\n<h3>Как работает двухцветность спрайтовых иконок<\/h3>\n<p>Для двухцветности иконок в svg-спрайте и возможности перекрашивания их через css используется своеобразных хак.<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">&lt;svg fill=&quot;#000&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\r\n&lt;path d=&quot;M8.62155 1.21658C8.45088 1.08099 8.2349 1 8 1C7.44771 1 7 1.44772 7 2C7 2.55228 7.44771 3 8 3C4.1554 3 3.80482 5.42796 3.08886 10.3863C3.05992 10.5868 3.03039 10.7913 3 11C2.51458 11 2.02917 11.3534 1.54375 12.0603C1.4751 12.1603 1.43835 12.2787 1.43835 12.4C1.43835 12.7314 1.707 13 2.0384 13L6.58534 13C6.53007 13.1564 6.5 13.3247 6.5 13.5C6.5 14.3284 7.17157 15 8 15C8.82843 15 9.5 14.3284 9.5 13.5C9.5 13.3247 9.46992 13.1564 9.41465 13L13.9616 13C14.0829 13 14.2013 12.9633 14.3013 12.8946C14.5745 12.707 14.6439 12.3335 14.4562 12.0603C13.9708 11.3534 13.4854 11 13 11C12.9668 10.775 12.9346 10.5547 12.9031 10.3391C12.7783 9.48499 12.6644 8.70518 12.5409 7.99982C12.5273 7.99994 12.5137 8 12.5 8C11.9617 8 11.4454 7.90547 10.9669 7.7321C11.0539 8.18151 11.1391 8.69127 11.2279 9.26906C11.2687 9.53513 11.3106 9.81613 11.3674 10.204C11.3589 10.146 11.4807 10.9794 11.5161 11.219L11.5575 11.5H4.44301L4.48435 11.2161C4.50903 11.0466 4.57528 10.5882 4.6098 10.3494L4.63087 10.2036C4.68629 9.8214 4.72807 9.5381 4.7686 9.27157C5.39203 5.17234 5.83807 4.5 8 4.5C8.03774 4.5 8.07495 4.50021 8.11166 4.50065C8.03858 4.17884 8 3.84392 8 3.5C8 3.33101 8.00932 3.1642 8.02746 3.00004C8.09885 2.35473 8.30674 1.75013 8.62155 1.21658Z&quot;\/&gt;\r\n&lt;circle cx=&quot;12.5&quot; cy=&quot;3.5&quot; r=&quot;2.5&quot; fill=&quot;currentColor&quot;\/&gt;\r\n&lt;\/svg&gt;<\/code><\/pre><p>Это — код двухцветной иконки. Обратите внимание, что <i>fill<\/i> у <i>svg<\/i> стоит <i>#000<\/i>, а у части иконки, которую нужно красить отдельно, стоит <i>fill=«currentColor»<\/i>.<br \/>\nДля перекрашивания применяется правило:<\/p>\n<pre class=\"e2-text-code\"><code class=\"\">svg {\r\n    fill: #8F99AA; \/* Цвет основной части*\/\r\n    color: #E80E0E; \/* Цвет дополнительной части*\/ \r\n}<\/code><\/pre><p>В результате этого правила у <i>svg<\/i> появляются два свойства: <i>fill<\/i> и <i>color<\/i>. <i>Fill<\/i> перекрашивает всю иконку, а <i>color<\/i> ни на что не влияет. У вложенной фигуры срабатывает свой <i>fill<\/i>, но он берет цвет из специальной переменной <i>currentColor<\/i>, которая залинкована на атрибут <i>color<\/i> у <i>svg<\/i>. В итоге атрибут <i>color<\/i> у <i>svg<\/i> не влияет на базовую контур, а используется только чтобы прокинуть внутрь дополнительный цвет.<\/p>\n<p>Такая особенность нужна только для спрайта. Если вставить иконку прямо в DOM, то можно будет использовать любые нормальные способы (например, css-классы).<\/p>\n<h3>Зачем нужны CODEPOINTS<\/h3>\n<p>Ручное прописывание codepoints для символов нужно, чтобы при переборке шрифта не поехали коды символов. Если вы не собираетесь использовать TTF-шрифт, забейте и не используйте. Если вам нужен TTF-шрифт со стабильными кодами символами, придется выдавать их вручную.<\/p>\n<h3>Как лучше версионировать<\/h3>\n<p>У нас (вообще это не обязательно) пакеты версионируются по семверу (semver.org). Версии нумеруются в формате Major.Minor.Patch (например, 3.2.1: 3 — major, 2 — minor, 1 — patch).<\/p>\n<ul>\n<li>Major-версия обновляется при ломающих изменениях<br \/>\nЛомающие изменения говорят о том, что нельзя просто обновить иконку, нужно скорее всего будет менять код в продукте. Ломающие изменения описаны в changelog. Самый частый случай: переименования иконок, при обновлении пакета нужно заменить в продукте старое имя на новое.<\/li>\n<li>Minor-версия обновляется при новых фичах: появление новой иконки, нового формата css и прочее.<br \/>\nОбновляться на новую версию можно безопасно, ничего сломаться не должно.<\/li>\n<li>Patch-версия инкрементируется при багфиксах, исправлениях иконок и прочих мелких изменениях.<br \/>\nОбновляться на новую версию можно безопасно, ничего сломаться не должно.<\/li>\n<\/ul>\n<p>Если есть вопросы, пишите в комментарии или на почту <a href=\"mailto:mike.ozornin@gmail.com\">mike.ozornin@gmail.com<\/a><\/p>\n",
            "date_published": "2020-10-21T01:20:24+03:00",
            "date_modified": "2020-10-21T02:27:37+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-cover@2x.png",
            "_date_published_rfc2822": "Wed, 21 Oct 2020 01:20:24 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "155",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-cover@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/how-to-build-icon-pack-from-figma-3@2x.png"
                ]
            }
        },
        {
            "id": "150",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/sberbank-and-caller-id\/",
            "title": "Сбербанк и Caller ID",
            "content_html": "<p class=\"lead\">Мне недавно один раз позвонили мошенники «из Сбербанка» и я задумался о способе борьбы с ними<\/p>\n<h2>Проблема<\/h2>\n<p>У клиентов Сбербанка есть частая проблема. Им звонят мошенники и пытаются средствами социальной инженерии украсть деньги: или узнать пароли, или уговорить совершить перевод.<\/p>\n<p>Почему это происходит именно со Сбербанком (мои предположения):<\/p>\n<ul>\n<li>У Сбербанка больше клиентов, чем у других банков. Если у человека есть какая-то карта, то наиболее вероятно это будет Сбер.<\/li>\n<li>У Сбербанка больше всех незащищенных от мошенничества клиентов: с недостаточным образованием или пожилых, плохо разбирающихся в технике, — их легче обмануть.<\/li>\n<li>У Сбербанка были дополнительные векторы атаки — сомнительные с точки зрения безопасности сервисы, типа СМС-банка. СМС-банк — очень стремная штука, никогда не пользуйтесь ей.<\/li>\n<\/ul>\n<h2>Как пытаются решить проблему сейчас<\/h2>\n<p>Люди и банк пытаются решить проблему с разных сторон. Пользователи — учатся отличать мошенников от банка (благо это несложно: если звонят — в 99% это мошенники), а банк борется с номерами и пытается их блокировать.<\/p>\n<p><aside class=\"aside-margin-right\">Пример такого: <a href=\"https:\/\/twitter.com\/petoushkoff\/status\/1291691804736323584\"><a href=\"https:\/\/twitter.com\/petoushkoff\/status\/1291691804736323584\">https:\/\/twitter.com\/petoushkoff\/status\/1291691804736323584<\/a><\/a><\/aside><\/p>\n<p>Высказываются и совсем экстремальные способы, например, перевести всех на чат и рассказывать всем, что банк вообще не звонит. Мне кажется, это будет работать не очень хорошо. В этом способе не решается главная проблема: как донести всем 100% клиентов, что банк не звонит? Как их к этому приучить? Как сделать реакцию «позвонили — мошенники» уверенной?<\/p>\n<p>Банк может обучать своих клиентов (и делает это), но обучение затратно для клиентов по ментальным усилиям, часто они хотят просто пользоваться банком, а не обучаться ещё и тут. И опять же, пожилых часто обучать сложнее, чем молодых (простите за такой вот эйджизм). Особенно легко проверить, когда по телефону обращаются по имени-отчеству.<\/p>\n<h2>Мое решение<\/h2>\n<p><aside class=\"aside-margin-right\">Я погуглил, и кажется Сбербанк этого сейчас не делает<\/aside><\/p>\n<p>Сбербанк может встроить в своё мобильное приложение определитель мошеннических номеров и будет подставлять их на экран звонка через Caller ID. Caller ID — специальное API, через которое можно определять номер телефона, добавляя к нему какую-то внешнюю информацию.<\/p>\n<p>Многие приложения и сервисы так уже делают:<\/p>\n<ul>\n<li>Яндекс: определяет входящие номера, показывает название ресторана, кафе или магазина, отдельно помечает соцопросы и мошеннические звонки.<\/li>\n<li>Хантфлоу: при звонке кандидата рекрутеру определяется номер телефона и рекрутеру напоминают кто звонит и по какой вакансии.<\/li>\n<li>AmoCRM: при входящем звонке номер проверяется по CRM-базе и менеджеру по продажам показываются данные о контакте.<\/li>\n<\/ul>\n<p>Выглядеть это будет примерно так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/sberbank-and-caller-id@2x.png\" width=\"337\" height=\"687\" alt=\"\" \/>\n<\/div>\n<h2>Работоспособность решения<\/h2>\n<p>Почему это вряд ли будет работать у Яндекса, 2Гиса или Касперского так хорошо, как Сбербанк.<\/p>\n<p><b>Желание и цель<\/b>: Решение такой задачи на очень высоком уровне не в интересах Яндекса, 2Гиса или Касперского. У них просто нет необходимости убиваться и очень легко остановиться на уровне «удовлетворительно».<\/p>\n<p>У Сбербанка — безопасность денег клиентов одна из важнейших задач, её всегда так или иначе будут решать: антифрод-алгоритмами, машинным обучением, — можно добавить ещё один способ.<\/p>\n<p><b>Ресурсы<\/b>: У Сбербанка так или иначе собирается база номеров: их ИБ-подразделение разбирает инциденты. Сбербанк может собирать номера из обращений и по отзывам в соцсетях. Да и просто о фактах мошенничества и номерах телефонах клиенты сообщают именно Сберу, а не Яндексу.<\/p>\n<p>В интересах Сбербанка иметь максимально полную базу мошеннических номеров. Откуда Яндекс возьмет такую же полную базу номеров — непонятно.<\/p>\n<p><b>Доступность для целевой аудитории<\/b>: Своё приложение Сбербанк может и будет продвигать активней, чем приложение Яндекса (приложение Яндекса очевидно не будет вообще). Яндекс же тоже не станет убиваться и стараться для Сбера.<\/p>\n<p>У Сбера есть канал распространения, выход на клиентов, он даже знает, кому можно советовать приложение в первую очередь, — тем кто предположительно находится в зоне риска.<\/p>\n<p><b>Выгода<\/b>: Яндексу решение этой конкретной задачи непонятно зачем.<\/p>\n<p>Сбербанк же, решая задачу, защищает деньги клиентов (и свои) и экономит на разборе инцидентов, снижая их количество. Сбербанк делает жизнь клиентов лучше → клиенты любят банк → банк экономит на маркетинге.<\/p>\n<h2>Преимущество решения<\/h2>\n<p>В отличие от простого обучения «Как определить мошенников» эта схема может сработать даже с теми, кто в зоне риска.<\/p>\n<p>Я уверен, что многие молодые люди установят и настроят приложение на телефонах своих родителей, дедушек и бабушек, — затрат не требует, а дополнительный уровень защиты есть. Одно дело учить «не отвечай никому, кто звонит из банка», другое дело на телефоне перед звонком показывается<\/p>\n<p class=\"loud\">«❌ ❌ ❌ Возможно, мошенники ❌ ❌ ❌».<\/p>\n<p>Замечания параноика. Лучше сделать определитель и встроенным в мобильный сбербанк онлайн (чтобы не ставить отдельное приложение, тем у кого уже есть мобильный банк), и отдельным приложением (те, кто не хочет ставить сбербанк-онлайн смогут установить себе только определитель).<\/p>\n<h2>Вместо вывода<\/h2>\n<p>С моей точки зрения, это не очень сложно для мощной команды Сбера. Но если я хорошо гуглил, этого нет.<\/p>\n<p>Я не очень верю, что Сбер не рассматривал такой способ, видимо отказался. Почему? Что я не учел? Где схема ломается?<\/p>\n",
            "date_published": "2020-08-19T02:16:12+03:00",
            "date_modified": "2020-08-19T11:32:34+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/sberbank-and-caller-id-cover@2x.png",
            "_date_published_rfc2822": "Wed, 19 Aug 2020 02:16:12 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "150",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sberbank-and-caller-id-cover@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/sberbank-and-caller-id@2x.png"
                ]
            }
        },
        {
            "id": "145",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/tinkoff-nbsp\/",
            "title": "История одного неразрывного пробела",
            "content_html": "<p class=\"lead\">Ночная история про профессиональный заскок, сафари и Тинькофф.<\/p>\n<p><aside class=\"aside-margin-right\">Исходный твиттер-тред: <a href=\"https:\/\/twitter.com\/mikeozornin\/status\/1261054050453401602\">https:\/\/twitter.com\/mikeozornin\/status\/1261054050453401602<\/a><\/aside><\/p>\n<p>Изначально это был твиттер-тред, но для истории я перенес его в блог.<\/p>\n<p>Вижу, что на странице Тинькофф какой-то конский пробел между Tinkoff и Black, очевидно так не должно быть. (только в сафари, в других браузерах все ок).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-1@2x.jpg\" width=\"371\" height=\"164\" alt=\"\" \/>\n<\/div>\n<p>Смотрю в код, там неразрывный пробел, меняю на обычный — все становится отлично.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-2@2x.jpg\" width=\"404\" height=\"321\" alt=\"\" \/>\n<\/div>\n<p>Ну, понятно, дело в символе неразрывного пробела, который как-то не так сделали в шрифте. Добавляю для проверки второй раз Black через неразрывный пробел, но нет — все нормально.<\/p>\n<p>Интересно…<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-3@2x.jpg\" width=\"529\" height=\"186\" alt=\"\" \/>\n<\/div>\n<p><aside class=\"aside-margin-right\">Можете проверить инспектором:<\/p>\n<pre>ff&amp;nbsp;B | fi&amp;nbsp;B | fl&amp;nbsp;B | ft&amp;nbsp;B | tt&amp;nbsp;B |<\/pre>\n<p><\/aside><\/p>\n<p>Пытаюсь понять, в чем разница, вижу, что ff — одна из стандартных лигатур, может быть дело именно в лигатуре? Пробую остальные — бинго, это они.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-4@2x.jpg\" width=\"512\" height=\"172\" alt=\"\" \/>\n<\/div>\n<p>Для окончательной проверки отключаю лигатуры заклинанием:<\/p>\n<pre>font-variant-ligatures: none;<\/pre>\n<p> <br \/>\nВсе пробелы выравниваются.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-5@2x.jpg\" width=\"494\" height=\"110\" alt=\"\" \/>\n<\/div>\n<p>Почему так не знаю (скорее всего баг в сафари), но любопытство удовлетворил. Дизайнеры Тинькофф, вы, видимо, в хроме сидите?<\/p>\n",
            "date_published": "2020-05-22T01:54:58+03:00",
            "date_modified": "2020-05-22T01:54:48+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp@2x.png",
            "_date_published_rfc2822": "Fri, 22 May 2020 01:54:58 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "145",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-1@2x.jpg",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-2@2x.jpg",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-3@2x.jpg",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-4@2x.jpg",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/tinkoff-nbsp-5@2x.jpg"
                ]
            }
        },
        {
            "id": "143",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/search-ui-tricks\/",
            "title": "На что обратить внимание, когда делаешь поиск",
            "content_html": "<p>Недавно я сделал поиск в <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/vino-iz-parfenona\/\">Винах Парфенона<\/a>. Пока делал его, пришлось запрограммировать некоторые мелочи. Их часто пропускают, поэтому решил вот написать.<\/p>\n<p><aside class=\"aside-margin-right\"><a href=\"https:\/\/twitter.com\/mikeozornin\/status\/1252159976967213061\">twitter.com\/mikeozornin\/status\/1252159976967213061<\/a><br\/>Исходный твитер-тред<\/aside><\/p>\n<p>Изначально это был твиттер-тред, для удобства я перенес в пост.<\/p>\n<h3>1. Регистронезависимый поиск<\/h3>\n<p>Поиск почти всегда лучше сделать регистронезависимым. Нет ничего более неудобного, чем регистрозависимый поиск. Если кому-то нужна регистрозависимость — лучше сделать опцией.<\/p>\n<h3>2. Искать с первого символа<\/h3>\n<p>Ограничения «искать с третьего символа» обычно причиняют немало неудобств, лучше искать сразу.<\/p>\n<h3>3. Искать по всем полям сразу<\/h3>\n<p>Обычно нужно искать нужно в большом числе полей сразу, а не устраивать «Поиск по названию», «Поиск по винограду» и т. д.<\/p>\n<p>Например, можно искать сразу по всем отображаемым полям.<\/p>\n<h3>4. Делать trim<\/h3>\n<p>Почти всем данным при вводе, поисковому запросу в том числе, нужно делать trim — убирать все пробельные символы с концов строки (внутри нельзя).<\/p>\n<h3>5, 6 и 7. Как делить поисковый запрос на токены<\/h3>\n<p>Запрос делится по пробельным символам на части, каждая часть ищется независимо. Чтобы искать словосочетание, нужно взять его в кавычки.<\/p>\n<div class=\"e2-text-table\">\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n<tr>\n<td><b>Запрос<\/b><\/td>\n<td><b>Что должно найтись<\/b><\/td>\n<\/tr>\n<tr>\n<td>Pinot toscana<\/td>\n<td>Хотя бы одно поле содержит «Pinot»<br\/>И<br\/>Хотя бы одно поле содержит «toscana»<\/td>\n<\/tr>\n<tr>\n<td>’’Pinot toscana’’<\/td>\n<td>Хотя бы одно поле содержит «Pinot toscana»<\/td>\n<\/tr>\n<tr>\n<td>красное ’’Pinot toscana’’<\/td>\n<td>Хотя бы одно поле содержит «красное»<br\/>И<br\/>Хотя бы одно поле содержит «Pinot toscana»<\/td>\n<\/tr>\n<\/table>\n<\/div>\n<h3>8, 9 и 10.  Диакритические знаки<\/h3>\n<p>Нужно учитывать диакритические знаки, искать и с ними, и без них.<\/p>\n<p>Châteauneuf-du-Pape должен находиться по запросам:<br \/>\nChâteauneuf-du-Pape<br \/>\nChateauneuf-du-Pape<\/p>\n<p>Это важно потому, что не все помнят как правильно. Кто-то может забыть сам, а кто-то скопирует текст там, где не знали как правильно. Например, Château очень часто пишут без Accent circonflexe (Chateau).<\/p>\n<p><aside class=\"aside-margin-right\">Меня исправили и предложили более правильный способ: через нормализацию нужно прогонять как строку, в которой ищут, так и поисковый запрос. Тогда никаких сложностей не будет.<\/aside><\/p>\n<p>Нельзя просто сделать замену диакритических знаков на обычные. Должно найтись и так, и так. Человек, который пишет правильно, страдать не должен.<\/p>\n<p>Не делайте замену символов руками (â → a, á → a, à → a, å → a и т. д.), вы задолбаетесь и что-то пропустите. В вашем языке программирования, скорее всего, есть функция нормализации. Например, вот в джаваскрипте:<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/normalize\">developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/normalize<\/a><\/p>\n<p>Я использовал вот такой код для нормализации (откуда-то скопипастил)<\/p>\n<pre>\r\nvalue.normalize(’NFKD’).replace(\/[^\\w\\s.-_\\\/]\/g, ’’).toLocaleLowerCase();\r\n<\/pre>\n<h3>Посмотреть в жизни<\/h3>\n<p>Попробуйте все описанное выше в <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/vino-iz-parfenona\/\">Винах Парфенона<\/a>.<\/p>\n<h3>Что я забыл?<\/h3>\n",
            "date_published": "2020-04-21T22:55:55+03:00",
            "date_modified": "2025-03-03T22:18:43+03:00",
            "_date_published_rfc2822": "Tue, 21 Apr 2020 22:55:55 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "143",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "133",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/opentype-features\/",
            "title": "Что такое, эти опентайп-фичи",
            "content_html": "<p class=\"lead\">Что это за фичи, и почему про них нужно знать<\/p>\n<h2>Что случилось<\/h2>\n<p>В посте <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/how-to-align-data-in-table\/\">Как выравнивать данные в таблице<\/a> я написал, что моноширинные цифры иногда нужно включить опентайп-фичами (opentype features). В этом посте немного расскажу, что это такие за фичи, и почему про них полезно знать дизайнерам, редакторам и фронтендерам.<\/p>\n<h2>Что это за фичи<\/h2>\n<p>В шрифте есть основной набор знаков, который работает, когда вы набираете шрифтом буквы и цифры. Но есть и много-много запасных букв, цифр, значков и стрелочек. Большинство из них убраны в шкафчик, но их оттуда можно достать. Эти ящики в шкафчике называются опентайп-фичами.<\/p>\n<p>Я собрал примеры опентайп-фич, которые могут быть интересны. Включенные фичи всегда внизу.<\/p>\n<h2>Пропорциональные и моноширинные цифры<\/h2>\n<p><i>Что это:<\/i> Фича переключает пропорциональные (сверху) и моноширинные (снизу) цифры. Обратите внимание, что сверху число съехало больше, чем на целый разряд.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/tnum@2x.png\" width=\"400\" height=\"288\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт Inter, <a href=\"https:\/\/rsms.me\/inter\">rsms.me\/inter<\/a><\/div>\n<\/div>\n<p><i>Когда использовать:<\/i> моноширинные — в таблицах и таймерах, пропорциональные — в тексте и фактоидах<br \/>\n<i>Включить в CSS:<\/i><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">font-feature-settings: 'tnum' 1 \/\/ табличные\r\nfont-feature-settings: 'pnum' 1 \/\/ пропорциональные<\/code><\/pre><h2>Старостильные (минускульные) цифры<\/h2>\n<p><i>Что это:<\/i> Фича переключает маюскульные (сверху) и старостильные (минускульные, снизу) цифры. Минускульные цифры выравниваются по высоте строчных букв (пурпурным) и имеют выносы и сносы.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/onum@2x.png\" width=\"400\" height=\"152\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт RF Dewi, <a href=\"https:\/\/russianfonts.ru\/fonts\/dewi\/dewi-typeface.html\">russianfonts.ru\/fonts\/dewi\/dewi-typeface.html<\/a><\/div>\n<\/div>\n<p><i>Когда использовать:<\/i> по ситуации<br \/>\n<i>Включить в CSS:<\/i><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">font-feature-settings: 'onum'  1<\/code><\/pre><h2>Альтернативные начертания<\/h2>\n<p><i>Что это:<\/i> Фича включает различные альтернативные начертания знаков: это могут быть другие варианты написания символов в рукописных шрифтов (чтобы не было эффекта копипаста), другие цифры, буквы, знаки математических выражений и прочее. Конкретная логика замены зависит от шрифта, я покажу несколько примеров.<\/p>\n<p>Альтернативные цифры (4, 6, 9):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/ss01@2x.png\" width=\"400\" height=\"152\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт Inter, <a href=\"https:\/\/rsms.me\/inter\">rsms.me\/inter<\/a><\/div>\n<\/div>\n<p>Устранение неоднозначностей. Символы I (прописная i), l (строчная L), 1 (единица), 0 (ноль), O (прописная буква о) часто путаются, фича делает их различимыми:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/ss02@2x.png\" width=\"400\" height=\"152\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт Inter, <a href=\"https:\/\/rsms.me\/inter\">rsms.me\/inter<\/a><\/div>\n<\/div>\n<p>Римские цифры:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/ss03@2x.png\" width=\"401.5\" height=\"152\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт Alegreya, <a href=\"https:\/\/fonts.google.com\/specimen\/Alegreya\">fonts.google.com\/specimen\/Alegreya<\/a><\/div>\n<\/div>\n<p><i>Когда использовать:<\/i> по ситуации<br \/>\n<i>Включить в CSS:<\/i> font-feature-settings: ’ss01’ 1, вместо 01 поставить нужно число<\/p>\n<h2>Концевые росчерки (своши)<\/h2>\n<p><i>Что это:<\/i> Фича включает красивые длинные росчерки у букв, обычно у курсивного начертания.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/swsh@2x.png\" width=\"400\" height=\"152\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт Adobe Garamond, <a href=\"https:\/\/fonts.adobe.com\/fonts\/adobe-garamond\">fonts.adobe.com\/fonts\/adobe-garamond<\/a><\/div>\n<\/div>\n<p><i>Когда использовать:<\/i> по ситуации<br \/>\n<i>Включить в CSS:<\/i><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">font-feature-settings: 'swsh' 1<\/code><\/pre><h2>Контекстные замены<\/h2>\n<p><i>Что это:<\/i> Фича адаптирует различные символы к окружению набора. Пример ниже касается знаков операций. Обычно знаки операций выравниваются по вертикали со строчными буквами, но для математических операций это выглядит некрасиво, — для математических операций символы операций лучше немного приподнимать. С включенной фичей шрифт понимает, когда плюс и минус встречается между цифрами, и приподнимает их.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/calt@2x.png\" width=\"400\" height=\"152\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт Inter, <a href=\"https:\/\/rsms.me\/inter\">rsms.me\/inter<\/a><\/div>\n<\/div>\n<p><i>Когда использовать:<\/i> Просто включите, обычно станет лучше<br \/>\n<i>Включить в CSS:<\/i><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">font-feature-settings: 'calt' 1<\/code><\/pre><h2>Дроби<\/h2>\n<p><i>Что это:<\/i> Фича превращает обычный текст в обыкновенные дроби (о, каламбур).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/frac@2x.png\" width=\"400\" height=\"152\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Шрифт Inter, <a href=\"https:\/\/rsms.me\/inter\">rsms.me\/inter<\/a><\/div>\n<\/div>\n<p><i>Когда использовать:<\/i> Когда нужны дроби<br \/>\n<i>Включить в CSS:<\/i><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">font-feature-settings: 'frac' 1<\/code><\/pre><h2>Как использовать<\/h2>\n<p>Если у вас Фигма, то вам повезло, — недавно <a href=\"https:\/\/www.figma.com\/blog\/opentype-font-features\/\">Фигма анонсировала<\/a> поддержку опентайп-фич, сейчас их удобно включать прямо в интерфейсе.<\/p>\n<p>Если у вас Скетч, то все будет не так удобно:<br \/>\nView → Show Fonts → ⚙︎ → Typography<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/opentype-features-sketch@2x.png\" width=\"481\" height=\"311\" alt=\"\" \/>\n<\/div>\n<p>Upd. С версии Скетча 59 будет более-менее, — опентайп-фичи доступны через меню Text → Opentype Features.<\/p>\n<h2>Где работают (везде)<\/h2>\n<p>Если вы готовите картинки, графику или полиграфию, то включите фичи в графическом редакторе и проверьте, что экспорт в растр или вектор произошел корректно, все должно быть ок.<\/p>\n<p>В мобильных интерфейсах на iOS: <a href=\"https:\/\/stackoverflow.com\/questions\/46450875\/ios-opentype-font-features-in-swift\">stackoverflow.com\/questions\/46450875\/ios-opentype-font-features-in-swift<\/a><\/p>\n<p>В вебе тоже уже имеется полная поддержка всеми нормальными браузерами:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/caniuse.com\/#feat=font-feature\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/opentype-features-caniuse@2x.png\" width=\"1278\" height=\"424\" alt=\"\" \/>\n<\/a><\/div>\n<h2>Почитать ещё<\/h2>\n<p>Возможно, это будет вам тоже интересно:<\/p>\n<ul>\n<li>OpenType features: <a href=\"https:\/\/typofonderie.com\/font-support\/opentype-features\/\">typofonderie.com\/font-support\/opentype-features\/<\/a><\/li>\n<li>The Complete CSS Demo for OpenType Features: <a href=\"https:\/\/sparanoid.com\/lab\/opentype-features\/\">sparanoid.com\/lab\/opentype-features\/<\/a><\/li>\n<li>An ode to OpenType: Fall in love with the secret world of fonts: <a href=\"https:\/\/www.figma.com\/blog\/opentype-font-features\/\">figma.com\/blog\/opentype-font-features\/<\/a><\/li>\n<li>Inter Font → Features: <a href=\"https:\/\/rsms.me\/inter\/#features\">rsms.me\/inter\/#features<\/a><\/li>\n<\/ul>\n",
            "date_published": "2019-09-17T01:29:03+03:00",
            "date_modified": "2025-06-05T18:58:49+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/opentype-features@2x.png",
            "_date_published_rfc2822": "Tue, 17 Sep 2019 01:29:03 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "133",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/opentype-features@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/tnum@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/onum@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/ss01@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/ss02@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/ss03@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/swsh@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/calt@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/frac@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/opentype-features-sketch@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/opentype-features-caniuse@2x.png"
                ]
            }
        },
        {
            "id": "111",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/dont-make-me-click-and-hover\/",
            "title": "Не скрывать, а показать сразу",
            "content_html": "<p class=\"lead\">Расскажу об одном простом принципе в информационном дизайне и дизайне вообще<\/p>\n<p>ТАСС сделало интерактивный рассказ про дирижабль «Италия»:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"http:\/\/italia.tass.ru\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png\" width=\"1280\" height=\"804.5\" alt=\"\" \/>\n<\/a><\/div>\n<p>Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.<\/p>\n<p>На странице есть схема устройства дирижабля:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-1@2x.png\" width=\"1056\" height=\"505\" alt=\"\" \/>\n<\/div>\n<p>Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.<\/p>\n<p>Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл, что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.<\/p>\n<p>Лучше сразу всё подписать:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-2@2x.png\" width=\"1056\" height=\"505\" alt=\"\" \/>\n<\/div>\n<p>Особенно глупо точки смотрятся на этой фотографии:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-3@2x.png\" width=\"1280\" height=\"457.5\" alt=\"\" \/>\n<\/div>\n<p>Чтобы не заставлять читателя страдать, есть простое правило:<\/p>\n<p class=\"loud\">Если можно не прятать, лучше не прятать.<\/p>\n<p><\/p>\n<p>Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: <a href=\"http:\/\/mikeozornin.ru\/blog\/all\/how-to-label-screenshots\/\">Как подписывать скриншоты<\/a><\/p>\n",
            "date_published": "2019-03-01T08:00:28+03:00",
            "date_modified": "2020-11-10T01:36:54+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png",
            "_date_published_rfc2822": "Fri, 01 Mar 2019 08:00:28 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "111",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-0@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/italia-tass-3@2x.png"
                ]
            }
        },
        {
            "id": "97",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/pickpoint-email-redesign\/",
            "title": "Переверстка: письмо из Пикпоинта",
            "content_html": "<p>Сеть постаматов Пикпоинт присылает письмо, когда заказ приезжает в постамат.<\/p>\n<p>Письмо выглядит так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-original@2x.png\" width=\"798\" height=\"879\" alt=\"\" \/>\n<\/div>\n<p>Наверное есть какие-то объективные причины почему оно такое. Покажу как я бы его переделал, почти не меняя информацию в письме.<\/p>\n<p>Самая важная часть письма — код, вот она:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-important@2x.png\" width=\"798\" height=\"879\" alt=\"\" \/>\n<\/div>\n<p>Мой вариант вышел таким:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-new@2x.png\" width=\"798\" height=\"879\" alt=\"\" \/>\n<\/div>\n<p>Не буду описывать процесс, вот что делал:<\/p>\n<ul>\n<li>минимальная редактура: написание дат, тема письма, советы и прочее,<\/li>\n<li>код получения — самое важное, он сделан крупно,<\/li>\n<li>график работы и адрес постамата вытащены из ссылки «Здесь»,<\/li>\n<li>информация о заказе перенесена ниже, она не так важна,<\/li>\n<li>убраны картинки-иллюстрации к трем советам,<\/li>\n<li>логотип из подвала поднят наверх, справа как раз место для него,<\/li>\n<li>изменен адрес отправителя (вспомнил уже только в мобильной версии, в десктопной не стал менять).<\/li>\n<\/ul>\n<p>Мобильная версия. Мне она кажется важней, тот случай когда mobile first. Перед постаматом я всегда стою с открытым письмом, там нужный мне код.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-mobile@2x.png\" width=\"719\" height=\"640\" alt=\"\" \/>\n<\/div>\n<p>Что осталось нерешенным:<\/p>\n<ul>\n<li>информация о номере заказа: зачем она вообще, почему два номера и как сделать этот блок полезней,<\/li>\n<li>упоминание мобильного приложения выглядит натянуто: скачивать целое приложение, чтобы посмотреть трекинг,<\/li>\n<li>советы вообще: почему нужен именно возврат и приложение, им нужна нормальная редактура, а не на коленке.<\/li>\n<\/ul>\n",
            "date_published": "2018-12-03T13:15:06+03:00",
            "date_modified": "2018-12-16T00:29:45+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-original@2x.png",
            "_date_published_rfc2822": "Mon, 03 Dec 2018 13:15:06 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "97",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-original@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-important@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-desktop-new@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/pickpoint-mobile@2x.png"
                ]
            }
        },
        {
            "id": "83",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/how-to-label-screenshots\/",
            "title": "Как подписывать скриншоты",
            "content_html": "<p class=\"lead\">У нас в компании есть команда технических писателей, которые пишут руководства по продуктам. В руководствах техписатели вставляют скриншоты экранов и рассказывают как и что работает. Некоторое время назад я помог им разработать рекомендации по оформлению подписей к таким скриншотам. Расскажу на что обращать внимание. Вряд ли тут будет что-то новое дизайнерам, а вот остальным, надеюсь, поможет.<\/p>\n<p>Я подключился совсем рано, когда подписи скриншотов были совсем сырыми:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png\" width=\"1491\" height=\"358\" alt=\"\" \/>\n<\/div>\n<p>То, что ко мне попал один из самых первых черновиков — большая удача, из черновика получились хорошие примеры. Их не пришлось придумывать из головы, они вышли иллюстративные и при этом реальные.<\/p>\n<h2>Общие правила<\/h2>\n<p>Про оформление подписей есть бюрошный совет: <a href=\"https:\/\/bureau.ru\/bb\/soviet\/20140728\/\">bureau.ru\/bb\/soviet\/20140728.<\/a> В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть <a href=\"https:\/\/bureau.ru\/books\/typography\/71\">разворот 71.<\/a><\/p>\n<p>Я не буду повторяться и писать про толщину линий и их цвет, про расстояния до обозначаемого объекта, в двух ссылках выше это описано.<\/p>\n<h2>Прием 1: УВЛ (убрать все лишнее)<\/h2>\n<p>Самое простое, с чего можно начать улучшение этой картинки — убрать очевидные сущности. Текста станет меньше, свободного места — больше, подписи станут компактней и аккуратней.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png\" width=\"1491\" height=\"358\" alt=\"\" \/>\n<\/div>\n<p>Слово <i>button<\/i> встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому <i>button<\/i> безболезненно убирается:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-2.png\" width=\"1449\" height=\"329\" alt=\"\" \/>\n<\/div>\n<h2>Прием 2: вынести общее за скобки<\/h2>\n<p>Иногда от повторений нельзя избавиться совсем.  В примере ниже повторяется не просто <i>button,<\/i> а <i>filter button.<\/i><\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-3.png\" width=\"366\" height=\"168\" alt=\"\" \/>\n<\/div>\n<p>Убрать <i>button<\/i> можно, а вот от <i>filter<\/i> избавиться нельзя. Если убрать слово <i>filter<\/i>, то потеряется важный смысл. При этом <i>filter button<\/i> относится ко всем четырем действиям, все они — действия над сохраненными фильтрами. Нет необходимости писать про сохраненные фильтры 4 раза, можно написать один раз и больше не повторяться.<\/p>\n<p>Например, так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/1-4.png\" width=\"470\" height=\"158\" alt=\"\" \/>\n<\/div>\n<p>Фактически мы вынесли <i>filter button<\/i> за скобки, как в математическом выражении.<\/p>\n<h2>Прием 3: соблюдать теории близости<\/h2>\n<p><aside class=\"aside-margin-right\"><span class=\"related-excerpt\">Теория близости: <a href=\"https:\/\/www.artlebedev.ru\/kovodstvo\/sections\/136\/\">artlebedev.ru\/kovodstvo\/sections\/136\/<\/a><\/span><\/aside><\/p>\n<p>Нужно следить, чтобы при расположении подписей не нарушалась теория близости. Здесь надпись близка к чужой палочке, возникает путаница:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/5-1@2x.png\" width=\"639\" height=\"213\" alt=\"\" \/>\n<\/div>\n<h2>Прием 4: использовать естественное соответствие<\/h2>\n<p>Известный инженерный психолог Дональд Норман в своей книге «Дизайн привычных вещей» сформулировал принцип «естественного соответствия». Проще всего объяснить картинкой. Слева просто так, справа — естественное соответствие:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/norman@2x.png\" width=\"1000\" height=\"294\" alt=\"\" \/>\n<\/div>\n<p>На этом куске скриншота все 4 иконки стоят ровно в ряд с одинаковыми отступами:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/3-1.png\" width=\"602\" height=\"192\" alt=\"\" \/>\n<\/div>\n<p>По возможности лучше не подписывать что-то сбоку, что-то снизу, а расположить подписи в ряд, с одинаковыми интервалами, — это усилит взаимосвязь:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/3-2.png\" width=\"471\" height=\"145\" alt=\"\" \/>\n<\/div>\n<h2>Прием 5: выравнивать текст осмысленно<\/h2>\n<p>Подпись к элементу можно поставить по-разному: слева, справа, ближе к центру. По-разному можно выровнять текст: по левому краю, по центру или по правому краю. Если расположение и выравнивание выбирать не случайно, то оно помогает лучше соотнести подпись с элементом, к которому она написана.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/6-1.png\" width=\"625\" height=\"170\" alt=\"\" \/>\n<\/div>\n<p>Подпись периода расположение по центру и похожа на форме на отображаемый период: невысокая и широкая. Иконка <i>Expand timeline<\/i> расположена в правой части поля, поэтому выноску располагается с правой стороны текста. Дополнительно можно было бы использовать выравнивание текста <i>Expand timeline<\/i> по правому краю, а <i>Apply filter<\/i> по центру, но это не обязательно в данном случае.<\/p>\n<p>За выравниваем всегда следят на транспортных схемах: правильное расположение названия станции помогает понять, где какая станция. Посмотрите, например, линейные схемы Московского метро: <a href=\"https:\/\/www.artlebedev.ru\/metro\/line-map\/\">artlebedev.ru\/metro\/line-map.<\/a><\/p>\n<h2>Прием 6: убрать «почти, но не совсем»<\/h2>\n<p><aside class=\"aside-margin-right\"><span class=\"related-excerpt\">Конечно это упрощение, но сейчас так надо<\/span><\/aside><\/p>\n<p>Существует общее правило в дизайне: блоки, надписи и другие элементы нужно или выровнять совсем, или совсем не ровнять. Не должно быть элементов, неровных на чуть-чуть, не должно быть никаких «почти, но не совсем».<\/p>\n<p>Посмотрим на картинку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-1.png\" width=\"1500\" height=\"139\" alt=\"\" \/>\n<\/div>\n<p>Здесь много <i>почти, но не совсем<\/i>, всего 6 видов разного выравнивания:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-2.png\" width=\"1525\" height=\"160\" alt=\"\" \/>\n<\/div>\n<p>Подписи будут аккуратней, если их выровнять друг относительно друга так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/2-3.png\" width=\"1551\" height=\"121\" alt=\"\" \/>\n<\/div>\n<p>Ещё примеры «почти, но не совсем» <a href=\"http:\/\/ilyabirman.ru\/meanwhile\/all\/almost\/\">в посте Ильи Бирмана<\/a>.<\/p>\n<h2>Прием 7: следить за типографикой<\/h2>\n<p>Подписи — неблагодарный для верстки формат: колонка узкая, а тут ещё могут появиться эти длинные русские слова. В узких колонках особенно важно следить за интерлиньяжем (межстрочным интервалом), лучше уменьшить его относительно базового. <i>Filter<\/i> и <i>panel<\/i> расположены так далеко друг относительно друга, что может показаться, что это две подписи. Если уменьшить интерлиньяж будет лучше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/4-1.png\" width=\"1151\" height=\"392\" alt=\"\" \/>\n<\/div>\n<p>Ещё для подписей обычно применяют кегль, уменьшенный на пару пунктов относительно основного текста.<\/p>\n<p>Про интерлиньяж:<br \/>\n<a href=\"http:\/\/bureau.ru\/bb\/soviet\/20140310\/\">bureau.ru\/bb\/soviet\/20140310\/ <\/a><br \/>\n<a href=\"http:\/\/bureau.ru\/bb\/soviet\/20140224\/\">bureau.ru\/bb\/soviet\/20140310\/ <\/a><\/p>\n<h2>Прием 8: редактировать текст<\/h2>\n<p>Из-за узкой колонки в подписях может быть много переносов на другие строки. Лучше, если они будут в логически обоснованных местах.<\/p>\n<h2>Прием 9: рассказывать по частям<\/h2>\n<p>Иногда бывает так: уже убрал все лишнее, вынес за скобки, сократил и отредактировал текст, а все равно ничего не лезет. Как ни стараешься, ничего не помогает: подписей слишком много, они мешают друг другу, получается каша.<\/p>\n<p>В этом случае можно рассказывать по частям. Например, сначала показать общие части, потом подписать отдельные элементы этих частей:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/7-1.png\" width=\"1609\" height=\"703\" alt=\"\" \/>\n<\/div>\n<div class=\"post-summary\"><div class=\"post-summary__header\"><p>Приемы<\/p>\n<\/div><div class=\"post-summary__text\"><ol start=\"1\">\n<li>Убрать все лишнее<\/li>\n<li>Вынести общее за скобки<\/li>\n<li>Соблюдать теории близости<\/li>\n<li>Использовать естественное соответствие<\/li>\n<li>Выравнивать текст осмысленно<\/li>\n<li>Убрать «почти, но не совсем»<\/li>\n<li>Следить за типографикой<\/li>\n<li>Редактировать текст<\/li>\n<li>Рассказывать по частям<\/li>\n<\/ol>\n<\/div><\/div><p><\/p>\n<p>Про подписи есть ещё два поста Сергея Стеблины, он шарит сильно лучше меня, поэтому если дочитали досюда, то прочитайте и его, вам уже нечего терять:<\/p>\n<ul>\n<li><a href=\"http:\/\/steblina.com\/neznal\/?go=all\/razmery-lineyki\/\">Размеры и линейки<\/a><\/li>\n<li><a href=\"http:\/\/steblina.com\/neznal\/?go=all\/korotko-o-vynoskah-i-podpisyah\/\">Коротко о выносках и подписях<\/a> — на самом деле не коротко<\/li>\n<\/ul>\n",
            "date_published": "2018-02-12T12:19:47+03:00",
            "date_modified": "2018-12-16T00:41:04+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png",
            "_date_published_rfc2822": "Mon, 12 Feb 2018 12:19:47 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "83",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-2.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-3.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/1-4.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/5-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/norman@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/3-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/3-2.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/6-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-2.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/2-3.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/4-1.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/7-1.png"
                ]
            }
        },
        {
            "id": "20",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/obyavleniya-o-zakrytii-metro\/",
            "title": "Объявления о закрытии метро",
            "content_html": "<p>Оригинал в ЖЖ: <a href=\"http:\/\/withoutbrains.livejournal.com\/89319.html\">http:\/\/withoutbrains.livejournal.com\/89319.html<\/a><\/p>\n<p>Тут в субботу закрывали 4 станции метро на нашей ветке, в связи с чем были объявления о закрытии. Я видел минимум три варианта, два сфоткал.<\/p>\n<p>Вот вариант, который подготовили явно в Дептрансе, тут и симпатичный стиль, и с текстом получше, и даже про висячую пунктуацию в курсе:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/46895_original.png\" width=\"368\" height=\"533\" alt=\"\" \/>\n<\/div>\n<p>Наравне с этим везде висят объявления, сделанные, судя по всему в депо:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/45670_original.png\" width=\"400\" height=\"533\" alt=\"\" \/>\n<\/div>\n<p>Первое, что хочется сделать — пошутить и нарисовать классическое и потешить своё ЧСВ.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/46060_original.png\" width=\"900\" height=\"622\" alt=\"\" \/>\n<\/div>\n<p>Однако, как заметила Оля, всё не так просто как кажется.<\/p>\n<p>Объявление Дептранса лучше, красивей, человечней. Но при этом объявления депо более работоспособны.<\/p>\n<p>Вот почему:<\/p>\n<ul>\n<li>Каждый раз, когда я вижу треш-объявление на листе бумаги, я его читаю. Обычно — это существенные изменения в работе станций. Я мучаюсь, продираясь сквозь косный текст и плохую вёрстку, но читаю<\/li>\n<li>Объявление на листе бумаги лучше видно. Оно настолько выделяется из оформления станции и вестибюлей, что видно и на станции, и в вестибюлях. Дептрансовское объявление же теряется на фоне тарифов и прочего, его хуже видно издалека. Оно не кричит «Ахтунг, Ахтунг, не проходи мимо, 4 станции метро на вашей ветке будут закрыты целый день».<\/li>\n<\/ul>\n<p>Оба этих фактора, как мне кажется, приведут к тому, что дептрансовское объявление мало кто увидит.<\/p>\n<p>Что же делать?<\/p>\n<ol start=\"1\">\n<li>Вешать всегда ахтунг-объявление и нормальное рядом. На ахтунговом писать «Изменения в графике, читайте вот тут →». Постепенно отказываться от ахтунговых, приучая к нормальным. Да, это стёб.<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/46170_original.png\" width=\"682\" height=\"533\" alt=\"\" \/>\n<\/div>\n<ol start=\"2\">\n<li>Переделать дизайн нормальных объявлений, чтобы они были более заметны. Сделать их сначала очень заметными, прямо до рези в глазах.<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/46458_original.png\" width=\"540\" height=\"771\" alt=\"\" \/>\n<\/div>\n<p>А потом люди привыкнут к внешнему виду и можно будет уменьшать заметность, оставив разделение: объявления о изменении графика \/ справочные материалы по тарифам.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/46650_original.png\" width=\"500\" height=\"751\" alt=\"\" \/>\n<\/div>\n",
            "date_published": "2014-06-24T02:52:23+03:00",
            "date_modified": "2020-05-18T13:42:03+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/46895_original.png",
            "_date_published_rfc2822": "Tue, 24 Jun 2014 02:52:23 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "20",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/46895_original.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/45670_original.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/46060_original.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/46170_original.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/46458_original.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/46650_original.png"
                ]
            }
        },
        {
            "id": "7",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/statistika-po-zadacham\/",
            "title": "Статистика по задачам",
            "content_html": "<p>Оригинал в ЖЖ: <a href=\"http:\/\/withoutbrains.livejournal.com\/78773.html\">http:\/\/withoutbrains.livejournal.com\/78773.html<\/a><\/p>\n<p>Некоторое время назад я нарисовал на работе картинку по числу создаваемых в трекере задач (и багов, но и не только). Попытался подчеркнуть некоторые факты и тенденции.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/13415_original.png\" width=\"844\" height=\"493\" alt=\"\" \/>\n<\/div>\n<p>Что плохо? Что удалось? Что можно было бы сделать не так? Пишите и про концептуальные вещи, и про мелочи (не такой отступ, другой шрифт, нарушена теория близости и прочее).<\/p>\n",
            "date_published": "2013-05-28T01:26:00+03:00",
            "date_modified": "2016-08-14T20:40:01+03:00",
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/13415_original.png",
            "_date_published_rfc2822": "Tue, 28 May 2013 01:26:00 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "7",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/13415_original.png"
                ]
            }
        }
    ],
    "_e2_version": 3798,
    "_e2_ua_string": "E2 (v3798; Aegea)"
}