【AIだけで完結】ダサいUIを1時間でプロ級に果たして変わるのか！｜Google Stitch×Cursor

Описание: ▼今回作ったドヤインタビューAIはこちら↓
https://doyamarke.surisuta.jp/tool/do...

▼ ドヤバナーAI（AIでバナー作成）
→ https://doya-ai.surisuta.jp/banner

▼ ドヤSEO(ラクラク記事作成)
→https://doya-ai.surisuta.jp/seo

▼ ドヤマーケ（サービスサイト）
→ https://doyamarke.surisuta.jp/

▼使えるデザインプロンプトはこちら↓
このWebアプリのUIを大幅に改善してください。

【目的】
"ツール"ではなく"プロダクト"に見えるUI

【デザイン方針】
メインカラー：紫（アクション・強調に限定使用）
背景：白〜淡いグレー、上品なコントラスト
BtoB SaaS / AIプロダクトとしての落ち着き
余白・整列・階層設計を重視、無駄な装飾なし
「静かに強い」温度感

【ファーストビュー】
「何が一段良くなるのか」が一目で伝わる
構造が美しく、情報が整理されている

【入力エリア】
思考を邪魔しないフォーム設計
入力すること自体が「気持ちいい」UI

【生成・結果表示】
AIの回答ではなく"プロが作った設計書"の見た目で表示
コピー・保存・再生成の導線を自然に配置

【全体】
カードベースで意味単位を分離
ボタンはPrimary / Secondary / Textを明確に
モダンで信頼感のあるデザイン


【概要】
デザイナーもエンジニアもいない。
でも自社サービスのUI、ダサいまま放置するのはもう終わり——

今回は Google Stitch（Google製 AI UIデザインツール）でUIデザインを作り、
それをバイブコーディング（Cursor）でそのまま実装する
「AIだけでUI刷新を完結させるワークフロー」を全公開します。

実際に自社サービス「ドヤインタビューAI」のUIを
約1時間でリニューアルした全工程をお見せします。

━━━━━━━━━━━━━━━━━━
📌 この動画で分かること
━━━━━━━━━━━━━━━━━━
✅ Google Stitchの使い方（スクショ＋プロンプトでUI生成）
✅ 追加指示でデザインをブラッシュアップする方法
✅ StitchからHTML＋CSSコードをエクスポートする手順
✅ バイブコーディング（Cursor）で実装を依頼するプロンプト術
✅ 既存ロジックを維持したままUIだけ差し替えるコツ
✅ デプロイまでの全フロー

━━━━━━━━━━━━━━━━━━
🔗 リンク
━━━━━━━━━━━━━━━━━━
▶ Google Stitch公式：https://stitch.withgoogle.com
▶ Cursor公式：https://cursor.sh
▶ ドヤインタビューAI：（サービスURL）

━━━━━━━━━━━━━━━━━━
📢 こんな人におすすめ
━━━━━━━━━━━━━━━━━━
・デザイナーに頼む予算がない個人開発者
・スタートアップで素早くUIを整えたい人
・LP・社内ツールのUIを自分で改善したい人
・バイブコーディングに興味がある人
・Google Stitchを使ってみたい人

━━━━━━━━━━━━━━━━━━

💬 コメントで教えてください！
「あなたのサービス、Stitchで直したい箇所はどこ？」

👍 高評価＆チャンネル登録もお願いします！

#GoogleStitch #バイブコーディング #Cursor #AIデザイン #UI設計 #ノーコード #個人開発 #AIツール #Webデザイン