Ang kakayahan ng AI coding agent na sundin ang isang biswal na sanggunian ay nakasalalay sa linaw ng mga desisyon doon. Kung iyo ang proyekto at mayroon ka nang aprubadong tuntunin sa brand, maaari mo itong pagsamahin sa isang nasusuring DESIGN.md file, saka gamitin ang Claude Code para sa dalawang maliliit na pagbabagong ikaw mismo ang susuri. Ang dapat maihatid ay ang aprubadong espesipikasyon mo. Sinusuri ng dalawang pagbabago kung naging kapaki-pakinabang ito sa mga partikular na materyal na iyon; hindi nito matitiyak ang resulta ng susunod na pagbabago.

Nakabatay sa dokumentasyon ang pamamaraang ito. Sinuri ng BIG CHANGE ang koleksiyon ng design file na nakapirmi sa isang rebisyon at mga manwal ng Claude Code ng Anthropic noong 20 Oktubre 2026. Hindi namin pinatakbo ang Claude Code, inedit o ni-render ang dalawang materyal, o sinukat ang gastos o kalidad ng disenyo.

Ang pangunahing pagbabago

  • Ano ang nagbago: Maaaring gumawa ang may-ari ng biswal na espesipikasyong may bersiyon mula sa mga aprubadong desisyon at ibigay ang eksaktong file sa Claude Code bago ang isang limitadong pagbabago.
  • Bakit mahalaga: Nagbibigay ang iisang nasuring sanggunian ng mga tuntunin sa kulay, tipo ng titik at ayos na maihahambing sa dalawang totoong rebisyon, habang ang may-ari ang nagpapasiya kung katanggap-tanggap ang bawat resulta.
  • Ano ang dapat bantayan: Kailangang basahin nang buo ang file bago ang bawat pagbabago. Ang presensiya nito sa proyekto, pagbanggit sa path o katiyakan ni Claude ay hindi patunay na na-load o nasunod ito.

Bago magsimula

Kailangan mo ng sarili mong proyekto, pahintulot na baguhin ito, dalawang maliit na umiiral na materyal na kaya mong i-render, at working copy o puntong nasa version control na maibabalik. Maaaring dalawang pahina o isang pahina at isang presentasyon, basta alam mo ang tunay na proseso ng pag-edit at pag-render ng bawat proyekto. Pumili ng isang limitadong biswal na pagbabago sa bawat isa. Panatilihin ang kasalukuyang teksto, mga link at gumaganang interaksiyon para maihambing.

Tipunin ang mga value ng kulay na aprubado ng may-ari at ang mga gamit ng mga ito, mga font na may lisensiya o pahintulot at mga pamalit, tuntunin sa paggamit ng logo at larawan, target na mambabasa, sukat at pangangailangan sa accessibility. Gamitin ang tunay na rekord ng pag-apruba o ipalutas sa may-ari ang mga kulang na pasiya. Hindi nagbibigay ng pahintulot para sa mga value o asset ng proyekto ang pampublikong website ng kompanya o pagsusuri ng ibang tao sa disenyo nito. Hindi rin awtomatikong nagpapahintulot sa pagpapadala sa model provider ang pag-apruba ng may-ari sa isang asset.

I-set up ang Claude Code gamit ang kuwalipikadong account o provider, at suriin ang mga tuntunin sa paggamit ng data at mga pahintulot ng tool ng account bago maglantad ng pribadong code, teksto o asset. Maaari pa ring magpadala ng nilalaman sa model service ang proyektong lokal na nakaimbak. Alamin kung sino ang makakakita sa materyal, aling tool ang maaaring bumasa o magbago ng file, at kung maaari mong isumite ang bawat item. Ang gabay sa gastos ay nakadepende sa account at provider; hindi makapagtatakda ng nakapirming presyo para sa session mo ang gabay na ito.

Ang koleksiyong Awesome DESIGN.md na nakapirmi sa isang rebisyon ay opsiyonal na inspirasyon para sa mga seksiyon ng file. Sinusuri nito ang mga pampublikong website; hindi ito manwal ng brand na aprubado ng may-ari. Maaari mong isulat ang file mula mismo sa aprubadong desisyon. Kung kokopya ka ng teksto sa repository, panatilihin ang paunawa ng copyright at pahintulot ng MIT. Hindi nagbibigay ang paunawang iyon ng karapatan sa mga marka, font file o larawan ng ibang website.

Gawin ang sangguniang aprubado ng may-ari

  1. Gumawa ng brand-reference/DESIGN.md sa sarili mong proyekto. Punan ang simpleng balangkas na ito mula sa rekord ng pag-apruba. Ang teksto sa mga bracket ay impormasyong dapat ibigay ng may-ari; hindi ito mungkahing brand. Panatilihing may markang UNRESOLVED ang isang item hangga’t hindi pa nagpapasiya ang may-ari. Huwag hingin kay Claude na mag-imbento ng value para punan ang kakulangan.
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]
  1. Ihambing ang bawat napunang linya sa mga orihinal na desisyon ng may-ari, pati karapatang gamitin ang mga font at larawan. Lutasin kasama ang may-ari ang salungatan ng mga lumang estilo ng proyekto at kasalukuyang aprubadong tuntunin. Ipaapruba ang eksaktong file na ito at itala ang bersiyon nito. Ipaghintay ang pagbabagong umaasa sa value na hindi pa napagpasiyahan. I-save ang aprubadong file at dalawang panimulang materyal sa version control o ibang maibabalik na kopya.

Gamitin ang file sa dalawang limitadong pagbabago

  1. Sa sarili mong proyekto, magsimula ng Claude Code session gamit ang account at pahintulot na sinuri mo. Ibigay ang eksaktong path ng brand-reference/DESIGN.md at ng unang materyal. Ipagbasa muna kay Claude ang buong sanggunian at materyal, saka ipahinto bago mag-edit. Suriin ang tunay na resulta ng pagbabasa ng file o tool para sa tamang path at kumpletong nilalaman. Hindi sapat ang tinanggihang pagbasa, putol na resulta, simpleng pagbanggit sa path o pasalitang buod. Idinodokumento ng Anthropic ang mga file ng tagubilin ng proyekto bilang hiwalay na pagpipilian sa pag-set up; huwag ipagpalagay na awtomatikong matutuklasan ang anumang DESIGN.md o umasa na ang isang @ na sanggunian ay magkakapareho ang kilos sa lahat ng bersiyon.
  2. Kapag nakikita na ang kumpletong pagbasa, hilingin ang iisang napiling biswal na pagbabago sa unang materyal gamit lamang ang aprubadong tuntunin. Limitahan ang mga file na gagalawin; panatilihin ang teksto, link, kontrol at hindi kaugnay na code. Ipakita ang iminungkahing diperensiya at nakasanayang paraan ng proyekto para i-render ang materyal. Suriin ang bawat binagong file bago tanggapin. Tanggihan ang kulay, font, asset, dependency o dagdag na pagbabagong walang pag-apruba.
  3. I-render ang unang materyal gamit ang tunay na proseso ng proyekto. Ihambing ang resulta sa aprubadong file at panimulang materyal sa angkop na laki ng desktop at telepono. Suriin ang mga token value sa binagong file, nababasang contrast, hierarchy ng pamagat at titik, pagkaputol o pahalang na pag-apaw, nakikitang focus, keyboard at apektadong interaksiyon, at hindi nabagong teksto at link. Itala ang bersiyon ng sanggunian, rebisyon ng materyal, mga pagsusuri at pagwawasto. Ang paglalarawan ng render ay hindi ang na-render na resulta.
  4. Para sa ikalawang materyal, muling banggitin ang eksaktong path nito at brand-reference/DESIGN.md. Humiling ng panibagong kumpletong pagbasa bago ang pag-edit at suriin ang resulta ng tool. Saka humiling ng isang limitadong pagbabago, suriin ang diperensiya, i-render ayon sa sariling proseso ng ikalawang materyal at ulitin ang parehong pagsusuri. Ihambing ang dalawang rebisyon sa iisang aprubadong bersiyon ng file. Itala ang bawat tuntunin bilang nasunod, hindi nasunod o nangangailangan ng rebisyong aprubado ng may-ari; ayusin ang paglihis at suriin muli ang dalawang materyal kung nagbago ang sanggunian.

Tapos ang gawain kapag mayroon ka nang aprubadong espesipikasyong may bersiyon, dalawang nasuri at na-render na rebisyon, at maikling tala ng mga nasunod o nalaktawang tuntunin. Panatilihin ang orihinal na rebisyon upang maibalik ang dati. Kung mabigo ang pagbasa, tingnan ang eksaktong path, pahintulot, laki ng file o pagkaputol bago humiling ng pag-edit. Kung sumasalungat ang espesipikasyon sa estilo ng proyekto o accessibility, kunin ang pasiya ng may-ari at paliitin ang pagbabago. Kung hindi ma-render ang materyal o masuri ang interaksiyon, huwag tanggapin ang pagbabagong iyon hangga’t hindi maisasagawa ang pagsusuri. Nangangailangan ang susunod na pagbabago ng brand ng sadyang bagong pagsusuri sa mga naunang resulta.

Para sa ibang gawain na gumagamit ng community file bilang sanggunian para sa isang pahina, tingnan ang aming gabay sa DESIGN.md na nakapirmi sa isang rebisyon. Ang gawain dito ay unahin ang paglikha at pag-apruba ng sarili mong espesipikasyon.

Mga sanggunian at dagdag na babasahin

  • Ang README ng Awesome DESIGN.md na nakapirmi sa isang rebisyon ay nagbibigay ng halimbawang mga seksiyon at inilalarawan ang mga file bilang pagsusuri ng pampublikong website na ibinibigay sa kasalukuyang kalagayan. Hindi nasubok na resulta rito ang mga pahayag nito sa kalidad. Ang lisensiyang MIT ang sumasaklaw sa kinopyang materyal ng repository, hindi sa identidad o asset ng ikatlong partido.
  • Ang mabilis na panimula ng Anthropic ay tumatalakay sa pag-set up ng account at proyekto. Ang mga karaniwang proseso at manwal ng memorya ng proyekto nito ay naglalarawan ng mga proseso ng file at tagubilin; wala sa dalawa ang patunay na lubos na nabasa ang hiwalay na file na ito sa session ng mambabasa.
  • Ang mga manwal ng Anthropic sa mga pahintulot, paggamit ng data at gastos ay nagpapaliwanag ng mga kontrol at tuntuning nakadepende sa account. Hindi nito pinatutunayan ang naobserbahang pag-edit, pagprosesong lokal lamang, nakapirming singil o pagtaas ng kalidad sa gabay na ito.