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

May tiyak na mapapabuti at dapat mapanatili sa isang umiiral na pahina. Ang koleksiyong Awesome DESIGN.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 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 at mga pahintulot sa tool 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. 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 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 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 at hiwalay na mga file ng tagubilin ng proyekto; 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.

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 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 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 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 ng repository na manatili ang abiso ng copyright at pahintulot sa mga kopya o malaking bahagi.
• Ang panimulang gabay sa Claude Code, gabay sa pagtukoy ng file at dokumentasyon ng tagubilin ng proyekto 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, paggamit ng datos at pahintulot ay nagpapaliwanag ng paggamit at kontrol ayon sa account. Walang session, bill o nagresultang pahinang sinubukan para sa gabay na ito.