{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Михаила Озорнина: заметки с тегом прототипы",
    "_rss_description": "Главная · Блог · Работы",
    "_rss_language": "ru",
    "_itunes_email": "",
    "_itunes_categories_xml": "",
    "_itunes_image": "",
    "_itunes_explicit": "",
    "home_page_url": "https:\/\/mikeozornin.ru\/blog\/tags\/prototipy\/",
    "feed_url": "https:\/\/mikeozornin.ru\/blog\/tags\/prototipy\/json\/",
    "icon": "https:\/\/mikeozornin.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1614204384",
    "authors": [
        {
            "name": "Михаил Озорнин",
            "url": "https:\/\/mikeozornin.ru\/blog\/",
            "avatar": "https:\/\/mikeozornin.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1614204384"
        }
    ],
    "items": [
        {
            "id": "234",
            "url": "https:\/\/mikeozornin.ru\/blog\/all\/build-html-prototype-skill\/",
            "title": "Скилл для кликабельных прототипов",
            "content_html": "<p class=\"lead\">Я сделал скилл для делания прототипов. С ним ваш клод или кодекс соберет более удобный кликабельный прототип, а вы сможете легко его потом доработать<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-1@2x.png\" width=\"1388\" height=\"1031\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-2@2x.png\" width=\"1388\" height=\"1031\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-3@2x.png\" width=\"1388\" height=\"1031\" alt=\"\" \/>\n<\/div>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-4@2x.png\" width=\"1388\" height=\"1031\" alt=\"\" \/>\n<\/div>\n<p>Скринкаст:<\/p>\n<div class=\"e2-text-video\">\n<video src=\"https:\/\/mikeozornin.ru\/blog\/video\/mo-build-prototype-skill-demo.mp4#t=0.001\" width=\"1920\" height=\"1080\" controls alt=\"\" \/>\n\n<\/div>\n<h2>Зачем<\/h2>\n<p>Иногда проще не тащить реальную дизайн-систему и не писать сразу на свифте, котлине или реакт нейтиве. Клод быстрее соберет отдельный изолированный хтмл-файл, и успеет его три раза поправить, пока нпм ставит все зависимости вашей дизайн-системы.<\/p>\n<p>Всё лежит в одном файле: экраны, логика, комментарии, картинки, иконки. Его можно кинуть коллегам, он откроется у них в браузере так же, как у вас.<\/p>\n<h2>Что в скилле<\/h2>\n<p>Главное в скилле — не сами экраны, а обвязка, в которой их удобно смотреть и обсуждать. Она одинаковая во всех прототипах. Агент её не трогает и пишет только экраны.<\/p>\n<ul>\n<li>Браузерная рамка с прототипом, чтобы отделить его от обертки<\/li>\n<li>Переключатели шагов и состояний. По горизонтали — шаги, по вертикали состояния этих шагов. Удобно обозреть целиком, а не искать переходы.<\/li>\n<li>Карта этих же экранов и переходов, иногда удобнее смотреть её<\/li>\n<li>Варианты прототипы (грид или карточки) или параметры: десктоп-мобайл, ориентация планшет и прочее. Если вопрос в том, какое решение выбрать, агент делает 2—3 варианта, которые отличаются структурой, а не цветом кнопок.<\/li>\n<li>Комментарии агент. Агент может подписать тонкости для вас.<\/li>\n<\/ul>\n<h2>Правочки<\/h2>\n<p>Отдельное внимание уделил тому, как вы будете отдавать правочки клоду. Зажимаете Альт (Опшен на маке), кликаете в элемент и пишете комментарий. Он привязывается к конкретному элементу на конкретном экране в конкретном состоянии. Потом нажимаете «Копировать все» и получаете текст для агента. Пара таких итераций, и у вас уже вполне кликабельная штука.<\/p>\n<h2>Сам прототип<\/h2>\n<p>В теории клод должен не бросаться сразу рисовать галерею экранов, а разобраться как сделать прототип под конкретное решение. До того, как писать код он должен будет:<\/p>\n<ul>\n<li>выяснить, кто пользователь и какую задачу решает;<\/li>\n<li>сформулировать, что команда должна решить по прототипу;<\/li>\n<li>расписать сценарий от начала до результата, не уходят во все ненужные ответвления<\/li>\n<\/ul>\n<p>Если продукт уже есть, агент возьмет навигацию из него. Экраны на пути к ответу он сделает кликабельными, остальное нет, но можно попросить всё.<\/p>\n<h2>Скачать<\/h2>\n<p><a href=\"https:\/\/github.com\/mikeozornin\/skills\">https:\/\/github.com\/mikeozornin\/skills<\/a><\/p>\n<pre class=\"e2-text-code\"><code class=\"\">npx skills add mikeozornin\/skills --skill mo-build-html-prototype<\/code><\/pre><p>Если есть что, пишите. Интересно посмотреть на чужой опыт.<\/p>\n",
            "summary": "Скринкаст",
            "date_published": "2026-10-19T23:42:50+03:00",
            "date_modified": "2026-10-19T23:42:46+03:00",
            "tags": [
                "ИИ",
                "прототипы",
                "работа",
                "скиллы"
            ],
            "image": "https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-1@2x.png",
            "_date_published_rfc2822": "Mon, 19 Oct 2026 23:42:50 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "234",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "highlight\/highlight.js",
                    "highlight\/highlight.css"
                ],
                "og_images": [
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-1@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-2@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-3@2x.png",
                    "https:\/\/mikeozornin.ru\/blog\/pictures\/build-html-prototype-skill-4@2x.png"
                ]
            }
        }
    ],
    "_e2_version": 4199,
    "_e2_ua_string": "Aegea 11.5 (v4199)"
}