Prompting Basics

Practical foundations for writing clear prompts that produce better design and code output.

All Prompts

Be clear and specific

No-code AI tools work best when your request is explicit and concrete.

Instead of:

Make a button.

Use:

Create a primary CTA button with rounded corners, blue background (#2563eb), white text, hover state (#1d4ed8), and a subtle shadow. Use 44px height for touch targets.

Start with the design problem

I am building a product showcase for an e-commerce site. Users should quickly scan products, see price/rating/availability, and add to cart on desktop and mobile.

Specify output format

Give me only the final code.
Explain each step and trade-offs.
Generate component code plus usage examples and docs.

Give context, not noise

This is for a SaaS dashboard. Users value information density. Prioritize clarity and quick scanning over decorative visuals.

Save reusable guidance in-repo

Create reusable docs/rules the AI can reference:

  • design tokens
  • component conventions
  • accessibility constraints
  • explicit “do not do” instructions

Recover when prompts fail

Stop and reset. Restate the original requirement and tell me what context is missing to complete it correctly.
Analyze why the previous approach failed and propose a new approach with trade-offs.