Cursor에서 Next.js 환경생성 및 figma디자인 가져오기(디자이너)

워크플로우

 

1. Nest.js 초기 환경세팅 

 

  Cursor 터미널에서 직접

npx create-next-app@latest frontend --ts --tailwind --eslint --src-dir --app && \
cd Frontend/src && mkdir components styles

 

 

  또는  바이브코딩 

 

"Next.js 기반으로 프로젝트를 생성하고 프론트엔드 부분만 구성하고 백엔드쪽은 기본폴더만 만들어줘. 필요한 데이타나 api가 있다면 임의로 너가 만들어줘. App Router 구조를 사용하고 Tailwind도 포함해줘." 

 

 

 

 

2. 디렉토리 구조 확인

my-project/
├─ src/ 
 │     ├─ app/                    ← 페이지들 (App Router)
 │      │      ├─ page.tsx     ← 홈화면
 │     ├─ components/     ← 버튼, 카드 등 재사용 UI
 │     ├─ styles/                ← 전역 스타일, tailwind globals.css
 │     └─ assets/              ← 이미지나 아이콘 파일

 

 

 

3. Figma MCP 연결

 

4. Figma 디자인 파일 순수 html + tailwind로 Cursor로 가져오기

 

5. 기본폰트 설정 및 폰트 아이콘 등 설정

 

6. 가져온 Html 파일 next.js 파일로 변환 및 오류수정