why my prompt failed

As a developer, I recently decided to redesign my portfolio website using an AI coding assistant.

My initial thought was simple:

Redesign my portfolio website.

I entered this prompt into Cursor and expected a modern, professional portfolio design.

Instead of immediately generating code, Cursor asked me several questions:

• Which tech stack are you using?
• Do you prefer a sidebar or a top navigation bar?
• What kind of design style do you want?
• Do you want a personal brand focus or a project showcase focus?

After answering these questions, Cursor generated a redesigned portfolio website.

However, I wasn't satisfied with the result.

The design wasn't bad, but it didn't match what I had in mind.

So I tried again.

And again.

And again.

Each time, I modified the prompt slightly, hoping for a better outcome.

After several attempts, I realized something important:

> The quality of AI output depends on the clarity of instructions, the quality of context, and how well the desired outcome is specified.

That realization led me to learn about prompt engineering.

My Personal 6-Step Framework for Better Prompt Writing

Note: This is a personal framework I developed through learning and experimentation with AI tools. It is not an official prompt engineering standard, but it has helped me write more effective prompts.

Level 1: Ask a Question

The most basic level of prompting is simply telling the AI what you want.

Example:

What is React?

This works, but the AI has very little context about who you are or what kind of answer you need.

Level 2: Give Context

At this level, you provide information about your situation.

Example:

I'm a JavaScript developer. What is React?

Now the AI can tailor the explanation to someone who already understands JavaScript.

Level 3: Assign a Role

Tell the AI who it should act as.

Example:

Act as a React instructor and explain React.

The AI now responds from the perspective of a teacher rather than a general assistant.

Level 4: Add Constraints

Specify rules, limitations, or requirements.

Example:

Act as a React instructor and explain React in simple English with practical examples.

The AI now knows both the role and the style of explanation you want.

Level 5: Define the Output Format

Tell the AI exactly how the response should be structured.

Example:

Act as a React instructor and explain React in simple English with practical examples. Present the answer in 5 bullet points.

This gives the AI clear instructions about both the content and the format.

Level 6: Provide Examples

Sometimes, even after defining a role, context, constraints, and output format, the AI may not fully understand the style or quality you expect.

In such cases, providing examples can help.

Example:

Act as a React instructor.

Here is the teaching style I prefer:

JavaScript Variables:

• Variables are used to store data.
• They can hold numbers, strings, or objects.
• Example: const name = "John";

Using the same style, explain React.

By providing an example, you show the AI exactly how you want the response to be written.

This technique is often called few-shot prompting because you provide one or more examples for the AI to follow.

Examples can be especially useful when you want:

• A specific writing style
• Consistent formatting
• Particular coding standards
• Structured documentation
• Better quality outputs for complex tasks

Instead of only telling the AI what you want, you are also showing it what a good answer looks like.

Applying This to My Portfolio Redesign

My original prompt was:

Redesign my portfolio website.

After learning more about prompting, I realized that this prompt only communicates the task, not the details needed to produce a result that matches my expectations.

A much better prompt would be:

Act as a senior UI/UX designer and frontend architect.

Context:

I am a full-stack developer with 3 years of experience in React.js, Node.js, Electron.js, MySQL, AWS, and Computer Vision applications. I use my portfolio to showcase my professional experience, technical skills, and projects.

Goal:

Redesign my existing portfolio website to look modern, professional, recruiter-friendly, and visually appealing.

Constraints:

• Use React and MUI.
• Keep the top navigation bar.
• Ensure responsive design for mobile, tablet, and desktop devices.
• Focus on projects, skills, experience, and achievements.
• Follow accessibility and performance best practices.
• Use modern spacing, typography, and animations without making the website feel cluttered.

Output Format:

1. Design strategy
2. Information architecture
3. Page structure
4. UI/UX improvements
5. Component hierarchy
6. Implementation plan

Example Style:

I like modern developer portfolios that include:

• A large hero section with a strong personal introduction.
• Clean typography with plenty of white space.
• Card-based project showcases.
• Smooth scrolling and subtle animations.
• Professional color palettes with good contrast.
• Skills displayed using visually organized categories.

Use a similar design philosophy while creating a unique portfolio experience.

Notice how this prompt contains all six levels of my framework:

1. Ask a Question
2. Give Context
3. Assign a Role
4. Add Constraints
5. Define the Output Format
6. Provide Examples

Compared to my original one-line prompt, this version gives the AI significantly more information and increases the chances of receiving a result that aligns with my expectations.

What Changed in My Thinking

Before this experience, I thought prompting was simply asking questions.

Now I see prompting as a way of communicating requirements clearly.

The more information I provide about my goals, context, constraints, expectations, and examples, the more likely the AI is to generate results that match what I need.

Whether I'm building a portfolio website, generating documentation, writing code, or learning a new technology, the same principle applies:

Better prompts lead to better outcomes.

My Biggest Takeaway

When I started redesigning my portfolio, I thought AI would automatically generate the perfect design from a simple instruction.

What I learned was that AI is not a mind reader.

The quality of the output depends on how clearly we communicate our goals, requirements, and expectations.

Prompt engineering is not about finding secret keywords or magic phrases.

It is about giving the AI the information it needs to succeed.

My personal framework for writing better prompts is:

1. Ask a Question
2. Give Context
3. Assign a Role
4. Add Constraints
5. Define the Output Format
6. Provide Examples

As developers, we already spend our careers learning how to communicate with computers through programming languages.

Prompt engineering is simply another form of communication—one that helps us collaborate more effectively with AI systems.

The better the communication, the better the outcome.