Skip to main content
Version: Winter 2024 SheCodes Program

Basics of Prompt Engineering

What is Prompt Engineering​

Prompt engineering is a technique for optimizing interactions with AI systems, aimed at obtaining more accurate, relevant, and useful outputs through carefully designed inputs (i.e., "prompts"). In AI-assisted development, mastering prompt engineering techniques can significantly improve work efficiency and output quality.

Core Prompt Engineering Process​

Importance of Prompt Engineering

Mastering prompt engineering can bring the following benefits:

  • Improve accuracy: AI understands your needs more accurately
  • Enhance relevance: Get more relevant and useful outputs
  • Reduce communication costs: Reduce back-and-forth communications
  • Boost efficiency: Significantly improve development efficiency
Application Scenarios

Prompt engineering is particularly suitable for:

  • Code generation and debugging
  • Document writing and translation
  • Creative design and brainstorming
  • Problem solving and solution analysis

Practical Tools​

Interactive Prompt Generator​

🛠ī¸ Interactive Prompt Generator

Prompt Example Library​

📚 Prompt Example Library

Category: Frontend Development
React Component Development
Please create a React function component named UserCard with the following features:
1. Receive user information props (name, avatar, position)
2. Display user avatar (circular)
3. Display user name and position
4. Add hover effect
5. Use TypeScript type definitions

Please provide complete component code and styling.

Prompt Quality Analysis​

🔍 Prompt Quality Analyzer

Prompt Engineering Knowledge System​

Techniques for Writing Effective Prompts​

Clarity and Specificity​

Core Principle

Effective prompts should follow the principle of "specific, clear, and complete".

Give me 5 blog article topics about AI applications in daily life, each topic should include a brief description

Prompt Optimization Process​

Common Mistakes

Avoid the following common mistakes:

Vague Expressions
  • Using vague quantifiers like "some", "a few"
  • Lacking specific context information
  • No clear expected output format
Ambiguity Issues
  • Using words that could have multiple interpretations
  • Missing necessary constraints
  • Not providing examples or references

:::

Best Practices:

  • Use clear, concise language
  • Clearly state your requirements and expectations
  • Avoid vague or ambiguous expressions

Provide Context​

Importance of Context

Good context can help AI understand your needs and goals more accurately.

I am writing articles for a programming blog aimed at beginners. Please provide me with an article outline explaining the concept of 'variables', the content should be simple and easy to understand, suitable for readers with no programming experience.

Context Building Framework​

Context Elements

Effective context should include:

  1. Background Information: Explain the current situation or project
  2. Target Audience: Describe the target readers of the content
  3. Constraints: Describe relevant constraints or requirements
  4. Expected Format: Clarify output format requirements

Step-by-Step Guidance​

Step-by-Step Strategy

Breaking complex tasks into multiple simple steps can significantly improve AI's understanding and execution effectiveness.

Step-by-Step Execution Process​

  1. First Step: "Please design a simple homepage layout for my personal tech blog"
  2. Second Step: "Based on the layout you provided, please give me the HTML structure code"
  3. Third Step: "Now, please add basic CSS styling to this HTML structure"
Step-by-Step Advantages
  • Each step has a clear goal
  • Can adjust subsequent steps based on AI's responses
  • Reduces the complexity of individual tasks
  • Improves the quality of final results

Use Examples and Templates​

Template Thinking

Using templates can help AI better understand your expected output format.

Example Template

Please generate 3 titles for my blog article in the following format:

  1. [Attractive Adjective] + [Topic] + [Valuable Promise]
  2. [Number] + [Methods/Techniques] + [Achieve Goal]
  3. [How/Ways] + [Achieve Goal] + [Without Doing Something/Using a Method]

Examples:

  1. Amazing Time Management Techniques: The Secret Weapon for Boosting Productivity
  2. 7 Simple Methods to Double Your Blog Traffic
  3. How to Learn Programming Without Losing Your Mind

Common Prompt Patterns​

Prompt Pattern Classification​

Role-Playing Prompts​

Power of Role Playing

Having AI play a specific role can yield more professional and targeted responses.

Please act as an experienced frontend development engineer. I am a beginner just starting to learn HTML and CSS. Please explain in simple terms what responsive design is, why it's important, and how to start implementing responsive web pages.

Step Decomposition Prompts​

Structured Approach

Breaking complex tasks into clear steps can yield more systematic solutions.

I want to create a personal blog website. Please list the main steps to achieve this goal, including:
1. Planning content and functionality
2. Choosing technology stack
3. Designing user interface
4. Developing frontend
5. Implementing backend functionality
6. Testing and debugging
7. Deploying website

For each step, please provide a brief description and possible tools or resources needed.

Comparative Analysis Prompts​

Comparison Analysis

When requesting AI to perform comparative analysis, provide clear comparison dimensions and criteria.

Please compare WordPress, Ghost, and Hugo, these three blogging platforms, analyzing their pros and cons in the following aspects:
1. Ease of use
2. Customization flexibility
3. Performance
4. SEO friendliness
5. Community support

Provide a summary paragraph for each platform and give recommendations for different types of bloggers.

Creative Generation Prompts​

Creative Stimulation

When requesting AI to generate creative ideas, providing specific constraints can yield more practical suggestions.

I want to create a unique interactive element for my tech blog to increase reader engagement. Please provide 5 innovative ideas, each idea should:
1. Be related to technical topics
2. Be easy to implement (no complex backend needed)
3. Be able to attract reader interaction
4. Help increase page dwell time

For each idea, briefly explain how it works and its potential benefits.

Prompt Engineering Learning Path​

Learning Outcomes

After completing this section, you will be able to:

  • Write clear, specific prompts
  • Use various prompt patterns
  • Improve AI understanding through context
  • Break complex tasks into simple steps