Advanced Techniques

Once you’ve mastered the basics, shift your mindset: don’t try to write the perfect prompt on the first try. AI design is refined through conversation, not a single message.

---

Advanced Prompting Strategies

1. Chain your requests (iterative refinement)

Start with a base, then improve in follow-up prompts.

Step 1: Build the base

Create a SaaS landing page with Tailwind CSS. Include hero, features, pricing,
and CTA sections.

Step 2: Improve a specific section

Add form validation with appropriate error messages to the contact form.

Step 3: Fine-tune details

Change the "Standard" plan card to a highlighted state with a blue-600 background
and an "Recommended" badge.

This incremental approach produces better results than front-loading all requirements.

---

2. Provide example code snippets

Reference your existing code to maintain consistency.

Create a product listing page following this component structure,
styled with Tailwind CSS:

[paste your existing component code here]

This keeps new components aligned with what’s already in your codebase.

---

3. Use persona-based prompting

Tell AI what kind of expert to act as — it changes the quality of output.

Create a pricing section HTML/CSS as if you were an experienced UI designer
specializing in SaaS products.

As a front-end engineer specializing in accessibility, review and fix this form
for WCAG 2.1 AA compliance.

---

4. Request accessibility from the start

Embedding accessibility requirements upfront is more efficient than fixing later.

Create a form with WCAG 2.1 AA compliance:
- Proper aria-label on all inputs
- Full keyboard navigation support
- Visible focus indicator
- Error messages use role="alert" for screen reader announcements

---

7-Point Prompt Quality Checklist

Before sending a complex UI prompt, verify:

Item	Check
Framework	Named explicitly (Tailwind, Bootstrap, etc.)
Responsive	Breakpoints specified as numbers
Colors	Hex codes or Tailwind classes included
Typography	Font name, size, weight specified
Interactions	Hover, focus, click behaviors described
Accessibility	Aria labels and focus states mentioned
Approach	Decided: chain iteratively or send all at once

---

Common Failure Patterns

“Do everything at once” usually fails

❌ “Create the full landing page — hero, features, pricing, FAQ, footer — all with animations, fully responsive, Tailwind, accessible.”

Output quality degrades as instructions get longer. Split by section and confirm each one.

✅ Prompt one section at a time. Review before moving on.

---

Carry design context forward

Design decisions made in previous prompts (colors, fonts, spacing) should be referenced explicitly in follow-up prompts.

Maintain the same design system from the pricing table built earlier
(colors, fonts, border-radius, shadows) and create a FAQ section using it.

See the references for the external specifications and background sources used on this page.[1][2]

References

1. W3C Web Accessibility Initiative, WCAG 2 Overview
2. MDN Web Docs, Learn web development