Версия Markdown

AI-translated from English; not yet reviewed by a fluent editor.

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

> Выберите файл DESIGN.md закреплённой версии, передайте Claude Code для разрешённого редактирования страницы и проверьте код и отображение на компьютере и телефоне.

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

У существующей страницы есть конкретные элементы, которые нужно улучшить и сохранить. [Коллекция Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) от VoltAgent содержит текстовые разборы публичных сайтов для контекста ИИ-агента программирования. В руководстве используется один файл из коммита от 14 октября 2026 года как визуальный ориентир для ограниченной правки в Claude Code. Результат засчитывается только после вашей проверки изменённого кода и отображаемой страницы.

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

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

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

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

Нужны страница и репозиторий, которые разрешено менять, рабочая копия или ветка, способ локального отображения страницы и доступ к [Claude Code](https://code.claude.com/docs/en/quickstart) через подходящую учётную запись или провайдера. Определите файл страницы и обычные команды её запуска и проверки в проекте. Запишите аудиторию, обязательные тексты и ссылки, утверждённые цвета, шрифты и логотип, а также единственную визуальную проблему. Храните решения владельца рядом с рабочей копией для оценки правок.

Прежде чем передавать закрытые материалы клиента, проверьте [политику данных](https://code.claude.com/docs/en/data-usage) и [разрешения инструментов](https://code.claude.com/docs/en/permissions) вашей учётной записи. Claude Code обрабатывает запросы и содержимое проекта по условиям учётной записи; локальный проект не делает сеанс модели исключительно локальным. Убедитесь, что можно передать закрытые тексты, ресурсы или код, которые раскроет задача.

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

1. Откройте [README закреплённой коллекции](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). Выберите одну `design-md/<name>/DESIGN.md` с идеей, подходящей для обозначенной проблемы. Сначала прочтите весь файл. [Пример Notion](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) показывает формат: предложения по компоновке, шрифтам, отступам и компонентам. Он описывает и капсульные, и прямоугольные кнопки. Это противоречие требует собственного решения, а не просьбы к Claude Code выполнять каждую строку.
2. Скопируйте только эту закреплённую `DESIGN.md` в рабочий проект, например в `design-reference/DESIGN.md`. Рядом запишите исходный URL, путь и коммит `3b605329240ce735b510037cca322f1831fdd7f8`. Вместе с копией сохраните [уведомление MIT об авторских правах и разрешении](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) из репозитория. Markdown-файл не требует установки пакетов. Лицензия относится к материалам репозитория, но не разрешает использовать логотип, файлы шрифтов, изображения или товарный знак представленной компании.
3. Откройте Claude Code в разрешённом проекте и явно передайте скопированный файл как контекст. Anthropic отдельно описывает [ссылки на файлы](https://code.claude.com/docs/en/common-workflows) и [файлы проектных инструкций](https://code.claude.com/docs/en/memory); наличие отдельной `DESIGN.md` в папке не доказывает, что Claude Code её загрузил. Замените путь страницы и правила владельца в квадратных скобках на реальные значения и перед принятием правки убедитесь, что Claude Code прочитал ориентир.

```markdown
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](https://bigchange.ai/blog/genspark-design-prototype-source-zip): копирование размещённого прототипа и проверка экспортированного ZIP с исходниками. У той задачи другой начальный материал и критерий завершения.

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

- [Закреплённый README VoltAgent](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) описывает коллекцию и разборы публичных сайтов, предоставляемые как есть. Число файлов взято из закреплённого рекурсивного дерева, а не из заявления о будущих версиях.
- Закреплённая [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) показывает формат и внутренние противоречия. Это не утверждённая Notion спецификация и не источник прав на её ресурсы.
- Репозиторная [лицензия MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) требует сохранять уведомление об авторских правах и разрешении в копиях или существенных частях.
- Материалы Anthropic: [быстрый старт Claude Code](https://code.claude.com/docs/en/quickstart), [указания по ссылкам на файлы](https://code.claude.com/docs/en/common-workflows) и [документация проектных инструкций](https://code.claude.com/docs/en/memory) объясняют доступ и явный контекст. Они не проверяют эту правку и автоматическую загрузку отдельного ориентира.
- Документация Anthropic о [стоимости](https://code.claude.com/docs/en/costs), [использовании данных](https://code.claude.com/docs/en/data-usage) и [разрешениях](https://code.claude.com/docs/en/permissions) объясняет использование и контроль в зависимости от учётной записи. Для этого руководства не тестировались сеанс, счёт или получившаяся страница.

## Sources

- [Закреплённый README Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Основное описание репозитория и копирования одного файла из неизменяемого коммита. Указано, что разборы публичных сайтов предоставляются как есть; высказывания о качестве результата рекламные. Независимо проверенное полное дерево этого коммита содержит 84 прямых файла DESIGN.md — число ограничено версией.
- [Пример Notion DESIGN.md в закреплённом коммите](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — Пример анализа компоновки, отступов, типографики и компонентов. Противоречивы капсульная и прямоугольная формы кнопок, не установлены проверенные эффекты наведения или движения и предложена непроверенная команда проверки кода. Это разбор сообщества, не официальная спецификация бренда Notion и не разрешение копировать ресурсы.
- [Лицензия MIT Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; уведомление об авторских правах и разрешении должно оставаться в копиях или существенных частях. Лицензия не устанавливает права на товарный знак, логотип, проприетарный шрифт или изображения представленного сайта.
- [Быстрый старт Claude Code](https://code.claude.com/docs/en/quickstart) — Официальные требования к проекту, учётной записи или провайдеру и входу. Читатель должен использовать подходящий доступ и собственный проект; BIG CHANGE не тестировала настройку Claude Code или платную учётную запись.
- [Обычные процессы Claude Code](https://code.claude.com/docs/en/common-workflows) — Официальные указания по явному контексту @file и работе с проектом. Они поддерживают намеренную ссылку на скопированный файл с учётом настроек и ограничений, а не автоматическую загрузку любой DESIGN.md.
- [Проектная память Claude Code](https://code.claude.com/docs/en/memory) — Объясняет файлы инструкций и загрузку в зависимости от конфигурации. Не устанавливает, что отдельная DESIGN.md загрузится просто из-за присутствия в репозитории; это руководство не меняет настройку инструкций.
- [Стоимость Claude Code](https://code.claude.com/docs/en/costs) — Использование и оплата зависят от учётной записи. Markdown-ориентир не добавляет зависимость от пакетов, но руководство не устанавливает фиксированную цену задачи Claude Code, бесплатную квоту или экономию времени.
- [Использование данных Claude Code](https://code.claude.com/docs/en/data-usage) — Официальная обработка данных по условиям учётной записи и поведение локальных записей диалога. Владелец должен проверить политику до передачи закрытого кода или ресурсов клиента; нет всеобщего утверждения о полностью локальной обработке или обучении.
- [Разрешения Claude Code](https://code.claude.com/docs/en/permissions) — Официальные разрешения инструментов. Инструкции в запросе сами не предоставляют и не обеспечивают доступ к инструментам; читатель проверяет предложенные действия и действительно изменённые файлы.