Версия Markdown

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

# Создайте утверждённый владельцем DESIGN.md для Claude Code

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

By BIG CHANGE Editorial

Published: 2026-10-20T01:05:55.739Z
Updated: 2026-10-20T01:05:55.739Z
Canonical: https://bigchange.ai/blog/claude-code-owner-approved-design-md-guide

![Conceptual charcoal illustration of a small visual reference clipped to a wall rail above two separate framed layout proofs.](https://bigchange.ai/api/media/file/owner-approved-design-reference-two-proofs-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

Насколько хорошо ИИ-агент для программирования следует визуальному образцу, зависит от определённости решений в нём. Если проект принадлежит вам и у вас уже есть утверждённые правила бренда, можно собрать их в один проверяемый файл `DESIGN.md` , а затем выполнить с Claude Code две небольшие правки и лично их проверить. Итоговый материал — ваша утверждённая спецификация. Две правки проверяют, была ли она полезна для этих конкретных материалов; по ним нельзя установить результат будущей правки.

Этот порядок работы основан на документации. 20 октября 2026 года BIG CHANGE изучил закреплённую редакцию коллекции файлов дизайна и руководства Anthropic по Claude Code. Мы не запускали Claude Code, не редактировали и не отрисовывали два материала, не измеряли стоимость или качество дизайна.

## Главное изменение

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

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

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

Соберите утверждённые владельцем значения цветов **и их назначения**, лицензированные или разрешённые шрифты и замены, правила использования логотипов и изображений, целевую аудиторию, размеры и требования доступности. Используйте реальную запись об утверждении или попросите владельца решить недостающие вопросы. Публичный сайт компании или чужой анализ дизайна не разрешает использовать значения или материалы в вашем проекте. Утверждение материала владельцем также не означает автоматического разрешения на передачу поставщику модели.

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

Эту [закреплённую редакцию коллекции Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) можно по желанию использовать как источник идей для разделов файла. Она анализирует публичные сайты и не является утверждённым владельцем руководством по бренду. Файл можно написать прямо из утверждённых решений. При копировании текста репозитория сохраните [уведомление об авторских правах и разрешении MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE). Оно не предоставляет права на обозначения, файлы шрифтов или изображения другого сайта.

## Создайте утверждённый владельцем образец

1. Создайте `brand-reference/DESIGN.md` в собственном проекте. Заполните эту минимальную структуру по записи об утверждении. Текст в квадратных скобках обозначает сведения, которые должен предоставить владелец, а не предлагает бренд. Оставляйте элемент с пометкой `UNRESOLVED` , пока владелец не примет решение. Не просите Claude придумывать значение для заполнения пробела.

```markdown
# Visual specification

Owner: [owner or approving role]
Approved version/date: [version and approval date, or UNRESOLVED]
Audience and artifact purpose: [owner-approved description]
Approval evidence: [internal record or location, without private data in a shared copy]

## Color roles and values
- Background: [approved value and color format, or UNRESOLVED]
- Text: [approved value and color format, or UNRESOLVED]
- Primary action: [approved value and color format, or UNRESOLVED]
- Link, border and status roles: [each approved value, or UNRESOLVED]

## Typography and scale
- Heading family and permitted fallback: [approved names, or UNRESOLVED]
- Body family and permitted fallback: [approved names, or UNRESOLVED]
- Heading/body sizes, weights and line heights: [approved scale, or UNRESOLVED]
- Font license or use restriction: [approved terms, or UNRESOLVED]

## Spacing and layout
- Spacing scale, content width and grid: [approved values, or UNRESOLVED]
- Target artifact dimensions: [approved sizes, or UNRESOLVED]

## Components and states
- Buttons, links, inputs and navigation: [approved appearance and behavior]
- Hover, focus, disabled and error states: [approved rules, or UNRESOLVED]

## Responsive and accessibility rules
- Desktop/phone behavior and breakpoints: [approved rules, or UNRESOLVED]
- Contrast, readable type, focus order and touch use: [approved requirements]

## Assets and forbidden substitutions
- Permitted logo/image assets and usage: [approved paths and permissions]
- Do not substitute: [owner-approved prohibited colors, fonts, marks or patterns]

## Owner approval and changes
- Approved by: [person or role and date, or UNRESOLVED]
- Version: [version]
- Changelog: [date, change, approver]
- Unresolved decisions: [list, or "none" after owner review]
```

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

## Используйте файл для двух ограниченных правок

3. В собственном проекте начните сессию Claude Code с проверенными учётной записью и разрешениями. Укажите точные пути к `brand-reference/DESIGN.md` и первому материалу. Сначала попросите Claude прочитать **весь** образец и материал, затем остановиться до редактирования. Проверьте фактический результат чтения файла или инструмента: правильный путь и полноту содержания. Отказ в чтении, обрезанный результат, простое упоминание пути или устное резюме недостаточны. Anthropic описывает [файлы инструкций проекта](https://code.claude.com/docs/en/memory) как отдельный способ настройки; не предполагайте, что произвольный `DESIGN.md` обнаруживается автоматически, и не рассчитывайте, что ссылка `@` ведёт себя одинаково в разных версиях.
4. Когда полное чтение видно, запросите только выбранное визуальное изменение первого материала по утверждённым правилам. Ограничьте затрагиваемые файлы; сохраните тексты, ссылки, элементы управления и несвязанный код. Попросите показать предлагаемые различия и установленный в проекте способ отрисовки. Проверьте каждый изменённый файл перед принятием. Отклоняйте неутверждённые цвета, шрифты, материалы, зависимости или дополнительные правки.
5. Отрисуйте первый материал через его **реальный процесс проекта**. Сравните результат с утверждённым файлом и исходным материалом при подходящих проекту размерах настольного экрана и телефона. Проверьте значения токенов в изменённых файлах, читаемый контраст, иерархию заголовков и текста, обрезку и горизонтальное переполнение, видимый фокус, клавиатуру и затронутые взаимодействия, неизменность текстов и ссылок. Запишите версию образца, редакцию материала, проверки и исправления. Описание отрисовки — не сам отрисованный результат.
6. Для второго материала снова назовите его точный путь и `brand-reference/DESIGN.md`. Запросите новое полное чтение **перед** его редактированием и проверьте результат инструмента. Затем запросите одну ограниченную правку, проверьте различия, отрисуйте материал собственным процессом второго проекта и повторите те же проверки. Сравните обе редакции с **той же утверждённой версией файла**. Отметьте каждое правило как соблюдённое, пропущенное или требующее утверждённого владельцем пересмотра; исправьте отклонения и перепроверьте оба материала при изменении образца.

Работа завершена, когда есть утверждённая владельцем версионируемая спецификация, две проверенные и отрисованные редакции и краткая запись о соблюдённых и пропущенных правилах. Сохраните исходные редакции для отката. При сбое чтения проверьте точный путь, разрешения, размер файла или обрезку до запроса правки. Если спецификация противоречит стилям проекта или доступности, получите решение владельца и сузьте изменение. Если материал нельзя отрисовать или взаимодействие нельзя проверить, не принимайте правку до появления возможности проверки. Будущие изменения бренда требуют намеренного повторного рассмотрения прежних результатов.

О другой задаче — использовании файла сообщества как образца для одной страницы — читайте в [нашем руководстве по закреплённой редакции DESIGN.md](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide). Здесь задача состоит прежде всего в создании и утверждении собственной спецификации.

## Источники и дополнительные материалы

- Этот [README закреплённой редакции Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) предлагает примеры разделов и описывает файлы как анализ публичных сайтов, предоставляемый как есть. Его заявления о качестве результата не являются проверенным здесь результатом. [Лицензия MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) регулирует скопированный материал репозитория, а не обозначения или материалы третьих лиц.
- Этот [краткий вводный материал Anthropic](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/permissions), [использованию данных](https://code.claude.com/docs/en/data-usage) и [стоимости](https://code.claude.com/docs/en/costs) объясняют средства контроля и условия конкретной учётной записи. Они не подтверждают наблюдаемую правку, исключительно локальную обработку, фиксированный счёт или рост качества в этом материале.

## Sources

- [README закреплённой редакции Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Закреплённая редакция коллекции сообщества и примеры разделов образца дизайна. Она анализирует публичные сайты и предоставляет файлы как есть; рекламные заявления о качестве и немедленном применении не доказывают результаты этого владельца или утверждение представленных брендов. Полная закрытая копия источника и независимая проверка находятся в утверждённом пакете приёма темы.
- [Лицензия MIT Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Уведомление об авторских правах и разрешении закреплённой редакции репозитория должно оставаться при скопированном тексте или существенных частях. Само по себе оно не предоставляет права на название, товарный знак, логотип, проприетарный шрифт или изображения представленного сайта.
- [Краткое начало работы с Claude Code](https://code.claude.com/docs/en/quickstart) — Официальные требования к учётной записи или поставщику, входу и проекту. BIG CHANGE не проверял установку, доступ или сессию Claude для этого материала.
- [Типовые рабочие процессы Claude Code](https://code.claude.com/docs/en/common-workflows) — Официальные процессы работы с файлами проекта и проверки изменений. Руководство требует наблюдаемого полного чтения и реальных различий для каждого материала вместо зависимости от сокращённого обращения к файлам, чувствительного к версии.
- [Память проекта Claude Code](https://code.claude.com/docs/en/memory) — Документирует инструкции проекта и необязательные импорты как настройку. Не доказывает автоматическую загрузку отдельного brand-reference/DESIGN.md или соблюдение файла в какой-либо правке читателя.
- [Разрешения Claude Code](https://code.claude.com/docs/en/permissions) — Официальные средства управления разрешениями инструментов. Утверждение содержания бренда владельцем и указания Claude отделены от реальных полномочий на файлы или инструменты и разрешения передавать закрытые материалы.
- [Использование данных Claude Code](https://code.claude.com/docs/en/data-usage) — Обработка и хранение зависят от учётной записи и поставщика. Локальный проект не доказывает исключительно локальную сессию модели; перед передачей закрытого содержимого читатель должен проверить права.
- [Стоимость Claude Code](https://code.claude.com/docs/en/costs) — Официальные указания по использованию и оплате в зависимости от учётной записи и поставщика. Для этого порядка работы не измерялись фиксированная цена, бесплатная квота, экономия времени или стоимость задачи.
- [BIG CHANGE: примените закреплённую редакцию образца DESIGN.md в Claude Code для одной страницы](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — Связанный контекстный материал о применении закреплённой редакции образца сообщества к существующей странице. Он не создаёт утверждённую спецификацию для конкретного владельца, не служит источником новых шагов этого руководства и не является продолжением в «In this story».