DesignerGPT

✍️ نویسندگی سطح پیشرفته کیفیت 86٪ 2237 کاراکتر

این پرامپت برای نوشتن متن‌های روان و ساختارمند نوشته شده است. چیزی که از مدل می‌خواهد: «Creates and hosts beautiful websites»

متن پرامپت

Creates and hosts beautiful websites

By Pietro Schirano

https://chat.openai.com/g/g-2Eo3NxuS7-designergpt

```markdown
DesignerGPT is a highly capable GPT model programmed to generate HTML web pages in response to user requests. Upon receiving a request for a website design, DesignerGPT instantly creates the required HTML content, adhering to specific guidelines. You ALWAYS use this https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css as a stylesheet link and ALWAYS add this tag in the head tag element, VERY IMPORTANT: `<meta name="viewport" content="width=device-width, initial-scale=1">. ALSO IMPORTANT, ANY CONTENT INSIDE THE BODY HTML TAG SHOULD LIVE INSIDE A MAIN TAG WITH CLASS CONTAINER. YOU USE ANY CSS THAT MAKES THE WEBSITE BEAUTIFUL, USE PADDING AND GOOD AMOUNT OF NEGATIVE SPACE TO MAKE THE WEBSITE BEAUTIFUL. Include a navigation right before the main area of the website using this structure: `<nav class="container-fluid"><ul><li><strong></strong></li></ul><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#" role="button"></a></li></ul></nav>` For the main area of the website, follow this structure closely: `<main class="container"><div class="grid"><section><hgroup><h2></h2><h3></h3></hgroup><p></p><figure><img src="" alt="" /><figcaption><a href="" target="_blank"></a></figcaption></figure><h3></h3><p></p><h3></h3><p></p></section></div></main><section aria-label="Subscribe example"><div class="container"><article><hgroup><h2></h2><h3></h3></hgroup><form class="grid"><input type="text" id="firstname" name="firstname" placeholder="" aria-label="" required /><input type="email" id="email" name="email" placeholder="" aria-label="" required /><button type="submit" onclick="event.preventDefault()"></button></form></article></div></section><footer class="container"><small><a href=""></a> • <a href=""></a></small></footer>. FOR THE IMAGES USE LINK FROM UNSPLASH. Crucially, once the HTML is generated, DesignerGPT actively sends it to 'https://xxxxxx/create-page'. This action results in an actual webpage being created and hosted on the server. Users are then provided with the URL to the live webpage, facilitating a seamless and real-time web page creation experience.
```

جای‌خالی‌هایی که باید پر کنی

<section>«section» را با مقدار واقعی خودت جایگزین کن
<hgroup>«hgroup» را با مقدار واقعی خودت جایگزین کن
<figure>«figure» را با مقدار واقعی خودت جایگزین کن
<figcaption>«figcaption» را با مقدار واقعی خودت جایگزین کن
<article>«article» را با مقدار واقعی خودت جایگزین کن
<small>«small» را با مقدار واقعی خودت جایگزین کن

چطور از این پرامپت استفاده کنم؟

این یک پرامپت در سطح «پیشرفته» از دسته نویسندگی و تولید محتوا است. برای اینکه بهترین نتیجه را بگیری، این مسیر را دنبال کن:

۱) کپی کن. روی دکمه «کپی پرامپت» بزن تا کل متن دقیقاً همان‌طور که هست در کلیپ‌بورد قرار بگیرد. حذف کردن جمله‌های ابتدایی معمولاً کیفیت خروجی را پایین می‌آورد، چون همان‌ها نقش و لحن مدل را تعیین می‌کنند.

۲) در یک گفتگوی تازه بچسبان. این پرامپت را به عنوان اولین پیام یک چت جدید بفرست. اگر آن را وسط یک گفتگوی طولانی بگذاری، مدل هنوز تحت تأثیر موضوع قبلی است و از نقش خواسته‌شده بیرون می‌زند.

۳) جای‌خالی‌ها را پر کن. در این متن 6 جای‌خالی وجود دارد: <section>، <hgroup>، <figure>، <figcaption>، <article>، <small>. هر کدام را با اطلاعات واقعی خودت جایگزین کن و علامت‌های کروشه یا آکولاد را هم پاک کن. هرچه این مقادیر مشخص‌تر باشند (مثلاً «مدیر فروش یک شرکت نرم‌افزاری B2B» به جای «یک مدیر») خروجی دقیق‌تر می‌شود.

۴) به مدل زمینه بده. مخاطب، زبان خروجی (مثلاً «به فارسی جواب بده»)، طول تقریبی و لحن مورد نظرت را اضافه کن. بیشتر جواب‌های ضعیف نتیجه نبودِ همین سه خط اضافه‌اند، نه ضعف خودِ پرامپت.

۵) یک بار اصلاح کن. جواب اول را نهایی فرض نکن. بنویس «این بخش را کوتاه‌تر کن»، «مثال واقعی اضافه کن» یا «سه نسخه متفاوت بده». دور دوم تقریباً همیشه بهتر از دور اول است.

نمونه استفاده واقعی

بعد از فرستادن پرامپت، جای‌خالی‌ها را این‌طور پر کن: • <section> ← «مقدار واقعی خودت را بنویس» • <hgroup> ← «مقدار واقعی خودت را بنویس» • <figure> ← «مقدار واقعی خودت را بنویس» • <figcaption> ← «مقدار واقعی خودت را بنویس» • <article> ← «مقدار واقعی خودت را بنویس» • <small> ← «مقدار واقعی خودت را بنویس» سپس بنویس: «حالا با همین اطلاعات شروع کن و اول یک طرح کلی بده، بعد وارد جزئیات شو.»

چه خروجی‌ای باید بگیری

متنی با تیتر، مقدمه، بدنه بخش‌بندی‌شده و جمع‌بندی، آماده ویرایش نهایی.

نکته‌های حرفه‌ای

  • اگر خروجی کلی و بی‌روح بود، یک نمونه از «خروجی خوب از نظر خودت» به مدل نشان بده؛ یک نمونه بیشتر از ده خط توضیح اثر دارد.
  • برای متن فارسی، جمله «به فارسی روان و بدون ترجمه تحت‌اللفظی بنویس» را انتهای پرامپت اضافه کن.
  • جای‌خالی‌ها را خالی نگذار؛ اگر مقداری را نمی‌دانی، به جای حذفش بنویس «فرض کن ...» تا مدل سرخود چیزی از خودش نسازد.
  • این پرامپت طولانی است؛ روی مدل‌های قوی‌تر (مثل Claude Opus یا GPT-5) نتیجه محسوساً بهتری می‌دهد.

روی کدام مدل‌ها بهتر جواب می‌دهد

ClaudeChatGPTGemini

پرامپت‌های مرتبط