【ChatGPT × Figma】html.to.designとGPTで、編集可能なモックアップを作成。手書きも可能？

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>時間帯予約の確認画面</title>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2 class="mb-4">時間帯予約の確認画面</h2>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">予約詳細</h5>
            <p class="card-text">
                <strong>予約日時：</strong>2023年9月24日 15:30-16:00<br>
                <strong>予約診療内容：</strong>一般内科外来<br>
            </p>
            <div class="alert alert-info" role="alert">
                予約確認のメール送信に関して：@example.comのドメインを受信できるよう設定をお願いします。
            </div>
            <button type="button" class="btn btn-secondary mr-2">戻る</button>
            <button type="button" class="btn btn-primary">送信する</button>
        </div>
    </div>
</div>

<!-- Bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Receipt Layout</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    :root {
      --primary-color: #00B1A0;
      --text-disabled: #999999;
      --text-primary: #222222;
      --text-secondary: #737373;
      --border-light: #dbdbdb;
    }
    body {
      background-color: #f5f5f5;
      color: var(--text-primary); /* プライマリーテキスト色 */
    }
    .receipt-container {
      background-color: #fff;
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      border-radius: 8px;
      border: 1px solid var(--border-light); /* ボーダー色 */
    }
    .header {
      background-color: var(--primary-color); /* ヘッダーの背景色 */
      color: #fff; /* ヘッダーテキスト色 */
      padding: 10px 0;
      border-radius: 8px 8px 0 0;
    }
    .text-disabled {
      color: var(--text-disabled); /* 無効テキスト色 */
    }
    .text-secondary {
      color: var(--text-secondary); /* セカンダリーテキスト色 */
    }
    .border-dashed {
      border-top: 2px dashed var(--border-light); /* 点線のボーダー */
      padding-top: 10px;
    }
    .border-bottom-dashed {
      border-bottom: 2px dashed var(--border-light); /* 点線のボーダー */
      padding-bottom: 10px;
    }
    .footer {
      margin-top: 30px;
      color: var(--text-secondary); /* フッターテキスト色 */
    }
  </style>
</head>
<body>

<div class="receipt-container">
  <div class="header text-center">
    レジ点検
  </div>

  <div class="border-bottom-dashed font-weight-bold">
    売り上げ合計 <span class="float-right">¥200,000</span>
  </div>
  
  <div class="mt-3 text-secondary">
    お客様数 <span class="float-right">20,000</span>
  </div>

  <div class="border-dashed border-bottom-dashed mt-3">
    <div>
      カード・QR決済額 <span class="float-right">¥34,000</span>
    </div>
    <div>
      現金出納 <span class="float-right">¥1,000</span>
    </div>
    <div class="text-disabled">
      精算 <span class="float-right">¥3,000</span>
    </div>
  </div>

  <div class="text-center footer">
    ご利用ありがとうございました
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>