Постојећа страница пружа нешто конкретно за побољшање и очување. VoltAgent колекција Awesome DESIGN.md садржи текстуалне анализе јавних сајтова које можете показати AI агенту за програмирање. Овај водич користи једну датотеку из измене репозиторијума од 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 учитао. Замените путању и правила власника у угластим заградама стварним вредностима и потврдите да је референца прочитана пре прихватања измене.
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.
  1. Прочитајте предложене разлике пре покретања или прихватања. Проверите сваку измењену датотеку, текст и везу. Одбијте нову зависност, ресурс или измену друге странице коју нисте тражили. Прикажите страницу постојећом документованом командом пројекта. Отворите је на ширини рачунара и телефона; прегледајте стварну страницу, не опис намере агента.
  2. Упоредите приказ са записаним захтевима. Проверите очуване текстове и везе, смислен редослед наслова, довољан контраст текста и контрола и мобилни распоред без одсеченог садржаја или водоравног померања. Тастатуром досегните и употребите измењене везе, дугмад, меније и обрасце. Испробајте промењене интеракције, укључујући видљив фокус и грешке. Забележите ревизију странице, ширине, провере и недостатке. Прихватите измену тек када провере прођу на вашој страници.

Ако Claude Code пропусти референцу, поново покажите датотеку и тражите да наведе коришћене делове. Ако се сукобљава с правилима бренда, уклоните ту смерницу из захтева и исправите погођени код. Ако веза, путања фокуса или интеракција престане да ради, вратите претходно понашање и смањите измену. Ако не можете приказати страницу или прегледати резултат, не прихватајте промену док не будете могли.

Колекција је скуп описа других сајтова који одржаваоци дају у затеченом стању. Notion датотека садржи противречне облике дугмади, недокументовано понашање при преласку показивача и предложену команду провере кода коју овај водич није проверио. Користите познате провере пројекта, не ту команду. Claude Code употреба и каснији трошкови хостинга или ресурса зависе од налога и пројекта; овде нису утврђени време измене ни квалитет готовог дизајна.

За други приступ раду на страницама уз AI, наш водич за Genspark прототип описује копирање хостованог прототипа и преглед извезеног ZIP изворног кода. Тај задатак полази од другог материјала и има другачији завршни критеријум.

Извори и додатно читање