Module -07: AI-Assisted Coding — Design & Code Foundations

01

Essential Terminology

Before diving into AI tools, let's clarify common terms you'll encounter constantly: API, IDE, SDK, and how they relate to AI coding.

Your App

request →

← response

API

→

Service

// Ask OpenAI API for completion
POST api.openai.com/v1/completions
{"prompt": "Write a function..."}

// API returns generated code
{"text": "function add(a, b)..."}

API — Application Programming Interface

An API is a standardized way for programs to communicate. When you use ChatGPT, your browser sends requests to OpenAI's API, which returns responses. APIs are how AI tools connect to AI models.

Core concept: API = the messenger between your app and a service

AN IDE COMBINES MANY TOOLS:

Code Editor

Syntax highlighting, autocomplete

File Explorer

Navigate project folders

Terminal

Run commands without leaving

Debugger

Step through code, find bugs

Git Integration

Version control built-in

Extensions

Add features like AI assistants

IDE — Integrated Development Environment

An IDE is an all-in-one coding workspace. VS Code, Cursor, and WebStorm are IDEs. They combine code editing, file management, terminal, debugging, and extensions into one application.

Your workspace: IDE = your coding workspace with all tools integrated

SDK = TOOLKIT FOR BUILDING ON A PLATFORM

iOS SDK

Tools to build iPhone apps (Swift, Xcode)

Android SDK

Tools to build Android apps (Kotlin, Android Studio)

Claude SDK

Tools to build apps using Claude AI

SDKs include: libraries, documentation, sample code, tools

SDK — Software Development Kit

An SDK is a toolkit for building on a specific platform. Want to build iPhone apps? Use the iOS SDK. Want to integrate Claude into your app? Use the Claude SDK. SDKs provide code libraries, docs, and tools.

Building blocks: SDK = toolkit to build on a platform (iOS, Android, AI services)

IDEWhere you write code

VS Code is your IDE. You write code here, install extensions, run terminals.

SDKWhat you build with

You install an SDK (like React SDK) to get pre-built components and tools.

APIHow services communicate

Your app calls the Stripe API to process payments, or the OpenAI API for AI features.

API vs SDK vs IDE

You work in an IDE, use an SDK to build features, and connect to external services via APIs. Example: Write code in VS Code (IDE), use the Firebase SDK, call the Stripe API for payments.

Summary: IDE = where. SDK = with what. API = how services connect.

02

AI Coding Tools Landscape

The AI coding space is evolving rapidly. Understanding the major players and their differences helps you choose the right tool for your workflow.

C

Claude

Anthropic. Strong reasoning, long context, safety-focused.

G

ChatGPT

OpenAI. GPT-4, plugins, image generation, broad capabilities.

G

Gemini

Google. Multimodal, integrates with Google services.

AI Chat for Coding

Chat interfaces let you describe what you want in plain English and get code back. Good for learning, explaining code, and generating snippets. Copy-paste workflow — you move code manually.

How it works: Chat = describe problem, get code, copy to your project

GitHub Copilot

Autocomplete on steroids. Suggests code as you type. Works in VS Code, JetBrains, Neovim.

Cursor

AI-first IDE (VS Code fork). Chat + autocomplete + codebase understanding. Can edit multiple files.

Claude Code

Terminal-based AI. Reads your codebase, makes changes, runs commands. Agentic workflow.

Codeium / Tabnine

Free/cheaper Copilot alternatives. Good autocomplete, some chat features.

AI Inside Your Editor

IDE integrations work inside your editor — no copy-pasting. Copilot autocompletes as you type. Cursor lets you chat and edit. Claude Code can execute multi-file changes. More integrated = faster workflow.

Faster workflow: IDE integrations = AI works directly in your editor

Learning/explaining code

→ Chat (Claude, ChatGPT)

Writing new code quickly

→ Copilot / Cursor autocomplete

Refactoring existing code

→ Cursor / Claude Code

Complex multi-file tasks

→ Claude Code / Cursor Composer

Debugging / understanding errors

→ Any (paste error message)

Which Tool When?

Different tools excel at different tasks. Chat is great for learning. Autocomplete (Copilot) speeds up writing. Agentic tools (Claude Code) handle complex changes. Most developers use multiple tools.

Practical advice: Use multiple tools. Each has strengths.

03

Effective Prompting

The quality of AI output directly depends on your input. Vague prompts get vague code. Specific, contextual prompts get useful results.

VAGUE PROMPT

"Make a login form"

Result: Generic form, may not fit your stack, styling, or requirements.

SPECIFIC PROMPT

"Create a login form in React with email and password fields. Use Tailwind CSS for styling. Include client-side validation that checks email format and requires 8+ character passwords. Show inline error messages. Match the minimal style of the rest of the app."

Result: Usable code that fits your project.

Prompt Quality Comparison

Specific prompts include: technology stack, styling approach, validation requirements, UX details. The more context you provide, the less you'll need to edit the output.

Key principle: Be specific: stack, style, requirements, context

1. CONTEXT

"I'm building a Next.js e-commerce site with TypeScript and Tailwind."

2. TASK

"Create a product card component that displays image, title, price, and add-to-cart button."

3. CONSTRAINTS

"Use the existing Button component. Match the dark theme. Handle loading states."

4. EXAMPLES (optional)

"Here's an existing component for reference: [paste code]"

Anatomy of a Good Prompt

Structure prompts with: Context (your stack), Task (what you need), Constraints (requirements), and optionally Examples (existing code to match).

Formula: Context + Task + Constraints = quality output

You:

"Make the button larger and add hover animation."

You:

"Actually, use a spring animation, not linear."

You:

"Add loading state that disables the button and shows spinner."

Conversation is iterative. Don't expect perfection on first try. Refine through follow-ups.

Refining Through Conversation

AI conversations are iterative. Start with a basic request, then refine. "Make it more accessible." "Add dark mode support." "Handle the edge case where..." Build up the solution incrementally.

Workflow: First attempt rarely perfect. Iterate and refine.

→

Paste existing code: "Match the style of this component: [code]"

→

Explain errors: Paste the full error message and stack trace.

→

Ask for explanation: "Explain this code line by line."

→

Request alternatives: "Show me 3 different approaches."

→

Check for issues: "Review this code for bugs and security issues."

Advanced Prompting Techniques

Pro tips: paste existing code for style matching, include full error messages, ask for explanations to learn, request multiple approaches to compare, and always ask for code review.

Level up: Include code examples. Ask for explanations. Request review.

04

Evaluating AI Output

AI generates plausible-looking code that may have bugs, security holes, or outdated patterns. Your job is to evaluate, not just accept.

COMMON AI MISTAKES:

Hallucinated APIs: Makes up function names that don't exist

Outdated patterns: Uses deprecated methods or old syntax

Security issues: SQL injection, XSS, hardcoded secrets

Logic errors: Code that looks right but has subtle bugs

Over-engineering: More complex than necessary

What AI Gets Wrong

AI confidently generates wrong code. It may use APIs that don't exist, deprecated methods, or introduce security vulnerabilities. Always verify before using.

Critical awareness: AI is confident even when wrong. Verify everything.

VERIFICATION CHECKLIST:

□Does it actually run without errors?

□Do I understand what each part does?

□Are the imports/dependencies valid?

□Any hardcoded values that should be variables?

□Any obvious security issues?

□Does it match my project's patterns?

Before Using AI Code

Before using AI-generated code: run it, read it, verify imports exist, check for hardcoded values, look for security issues, and ensure it matches your codebase style.

Quality control: Run it. Read it. Verify it. Then use it.

JUST COPYING

"Give me code for X" → paste → hope it works → no learning

LEARNING MODE

"Give me code for X" → "Explain why you chose this approach" → "What are alternatives?" → "What could go wrong?" → understanding

Ask: "Explain this code like I'm a beginner learning web development."

Use AI to Learn, Not Just Copy

If you just copy AI code without understanding, you'll never improve. Ask AI to explain its reasoning, describe alternatives, and identify potential issues. Use it as a teacher, not just a generator.

Growth mindset: Ask "why" and "what else". Learn, don't just copy.

05

The Changing Role of Developers

AI isn't replacing developers — it's changing what developers do. Understanding this shift helps you position yourself for the future.

INCREASINGLY AUTOMATED:

Writing boilerplate codeHIGH

Simple CRUD operationsHIGH

Basic styling/CSSHIGH

Documentation writingHIGH

Unit test generationMEDIUM

Tasks Being Automated

Repetitive, pattern-based tasks are rapidly being automated. Writing boilerplate, basic CRUD, simple styling, and documentation are AI strengths. These used to be entry-level tasks.

Market shift: Repetitive coding tasks → increasingly automated

INCREASINGLY VALUABLE:

System design & architecture — AI can't see the big picture

Debugging complex issues — requires deep understanding

Code review & quality — evaluating AI output

Security assessment — AI often introduces vulnerabilities

Translating business → technical — understanding requirements

AI collaboration skills — prompting, evaluating, integrating

Skills That Matter More

Higher-level skills become more valuable: architecture, debugging, code review, security, requirements understanding, and AI collaboration itself. The bar shifts up, not out.

Where to invest: Understanding > typing. Review > generation. Strategy > tactics.

🧮

Before calculators

Manual arithmetic was a job

→

📊

After calculators

Math understanding still essential

Calculators automated arithmetic, not mathematical thinking.
AI automates code generation, not software engineering.

Calculators Didn't Kill Math

Calculators eliminated "arithmetic" as a job skill but made mathematical understanding more important, not less. AI eliminates "code typing" as a bottleneck but makes software understanding more critical.

Perspective: AI automates generation, not understanding

Designer who understands code

+ AI that generates code

= Can build without traditional dev bottleneck

You don't need to write code from scratch.
You need to:
• Describe what you want clearly
• Evaluate if the output is correct
• Know enough to debug and tweak
• Understand the system well enough to iterate

Designer + AI = Superpower

This course exists because: designers who understand code can now build with AI. You don't need to write code from scratch — you need to evaluate, understand, and guide. That's code literacy.

Your superpower: Code literacy + AI = you can build things

AI-Assisted Coding

Core Concepts

Essential Terminology

AI Coding Tools Landscape

Effective Prompting

Evaluating AI Output

The Changing Role of Developers

Key Takeaways