직접 시도해보려면 이 프롬프트를 개발자 Console에 복사하세요!

내용
System당신의 임무는 주어진 사양에 따라 원페이지 웹사이트를 만드는 것입니다. 이 웹사이트는 HTML 파일에 JavaScript와 CSS가 내장된 형태로 제공됩니다. 웹사이트는 드롭다운 메뉴, 동적 텍스트 및 콘텐츠, 클릭 가능한 버튼 등 다양한 매력적이고 상호작용적인 디자인 기능을 포함해야 합니다. 디자인이 시각적으로 매력적이고, 반응형이며, 사용자 친화적인지 확인하세요. HTML, CSS 및 JavaScript 코드는 가독성과 유지보수성을 위해 잘 구조화되고, 효율적으로 구성되며, 적절한 주석이 달려 있어야 합니다.
User”EduQuest”라는 온라인 학습 플랫폼을 위한 원페이지 웹사이트를 다음 기능과 섹션으로 만들어주세요:

1. 과정 카테고리(수학, 과학, 언어, 예술)로 연결되는 링크와 검색창이 있는 고정 네비게이션 바.
2. 온라인으로 학습하는 학생들을 보여주는 비디오 배경, 3초마다 “자신의 속도로 학습하세요”, “새로운 열정을 발견하세요”, “시야를 넓히세요” 사이를 순환하는 동적 태그라인, 그리고 과정 카탈로그로 연결되는 “시작하기” 버튼이 있는 히어로 섹션.
3. 과정 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 과정 카드를 표시하는 추천 과정 섹션.
4. 학습 스타일과 관심사를 결정하기 위한 짧은 퀴즈와 퀴즈를 시작하는 버튼이 있는 상호작용적인 “학습 경로” 섹션.
5. 만족한 학생들의 추천사가 담긴 “성공 사례” 섹션으로, 추천사 텍스트와 학생 이름을 위한 플레이스홀더가 있습니다.
6. 플랫폼의 블로그, FAQ, 개인정보 보호정책으로 연결되는 링크와 연락처 양식 및 고객 지원 정보가 있는 모달 창을 여는 “문의하기” 버튼이 있는 푸터.

비디오 배경, 과정 카드, 추천사를 위한 채우기용 플레이스홀더 콘텐츠를 포함하세요. CSS 스타일은 <head> 섹션의 <style> 태그 내에 포함하고 JavaScript 코드는 <body> 섹션 끝에 있는 <script> 태그 내에 배치하세요.

JavaScript 코드는 히어로 섹션의 동적 태그라인을 처리하여 3초마다 다른 태그라인을 순환해야 합니다.

​
예시 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduQuest - Online Learning Platform</title>
    <style>
        /* CSS Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
        }

        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 24px;
            margin-bottom: 40px;
        }

        .hero button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .featured-courses, .success-stories {
            padding: 40px;
        }

        .course-card {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        .testimonial {
            background-color: #f5f5f5;
            padding: 20px;
            margin-bottom: 20px;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }

        footer button {
            padding: 10px 20px;
            font-size: 18px;
            background-color: #fff;
            color: #333;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Math</a></li>
                <li><a href="#">Science</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">Arts</a></li>
                <li><input type="text" placeholder="Search"></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <video src="placeholder-video.mp4" autoplay loop muted></video>
        <h1>Welcome to EduQuest</h1>
        <p id="tagline">Learn at your own pace</p>
        <button>Get Started</button>
    </section>

    <section class="featured-courses">
        <h2>Featured Courses</h2>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: John Doe</p>
            <p>Course description goes here.</p>
        </div>
        <div class="course-card">
            <img src="placeholder-course-image.jpg" alt="Course Image">
            <h3>Course Title</h3>
            <p>Instructor: Jane Smith</p>
            <p>Course description goes here.</p>
        </div>
    </section>

    <section class="success-stories">
        <h2>Success Stories</h2>
        <div class="testimonial">
            <p>"EduQuest helped me learn a new skill and advance my career. Highly recommended!"</p>
            <p>- John Doe</p>
        </div>
        <div class="testimonial">
            <p>"I never thought I could learn a new language online, but EduQuest made it possible. Thank you!"</p>
            <p>- Jane Smith</p>
        </div>
    </section>

    <footer>
        <a href="#">Blog</a>
        <a href="#">FAQ</a>
        <a href="#">Privacy Policy</a>
        <button>Contact Us</button>
    </footer>

    <script>
        // JavaScript Code
        const taglines = [
            "Learn at your own pace",
            "Discover new passions",
            "Expand your horizons"
        ];

        let index = 0;
        const taglineElement = document.getElementById("tagline");

        function rotateTagline() {
            taglineElement.textContent = taglines[index];
            index = (index + 1) % taglines.length;
        }

        setInterval(rotateTagline, 3000);
    </script>
</body>
</html>

이 코드는 다음과 같은 기능과 섹션이 있는 “EduQuest”를 위한 원페이지 웹사이트를 만듭니다:

과정 카테고리(수학, 과학, 언어, 예술)로 연결되는 링크와 검색창이 있는 고정 네비게이션 바.

플레이스홀더 비디오 배경, 3초마다 “자신의 속도로 학습하세요”, “새로운 열정을 발견하세요”, “시야를 넓히세요” 사이를 순환하는 동적 태그라인, 그리고 “시작하기” 버튼이 있는 히어로 섹션.

과정 이미지, 제목, 강사, 설명을 위한 플레이스홀더가 있는 과정 카드를 표시하는 추천 과정 섹션.

만족한 학생들의 추천사가 담긴 “성공 사례” 섹션으로, 추천사 텍스트와 학생 이름을 위한 플레이스홀더가 있습니다.

플랫폼의 블로그, FAQ, 개인정보 보호정책으로 연결되는 링크와 “문의하기” 버튼이 있는 푸터.

CSS 스타일은 <head> 섹션의 <style> 태그 내에 포함되어 있고, JavaScript 코드는 <body> 섹션 끝에 있는 <script> 태그 내에 배치되어 있습니다.

JavaScript 코드는 setInterval 함수를 사용하여 3초마다 다른 태그라인을 순환하며 히어로 섹션의 동적 태그라인을 처리합니다.

비디오 배경, 과정 이미지, 추천사는 플레이스홀더이며 실제 콘텐츠로 대체해야 합니다.

​
API 요청

import anthropic

client = anthropic.Anthropic( # defaults to os.environ.get("ANTHROPIC_API_KEY")
api_key="my_api_key",
)
message = client.messages.create(
  model="claude-opus-4-20250514",
  max_tokens=4000,
  temperature=0,
  system="Your task is to create a one-page website based on the given specifications, delivered as an HTML file with embedded JavaScript and CSS. The website should incorporate a variety of engaging and interactive design features, such as drop-down menus, dynamic text and content, clickable buttons, and more. Ensure that the design is visually appealing, responsive, and user-friendly. The HTML, CSS, and JavaScript code should be well-structured, efficiently organized, and properly commented for readability and maintainability.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Create a one-page website for an online learning platform called \"EduQuest\" with the following features and sections: \n \n1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar. \n \n2. A hero section with a video background showcasing students learning online, a dynamic tagline that rotates between \"Learn at your own pace,\" \"Discover new passions,\" and \"Expand your horizons\" every 3 seconds, and a \"Get Started\" button leading to a course catalog. \n \n3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions. \n \n4. An interactive \"Learning Paths\" section with a short quiz to determine learning styles and interests, and a button to start the quiz. \n \n5. A \"Success Stories\" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names. \n \n6. A footer with links to the platform's blog, FAQ, privacy policy, and a \"Contact Us\" button that opens a modal window with a contact form and customer support information. \n \nInclude filler placeholder content for the video background, course cards, and testimonials. Embed the CSS styles within the `<style>` tag in the `<head>` section and place the JavaScript code within the `<script>` tag at the end of the `<body>` section. \n \nThe JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds."
        }
      ]
    }
  ]
)
print(message.content)