[바이브코딩] 플로우 제안 & 프롬프트 모음

 

1. Cursor나 Clude Code에게 할 일 정해주기( 페르소나 정하고- 목표 정하고 - 기술스틱을 정해준다)

 

"너는 20년 경력의 완벽한 솔루션 아키텍처(개발자)야. or 너는 프론트엔드 시니어 엔지니어이자 DX(Developer Experience) 설계자야. ​ 지금부터 우리가 함께 만들 프로젝트에 대해 대화하자. 지금부터 우리는 서비스를 기획하는 작업을 진행할꺼야. ​ 내가 만들고 싶은 것에 대해 얘기하면 필요한 것들에 대한 질문을 해줘. ​ 우리는 [이런저런...... ] 프로젝트를 만들거야. ​ tech stack ​ 1. next.js (프레임워크) 2. TypeScript (랭귀지) 3. Tailwindcss (css) 4. Shadcn(ui) 5. Recharts(차트) 6. Supabase - (datebase-sass) - 안될경우 SQLite 개발 DB 7. Prisma - (orm) 8. Pretendard GOV (폰트)   ​ ​ 관리자 페이지는 [...]식으로 일반 페이지는 [....]식으로 만들고 싶어"

​

중요

• 항상 Cursor에게 “위에 설정한 컨셉 유지해” 라고 상기시키기.
• 새로운 기능 추가할 때: “이 프로젝트의 기존 구조와 톤을 유지하면서…”를 꼭 적기.
• 헷갈리면: “현재 코드 기준으로, 이 부분 리팩터링해줘”라고 구체적으로 지시.

 

​

 

 

​

​

2. 계속 대화해서 좋은 대답을 이끌어 낸다

​

나는 이렇게 생각하는데 네 생각은 어때?

 

" 여기에는 이런 이런 기능이 들어가야 될 것 같은데 너는 어때?" " 여기는 어떤 기능들이 필요할까?"

 

​

​

​

​

3. 프로젝트 기획서(.md) 생성

​

"지금까지 우리가 계획한 문서를 md로 만들어줘"

​

​

​

 

4. github연결

github branch이용해서 작업한 소스 관리 하면서 작업

​

​

 

 

5. 프로젝트 생성

​

"이 만들어진 기획서를 바탕으로 프로젝트 개발을 단계별로 시작해보자. 넌 경력 20년의 최고의 개발자이니 오류없이 순서대로 구현해줘"

 

​

.파일 경로 잘 확인할 것

.마지막에 최신문서로 원하면 use context7 붙일 것

​

​

​

​

​

5. 디자인 생성

​

디자인 생성하면서 중간 중간 웹실행(npm run dev)하면서 확인.수정

​

*디자인은 피그마mcp 연결하거나 figma make에서 순수 html과tailwind로 작성후 소스 가져와도 됨

*플러그인 stagewise 이용해서 디자인 변경 가능 ( 맥 : cmd+shift+p ) 클릭- 상단 ">stagewise: auto-seup...." 선택해서 실행

​

​

​

 

​

​

6. 기능 생성 및 수정

​중간 중간 만들어진 프로젝트를 md파일로 정리하면서 진행한다.

 

오류 확인 playwright이용해서 사이트 사이트 테스트하고 오류 있는 부분 수정해줘.

 

 

​

7. 서버연결

​

"backend쪽은 Supabase에 올릴거야. 연결에 해줘. "

​

​

​

​

​

* 작업 중간중간 작업 내용을 기록으로 정리할 것 (" md파일로 지금까지 작업한 내용을 작성 해줘" )

* 중간중간 github에 카밋

 

 

 

​

---

 

 

 

​

​

UI/UX 디자인 퀼리티 높이기

​

1. 원하는 홈페이지 디자인 url 복사해서

2. gpt 가서 아래 프롬프트 - json or md(마크다운)파일 형태로 다운로드

http://홈페이지 url 여기 페이지 방문해서 UX/UI 디자인 원칙을 json파일로 정리해줘 (html이면 태그와 스타일을 사진이면 이미지를 읽어서 파악해서 정리해줘) 이때 컨텐츠와 디자인요소(컬러. 텍스트, 레이아웃, 컴포넌트, 그 외 모든 것들)을 연결지어서 맥락을 포함한 원칙으로 정리해서 다운로드 받을 수 있게 해줘.

3. 다운 받은 Json 파일 다운 받아서 Cursor가서 파일 넣고

@파일.json 파일 참고해서, 해당 페이지의 ui 디자인을 모달을 포함해서 전체적으로 리팩토링(개선)해줘. 이때 메인 칼라와 light theme은 유지해줘.

​

​

​

​

원본사진 선명하게

아래 지침에 따라 첨부된 이미지를 스튜디오에서 찍은 것처럼 선명하게 바꿔줘. ​ 색상보증 : 원본 색감은 그대로 유지하되. 살짝 채도를 높여 더욱 선명하고 새끗한 고화질 사진으로 바꿔주세요. 대비/밝기 : 디테일이 살아나도록 명암 대비를 높이고 전체적인 밝기는 중간정도로 하세요. 리플렉션(반사) : 원하는 경우 제품 바다로 앞 바닥에 아련한 반사효과 느낌을 더해주세요. 노이즈 제거 & 샤프닝 : iso 노이즈는 최소화하고, 제품의 가장자리와 로고 등을 선명하게 적용해 주세요. 형태유지:제품의 모양, 비율. 디자인 요소(로고,텍스처, 대소문자, 글씨체등)이 왜곡하지 말고, 원본 그대로 유지해주세요. 결과물은 선명하고 현실적인 고해상도 이미지여야 합니다.

​

​

​

​

tailwind설치시 오류날때 (버전 다운해서 설치)

tailwindcss를 설치할때는 아래 지침에 따라 설치해줘 ​ 1.TailwindCSS는 3.x 버전으로 설치해줘. (4.x는 ESM-only라 오류 나니까 쓰지 마) 2. tailwind.config.js와 postcss.config.js까지 자동 생성해줘. 3. index.css에 아래 세 줄 꼭 넣어줘. @tailwind base; @tailwind components; @tailwind utilities; 4. tailwind.config.js의 content 설정도 꼭 해줘: content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"] 5. src/main.jsx 또는 main.tsx에서 index.css를 꼭 import 해줘. 6. 오류 없이 작동하도록 npm 설치 순서도 정확하게 해줘. ​ 전체 과정이 안정적으로 실행될 수 있게 하나씩 순서대로 알려줘.

​