Comic Strip 1: The SPEC Framework
Vague prompts get you vague code. Use SPEC to generate exactly what you need:
- Specific: What exactly should it do?
- Platform: What language/version/libraries?
- Examples: Show input/output samples
- Constraints: What are the rules and limits?
Bad Prompt
"Write a login function"
Result: Generic code that doesn't fit your needs
Good SPEC Prompt
S: Validate user registration with username, email, password
P: Python 3.11, only 're' library for regex
E: Input: {'username': 'ab', 'email': 'invalid'} → Output: (False, ['Username too short', 'Invalid email'])
C: Username 3-20 chars, valid email, password 8+ chars with uppercase+lowercase+number
SPEC Builder Interactive
Build your prompt section by section and watch the completeness score!
S - Specific (What exactly?)
▼
"Validate users" (bad) vs "Validate user registration data including username, email, and password" (good)
P - Platform (Language/Version/Libraries)
▼
"Python" (bad) vs "Python 3.11, no external libraries except 're' for regex" (good)
E - Examples (Input/Output)
▼
Show concrete test cases: Input: {'username': 'ab'} → Output: (False, ['Username too short (min 3)'])
C - Constraints (Rules/Limits)
▼
Define all validation rules: Username 3-20 chars alphanumeric, Email standard format, Password 8+ with upper+lower+number
Your Complete SPEC Prompt:
Submit Your SPEC Prompt
Use the SPEC framework to write a prompt for code you actually need. Fill out all 4 sections.
Comic Strip 2: Debug Like You Mean It
AI can help debug, but only if you give it what it needs. Use the 4-Step Template:
4-Step Debugging Template
1. Problem (One specific sentence)
"It's broken" (bad) vs "Function returns None instead of calculated average" (good)
2. Expected vs Actual
Expected: Returns float average of list
Actual: Returns None
3. Minimal Code (Only relevant parts)
Just the function + test case, not 500 lines of unrelated code
4. What You Tried
Checked if list is empty
Added print statements
Tested with simple data
Submit Your Debug Prompt
Use the 4-step template to debug actual code you're stuck on. Fill out all 4 sections.
Comic Strip 3: Security - The 5 Non-Negotiables
AI generates code fast. But it also generates vulnerabilities. Run these 5 checks EVERY TIME:
The 5 Security Checks
1. SQL Injection - Use Parameterized Queries
Vulnerable:
f"SELECT * FROM users WHERE name = '{username}'"
Safe:
cursor.execute("SELECT * FROM users WHERE name = ?", (username,))
2. Hardcoded Secrets - Use Environment Variables
Vulnerable:
API_KEY = "sk_live_1234abcd"
Safe:
API_KEY = os.getenv("API_KEY")
3. Input Validation - Never Trust User Input
Vulnerable:
email = request.form['email']
# immediately use it
Safe:
email = request.form['email']
if validate_email(email):
# then use it
4. XSS Protection - Escape Output, Sanitize HTML
Vulnerable:
f"<div>{user_comment}</div>"
Safe:
f"<div>{escape(user_comment)}</div>"
5. Auth/Authorization - Verify Who Can Access What
Vulnerable:
@app.route('/admin')
def admin():
# no checks
Safe:
@app.route('/admin')
@login_required
@admin_required
def admin():
Security Bug Hunter Game
Click on lines you think are vulnerable. Find all 5 security issues!
Found: 0/5 vulnerabilities
1: from flask import Flask, request
2: API_KEY = "sk_live_abc123xyz" # API key for payments
3: app = Flask(__name__)
4:
5: @app.route('/admin/delete_user')
6: def delete_user():
7: user_id = request.args.get('id')
8: db.execute(f"DELETE FROM users WHERE id = {user_id}")
9: return "User deleted"
10:
11: @app.route('/comment')
12: def post_comment():
13: comment = request.form['comment']
14: return f"<div>{comment}</div>"
Submit Your Security Analysis
Paste code (yours or AI-generated). Run through the 5-point security checklist. List any vulnerabilities you found and how to fix them.
