生成AIでサイトを作ってみる2

はじめに

前回はプロンプトにてサイトを生成しました。
今回はVue.jsで画像キャプチャーを参考にデザインのコードをV0に生成してもらいます。

↓前回の記事
https://qiita.com/iolu-0801/items/3b0932747a33c4253690

実際に生成してみる

参考サイト

参考サイトはVue.jsのサイトにします。

V0に入力したこと

サイトのキャプチャー

プロンプト : 「Vue.jsでキャプチャーのような画面を作成してください。右上のスイッチでダークモードに切り替えるように実装してください。」

画像キャプチャーにプロンプトを追加することによって、より正確にコードを生成してくれます。

結果

生成されたデザイン

生成されたコード

qiita.rb

<template>
  <div :class="{ 'dark': isDark }">
    <div class="min-h-screen bg-white dark:bg-gray-900 transition-colors duration-300">
      <!-- Header -->
      <header class="fixed w-full top-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <img src="/placeholder.svg?height=32&width=32" alt="Vue logo" class="h-8 w-8" />
            <span class="font-semibold text-gray-900 dark:text-white">Vue.js</span>
          </div>
          
          <!-- Navigation Links -->
          <div class="hidden md:flex items-center space-x-8">
            <a v-for="link in links" :key="link" 
               class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors">
              {{ link }}
            </a>
          </div>

          <!-- Dark Mode Toggle -->
          <button @click="toggleDark" 
                  class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <SunIcon v-if="isDark" class="h-5 w-5 text-gray-300" />
            <MoonIcon v-else class="h-5 w-5 text-gray-600" />
          </button>
        </nav>
      </header>

      <!-- Hero Section -->
      <main class="pt-24 pb-16">
        <div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h1 class="text-5xl font-bold tracking-tight text-gray-900 dark:text-white mb-6">
            The <span class="text-emerald-500">Progressive</span><br />
            JavaScript Framework
          </h1>
          <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
            Webユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。
          </p>
          <div class="flex flex-wrap justify-center gap-4">
            <button class="px-6 py-3 bg-emerald-500 text-white rounded-full hover:bg-emerald-600 transition-colors">
              Vue を始める
            </button>
            <button class="px-6 py-3 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
              インストール
            </button>
          </div>
        </div>

        <!-- Features -->
        <div class="max-w-7xl mx-auto mt-20 px-4 sm:px-6 lg:px-8">
          <div class="grid md:grid-cols-3 gap-8">
            <div v-for="feature in features" :key="feature.title" 
                 class="p-6 rounded-lg bg-gray-50 dark:bg-gray-800">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
                {{ feature.title }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300">
                {{ feature.description }}
              </p>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { SunIcon, MoonIcon } from 'lucide-vue-next'

const isDark = ref(false)
const toggleDark = () => isDark.value = !isDark.value

const links = ['ドキュメント', 'API', 'プレイグラウンド', 'エコシステム', '開発', 'スポンサー']

const features = [
  {
    title: '親しみやすい',
    description: '標準的なHTMLやCSSやJavaScriptのナレッジがあれば、ドキュメントを読んで、すぐにVueでコーディングを始められます。'
  },
  {
    title: '高パフォーマンス',
    description: '実用的な最適化が施された、とてもコンパクトなコンパイラで最新化されたレンダリングシステム。'
  },
  {
    title: '多用途',
    description: '徐々に採用可能なスタックで、ライブラリから、フレームワークのフルスタックまで、リッチで複雑な機能を持つエコシステム。'
  }
]
</script>

まとめ

V0はプロンプトのほか、デザインを画像やモックなどから生成することが可能であり、デザインの作成がかなり容易になりました。

ClaudeのArtifactsでも、V0のような生成を行えるので今後検証してみたいと思います。