Cursor - Making Personal Link in Bio page

 

1. ChatGPT 프롬프트

내 전용 링크 인 바이오 서비스를 만들려고해.
서비스를 만들기 위해서 ai에게 전달할 '화면설계서'를 만들고 싶어.

내 서비스에 넣고 싶은 것은 다음과 같아.
1. 오픈 카카오톡 링크 
2. 유튜브 링크 
3. 스레드 링크
4.링크드인 링크 
5. 다크/화이트 테마 변경 
6. 문의하기 버튼 (버튼 클릭 시 모달 팝업으로 이름, 이메일 입력 폼, 입력 시 노션 데이터베이스에 저장)

내 서비스의 디자인 컨셉 : 단순함, 세련됨, 현대적

이 작업을 더 완벽하게 수행하기 위해 추가로 필요한 정보가 있다면 나에게 질문해줘.

 

2. Cursor

화면설계서.md 생성

@화면설계서
이 화면설계서대로 웹 사이트 만들어줘

 

3. Dribbble

https://dribbble.com/

Dribbble - Discover the World’s Top Designers & Creative Professionals

참고할 디자인 cursor에 붙여넣은 후 생성된 디자인 확인하며 수정

 

4. Notion

전체 데이터베이스 생성

API_KEY, DATABASE_ID .env 파일에 저장

현재 웹 사이트에 있는 모달 팝업에 폼을 입력하면 노션 데이터베이스에 저장되게 해줘
데이터베이스의 속성은 '이름', '이메일', '문의하기' 야.

NOTION_API_KEY, NOTION_DATABASE_ID 는 .env 에 작성되어있어.

 

 

5. Connect Link

pdf 파일들은 구글 드라이브 이용하여 링크 사용

그 외 Blog, Github, Linkdin은 주소 anchor에 붙여넣기

 

6. Publish via Vercel

npm install -g vercel

vercel login

vercel --prod

 

 

<RESULT>

https://linktree-sieonjeong.vercel.app/

Sieon Jeong | Link in Bio