Используйте закреплённую DESIGN.md в Claude Code для одной страницы

У существующей страницы есть конкретные элементы, которые нужно улучшить и сохранить. Коллекция Awesome DESIGN.md от VoltAgent содержит текстовые разборы публичных сайтов для контекста ИИ-агента программирования. В руководстве используется один файл из коммита от 14 октября 2026 года как визуальный ориентир для ограниченной правки в Claude Code. Результат засчитывается только после вашей проверки изменённого кода и отображаемой страницы.

BIG CHANGE изучила закреплённый репозиторий и документацию Claude Code. Мы не запускали Claude Code, не редактировали страницу, не измеряли время и не проверяли сгенерированный результат. Закреплённое дерево содержит 84 файла непосредственно в design-md/*/DESIGN.md; число относится к этому коммиту, а не к постоянному размеру каталога.

Большое изменение

• Что изменилось: Один разбор дизайна фиксированной версии можно явно передать как контекст для правки одной разрешённой страницы.
• Почему это важно: Владелец может заимствовать полезную идею компоновки или отступов, сверяя результат с реальным содержанием, идентичностью и поведением страницы.
• На что обратить внимание: Это разбор сообщества. Сведения о бренде и даже отдельные внутренние указания могут быть неверными или неподходящими для вашей страницы.

Перед началом

Нужны страница и репозиторий, которые разрешено менять, рабочая копия или ветка, способ локального отображения страницы и доступ к Claude Code через подходящую учётную запись или провайдера. Определите файл страницы и обычные команды её запуска и проверки в проекте. Запишите аудиторию, обязательные тексты и ссылки, утверждённые цвета, шрифты и логотип, а также единственную визуальную проблему. Храните решения владельца рядом с рабочей копией для оценки правок.

Прежде чем передавать закрытые материалы клиента, проверьте политику данных и разрешения инструментов вашей учётной записи. Claude Code обрабатывает запросы и содержимое проекта по условиям учётной записи; локальный проект не делает сеанс модели исключительно локальным. Убедитесь, что можно передать закрытые тексты, ресурсы или код, которые раскроет задача.

Один ориентир для одной страницы

1. Откройте README закреплённой коллекции. Выберите одну design-md/<name>/DESIGN.md с идеей, подходящей для обозначенной проблемы. Сначала прочтите весь файл. Пример Notion показывает формат: предложения по компоновке, шрифтам, отступам и компонентам. Он описывает и капсульные, и прямоугольные кнопки. Это противоречие требует собственного решения, а не просьбы к Claude Code выполнять каждую строку.
2. Скопируйте только эту закреплённую DESIGN.md в рабочий проект, например в design-reference/DESIGN.md. Рядом запишите исходный URL, путь и коммит 3b605329240ce735b510037cca322f1831fdd7f8. Вместе с копией сохраните уведомление MIT об авторских правах и разрешении из репозитория. Markdown-файл не требует установки пакетов. Лицензия относится к материалам репозитория, но не разрешает использовать логотип, файлы шрифтов, изображения или товарный знак представленной компании.
3. Откройте Claude Code в разрешённом проекте и явно передайте скопированный файл как контекст. Anthropic отдельно описывает ссылки на файлы и файлы проектных инструкций; наличие отдельной DESIGN.md в папке не доказывает, что Claude Code её загрузил. Замените путь страницы и правила владельца в квадратных скобках на реальные значения и перед принятием правки убедитесь, что Claude Code прочитал ориентир.

Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.

4. До выполнения или принятия прочтите предложенные различия. Проверьте каждый изменённый файл, текст и ссылку. Отклоните новые зависимости, ресурсы или правки других страниц, которых не просили. Отобразите страницу документированной командой проекта. Откройте её на ширине компьютера и телефона; проверяйте настоящую страницу, а не описание намерений агента.
5. Сравните отображение с записанными требованиями. Проверьте сохранность текстов и ссылок, разумный порядок заголовков, достаточный контраст текста и элементов управления, отсутствие обрезки и горизонтальной прокрутки на телефоне. Клавиатурой достигните и используйте затронутые ссылки, кнопки, меню и формы. Проверьте изменённые взаимодействия, включая видимый фокус и ошибки. Запишите ревизию страницы, ширины, проверки и дефекты. Принимайте правку только после прохождения проверок на вашей странице.

Если Claude Code пропустил ориентир, снова укажите файл и попросите назвать использованные разделы. Если он противоречит правилам бренда, уберите эту установку из запроса и исправьте затронутый код. Если сломалась ссылка, маршрут фокуса или взаимодействие, восстановите прежнее поведение и уменьшите правку. Если нельзя отобразить страницу и проверить результат, не принимайте изменение до появления такой возможности.

Коллекция — описания чужих сайтов от сообщества, предоставленные сопровождающими как есть. В файле Notion противоречат друг другу формы кнопок, описаны недокументированные эффекты наведения и предложена команда проверки кода, которую это руководство не проверяло. Используйте известные проверки проекта, а не эту команду. Использование Claude Code и последующие расходы на хостинг или ресурсы зависят от учётной записи и проекта; время правки и итоговое качество дизайна здесь не установлены.

Другой подход к работе над страницами с ИИ описан в нашем руководстве по прототипу Genspark: копирование размещённого прототипа и проверка экспортированного ZIP с исходниками. У той задачи другой начальный материал и критерий завершения.

Источники и дополнительное чтение

• Закреплённый README VoltAgent описывает коллекцию и разборы публичных сайтов, предоставляемые как есть. Число файлов взято из закреплённого рекурсивного дерева, а не из заявления о будущих версиях.
• Закреплённая Notion DESIGN.md показывает формат и внутренние противоречия. Это не утверждённая Notion спецификация и не источник прав на её ресурсы.
• Репозиторная лицензия MIT требует сохранять уведомление об авторских правах и разрешении в копиях или существенных частях.
• Материалы Anthropic: быстрый старт Claude Code, указания по ссылкам на файлы и документация проектных инструкций объясняют доступ и явный контекст. Они не проверяют эту правку и автоматическую загрузку отдельного ориентира.
• Документация Anthropic о стоимости, использовании данных и разрешениях объясняет использование и контроль в зависимости от учётной записи. Для этого руководства не тестировались сеанс, счёт или получившаяся страница.