AISiteSculptor — AI搭載ウェブサイトビルダー

AI/ML
AISiteSculptor — AI搭載ウェブサイトビルダー

AISiteSculptor — AI搭載ウェブサイトビルダー

AISiteSculptorは、入力したプロンプトからフルサイトのコードを自動生成し、ライブプレビューやプロジェクト管理、コミュニティ共有、クレジット課金（Stripe連携）までを想定したAIベースのウェブサイトビルダーSaaSのプロトタイプです。フロントエンドはReact/Tailwind/TypeScript、バックエンドはExpressとPostgres（Neon + Prisma）を採用し、認証にClerk、決済にStripeを使う構成がREADMEに記載されています。リポジトリ自体は軽量でまだ初期段階の状態です。

https://github.com/Spandana-N-S/Own-AI-Website-Builder-AISiteSculptor-

概要

AISiteSculptorは「プロンプトを入力するとAIがウェブサイトのコードを生成する」ことを中核に据えたSaaS型プロジェクトの設計骨子を示すリポジトリです。生成されたコードのライブプレビュー、プロジェクトダッシュボード、コミュニティギャラリーでの共有、クレジット課金（Stripe経由）の仕組みを想定しており、フロントエンドはReact/Tailwind/TypeScript、バックエンドはExpressとPostgreSQL（Neon + Prisma）、認証にClerkを使う構成がREADMEにまとめられています。現状は初期のコミットが少なくドキュメント中心の状態ですが、プロダクト設計として必要な主要コンポーネントを押さえた内容です。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 2
  • ファイル数: 1
  • メインの言語: 未指定

主な特徴

  • プロンプトからウェブサイトのフルコードを自動生成するワークフロー想定
  • 生成コードのライブプレビューとレンダリング機能を予定
  • プロジェクト管理・コミュニティギャラリー・クレジット課金（Stripe）を含むSaaSモデル設計
  • 技術スタックにReact + TypeScript、Express、Postgres（Neon + Prisma）、Clerk、Stripeを採用

技術的なポイント

READMEから読み取れる設計方針は、フロントエンドでユーザーがプロンプトを入力し、バックエンドでそのプロンプトを受けてAI（外部の生成API想定）にリクエストを送り、返却されたHTML/CSS/JSをプロジェクトとして保存・管理する構成です。フロントエンドはReact + TypeScriptにTailwindでスタイリング、ルーティングはReact Routerで管理する典型的なモダンSPA。ユーザー認証はClerkを利用することで、メール/Socialログインやセッション管理を外部サービスに委ねる設計です。

バックエンドはExpress（Node.js）でAPIを提供し、永続化はPostgreSQL（Neon）とPrisma ORMで行う想定。プロジェクトやユーザーのメタデータ、生成されたコードやクレジット残高の管理はDBで扱う典型的な実装になります。決済はStripeでクレジットのチャージやサブスクリプションを実装し、サーバー側でWebhookを受けて課金イベントを処理する流れが自然です。

技術的に注意すべき点は安全なコードレンダリングの実装です。ユーザーが生成したHTML/JSをライブでプレビューする場合、iframeのサンドボックス化やコンテンツセキュリティポリシー（CSP）の適用、サーバー側での検査（悪意あるスクリプトの除去）などが必要になります。また、AI生成の品質管理（テンプレート化や検証ステップ）、生成リクエストのレート制御、生成結果の差分保存とロールバック、ストレージ設計（ファイル vs DB）など、運用面の設計も重要です。スケーラビリティに関しては、生成処理が重い場合はワーカープロセスやジョブキュー（例：Bull、RabbitMQ）で非同期処理にし、プレビューや配信はCDN＋静的ホスティングに分離することが現実的です。READMEはデプロイ先が途中で切れているため、ホスティング（Vercel/Netlify/Render/Hos…）の選定やCI/CDの自動化も次の実装フェーズで検討されるべき点です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • README.md: file

まとめ

AI生成とSaaS機能を組み合わせたプロトタイプ構想が明確で実装の骨格が揃っているが、まだ初期段階。

リポジトリ情報：

READMEの抜粋：

AISiteSculptor – AI-Powered Website Builder SaaS

Type a prompt → AI generates full website code → live preview, manage projects, community sharing, credits + Stripe payments.

Features

  • Prompt-to-website code generation
  • Live preview & rendering
  • Project dashboard + community gallery
  • Credit system & Stripe top-ups

Tech Stack

  • Frontend: React, Tailwind, TypeScript, React Router
  • Backend: Express (Node.js), PostgreSQL (Neon + Prisma)
  • Auth: Clerk
  • Payments: Stripe
  • Deploy: Hos…