[코딩Ai] Claude Code / Cursor

1️⃣ 디자인 → 코드로 바꿀 때 (가장 많이 씀)

네가 말한 방식 맞아 👇

• 피그마 화면 캡처 넣고
• “이거 HTML/CSS로 만들어줘”
• “React 컴포넌트로 만들어줘”

👉 그러면 AI가 실제 코드로 변환해줌

---

2️⃣ 디자인 구조 설명시키기

• 화면 이미지 넣고
  👉 “이 UI 구조 분석해줘”

결과:

• 헤더 / 카드 / 버튼 구조 정리
• UX 흐름 설명

---

3️⃣ 기존 코드 개선

• 개발자가 만든 코드 넣고
  👉 “이거 더 깔끔하게 리팩토링해줘”

---

4️⃣ 기능 추가 요청

• “여기에 다크모드 추가해줘”
• “이 버튼 클릭하면 모달 뜨게 해줘”

👉 그냥 말로 설명하면 구현해줌

---

🎯 디자인 기준으로 보면

✔️ 이렇게 쓰면 좋음

• 피그마 → 코드 변환
• 디자인 시스템 만들기
• 컴포넌트 정리
• 반응형 코드 생성

---

❌ 이렇게 생각하면 틀림

👉 “그냥 이미지 넣으면 완벽한 디자인 만들어준다”

→ ❌
AI는 “디자인 툴”이 아니라
👉 디자인 → 코드 / 구조로 바꿔주는 도구

---

👍 현실적인 활용 흐름

1. 피그마로 디자인 만듦
2. Claude에 캡처 넣음
3. 코드 생성
4. 개발 or 수정

---

✔️ 한 줄 정리

👉 디자인을 넣어서 “코드로 바꾸거나 개선하는 데 쓰는 도구”

 

 

---

---

Cursor