[AI 에이전트] 바이브코딩 웹사이트 제작 마스터 프롬프트

📢 [프롬프트 라이브러리 요약]

단순히 "쇼핑몰 만들어줘"라고 하면 AI는 뻔한 결과물만 뱉어냅니다. 이 프롬프트는 AI를 진정한 '에이전트(Agent)'로 활용하여 1) 레퍼런스 분석 -> 2) 구조 기획 -> 3) 코드 작성의 3단계 프로세스를 밟도록 강제하는 마스터 프롬프트입니다.

💡 사용 팁

`[website_type]` 부분에 '모던한 SaaS 랜딩페이지', '다크모드 포트폴리오' 등을 입력하고, 핀터레스트나 드리블에서 찾은 레퍼런스 이미지를 프롬프트와 함께 첨부해 보세요. 에이전트가 레퍼런스의 '바이브(Vibe)'를 정확히 흡수하여 코드로 구현해 냅니다.

✨ [프롬프트 실행 결과 미리보기]

이 프롬프트를 Cursor나 Claude에 입력하면, 단순한 텍스트 답변이 아니라 '실제로 작동하는 아키텍처 기획안'을 먼저 제시합니다.

에이전트의 답변 예시: \"제공해주신 다크모드 대시보드 레퍼런스를 분석했습니다. 사이드바 네비게이션과 우측 위젯 그리드 구조로 나누는 것을 제안합니다. 승인해주시면 `Lucide React` 아이콘과 `Tailwind CSS`의 `backdrop-blur` 옵션을 적용해 글래스모피즘 코드를 작성하겠습니다. 진행할까요?\"

이처럼 개발자가 일일이 지시하지 않아도, 에이전트가 먼저 구조를 제안하고 컨펌을 받는 '진짜 시니어 개발자'처럼 행동하게 됩니다.

💎 [2GOSOO Lab 실무 꿀팁: 모델 스위칭 전략]

토큰 비용을 획기적으로 아끼면서 최고의 퀄리티를 뽑아내는 바이브코딩 핵심 전략입니다.

뼈대 구축 (저렴한 모델): 처음 레이아웃 구조를 잡고 기초 로직을 짤 때는 빠르고 저렴한 모델(GPT-4o-mini, Claude 3 Haiku 등)을 사용하세요.

디자인 입히기 (비싼 모델): 기초 공사가 끝나면, CSS와 UI/UX 디테일을 입힐 때만 미적 감각이 뛰어난 하이엔드 모델(Claude 3.5 Sonnet 등)로 스위칭하세요!

이 전략을 사용하면 무거운 모델만 주야장천 쓸 때보다 API 비용을 5배 이상 절약하면서 완벽한 결과물을 얻을 수 있습니다.

원본 프롬프트

ENGLISH PROMPT

You are an expert AI Web Developer Agent. I want to build a [website_type]. 

Step 1: Analyze the provided reference image/URL. Identify the core color palette, typography style, and layout structure.
Step 2: Propose a component hierarchy (e.g., Header, Hero Section, Feature Grid, Footer).
Step 3: Once I approve the hierarchy, generate the React/Next.js code using Tailwind CSS for styling, ensuring a fully responsive and modern design.

KOREAN TRANSLATION

당신은 전문 AI 웹 개발자 에이전트입니다. 저는 [웹사이트_유형]을 구축하고자 합니다.

1단계: 제공된 레퍼런스 이미지/URL을 분석하세요. 핵심 색상 팔레트, 타이포그래피 스타일, 레이아웃 구조를 파악하세요.
2단계: 컴포넌트 계층 구조(예: 헤더, 히어로 섹션, 기능 그리드, 푸터)를 제안하세요.
3단계: 제가 계층 구조를 승인하면 Tailwind CSS를 사용하여 React/Next.js 코드를 생성하고, 완벽하게 반응형이며 현대적인 디자인을 보장하세요.

In-Article Ad[AdSense Placeholder]

[AI 에이전트] 바이브코딩 웹사이트 제작 마스터 프롬프트

💡 사용 팁

✨ [프롬프트 실행 결과 미리보기]

💎 [2GOSOO Lab 실무 꿀팁: 모델 스위칭 전략]

원본 프롬프트

비슷한 검증된 프롬프트 추천