できること

  • 10 種類のライブラリから選んだ、異なるアートディレクションの、フルページのモックアップ 2〜3 点
  • 選んだデザインを、本物のコピーで、静的ページまたはプロジェクトのコンポーネントとして組み上げたもの
  • ヒーローとセクションの画像を、適切なサイズで描き直し、レスポンシブな WebP で書き出したもの
  • デスクトップとスマホのスクリーンショット、モックアップとの並べた比較、QA レポート
  • 機械的に作られた癖のリントレポートと、適用した修正

向いている用途

  • スタートアップ、アプリ、製品のランディングページ
  • 独自の見た目が必要なローンチや事前登録のページ
  • 汎用テンプレートに見えてしまうページのリデザイン

向いていない用途

  • 既存のデザインファイルからのピクセル単位の再現
  • アプリのロジックや CMS を持つ複数ページのサイト
  • メールのテンプレート

使い方

Claude・ChatGPT で

PopNow のスキル「AI モックアップからのランディングページ」(landing-page-from-mockup)を使って、次のことをしてください:Lumen Notes のランディングページ。入力中に関連するメモを提案する、プレーンテキストのメモアプリです。1 台のデバイスは無料、Pro は月 $6。推薦コメントはまだありません。

コーディングエージェントで

/popnow-landing-page-from-mockup Lumen Notes のランディングページ。入力中に関連するメモを提案する、プレーンテキストのメモアプリです。1 台のデバイスは無料、Pro は月 $6。推薦コメントはまだありません。

次はこれ

ヒーローはモックアップ B から、料金表はモックアップ A から取って。

当社の Astro プロジェクトの site/ の下に作って、レビューをもう一度実行して。

用意しておくもの

  • 製品名、対象者、見出しの約束
  • 3〜4 の機能と、それぞれの具体的な詳細、プランと価格
  • 裏付けのある証拠(実際の引用、数字、事実)
  • PopNow API キー。ブランドがすでに定義されていれば DESIGN.md

似ているスキル

すべて見る →

よくある質問

なぜコードを書く前にモックアップを作るのですか?

言葉でスタイルを説明するより、完成した見た目のページから選ぶほうが速く、正直です。また、組み上げに具体的な目標を与えるので、スクリーンショットの比較で、コードがどこでずれたかを正確に示せます。

PopNow は何を生成し、費用はいくらですか?

モックアップ(それぞれ約 30〜35 クレジット)と、希望すればきれいなヒーローとセクションの画像(それぞれ約 35〜75 クレジット)です。典型的なフルの実行は約 275 クレジット。モックアップ 1 点の軽量モードは約 35 クレジットです。どの生成も先に見積もり、あなたが同意してから実行します。

何かインストールが必要ですか?

Node と Python 3、それにスクリーンショット用のローカルの Chrome、Chromium、または Edge が必要です。プロジェクトに Playwright があればそれを使います。ほかの依存関係はありません。

ページにモックアップ画像の文字が入ることはありますか?

ありません。モックアップは画像で、その小さな文字は崩れることがあります。見出し、機能、価格、FAQ はあなたのブリーフから来ます。エージェントが下書きしたものは、確認してもらうために一覧にします。