03-바이브코딩

1. AI 에이전트로 웹페이지 만들기

1.1. Claude VS Gemini

사용이미지

프롬프트

    # Role
    당신은 10년 차 시니어 프론트엔드 개발자이자 UI/UX 전문가입니다.

    # Task
    첨부된 UI 디자인(스크린샷)을 분석하여, 즉시 실행 가능한 '단일 컴포넌트 코드'로 변환하세요.

    # Tech Stack
    - HTML
    - CSS
    - fontawsome (아이콘 필요 시 사용)

    # Requirements (Detail)
    1. **시각적 일치성:** 이미지의 레이아웃, 여백(Padding/Margin), 색상 톤, 폰트 크기를 최대한 동일하게 구현하세요.
    2. **현대적 디자인 적용:** 스크린샷이 다소 투박하더라도, 결과물은 모던하고 세련된 스타일(부드러운 그림자, 둥근 모서리, 적절한 호버 효과)로 업그레이드하여 코딩하세요.
    3. **반응형:** 모바일과 데스크톱 모두에서 깨지지 않고 중앙 정렬되도록 구현하세요.
    4. **인터랙션:**
    - 입력창에 focus가 되면 테두리 색상이 변경되어야 합니다.
    - 버튼 클릭 시 "로그인 시도 중..."이라는 alert 창이 뜨도록 기능을 추가하세요.

    # Output Format
    - 설명은 최소화하고, Artifacts를 통해 렌더링 된 결과물과 전체 코드를 보여주세요.

결과
- 클로드-sonnet 4.5
- 제미나이-pro3