Vibe Coding for Designers

Compare browser-based code generation (Claude Artifacts, ChatGPT canvas) vs local editors (Cursor, VS Code) vs CLI tools (Claude Code).

Explain what a code editor like VS Code or Cursor does and how it differs from generating code in a browser.

Identify when to use browser-based generation vs a local development setup for different types of projects.

Explain what 'running code locally' means compared to previewing in a browser artifact.

Set up a local development environment by installing a code editor (VS Code) and relevant extensions.

Set up a code editor and run a simple HTML file locally to understand the basic workflow.

Explain what the terminal is and why Claude keeps asking you to type commands there.

Navigate folders and files using basic terminal commands (cd, ls, pwd).

Explain what Node.js is and why it's needed to run many modern web projects locally.

Explain what npm is and why Claude asks you to run 'npm install'.

Use 'npm install' to add a dependency and observe the changes in 'package.json' and the 'node_modules' folder.

Use 'npm run dev' to launch a local development server and view your project in a browser.

Identify common file types in a project and what they do (.js, .ts, .html, .css, .json).

Explain why Claude generates specific folder structures (src, components, pages, public).

Explain what configuration files are and why projects need them (package.json, tsconfig.js, next.config.js).

Explain what environment variables are and why certain settings are stored in .env files.

Distinguish between source code you edit and generated/config files you generally don't touch.

Explain what a package or library is and why developers reuse existing code.

Find and evaluate packages on npm by checking downloads, documentation, and maintenance.

Identify popular design-relevant libraries: Framer Motion (animation), Tailwind CSS (styling), Shadcn/UI (components), Lucide (icons).

Add and use a simple package (e.g., Lucide icons) in a sample project.

Explain what a framework is (e.g., Next.js, React Native) and how it differs from a library.

Read the dependency list in package.json and understand what version numbers signify.

Explain what version control is and the difference between Git (local tracking) and GitHub (cloud sharing).

Initialize a Git repository for a project with 'git init'.

Explain the purpose of the staging area and stage changes with 'git add'.

Commit staged changes with a descriptive message using 'git commit'.

Create and switch between branches to work on features without breaking your main code.

Push local code to a new GitHub repository.

Create a pull request on GitHub and explain its role in collaboration.

Explain what .gitignore is and why files like 'node_modules' are excluded from version control.

Explain what 'deploying' means: moving your code from your computer to a public server.

Explain what Vercel is and why it's a popular choice for deploying web apps.

Run the 'build' command (e.g., 'npm run build') and identify the output folder used for deployment.

Deploy a simple project to Vercel by connecting a GitHub repository.

Explain how pushing code to GitHub can automatically update your live app.

Explain what a custom domain is and how to point it to your deployed app.

Explain what 'frontend' (what users see) vs 'backend' (logic and data) means in practice.

Explain what an API is: a bridge allowing your frontend app to request data or actions from a backend service.

Read and interpret JSON, the common data format for API communication.

Explain what API keys are and why they must be kept secret using environment variables.

Make a test API request using a tool like Postman to see requests and responses in action.

Interpret common API error codes when something breaks: 401 (Unauthorized), 404 (Not Found), 500 (Server Error).

Explain what WebSockets are and when they are used for real-time features like chat.

Explain what a database is and when your app needs one to save information.

Compare Firebase and Supabase, and describe the services they offer (database, auth, storage).

Set up a new project and database in either Firebase or Supabase.

Install the required package (SDK) and initialize the database connection in your app's code.

Create and read records to save and display data in your app.

Update and delete existing records in your database.

Explain why most apps need user authentication and what happens during sign-up and login.

Explain what OAuth is and how 'Sign in with Google' works for your app.

Enable email/password login in the Firebase/Supabase console and connect the auth SDK to your app.

Create a sign-up form to register a new user.

Create a login form to authenticate an existing user.

Implement a logout function and update the UI based on the user's login status.

Explain in simple terms what keeps a user logged in between visits (tokens and sessions).

Identify common security mistakes to avoid when handling user accounts.

Explain the differences between web apps, native apps, cross-platform apps, and PWAs.

Describe what React Native and Flutter do and why they're useful for vibe coding mobile apps.

Describe the requirements and costs for an Apple Developer account.

Explain the purpose of TestFlight and outline the steps to distribute a beta iOS app for testing.

Outline the process and key requirements for submitting an app to the Apple App Store for review.

Describe the Google Play Console and the key steps to set up a developer account.

Explain what APK and AAB build files are and why app signing is required for Android.

Outline the requirements for creating a store listing on the Google Play Store.

Explain what Hugging Face is and browse its model hub for pre-trained models.

Call an AI model from Hugging Face using its Inference API.

Explain what LLM APIs are (OpenAI, Anthropic) and the workflow for using them: getting a key and structuring a request.

Connect an LLM API to a simple web app to create a basic chat interface.

Explain API rate limits, token usage, and costs when using AI services.

Explain what MCP (Model Context Protocol) is and how tools like Figma connect to Claude through it.