Assistente de sites

Copie este prompt para o nosso Console de desenvolvedor para experimentá-lo você mesmo!

Conteúdo

System Sua tarefa é criar um site de uma página com base nas especificações fornecidas, entregue como um arquivo HTML com JavaScript e CSS incorporados. O site deve incorporar uma variedade de recursos de design envolventes e interativos, como menus suspensos, texto e conteúdo dinâmicos, botões clicáveis e muito mais. Certifique-se de que o design seja visualmente atraente, responsivo e amigável ao usuário. O código HTML, CSS e JavaScript deve ser bem estruturado, organizado de forma eficiente e devidamente comentado para legibilidade e manutenção.

User Crie um site de uma página para uma plataforma de aprendizado online chamada “EduQuest” com os seguintes recursos e seções:

1. Uma barra de navegação fixa com links para categorias de cursos (Matemática, Ciências, Idiomas, Artes) e uma barra de pesquisa.
2. Uma seção hero com um plano de fundo de vídeo mostrando estudantes aprendendo online, um slogan dinâmico que alterna entre “Aprenda no seu próprio ritmo”, “Descubra novas paixões” e “Expanda seus horizontes” a cada 3 segundos, e um botão “Começar” que leva a um catálogo de cursos.
3. Uma seção de cursos em destaque exibindo cards de cursos com espaços reservados para imagens, títulos, instrutores e descrições dos cursos.
4. Uma seção interativa de “Caminhos de Aprendizagem” com um questionário curto para determinar estilos de aprendizagem e interesses, e um botão para iniciar o questionário.
5. Uma seção “Histórias de Sucesso” com depoimentos de alunos satisfeitos, com espaços reservados para o texto do depoimento e nomes dos alunos.
6. Um rodapé com links para o blog da plataforma, FAQ, política de privacidade e um botão “Contate-nos” que abre uma janela modal com um formulário de contato e informações de suporte ao cliente.

Inclua conteúdo de preenchimento para o plano de fundo de vídeo, cards de cursos e depoimentos. Incorpore os estilos CSS dentro da tag <style> na seção <head> e coloque o código JavaScript dentro da tag <script> no final da seção <body>.

O código JavaScript deve lidar com o slogan dinâmico na seção hero, alternando entre os diferentes slogans a cada 3 segundos.

	Conteúdo
System	Sua tarefa é criar um site de uma página com base nas especificações fornecidas, entregue como um arquivo HTML com JavaScript e CSS incorporados. O site deve incorporar uma variedade de recursos de design envolventes e interativos, como menus suspensos, texto e conteúdo dinâmicos, botões clicáveis e muito mais. Certifique-se de que o design seja visualmente atraente, responsivo e amigável ao usuário. O código HTML, CSS e JavaScript deve ser bem estruturado, organizado de forma eficiente e devidamente comentado para legibilidade e manutenção.
User	Crie um site de uma página para uma plataforma de aprendizado online chamada “EduQuest” com os seguintes recursos e seções: 1. Uma barra de navegação fixa com links para categorias de cursos (Matemática, Ciências, Idiomas, Artes) e uma barra de pesquisa. 2. Uma seção hero com um plano de fundo de vídeo mostrando estudantes aprendendo online, um slogan dinâmico que alterna entre “Aprenda no seu próprio ritmo”, “Descubra novas paixões” e “Expanda seus horizontes” a cada 3 segundos, e um botão “Começar” que leva a um catálogo de cursos. 3. Uma seção de cursos em destaque exibindo cards de cursos com espaços reservados para imagens, títulos, instrutores e descrições dos cursos. 4. Uma seção interativa de “Caminhos de Aprendizagem” com um questionário curto para determinar estilos de aprendizagem e interesses, e um botão para iniciar o questionário. 5. Uma seção “Histórias de Sucesso” com depoimentos de alunos satisfeitos, com espaços reservados para o texto do depoimento e nomes dos alunos. 6. Um rodapé com links para o blog da plataforma, FAQ, política de privacidade e um botão “Contate-nos” que abre uma janela modal com um formulário de contato e informações de suporte ao cliente. Inclua conteúdo de preenchimento para o plano de fundo de vídeo, cards de cursos e depoimentos. Incorpore os estilos CSS dentro da tag `<style>` na seção `<head>` e coloque o código JavaScript dentro da tag `<script>` no final da seção `<body>`. O código JavaScript deve lidar com o slogan dinâmico na seção hero, alternando entre os diferentes slogans a cada 3 segundos.

Exemplo de saída

<!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>

Este código cria um site de uma página para “EduQuest” com os seguintes recursos e seções: Uma barra de navegação fixa com links para categorias de cursos (Matemática, Ciências, Idiomas, Artes) e uma barra de pesquisa. Uma seção hero com um plano de fundo de vídeo placeholder, um slogan dinâmico que alterna entre “Learn at your own pace”, “Discover new passions” e “Expand your horizons” a cada 3 segundos, e um botão “Get Started”. Uma seção de cursos em destaque exibindo cards de cursos com espaços reservados para imagens, títulos, instrutores e descrições dos cursos. Uma seção “Histórias de Sucesso” com depoimentos de alunos satisfeitos, com espaços reservados para o texto do depoimento e nomes dos alunos. Um rodapé com links para o blog da plataforma, FAQ, política de privacidade e um botão “Contact Us”. Os estilos CSS estão incorporados dentro da tag <style> na seção <head>, e o código JavaScript está colocado dentro da tag <script> no final da seção <body>. O código JavaScript lida com o slogan dinâmico na seção hero, alternando entre os diferentes slogans a cada 3 segundos usando a função setInterval. Observe que o plano de fundo de vídeo, imagens de cursos e depoimentos são placeholders e devem ser substituídos por conteúdo real.

Solicitação de 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="Sua tarefa é criar um site de uma página com base nas especificações fornecidas, entregue como um arquivo HTML com JavaScript e CSS incorporados. O site deve incorporar uma variedade de recursos de design envolventes e interativos, como menus suspensos, texto e conteúdo dinâmicos, botões clicáveis e muito mais. Certifique-se de que o design seja visualmente atraente, responsivo e amigável ao usuário. O código HTML, CSS e JavaScript deve ser bem estruturado, organizado de forma eficiente e devidamente comentado para legibilidade e manutenção.",
  messages=[
    {
      "role": "user",
      "content": [
        {
          "type": "text",
          "text": "Crie um site de uma página para uma plataforma de aprendizado online chamada \"EduQuest\" com os seguintes recursos e seções: \n \n1. Uma barra de navegação fixa com links para categorias de cursos (Matemática, Ciências, Idiomas, Artes) e uma barra de pesquisa. \n \n2. Uma seção hero com um plano de fundo de vídeo mostrando estudantes aprendendo online, um slogan dinâmico que alterna entre \"Aprenda no seu próprio ritmo,\" \"Descubra novas paixões,\" e \"Expanda seus horizontes\" a cada 3 segundos, e um botão \"Começar\" que leva a um catálogo de cursos. \n \n3. Uma seção de cursos em destaque exibindo cards de cursos com espaços reservados para imagens, títulos, instrutores e descrições dos cursos. \n \n4. Uma seção interativa de \"Caminhos de Aprendizagem\" com um questionário curto para determinar estilos de aprendizagem e interesses, e um botão para iniciar o questionário. \n \n5. Uma seção \"Histórias de Sucesso\" com depoimentos de alunos satisfeitos, com espaços reservados para o texto do depoimento e nomes dos alunos. \n \n6. Um rodapé com links para o blog da plataforma, FAQ, política de privacidade e um botão \"Contate-nos\" que abre uma janela modal com um formulário de contato e informações de suporte ao cliente. \n \nInclua conteúdo de preenchimento para o plano de fundo de vídeo, cards de cursos e depoimentos. Incorpore os estilos CSS dentro da tag `<style>` na seção `<head>` e coloque o código JavaScript dentro da tag `<script>` no final da seção `<body>`. \n \nO código JavaScript deve lidar com o slogan dinâmico na seção hero, alternando entre os diferentes slogans a cada 3 segundos."
        }
      ]
    }
  ]
)
print(message.content)

Recursos

​Exemplo de saída

​Solicitação de API

Exemplo de saída

Solicitação de API