以下のツイートを見て、「UI Sketcher」が気になったので使ってみました。
Cursorのインストール
以下の記事を参考に、Cursorをインストールしてください。
UI Sketcherのインストール
拡張機能の検索バーで「UI Sketcher」と検索し、インストールします。
OpenAIキーの設定
「> UI Sketcher: Set OpenAI API Token」と入力し、Enterキーを押します。
OpenAIのAPIキーを入力して、Enterキーを押します。
右下に以下のメッセージが表示されれば、設定完了です。
HTML Previewのインストール
VSCode内でHTMLのプレビューを表示する「HTML Preview」をインストールします。
手書きボードとHTML Previewを立ち上げる
「> UI Sketcher: Open drawing board」と入力し、Enterキーを押します。
ボードが立ち上がります。
「> HTML: Open Preview to the Side」と入力し、Enterキーを押します。
プレビュー画面が表示されます。見やすくするために、縦二分割にします。
上のボードに画面レイアウトを描いて、「Make Real」をクリックします。
右のエディタにコードが入力され、その結果が右下のプレビュー画面に表示されます。
完全に再現はできていませんね。私の画力の問題でしょうか。
コードは以下のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wireframe to Code</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.gallery {
display: flex;
justify-content: space-around;
padding: 20px;
background-color: #f7f7f7;
}
.gallery img {
width: 150px;
height: 150px;
background-color: #ddd; /* Placeholder for images */
}
.content {
padding: 20px;
background-color: #eaeaea;
}
.content p {
background-color: #fff;
padding: 15px;
margin-top: 0;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="gallery">
<!-- Placeholder images from solid colored rectangles -->
<img src="https://via.placeholder.com/150" alt="Gallery Image 1">
<img src="https://via.placeholder.com/150" alt="Gallery Image 2">
<img src="https://via.placeholder.com/150" alt="Gallery Image 3">
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam.
</p>
</div>
</body>
</html>
ヘッダーやリンクなどは認識していますね。
画像もアップロードすることができます。写真マークを選択し、画像をアップロードします。
今回は私が開発を担当しているFABPRO.jpのホーム画面をスクショしてアップロードしてみました。
結果は以下のとおりです。
期待していたよりもイマイチの結果とはなりましたが、画像からもある程度はコーディングができることが分かりました。
コードは以下のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>FABPRO NEWS</title>
<style>
body {
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro', Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #4C4C4C;
color: white;
}
.top-bar {
background-color: #006341;
padding: 10px 0;
text-align: center;
}
.logo {
display: inline-block;
background: url('https://via.placeholder.com/220x60?text=ABPRO') no-repeat;
width: 220px;
height: 60px;
text-indent: -9999px;
}
nav {
display: flex;
justify-content: center;
gap: 30px;
padding: 10px 0;
background-color: #007353;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
.header-title {
text-align: center;
font-size: 36px;
padding: 20px 0;
background-color: #232323;
}
.news-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 20px;
}
.news-item {
position: relative;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.news-item img {
width: 100%;
display: block;
}
.news-item .news-caption {
background-color: rgba(0,0,0,0.7);
color: white;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
box-sizing: border-box;
}
.link-bar {
background-color: #0C3C26;
padding: 10px 0;
font-size: 0.8em;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.link-bar a {
color: #FFD700;
text-decoration: none;
transition: color 0.2s;
}
.link-bar a:hover {
color: #FFFFFF;
}
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: white;
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="top-bar">
<span class="logo">ABPRO</span>
</div>
<nav>
<a href="#">大会情報</a>
<a href="#">競技場情報</a>
<a href="#">練習日程</a>
<a href="#">記録</a>
</nav>
<div class="header-title">NEWS</div>
<div class="news-container">
<div class="news-item">
<img src="https://unsplash.it/300/200?random=1" alt="News Image 1">
<div class="news-caption">装備とMDC情報。</div>
</div>
<div class="news-item">
<img src="https://unsplash.it/300/200?random=2" alt="News Image 2">
<div class="news-caption">完走したみんなの感想 vol.8 ほろ苦いその結果</div>
</div>
<div class="news-item">
<img src="https://unsplash.it/300/200?random=3" alt="News Image 3">
<div class="news-caption">Vol.12.1 およびその前の走り込み、7月度向けて</div>
</div>
</div>
<div class="link-bar">
<a href="https://fabpro.jp/2023/0730rk.html">今月の走者</a>
<a href="https://fabpro.jp/2023/0728tv.html">講習の案内 詳細に</a>
おわりに
今回は「UI Sketcher」を使ってみました。私の使い方に問題があるかもしれませんが、一発で優れたデザインを生成する能力はまだ不十分のようです。これからの成長が楽しみです！最後まで読んでいただき、ありがとうございました！
参考文献