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

# Gumamit ng DESIGN.md na nakapirmi sa isang bersiyon sa Claude Code para sa isang pahina

> Pumili ng isang nakapirming DESIGN.md, ibigay ito sa Claude Code para baguhin ang pahinang awtorisado mong i-edit, at siyasatin ang code at hitsura sa computer at telepono.

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.

May tiyak na mapapabuti at dapat mapanatili sa isang umiiral na pahina. Ang [koleksiyong Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) ng VoltAgent ay mga pagsusuring plain text ng pampublikong website na maipapakita sa AI coding agent. Gumagamit ang gabay na ito ng isang file mula sa commit noong 14 Oktubre 2026 bilang biswal na sanggunian sa limitadong pagbabago sa Claude Code. Maituturing lang na tama ang resulta matapos mong siyasatin mismo ang binagong code at ang ipinakitang pahina.

Sinuri ng BIG CHANGE ang nakapirming repository at dokumentasyon ng Claude Code. Hindi kami nagpatakbo ng Claude Code, nag-edit ng pahina, nagsukat ng oras o nagsiyasat ng nabuong resulta. May 84 na file na direktang nasa `design-md/*/DESIGN.md` sa nakapirming tree; para lang sa commit na iyon ang bilang, hindi permanenteng laki ng katalogo.

## Ang malaking pagbabago

- **Ano ang nagbago:** Maaaring ibigay na tahasang konteksto ang isang pagsusuri ng disenyo na nakapirmi sa isang bersiyon para i-edit ang isang awtorisadong pahina.
- **Bakit mahalaga:** Makakahiram ang may-ari ng kapaki-pakinabang na ideya sa layout o agwat habang inihahambing ang resulta sa tunay na nilalaman, identidad at paggana ng pahina.
- **Dapat bantayan:** Pagsusuri ng komunidad ang sanggunian. Maaaring mali o hindi angkop sa iyong pahina ang mga detalye ng tatak at maging ang ilang panloob nitong tagubilin.

## Bago magsimula

Kailangan mo ng pahina at repository na maaari mong i-edit, kopyang ginagamit o branch, paraan para ipakita ang pahina nang lokal, at access sa [Claude Code](https://code.claude.com/docs/en/quickstart) sa pamamagitan ng kuwalipikadong account o provider. Tukuyin ang file ng pahina na babaguhin at ang karaniwang paraan ng proyekto para patakbuhin at suriin ito. Isulat ang mambabasa, mahahalagang teksto at link, aprubadong kulay, font at logo, at iisang biswal na problemang lulutasin. Itabi ang mga pasyang ito ng may-ari sa kopyang ginagamit bilang batayan sa pagsusuri ng mungkahing pagbabago.

Suriin ang [patakaran sa datos](https://code.claude.com/docs/en/data-usage) at [mga pahintulot sa tool](https://code.claude.com/docs/en/permissions) ng account bago magbigay ng pribadong materyal ng kliyente. Pinoproseso ng Claude Code ang mga prompt at nilalaman ng proyekto ayon sa mga tuntunin ng account; hindi ginagawang lokal lamang ng lokal na proyekto ang session ng modelo. Tiyaking maaari mong ibahagi ang pribadong teksto, asset o code na malalantad sa gawain.

## Isang sanggunian para sa isang pahina

1. Buksan ang [README ng nakapirming koleksiyon](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). Pumili ng isang `design-md/<name>/DESIGN.md` na may ideyang tumutugon sa itinakdang problema ng pahina. Basahin ang buong file bago gamitin. Ipinapakita ng [halimbawa ng Notion](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) ang format: mga mungkahi sa layout, tipo, agwat at component. Inilalarawan din nito ang mga button na hugis-kapsula at parihaba. Dahilan ang salungatang ito para magpasya ka mismo, hindi utusan ang Claude Code na sundin bawat linya.
2. Kopyahin ang nag-iisang nakapirming `DESIGN.md` sa proyektong ginagamit, halimbawa sa `design-reference/DESIGN.md`. Itala sa tabi nito ang orihinal na URL, path at commit `3b605329240ce735b510037cca322f1831fdd7f8`. Panatilihin sa kopya ang [abiso ng copyright at pahintulot ng MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) mula sa repository. Hindi nangangailangan ng pag-install ng package ang mismong Markdown na sanggunian. Saklaw ng lisensiya ang materyal ng repository; hindi nito ibinibigay ang karapatang gamitin ang logo, font file, larawan o trademark ng kinakatawang kumpanya.
3. Sa awtorisadong proyekto, buksan ang Claude Code at tahasang ibigay na konteksto ang kinopyang file. Idinodokumento ng Anthropic ang [mga pagtukoy sa file](https://code.claude.com/docs/en/common-workflows) at hiwalay na [mga file ng tagubilin ng proyekto](https://code.claude.com/docs/en/memory); ang paglalagay ng nakahiwalay na `DESIGN.md` sa isang folder ay hindi patunay na na-load ito ng Claude Code. Palitan ng tunay na halaga ang page path at tuntunin ng may-ari sa mga bracket sa ibaba, at kumpirmahing nabasa ang sanggunian bago tanggapin ang pagbabago.

```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. Basahin ang iminungkahing diff bago patakbuhin o tanggapin. Suriin bawat binagong file, teksto at link. Tanggihan ang bagong dependency, asset o pagbabago sa ibang pahinang hindi hiniling. Gamitin ang dokumentadong utos sa pagpapatakbo ng proyekto para ipakita ang pahina. Buksan sa lapad ng computer at telepono; siyasatin ang aktuwal na pahina, hindi ang paliwanag ng nilayon ng agent.
5. Ihambing ang ipinakitang resulta sa nakasulat na pangangailangan. Tiyaking naroon ang dapat na teksto at link, maayos ang pagkakasunod ng heading, sapat ang contrast ng teksto at control, at walang naputol na nilalaman o pahalang na scroll sa telepono. Gamit ang keyboard, abutin at gamitin ang naapektuhang link, button, menu at form. Subukan ang binagong interaksiyon, kabilang ang nakikitang focus at kalagayan ng pagkakamali. Itala ang page revision, lapad, isinagawang pagsusuri at depekto. Tanggapin lang kapag pumasa sa mga pagsusuri ang iyong pahina.

Kung hindi napansin ng Claude Code ang sanggunian, ituro muli ang file at ipatukoy ang ginamit na bahagi. Kung salungat sa mga tuntunin ng tatak, alisin ang tagubiling iyon at baguhin ang apektadong code. Kung nasira ang link, daan ng pagtutok o interaksiyon, ibalik ang dating gumaganang asal at liitan ang pagbabago. Kung hindi mo maipakita ang pahina o masiyasat ang resulta, huwag munang tanggapin hanggang kaya mo nang suriin.

Mga paglalarawan ng komunidad sa ibang site ang koleksiyon, na ibinibigay ng mga tagapangasiwa ayon sa kasalukuyang kalagayan nito. May magkasalungat na hugis ng button, hindi dokumentadong hover behavior at mungkahing lint command na hindi napatunayan ng gabay na ito sa Notion file. Gamitin ang kilalang checks ng proyekto, hindi ang mungkahing command. Nakasalalay sa account at proyekto ang paggamit ng Claude Code at susunod na gastos sa hosting o asset; walang napatunayang oras ng pag-edit o kalidad ng tapos na disenyo rito.

Para sa ibang paraan ng tinutulungan ng AI na paggawa ng pahina, tinatalakay ng [aming gabay sa Genspark prototype](https://bigchange.ai/blog/genspark-design-prototype-source-zip) ang pagkopya ng hosted prototype at pagsiyasat sa na-export na ZIP ng pinagmulang code. Iba ang panimulang artifact at pamantayan ng pagtatapos ng gawaing iyon.

## Mga sanggunian at karagdagang babasahin

- [Ang nakapirming README ng VoltAgent](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) ay naglalarawan sa koleksiyon at sa pagsusuri nito ng pampublikong site na ibinibigay ayon sa kasalukuyang kalagayan. Mula sa nakapirming recursive tree ang bilang ng file, hindi pahayag tungkol sa susunod na mga bersiyon.
- Ang nakapirming [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) ay nagpapakita ng format at panloob na salungatan. Hindi ito aprubadong espesipikasyon ng Notion o batayan ng karapatan sa mga asset nito.
- Inaatas ng [lisensiyang MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) ng repository na manatili ang abiso ng copyright at pahintulot sa mga kopya o malaking bahagi.
- Ang [panimulang gabay sa Claude Code](https://code.claude.com/docs/en/quickstart), [gabay sa pagtukoy ng file](https://code.claude.com/docs/en/common-workflows) at [dokumentasyon ng tagubilin ng proyekto](https://code.claude.com/docs/en/memory) ng Anthropic ay nagtatakda ng access at tahasang konteksto. Hindi nila pinatutunayan ang pag-edit na ito o awtomatikong pag-load ng hiwalay na sanggunian.
- Ang dokumentasyon ng Anthropic sa [gastos](https://code.claude.com/docs/en/costs), [paggamit ng datos](https://code.claude.com/docs/en/data-usage) at [pahintulot](https://code.claude.com/docs/en/permissions) ay nagpapaliwanag ng paggamit at kontrol ayon sa account. Walang session, bill o nagresultang pahinang sinubukan para sa gabay na ito.

## Sources

- [Nakapirming README ng Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — Pangunahing paglalarawan ng repository at gabay sa pagkopya ng isang file sa hindi nababagong commit. Sinasabi nitong mga pagsusuri ng pampublikong site ang mga ito na ibinibigay ayon sa kasalukuyang kalagayan; pang-promosyon ang pahayag nito sa kalidad. May 84 na direktang DESIGN.md file ang buong tree sa commit na ito na malayang sinuri, isang bilang na saklaw ng bersiyong iyon.
- [Halimbawang Notion DESIGN.md sa nakapirming commit](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — Halimbawa ng pagsusuri sa layout, agwat, tipograpiya at component. Magkasalungat ang hugis-kapsula o parihabang button, walang napatunayang hover o motion behavior, at nagmumungkahi ng hindi nasuring lint command. Pagsusuri ito ng komunidad, hindi opisyal na pormal na tuntunin ng tatak ng Notion o pahintulot na kumopya ng asset.
- [Lisensiyang MIT ng Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent; dapat manatili ang abiso ng copyright at pahintulot sa mga kopya o malaking bahagi. Hindi pinatutunayan ng lisensiya ang karapatan sa trademark, logo, pag-aaring font o larawan ng kinakatawang site.
- [Panimulang gabay sa Claude Code](https://code.claude.com/docs/en/quickstart) — Opisyal na kailangan sa proyekto, account o provider at pag-sign in. Dapat gumamit ang mambabasa ng kuwalipikadong ruta at sariling proyekto; hindi sinubukan ng BIG CHANGE ang setup ng Claude Code o bayad na account.
- [Karaniwang workflow ng Claude Code](https://code.claude.com/docs/en/common-workflows) — Opisyal na gabay sa tahasang @file context at gawain sa proyekto. Sinusuportahan nitong sadyang tukuyin ang kinopyang file ayon sa settings at limitasyon, hindi awtomatikong pag-load ng anumang DESIGN.md.
- [Memorya ng proyekto sa Claude Code](https://code.claude.com/docs/en/memory) — Ipinapaliwanag ang instruction files at pag-load ayon sa configuration. Hindi nito sinasabing naglo-load ang hiwalay na DESIGN.md dahil lang naroon sa repository; walang instruction configuration na binabago ang gabay na ito.
- [Gastos sa Claude Code](https://code.claude.com/docs/en/costs) — Konteksto sa paggamit at pagsingil ayon sa account. Walang idinadagdag na package dependency ang Markdown na sanggunian, pero walang itinakdang presyo sa Claude Code task, libreng allowance o natipid na oras dito.
- [Paggamit ng datos sa Claude Code](https://code.claude.com/docs/en/data-usage) — Opisyal na pagtrato ng datos ayon sa account at asal ng lokal na transcript. Kailangang suriin ng may-ari ang patakaran bago magbahagi ng pribadong code ng kliyente o asset; walang pangkalahatang pahayag na lokal lamang ang pagproseso o tungkol sa training.
- [Mga pahintulot ng Claude Code](https://code.claude.com/docs/en/permissions) — Opisyal na kontrol sa pahintulot ng tool. Hindi nagbibigay o nagpapatupad nang kusa ng tool access ang prompt; kailangang siyasatin ng mambabasa ang iminungkahing aksiyon at aktuwal na binagong file.