codingstairs
NotesEDULifeContact
⌕Search⌘K
koen

Navigation

  • Intro
  • Blog
  • Life

Get in touch

Send without signing in. Add your email if you'd like a reply.

  • Leave a message anonymously →
  • ✉ warragon112@gmail.com
  • KakaoTalk Open Chat ↗

© 2026 codingstairs

  • Notes
  • EDU
  • Search
  • Life
  • Contact
  • Legal
  • RSS
  • GitHub
EDU›AI-native developer tooling — Claude Code · MCP · design tools

AI-native developer tooling — Claude Code · MCP · design tools

A 7-step path to using AI tools beyond chat — MCP, Skills, Subagents, workflows, and design-side tooling.

Start with Step 1 →
Difficulty
beginner
Lessons
7

Using AI tools for real

AI coding tools are not "copy-paste chatbots" anymore. Master context (MCP), automation (Skills/Subagents), and IDE integration — and the tools start running tools.

By the end:

  • Understand Claude Code's slash commands, memory, and extension model
  • Connect MCP servers, Context7, Figma
  • Build workflows with Skills + Subagents + Hooks
  • Compare with other AI CLIs / IDEs
  • Compare AI design tools (Stitch · v0 · Figma AI)

Flow

[1] Why AI tools ──▶ [2] Claude Code ──▶ [3] MCP ──▶ [4] Skills + Subagents
                                                            │
                                                            ▼
                      [7] Design tools ◀── [6] Workflows ◀── [5] Context7 / Figma

Steps 1–2 are start, 3–5 extend context (external tools, live docs), 6–7 are the automation and design payoff.

Prerequisite — getting-started + Claude Code (or compatible IDE) installed.

Lessons

  1. 1

    Step 1 — Why AI tools now

    →
  2. 2

    Step 2 — Getting started with Claude Code

    →
  3. 3

    Step 3 — MCP — concepts and clients

    →
  4. 4

    Step 4 — Skills · Subagents · Hooks

    →
  5. 5

    Step 5 — Context7 · Figma MCP

    →
  6. 6

    Step 6 — Building workflows

    →
  7. 7

    Step 7 — AI design tools (Stitch · v0 · Figma AI)

    →

Other courses

All courses →
  • Getting Started with a Dev Environment
  • From HTML/CSS/JS to React, Next.js, Tailwind
  • Build Your First Fullstack App with Next.js 16
  • Backend with Spring Boot 4
  • Python · FastAPI · Data Pipelines
  • Docker · Caddy · Cloud — 10 deploy options
  • Central admin platform — many domains behind one hub
  • Local LLM · pgvector · building a RAG chatbot
  • Tauri 2 — desktop · mobile in one codebase
  • Testing strategy and quality gates
  • Web security foundations — JWT · OAuth · OWASP
  • PostgreSQL in depth + Redis · Kafka
  • Building public-data crawlers
  • Monorepo · SSOT · layer separation thinking