UI Sketcherを使ってみた

以下のツイートを見て、「UI Sketcher」が気になったので使ってみました。

https://twitter.com/ai_syacho/status/1726993876567859318?s=20

## Cursorのインストール

以下の記事を参考に、Cursorをインストールしてください。

https://note.com/tatsuki_t/n/n8753b55cd82a

　　
## UI Sketcherのインストール

拡張機能の検索バーで「UI Sketcher」と検索し、インストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/b16ad43d-2d90-5bab-1589-faa3eaa29507.png)

　　
## OpenAIキーの設定

「> UI Sketcher: Set OpenAI API Token」と入力し、Enterキーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/bca4a9bd-2afa-9208-9c5d-a5dda764aebc.png)

OpenAIのAPIキーを入力して、Enterキーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/ede71705-56f9-9d69-3b02-1b57644ee852.png)


右下に以下のメッセージが表示されれば、設定完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/8853c096-a4dc-abda-384d-f37fd5a4ec9b.png)

  
## HTML Previewのインストール

VSCode内でHTMLのプレビューを表示する「HTML Preview」をインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/a9143e5c-a2b8-50a6-b120-3fc954d5f3ac.png)


## 手書きボードとHTML Previewを立ち上げる

「> UI Sketcher: Open drawing board」と入力し、Enterキーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/ffa2da22-0e6b-e975-90f2-5c0f6983eed7.png)
　　
ボードが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/58f5126e-2952-3097-257f-d3aec47b100c.png)

　　
「> HTML: Open Preview to the Side」と入力し、Enterキーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/25826f9e-ea9e-f091-4525-73dc6cb1901f.png)

　　
プレビュー画面が表示されます。見やすくするために、縦二分割にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/983f25f0-a09c-2b24-0ed0-5ca22494a45e.png)

　　
上のボードに画面レイアウトを描いて、「Make Real」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/f5beb478-62c3-42a1-149b-4c13c6fddee2.png)

　　
右のエディタにコードが入力され、その結果が右下のプレビュー画面に表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/ad1dbb78-2321-26e4-afdf-3edb4eaab8e5.png)

　　
完全に再現はできていませんね。私の画力の問題でしょうか。
　　
コードは以下のとおりです。

```html
<!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>
```
　　
ヘッダーやリンクなどは認識していますね。

画像もアップロードすることができます。写真マークを選択し、画像をアップロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/0308bc75-7a9a-d361-ebe9-6c1b24059437.png)

　　
今回は私が開発を担当している[FABPRO.jp](https://fabpro.jp/)のホーム画面をスクショしてアップロードしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/774d4313-db92-e336-7a42-3ff037e52938.png)

　　
結果は以下のとおりです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/07163d01-be68-8090-f604-67199b257b0d.png)
　　
期待していたよりもイマイチの結果とはなりましたが、画像からもある程度はコーディングができることが分かりました。

　　
コードは以下のとおりです。

```html
<!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」を使ってみました。私の使い方に問題があるかもしれませんが、一発で優れたデザインを生成する能力はまだ不十分のようです。これからの成長が楽しみです！最後まで読んでいただき、ありがとうございました！


## 参考文献

https://rui-log.com/vscode-html-cording/