Делаем дизайн сайта с design.md, Refero, Hallmark, Taste, Open Design

Это публичная карточка материала Человек 2.0. Она объясняет, зачем открывать урок, какие темы внутри и с какими соседними материалами он связан. Блок сделан текстовым, чтобы поисковик, LLM-агент и участник воркшопа могли извлечь смысл без просмотра видео и без доступа к приватным данным.

• Этот урок нужен, чтобы пройти полный цикл сайта магазина смартфонов: первый Codex-промпт, DESIGN.md, Refero/Open Design, Hallmark-аудит, image-to-code, ветки, GitHub и Vercel.
• После первого урока уже понятно, как ставить агенту задачу, планировать работу и получать первый результат. Во втором уроке этот навык переносится на сайт: не на абстрактную визитку, а на учебный storefront магазина смар...
• Главная ценность урока в том, что первая генерация специально не считается финалом. Сначала Codex делает базовый сайт без сильных дизайн-скиллов. Потом результат разбирается глазами: где плохие картинки телефонов, где сл...
• 1. Разобрать вопросы после первого урока. В начале занятия обсуждаются боты, VPS, Hermes, безопасность, разделение контекстов и Telegram как будущий super app. Это не отступление: сайт дальше делается тем же способом, че...
• 2. Выбрать задачу для практики. Вместо сайта-визитки берётся магазин техники и смартфонов. У задачи есть товарный каталог, реальные карточки, фото, характеристики, доставка, гарантия и заявка. На ней проще увидеть, где а...
• Используется в самом начале, чтобы не писать в Codex сырой запрос. Его роль: превратить идею «сделать сайт магазина телефонов» в конкретную постановку с ассортиментом, страницами, картинками, характеристиками и ожидаемым...
• DESIGN.md / design.md
• Нужен для поиска референсов: styles, screens и flows. В уроке через Refero ищутся web store примеры, product pages, delivery/address flows и визуальные решения. Главный принцип: брать ритм, структуру и паттерны, а не коп...
• Это дизайн-мозг вокруг Refero. Он помогает агенту превращать найденные style/screen/flow references в конкретные решения: какие секции нужны, какой визуальный ритм выбрать, как работать с типографикой, цветом и media str...
• ZIP-скилл из чата, который в конце урока называется роутером. Его смысл: не делать всю работу самому, а оркестрировать другие скиллы для web-задач. Он сначала использует refero-design, потом при необходимости taste-skill...

Связанные материалы для продолжения: Онбординг: Codex + Hermes; Старт в Codex: GitHub, репозиторий, первый проект и базовый workflow; Онбординг: Твой быстрый старт на воркшопе. Такая связка помогает идти по маршруту воркшопа не отдельными роликами, а последовательной системой: урок, практика, встреча, скилл и следующий шаг.