Context Is Everything

Lesson 3

The most powerful thing you can give Claude Code isn’t a perfect prompt — it’s the right context. When Claude Code can see your existing code, it produces results that fit seamlessly.

The @file pattern

In Claude Code, prefix a filename with @ to include it in context:

@style.css 에 정의된 CSS 변수를 사용해서 카드 컴포넌트를 만들어줘.
배경은 --bg-2, 텍스트는 --text, 테두리는 --border 사용.

Claude Code reads style.css, sees your design tokens, and generates code that uses them — not hardcoded values that break your theme.

Design system as context

If you have a design system (even a small one), share it upfront:

다음 디자인 시스템 토큰을 사용해:
--color-primary: #2563eb
--space-4: 16px
--radius-md: 8px
--font-sans: 'Inter', sans-serif

이 토큰으로 pricing card 컴포넌트를 만들어줘.

Every component generated in that session will stay on-system automatically.

Existing code as context

When modifying something, always share what you have:

@components/nav.html 이 파일을 보고,
스크롤 시 배경이 흰색으로 바뀌는 효과를 추가해줘.
backdrop-filter: blur(12px) 도 적용하고.
기존 CSS는 건드리지 마, 새 클래스만 추가해.

The instruction “기존 CSS는 건드리지 마” is a constraint. Without it, the AI might refactor your entire stylesheet.

Demo walkthrough

The demo shows two versions of the same card component:

  • Without context — hardcoded values, standalone
  • With context — uses CSS custom properties, adapts to light/dark mode

Toggle the dark mode switch to see how the context-aware version adapts automatically.