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. Постојећа страница пружа нешто конкретно за побољшање и очување. VoltAgent [колекција Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) садржи текстуалне анализе јавних сајтова које можете показати AI агенту за програмирање. Овај водич користи једну датотеку из измене репозиторијума од 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//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 учитао. Замените путању и правила власника у угластим заградама стварним вредностима и потврдите да је референца прочитана пре прихватања измене. ```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 употреба и каснији трошкови хостинга или ресурса зависе од налога и пројекта; овде нису утврђени време измене ни квалитет готовог дизајна. За други приступ раду на страницама уз AI, [наш водич за Genspark прототип](https://bigchange.ai/blog/genspark-design-prototype-source-zip) описује копирање хостованог прототипа и преглед извезеног ZIP изворног кода. Тај задатак полази од другог материјала и има другачији завршни критеријум. ## Извори и додатно читање - [Фиксирани VoltAgent README](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 - [Фиксирани Awesome DESIGN.md README](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 спецификација бренда или дозвола за копирање ресурса. - [Awesome DESIGN.md MIT лиценца](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) — Званичне контроле дозвола алата. Упутства у захтеву сама не дају нити спроводе приступ алатима; читалац мора прегледати предложене радње и стварно измењене датотеке.