Markdown ایڈیشن

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

# Claude Code میں ایک صفحے کے لیے مقررہ ورژن کی DESIGN.md استعمال کریں

> مقررہ ورژن کی ایک DESIGN.md فائل چنیں، اسے Claude Code کو مجاز صفحے کی ترمیم کے لیے دیں، پھر کوڈ اور کمپیوٹر و فون پر اصل منظر دیکھیں۔

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.

موجودہ صفحے میں بہتر بنانے اور محفوظ رکھنے کی واضح چیزیں ہوتی ہیں۔ VoltAgent کا [Awesome DESIGN.md مجموعہ](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) عوامی ویب سائٹس کے سادہ متن میں تجزیے دیتا ہے، جنہیں AI کوڈنگ ایجنٹ کو دکھایا جا سکتا ہے۔ یہ رہنما 14 اکتوبر 2026 کے کمٹ کی ایک فائل محدود Claude Code تبدیلی کے بصری حوالے کے طور پر لیتا ہے۔ بدلا کوڈ اور ظاہر شدہ صفحہ خود دیکھنے پر ہی نتیجہ قابل قبول ہے۔

BIG CHANGE نے مقررہ ریپوزٹری اور Claude Code دستاویزات پڑھیں۔ ہم نے Claude Code نہیں چلایا، صفحہ نہیں بدلا، وقت نہیں ناپا اور پیدا شدہ نتیجہ نہیں جانچا۔ اس مقررہ ٹری میں `design-md/*/DESIGN.md` کے براہ راست تحت 84 فائلیں ہیں؛ یہ تعداد اسی کمٹ کی ہے، مستقل فہرست کے حجم کی نہیں۔

## بڑی تبدیلی

- **کیا بدلا:** مقررہ ورژن کا ایک ڈیزائن تجزیہ ایک مجاز صفحے کی تبدیلی کے لیے واضح سیاق بنایا جا سکتا ہے۔
- **یہ اہم کیوں ہے:** مالک ترتیب یا فاصلے کا کارآمد خیال لے سکتا ہے اور نتیجہ صفحے کے اصل مواد، شناخت اور عمل سے ملا سکتا ہے۔
- **کس بات پر نظر رکھیں:** حوالہ برادری کا تجزیہ ہے۔ برانڈ کی تفصیل بلکہ کچھ اندرونی ہدایات بھی غلط یا آپ کے صفحے کے لیے ناموزوں ہو سکتی ہیں۔

## شروع کرنے سے پہلے

ترمیم کی اجازت والا صفحہ اور ریپوزٹری، کام کی نقل یا برانچ، مقامی طور پر صفحہ دکھانے کا طریقہ، اور اہل اکاؤنٹ یا فراہم کنندہ سے [Claude Code](https://code.claude.com/docs/en/quickstart) کی رسائی درکار ہے۔ بدلنے والی فائل اور منصوبے کے عام چلانے و جانچنے کا طریقہ معلوم کریں۔ قارئین، ضروری متن و لنکس، منظور شدہ رنگ، فونٹ اور لوگو، اور حل کرنے والا ایک بصری مسئلہ لکھیں۔ تبدیلی پرکھنے کے لیے مالک کے یہ فیصلے کام کی نقل کے ساتھ رکھیں۔

کلائنٹ کا نجی مواد دینے سے پہلے اکاؤنٹ کی [ڈیٹا پالیسی](https://code.claude.com/docs/en/data-usage) اور [ٹول اجازتیں](https://code.claude.com/docs/en/permissions) دیکھیں۔ Claude Code اکاؤنٹ کی شرائط کے تحت پرامپٹ اور منصوبے کا مواد پراسیس کرتا ہے؛ مقامی منصوبہ ماڈل سیشن کو صرف مقامی نہیں بناتا۔ کام میں ظاہر ہونے والے نجی متن، وسائل یا کوڈ کی شراکت کی اجازت یقینی بنائیں۔

## ایک صفحے پر ایک حوالہ استعمال کریں

1. کھولیں [مقررہ مجموعے کا README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md)۔ ایسی ایک `design-md/<name>/DESIGN.md` چنیں جس کا خیال متعین مسئلے سے متعلق ہو۔ استعمال سے پہلے پوری فائل پڑھیں۔ [Notion مثال](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) ترتیب، حروف، فاصلے اور اجزا کی تجاویز کا انداز دکھاتی ہے۔ اس میں کیپسول اور مستطیل دونوں بٹن بیان ہیں۔ اس تضاد پر اپنا فیصلہ کریں، Claude Code سے ہر سطر ماننے کو نہ کہیں۔
2. اس ایک مقررہ `DESIGN.md` کو کام کے منصوبے میں نقل کریں، مثلاً `design-reference/DESIGN.md` پر۔ ساتھ اصل URL، راستہ اور کمٹ `3b605329240ce735b510037cca322f1831fdd7f8` لکھیں۔ نقل کے ساتھ ریپوزٹری کا [MIT حقوق اشاعت و اجازت کا نوٹس](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) رکھیں۔ Markdown حوالے کو پیکیج نصب کرنے کی ضرورت نہیں۔ لائسنس ریپوزٹری کے مواد کے لیے ہے؛ یہ نمائندگی شدہ کمپنی کا لوگو، فونٹ فائل، تصویر یا تجارتی نشان استعمال کرنے کا حق نہیں دیتا۔
3. مجاز منصوبے میں Claude Code کھول کر نقل شدہ فائل واضح سیاق بنائیں۔ Anthropic [فائل حوالے](https://code.claude.com/docs/en/common-workflows) اور الگ [منصوبے کی ہدایات کی فائلیں](https://code.claude.com/docs/en/memory) بیان کرتا ہے؛ فولڈر میں الگ `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.
```

4. چلانے یا قبول کرنے سے پہلے مجوزہ فرق پڑھیں۔ ہر بدلی فائل، متن اور لنک دیکھیں۔ نہ مانگی گئی انحصاری پیکیج، وسائل یا دوسرے صفحے کی تبدیلی رد کریں۔ منصوبے کی اپنی دستاویزی رن کمانڈ سے صفحہ دکھائیں۔ کمپیوٹر اور فون کی چوڑائی پر کھولیں؛ ایجنٹ کے ارادے کی وضاحت نہیں بلکہ اصل صفحہ دیکھیں۔
5. منظر کو تحریری ضروریات سے ملائیں۔ مطلوبہ متن و لنکس باقی، سرخیوں کی ترتیب مفید، متن و کنٹرول کا تضاد کافی، اور فون پر مواد کٹا ہوا یا افقی اسکرول نہ ہو۔ کی بورڈ سے متاثرہ لنکس، بٹن، مینیو اور فارم تک پہنچ کر استعمال کریں۔ بدلے تعاملات میں نظر آنے والا فوکس اور غلطی کی حالت بھی جانچیں۔ صفحے کا ورژن، چوڑائیاں، جانچ اور خامیاں لکھیں۔ آپ کے صفحے کی جانچ کامیاب ہونے پر ہی تبدیلی قبول کریں۔

Claude Code حوالہ چھوڑ دے تو پھر فائل بتائیں اور استعمال کیے حصے پوچھیں۔ برانڈ قواعد سے ٹکراؤ ہو تو وہ ہدایت درخواست سے ہٹا کر متعلقہ کوڈ درست کریں۔ لنک، فوکس کا راستہ یا تعامل ٹوٹ جائے تو پچھلا کام کرتا عمل بحال کریں اور چھوٹی تبدیلی کریں۔ صفحہ دکھانا یا نتیجہ دیکھنا ممکن نہ ہو تو ممکن ہونے تک قبول نہ کریں۔

مجموعہ دوسرے سائٹس کی برادری کی وضاحتیں ہیں جو منتظمین جیسی ہیں ویسی دیتے ہیں۔ Notion فائل میں متضاد بٹن شکلیں، غیر دستاویزی ہوور عمل اور اس رہنما میں غیر آزمودہ کوڈ جانچ کمانڈ ہے۔ اس تجویز کے بجائے منصوبے کی معلوم جانچ کریں۔ Claude Code استعمال اور بعد کے ہوسٹنگ یا وسائل کے اخراجات اکاؤنٹ و منصوبے پر منحصر ہیں؛ ترمیم کا وقت یا آخری ڈیزائن کا معیار یہاں ثابت نہیں۔

AI کے ساتھ صفحہ بنانے کے دوسرے طریقے کے لیے [ہمارا Genspark پروٹوٹائپ رہنما](https://bigchange.ai/blog/genspark-design-prototype-source-zip) ہوسٹ شدہ پروٹوٹائپ نقل اور برآمد شدہ سورس ZIP کی جانچ بتاتا ہے۔ اس کام کا آغاز اور تکمیل کا معیار الگ ہے۔

## ذرائع اور مزید مطالعہ

- [VoltAgent کا مقررہ README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) مجموعہ اور عوامی سائٹس کے جوں کے توں تجزیے بتاتا ہے۔ فائل تعداد مقررہ ریکرسیو ٹری سے ہے، آئندہ ورژن کا دعویٰ نہیں۔
- مقررہ ورژن کی [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) انداز اور اندرونی تضاد دکھاتی ہے۔ یہ Notion کی منظور شدہ تفصیل یا اس کے وسائل کے حقوق نہیں ہے۔
- ریپوزٹری کا [MIT لائسنس](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) نقول یا اہم حصوں میں حقوق اشاعت و اجازت کا نوٹس برقرار رکھنے کا پابند کرتا ہے۔
- Anthropic کا [Claude Code ابتدائی رہنما](https://code.claude.com/docs/en/quickstart)، [فائل حوالے کی ہدایات](https://code.claude.com/docs/en/common-workflows) اور [منصوبے کی ہدایات کی دستاویز](https://code.claude.com/docs/en/memory) رسائی اور واضح سیاق بتاتے ہیں۔ یہ اس صفحے کی تبدیلی یا الگ حوالے کے خود لوڈ ہونے کی تصدیق نہیں کرتے۔
- Anthropic کی [اخراجات](https://code.claude.com/docs/en/costs)، [ڈیٹا استعمال](https://code.claude.com/docs/en/data-usage) اور [اجازتوں](https://code.claude.com/docs/en/permissions) کی دستاویزات اکاؤنٹ کے لحاظ سے استعمال و کنٹرول بتاتی ہیں۔ اس رہنما کے لیے کوئی سیشن، بل یا تیار صفحہ نہیں آزمایا گیا۔

## Sources

- [Awesome DESIGN.md مقررہ README](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — ناقابل تبدیلی کمٹ پر ریپوزٹری کی اصل وضاحت اور ایک فائل نقل کرنے کی ہدایات۔ عوامی سائٹ تجزیے جوں کے توں دیے گئے ہیں؛ نتیجے کے معیار کی زبان تشہیری ہے۔ آزادانہ پڑھے گئے مکمل ٹری میں براہ راست 84 DESIGN.md فائلیں ہیں، اسی ورژن کی تعداد۔
- [مقررہ کمٹ کی Notion DESIGN.md مثال](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — ترتیب، فاصلے، حروف اور اجزا کے تجزیے کی مثال۔ کیپسول یا مستطیل بٹن پر تضاد ہے، جانچا ہوا ہوور یا حرکت ثابت نہیں اور غیر آزمودہ کوڈ جانچ کمانڈ تجویز ہے۔ یہ برادری کا تجزیہ ہے، Notion کی سرکاری برانڈ تفصیل یا وسائل نقل کرنے کی اجازت نہیں۔
- [Awesome DESIGN.md MIT لائسنس](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent؛ نقول یا اہم حصوں میں حقوق اشاعت و اجازت کا نوٹس رہنا چاہیے۔ یہ لائسنس متعلقہ سائٹ کے تجارتی نشان، لوگو، ملکیتی فونٹ یا تصویر کے حقوق ثابت نہیں کرتا۔
- [Claude Code فوری آغاز](https://code.claude.com/docs/en/quickstart) — منصوبے، اکاؤنٹ یا فراہم کنندہ اور سائن ان کی سرکاری شرائط۔ قاری اہل راستہ اور اپنا منصوبہ استعمال کرے؛ BIG CHANGE نے Claude Code سیٹ اپ یا ادا شدہ اکاؤنٹ نہیں آزمایا۔
- [Claude Code عام طریقہ ہائے کار](https://code.claude.com/docs/en/common-workflows) — واضح @file سیاق اور منصوبے کے کام کی سرکاری ہدایات۔ ترتیبات و حدود میں نقل شدہ فائل کا دانستہ حوالہ جائز ہے، ہر DESIGN.md کا خود لوڈ ہونا نہیں۔
- [Claude Code منصوبے کی یادداشت](https://code.claude.com/docs/en/memory) — منصوبے کی ہدایات اور ترتیب کے مطابق لوڈ ہونا بتاتی ہے۔ الگ DESIGN.md کا محض ریپوزٹری میں ہونے سے لوڈ ہونا ثابت نہیں؛ رہنما ہدایات کی ترتیب نہیں بدلتا۔
- [Claude Code اخراجات](https://code.claude.com/docs/en/costs) — اکاؤنٹ کے لحاظ سے استعمال و بل کا پس منظر۔ Markdown حوالہ پیکیج انحصار نہیں بڑھاتا، مگر Claude Code کام کی مقررہ قیمت، مفت کوٹا یا وقت کی بچت یہاں ثابت نہیں۔
- [Claude Code ڈیٹا استعمال](https://code.claude.com/docs/en/data-usage) — اکاؤنٹ کے مطابق سرکاری ڈیٹا عمل اور مقامی مکالماتی ریکارڈ کا رویہ۔ کلائنٹ کا نجی کوڈ یا وسائل دینے سے پہلے مالک پالیسی دیکھے؛ صرف مقامی عمل یا تربیت کا کوئی عمومی دعویٰ نہیں۔
- [Claude Code اجازتیں](https://code.claude.com/docs/en/permissions) — سرکاری ٹول اجازت کے کنٹرول۔ پرامپٹ ہدایات خود ٹول رسائی دیتی یا نافذ نہیں کرتیں؛ قاری کو مجوزہ اعمال اور واقعی بدلی فائلیں دیکھنی ہیں۔