10 바이브코딩

1. 피그마(Figam Design)

1. 피그마 디자인 파일을 Make로 전송한다.

2. 메이크(Figam Make)

AI 크레딧: stater 플랜의 경우 매달 500크레딧 생성 일일한도 150 크레딧 소진 비용은 코드의 복잡도에 따라 다름

2.1. 생성하기

1. 피그마 디자인 파일의 프레임에서 우클릭하여 Make로 전송 선택
2. 아래의 프롬프트 입력 후 메시지 전송

  아래 요구사항에 맞게 구현해
  [요구사항]
  React
  순수한 css 외부파일(tailwind css 쓰지마)
  순수한 자바스크립트(typescript 쓰지마)

3. 이후 결과물에 따라 프롬프트 수정

4. 코드다운로드

2.2. 깃으로 푸쉬하기

1. 깃허브와 연동
2. 디자인 파일이 있는 팀 프로젝트 선택
3. 리포지토리 생성
4. 깃에 푸쉬하기

3. 수정하기

1. 압축을 풀고 해당 폴더를 vscode에서 루트경로 열기
2. 터미널에 npm i 실행
3. figma:asset 의 경로 변경

 figma:asset/ 로 임포트된 파일 경로를 모두 https://www.dummyimg.in/placeholder 로 바꿔

4. 권한요청시 승인한다. 5. 변경완료후 터미널 창에 아래 명령어를 입력하여 결과를 확인한다

1
npm run dev

6. 채팅창에 아래의 프롬프트 입력하여 기술스택을 변경한다

이 프로젝트의 기술스택을 변경해
typescript -> javascript
tailwind css -> vanilla CSS

이 프로젝트의 기술스택을 변경해
react -> html
typescript -> javascript
tailwind css -> vanilla CSS

7. 오류 발생시 메시지를 복사하여 수정요청 한다.

build 테스트 하고 디버깅해

8. 마지막으로 미사용중인 의존성을 삭제한다.

이 프로젝트에서 불필요한 의존성 파일과 폴더를 삭제해