Prompting Dos and Don'ts

​

General Tips

• Remember you can attach screenshots when creating!
• Be very specific
• Use keywords; no need for filler words like I want or a component for
• You can use ChatGPT to generate a prompt for you because the longer and more specific the better.

​

How to use your existing design context

1. Presets are a way to configure a default style like, “always use #228B22 as my primary button color.”
2. Our Chrome Extension is one way you can get existing context from any website.
3. On a Magic Patterns project, you can reference existing designs.

​

Prompting Dos and Don’ts

❌ Don’t: use a short prompts: landing page

✅ Do: be specific and use keywords:

Landing page for B2B SaaS app that helps people find the best deals on flights. It should have a hero section, and list features such as earning credit card points.

❌ Don’t: be vague: features on website

✅ Do: clarify your UI and specific content

Cards with a border, title, description that list my 3 features: self-serve integations, premium support, and custom branding

❌ Don’t: make it think too much: checklist with 4 sections with 3 tasks each showing progress

✅ Do: rephrase in a way to be clear what you want

four sections with 3 checkboxes each. There should be a progress bar for each section that changes, according to the number of checkboxes checked

❌ Don’t: omit names of specific components: a box for checks in a list in screen thing

✅ Do: mention specific components

Three checkboxes in a list in a modal.