Markdown edition

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

# Gumawa ng DESIGN.md na aprubado ng may-ari para sa Claude Code

> Bumuo ng biswal na espesipikasyon mula sa aprubadong desisyon sa brand, gamitin ito sa dalawang maliit na pagbabago sa Claude Code, at suriin ang mga diperensiya at na-render na resulta.

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.

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](https://code.claude.com/docs/en/quickstart) gamit ang kuwalipikadong account o provider, at suriin ang [mga tuntunin sa paggamit ng data](https://code.claude.com/docs/en/data-usage) at [mga pahintulot ng tool](https://code.claude.com/docs/en/permissions) 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](https://code.claude.com/docs/en/costs) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE). 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]
```

2. 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

3. 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](https://code.claude.com/docs/en/memory) 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.
4. 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.
5. 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.
6. 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](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide). 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) 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](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) ang sumasaklaw sa kinopyang materyal ng repository, hindi sa identidad o asset ng ikatlong partido.
- Ang [mabilis na panimula ng Anthropic](https://code.claude.com/docs/en/quickstart) ay tumatalakay sa pag-set up ng account at proyekto. Ang [mga karaniwang proseso](https://code.claude.com/docs/en/common-workflows) at [manwal ng memorya ng proyekto](https://code.claude.com/docs/en/memory) 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](https://code.claude.com/docs/en/permissions), [paggamit ng data](https://code.claude.com/docs/en/data-usage) at [gastos](https://code.claude.com/docs/en/costs) 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.

## Sources

- [README ng Awesome DESIGN.md na nakapirmi sa isang rebisyon](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Koleksiyon ng komunidad na nakapirmi sa isang rebisyon at halimbawang seksiyon ng sanggunian sa disenyo. Sinusuri nito ang pampublikong website at nagbibigay ng file sa kasalukuyang kalagayan; hindi ebidensiya ng resulta ng may-aring ito o pag-apruba sa mga kinakatawang brand ang promosyon nito tungkol sa kalidad at agarang paggamit. Nasa aprubadong pakete ng pagtanggap ang buong pribadong kopya ng sanggunian at hiwalay na pagberipika.
- [Lisensiyang MIT ng Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Dapat manatili kasama ng kinopyang teksto o mahahalagang bahagi ang paunawa ng copyright at pahintulot ng nakapirming rebisyon ng repository. Hindi ito kusang nagbibigay ng karapatan sa pangalan, trademark, logo, proprietary font o larawan ng kinakatawang website.
- [Mabilis na panimula sa Claude Code](https://code.claude.com/docs/en/quickstart) — Opisyal na pangangailangan sa account/provider, pag-sign in at proyekto. Walang pag-install, access o Claude session na sinubukan ang BIG CHANGE para sa gabay na ito.
- [Mga karaniwang proseso ng Claude Code](https://code.claude.com/docs/en/common-workflows) — Opisyal na proseso ng file ng proyekto at pagsusuri ng pagbabago. Nangangailangan ang gabay ng nakitang kumpletong pagbasa at tunay na diperensiya para sa bawat materyal, sa halip na umasa sa pinaikling pagtukoy sa file na maaaring mag-iba ayon sa bersiyon.
- [Memorya ng proyekto sa Claude Code](https://code.claude.com/docs/en/memory) — Idinodokumento ang mga tagubilin ng proyekto at opsiyonal na import bilang configuration. Hindi nito pinatutunayang awtomatikong nilo-load ang hiwalay na brand-reference/DESIGN.md o na sinunod ito ng alinmang pag-edit ng mambabasa.
- [Mga pahintulot ng Claude Code](https://code.claude.com/docs/en/permissions) — Opisyal na mga kontrol ng pahintulot ng tool. Hiwalay ang pag-apruba ng may-ari sa nilalaman ng brand at mga utos kay Claude sa tunay na kapangyarihan sa file/tool at pahintulot na magsumite ng pribadong materyal.
- [Paggamit ng data sa Claude Code](https://code.claude.com/docs/en/data-usage) — Pagproseso at pagpapanatiling nakadepende sa account at provider. Hindi nagpapatunay ng model session na lokal lamang ang lokal na proyekto; dapat suriin ng mambabasa ang karapatan bago magbigay ng pribadong nilalaman.
- [Mga gastos sa Claude Code](https://code.claude.com/docs/en/costs) — Opisyal na gabay sa paggamit at pagsingil ayon sa account at provider. Walang nakapirming presyo, libreng alokasyon, natipid na oras o gastos sa gawain na sinukat para sa pamamaraang ito.
- [BIG CHANGE: gumamit ng DESIGN.md na sangguniang nakapirmi sa isang rebisyon sa Claude Code para sa isang pahina](https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide) — Kaugnay na konteksto tungkol sa paggamit ng community reference na nakapirmi sa isang rebisyon sa umiiral na pahina. Hindi nito nililikha ang aprubadong espesipikasyong para sa may-ari at hindi ito sanggunian ng mga bagong hakbang ng gabay o pagpapatuloy sa “In this story”.