CLEAR In Action

Quick Recap: The CLEAR Framework 📋

In Part 1, we introduced the CLEAR framework for effective AI prompting:

Element	What It Means	Purpose
Component	What specific element you’re working with	Eliminates ambiguity
Location	Where it exists in your app	Provides context
Exact Change	What specific action you want	Defines the task
Appearance	How it should look and behave	Sets specifications
Reason	Why this matters	Explains the goal

Now let’s see how this transforms real development scenarios.

CLEAR in Action: Real-World React Examples 🎯

Scenario 1: Building User Authentication

The Situation: You need a complete login system for your SaaS application.

❌ The Old Way (Vague Prompting)

"Create a login form for my React app"

✅ The CLEAR Way

Create a sleek login screen (Component) for my productivity app's main page (Location)
with email/password fields, "remember me" checkbox, and social login buttons
(Exact change) styled with a modern gradient background, floating labels,
and smooth animations (Appearance) to give users a premium first impression
and reduce signup friction (Reason).

Scenario 2: Building a Social Media Feed

The Situation: You want to create an Instagram-style feed for your community app.

❌ The Old Way (Vague Prompting)

"Make a social feed"

Problems with this approach:

• What kind of posts? Images? Text? Videos?
• How do users interact? Likes? Comments? Shares?
• What’s the layout? Grid? List? Stories?

✅ The CLEAR Way (Chained Approach)

Step 1 - The Feed Layout:

Create a social media feed (Component) for the home screen of my community app
(Location) that displays user posts with images, captions, and engagement buttons
(Exact change) using an Instagram-style layout with infinite scroll and pull-to-refresh
(Appearance) to keep users engaged and scrolling through community content (Reason).

Step 2 - Post Interactions:

Add engagement features (Component) to each post in the social feed (Location)
with like, comment, and share buttons that show real-time counts (Exact change)
using heart animations for likes and slide-up comment drawer (Appearance)
to encourage community interaction and content sharing (Reason).

Step 3 - User Profiles:

Create user profile previews (Component) at the top of each post in the feed
(Location) showing profile picture, username, and follow button (Exact change)
with clean typography and subtle hover effects (Appearance) to help users
discover and connect with other community members (Reason).

Result: Complete social feed built in 3 focused requests instead of endless back-and-forth.

Scenario 3: The “Oh Shit” Moment - Demo Day Panic

The Situation: You’re showing your app to investors tomorrow and the main feature just broke.

❌ Panic Prompting

"MY APP IS BROKEN! The buttons don't work! HELP!"

What happens: Tempo AI gets confused with and makes unintended changes that doesn’t solve the original problem.

✅ CLEAR Emergency Response

Fix the "Join Community" button (Component) on my app's landing page (Location)
that should open the signup flow but does nothing when users click it (Exact change)
by making it properly navigate to the registration screen (Appearance).

Result: Quick fix that gets your demo-critical feature working immediately.

Scenario 4: Making Your App Look Professional

The Situation: Your app works but looks like it was built in 2010. You need that modern, premium feel.

❌ Wishful Thinking

"Make my app look modern and professional"

✅ CLEAR Style Upgrade

Redesign the main dashboard (Component) of my fitness tracking app (Location)
with a clean, card-based layout and progress charts (Exact change) using
a dark theme with green accent colors, smooth transitions, and glassmorphism
effects (Appearance) to make the app feel premium and increase user retention (Reason).

Result: Your app goes from “student project” to “I’d pay for this” overnight.

Advanced CLEAR Techniques 🎓

Technique 1: The Vibe-First Approach

Start with the feeling you want, then get specific:

Context Setup / PRD / Custom Knowledge:

I am building a meditation app that should feel calm and zen. Think Headspace
meets Apple's design language. Users are stressed professionals who need
peace in their day.

CLEAR Prompt:

Create a meditation session player (Component) for the main app screen (Location)
with play/pause, progress bar, and ambient background selector (Exact change)
using soft gradients, minimal icons, and breathing animations (Appearance)
to create a calming experience that helps users disconnect from work stress (Reason).

Technique 2: The “Like That App” Method

Reference apps users already love:

Build a music discovery screen (Component) for my playlist app's main interface
(Location) with genre cards and trending songs, similar to Spotify's Browse page
(Exact change) using colorful album artwork, smooth scrolling, and play previews
(Appearance) to help users find new music they will actually want to save (Reason).

Technique 3: User Story Integration

Think like your users:

Create a food delivery tracking screen (Component) for after users place an order
(Location) showing real-time delivery progress with driver location and ETA
(Exact change) using a map view with cute delivery icons and status updates
(Appearance) because hangry users need to know exactly when their food arrives (Reason).

Common App Scenarios: Before & After 🔄

E-commerce Product Pages

❌ Before: “Make a product page” ✅ After:

Design a product showcase page (Component) for my clothing store app (Location)
with image carousel, size selector, and add-to-cart button (Exact change)
using clean white background, zoom functionality, and color swatches (Appearance)
to make online shopping feel as good as trying clothes on in-store (Reason).

Onboarding Flows

❌ Before: “Create user onboarding”
✅ After:

Build a welcome tutorial (Component) for new users opening my budgeting app
(Location) with 3 simple steps explaining core features and benefits (Exact change)
using friendly illustrations, progress dots, and encouraging copy (Appearance)
to get users successfully tracking their first expense within 2 minutes (Reason).

Settings & Preferences

❌ Before: “Add a settings page”

✅ After:

Create a user preferences screen (Component) in my app's profile section (Location)
with notification toggles, theme selector, and account management options
(Exact change) using organized sections, clear labels, and iOS-style switches
(Appearance) to let users customize their experience without overwhelming them (Reason).

Your CLEAR App-Building Workflow 🚀

Step 1: Know Your Vibe

• What feeling should your app create?
• Who are your users and what do they want?
• What apps do they already love?

Step 2: Structure Your CLEAR Request

• Component: What specific screen or feature?
• Location: Where in your app does this live?
• Exact Change: What should it actually do?
• Appearance: How should it look and feel?
• Reason: Why will users love this?

Step 3: Build and Iterate

• Send your CLEAR prompt
• See what Tempo AI creates
• If it’s not quite right, adjust one CLEAR element and try again

Step 4: Chain for Complete Features

• Start with the main screen
• Add interactions and animations
• Polish with micro-interactions and edge cases

Measuring Your CLEAR Success 📊

Track these to see your improvement:

Before CLEAR

• ⏱️ Time per feature: Hours of confusing back-and-forth
• 😤 Frustration level: “Why doesn’t it understand what I want?”
• 🎯 App quality: Looks basic, feels unfinished

After CLEAR

• ⏱️ Time per feature: Minutes to working, polished features
• 😤 Frustration level: “This is actually fun!”
• 🎯 App quality: “Wait, you built this yourself?”

Success Indicator: When you catch yourself naturally thinking “What’s the Component, Location, Exact change…” before asking AI to implement, you have got it. Your app-building speed will be 100x faster.