Open16

v0やっていき

もっくま(Mistletoe)もっくま(Mistletoe)
  • デザインファイルからの生成、及びその精度
  • 保守性観点でコンポーネント分割などできるか
  • ホスティングできるか
  • 処理をどう追記するか（そもそもコードを別途書くべきか、ツール上でやるべきか）
  • 一度コードを出力したとして、出力したコード＋改定後のデザインファイルを使ったいい感じの見た目の更新ができるか
  • モバイル対応/レスポンシブ対応

このあたりを見てみたい

もっくま(Mistletoe)もっくま(Mistletoe)

というのもProjectsというものを使いたかった

→これそのものはチャットヒストリーにラベルがつけられるだけのやつっぽかった

もっくま(Mistletoe)もっくま(Mistletoe)

プレースホルダーテキストを見ると、ページ丸ごとと言うか、コンポーネント部品を整備・運用していく感じのイメージなのかな？

もっくま(Mistletoe)もっくま(Mistletoe)

生成されたコードはこんな感じ

import { Heart, MessageCircle, Send, Bookmark, MoreHorizontal } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const posts = [
  {
    id: 1,
    user: {
      name: "John Doe",
      username: "johndoe",
      avatar: "/placeholder-user.jpg"
    },
    image: "/placeholder.svg?height=450&width=450",
    likes: 1234,
    caption: "Enjoying a beautiful day at the beach! 🏖️ #summervibes",
    comments: [
      { user: "jane_smith", text: "Looks amazing! 😍" },
      { user: "travel_enthusiast", text: "I'm so jealous right now!" }
    ]
  },
  {
    id: 2,
    user: {
      name: "Alice Johnson",
      username: "alicej",
      avatar: "/placeholder-user.jpg"
    },
    image: "/placeholder.svg?height=450&width=450",
    likes: 987,
    caption: "Just finished my latest painting 🎨 #art #creativity",
    comments: [
      { user: "art_lover", text: "Wow, this is incredible!" },
      { user: "gallery_owner", text: "I'd love to feature this in our next exhibition!" }
    ]
  }
]

function Post({ post }) {
  return (
    <div className="bg-white border border-gray-200 rounded-md mb-4">
      <div className="flex items-center justify-between p-4">
        <div className="flex items-center space-x-2">
          <Avatar>
            <AvatarImage src={post.user.avatar} alt={post.user.name} />
            <AvatarFallback>{post.user.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div>
            <p className="font-semibold">{post.user.username}</p>
            <p className="text-sm text-gray-500">{post.user.name}</p>
          </div>
        </div>
        <Button variant="ghost" size="icon">
          <MoreHorizontal className="h-5 w-5" />
        </Button>
      </div>
      <div className="aspect-square">
        <img src={post.image} alt="Post" className="w-full h-full object-cover" />
      </div>
      <div className="p-4">
        <div className="flex justify-between mb-2">
          <div className="flex space-x-4">
            <Button variant="ghost" size="icon">
              <Heart className="h-6 w-6" />
            </Button>
            <Button variant="ghost" size="icon">
              <MessageCircle className="h-6 w-6" />
            </Button>
            <Button variant="ghost" size="icon">
              <Send className="h-6 w-6" />
            </Button>
          </div>
          <Button variant="ghost" size="icon">
            <Bookmark className="h-6 w-6" />
          </Button>
        </div>
        <p className="font-semibold mb-1">{post.likes.toLocaleString()} likes</p>
        <p>
          <span className="font-semibold">{post.user.username}</span> {post.caption}
        </p>
        <div className="mt-2">
          {post.comments.map((comment, index) => (
            <p key={index}>
              <span className="font-semibold">{comment.user}</span> {comment.text}
            </p>
          ))}
        </div>
        <div className="mt-4">
          <Input placeholder="Add a comment..." className="w-full" />
        </div>
      </div>
    </div>
  )
}

export default function Component() {
  return (
    <div className="max-w-md mx-auto p-4">
      {posts.map(post => (
        <Post key={post.id} post={post} />
      ))}
    </div>
  )
}

ちゃんとtsxで出て偉い

もっくま(Mistletoe)もっくま(Mistletoe)

基本的には当然外部からProp注入する想定のコードが出力されるわけではない。
コンポーネント単体で完結している。
これを元にコピペ&改造する分には十分すぎるコードだけど。

もっくま(Mistletoe)もっくま(Mistletoe)

CSSはTailwindで出ますね。やはり直接デザイン要素をコードに記述するので、生成AIとの相性がよろしいです。

もっくま(Mistletoe)もっくま(Mistletoe)

では次。

デザインはFigmaでデザイナーさんが作成したものがあるとして、それをコード化するアプローチをとってみる。