Apply prompting strategies

​

The C.L.E.A.R. framework

Think of C.L.E.A.R. as your guide for writing prompts that work. Each letter represents a principle that makes your prompts more effective:

​

Concise

Keep your prompts brief and to the point. Get straight to what you want without unnecessary words. Do this:

“Add a booking form with fields for name, email, and preferred time.”

Not this:

“I need a form that collects user details like their name and email address, and also asks them when they want to book something.”

​

Logical

Organize your request in a way that makes sense. Think about the order things should appear or happen. Do this:

“Create a form with a heading at the top, then fields for name, email, and time slot, and a submit button at the bottom.”

Not this:

“Put the email field first, then add a heading somewhere, and include a name field, plus a button.”

​

Explicit

Be clear and specific about what you want. Don’t leave things open to interpretation. Do this:

“Add placeholder text to each input field, use a dropdown menu for time selection, and show a success message when the form is submitted.”

Not this:

“Make a form with some fields and make sure it works properly.”

​

Adaptive

Adjust your approach based on what you’re trying to accomplish. Different goals need different types of prompts. For design:

“Create a centered booking form with plenty of white space and a clean, minimal look.”

For functionality:

“When the form is submitted, validate all fields, save the data to the bookings table, and display a confirmation message.”

For fixing issues:

“The submit button isn’t working. Check if it’s disabled or missing the click handler, and make sure it actually submits the form.”

​

Reflective

Review what HypeFrame creates and refine your prompts based on the results. Learn from what works and what doesn’t. Do this:

After seeing the result, you might refine: “The form looks good, but make the time dropdown wider and add validation to prevent past dates.”

Not this:

Keep using the same vague prompt even when the results aren’t what you want.

​

Prompting strategies

Beyond the C.L.E.A.R. framework, here are specific strategies you can use for different situations:

​

Zero-shot prompting

Use this for straightforward tasks that don’t need examples. Just describe what you want directly. Example:

“Create a screen that displays all orders placed in the last 7 days.”

​

Instructional prompting

Provide detailed, step-by-step instructions for specific behaviors or structures. Example:

“Design a welcome page with a large, bold heading at the top, two bullet points explaining the main features, and a prominent ‘Get Started’ button centered below.”

​

Tone and clarity prompting

Guide HypeFrame to match a particular style or make something easier to understand. Example:

“Make this screen more user-friendly for people who are using the app for the first time. Use simple language and clear visual cues.”

​

Few-shot prompting

Give examples to show HypeFrame the pattern or style you want it to follow. Example:

“Create a features section with a bold title, a short introduction paragraph, then three feature cards. Each card should have an icon at the top, a title, and a description. Add a centered ‘Learn More’ button at the bottom.”

​

Chain-of-thought prompting

Break complex tasks into clear, sequential steps. This helps HypeFrame understand the logic flow. Example:

“First, check if the user is logged in. If they are, show the dashboard. If they’re not logged in, redirect them to the login page.”

​

Preventing inconsistencies

Sometimes HypeFrame might make assumptions that don’t match what you want. Here’s how to avoid that:

​

Be specific about data and constraints

Clearly define where data comes from and any rules or limitations. Do this:

“Build a dashboard that shows active users, churn rate, and average session time. Pull this data from the user_metrics table.”

Not this:

“Create a dashboard with some user statistics.”

​

Break complex logic into steps

For multi-step processes, outline each step explicitly. Do this:

“Step 1: Create a form with validation for name, email, and phone number. Step 2: When submitted, save the data to the contacts database. Step 3: Send a welcome email to the new contact.”

Not this:

“Make a form that saves data and sends an email.”

​

Review and refine

If the output isn’t what you expected, take a moment to think about what went wrong and adjust your prompt. Ask yourself:

• What did HypeFrame assume that wasn’t correct?
• What details did I leave out?
• How can I be more specific?

Then refine your prompt with those insights.

​

Putting it all together

The best prompts combine multiple strategies. Here’s an example that uses several techniques:

“Create a user profile page (zero-shot). Start with a header section containing the user’s name and profile picture (instructional). Below that, add three sections: personal information, account settings, and activity history (chain-of-thought). Use a clean, professional design with plenty of spacing (tone). Each section should have a title, relevant content, and an edit button (few-shot). Make sure all data comes from the users table and activity_log table (specific data).”

​

Need help?