바이브코딩

1. 피그마(Figam Design)

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

2. 메이크(Figam Make)

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

2.1. 생성하기

Make보기

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

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

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

2. 코드다운로드

2.2. 깃으로 푸쉬하기

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

3. 수정하기

완료코드받기

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

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

4. 권한요청시 승인한다. 5. 변경완료후 터미널 창에 아래 명령어를 입력하여 결과를 확인한다 bash npm run dev 6. 채팅창에 아래의 프롬프트 입력하여 기술스택을 변경한다 txt title="react 개발시 프롬프트" 이 프로젝트의 기술스택을 변경해 typescript -> javascript tailwind css -> vanilla CSS txt title="html 개발시 프롬프트" 이 프로젝트의 기술스택을 변경해 react -> html typescript -> javascript tailwind css -> vanilla CSS

1. 오류 발생시 메시지를 복사하여 수정요청 한다. txt title="프롬프트" build 테스트 하고 디버깅해
2. 마지막으로 미사용중인 의존성을 삭제한다. txt title="프롬프트" 이 프로젝트에서 불필요한 의존성 파일과 폴더를 삭제해