DevKnow SaaS Landing Page

Generates a polished Japanese SaaS landing page from an existing app screenshot, with hero CTA, product mockup, navigation, and feature cards.

Verwende REFERENCE_0 als UI-Screenshot des Produkts und gestalte daraus eine professionelle japanische SaaS-Landingpage für {argument name="product name" default="DevKnow"}. Der App-Screenshot soll erkennbar bleiben, aber in einer großen, abgerundeten Browser-Mockup-Vorschau auf der rechten Seite des Hero-Bereichs platziert werden – leicht verkleinert, mit weichem Schatten und einem dezenten violetten abstrakten Linien-/Gradienten-Akzent im Hintergrund.

Layout: Erstelle eine klare Desktop-Landingpage mit weißem Hintergrund und violetten Markenakzenten. Füge eine obere Navigationsleiste mit dem vorhandenen Logo/Namen auf der linken Seite hinzu, fünf zentrierten Menülinks mit der Beschriftung 「特徴」, 「使い方」, 「料金」, 「アップデート」, 「よくある質問」 sowie auf der rechten Seite 「ログイン」 und einem violetten CTA-Button mit der Beschriftung 「無料で始める →」.

Hero-Bereich: Platziere auf der linken Seite ein kleines, abgerundetes Badge mit dem Text 「AI・個人開発の最新ニュースを毎日お届け」. Füge eine große, fettgedruckte japanische Überschrift hinzu: {argument name="hero headline" default="開発の「今」を、毎日あなたのもとへ。"}, wobei der Ausdruck 「あなたのもとへ」 violett hervorgehoben wird. Darunter folgt der begleitende Text: {argument name="hero description" default="DevKnow は、AI・テック・個人開発に関する最新情報を毎日厳選してお届けするニュースアプリです。"}. Füge zwei Hero-Buttons hinzu: einen primären violetten 「無料で始める →」 Button und einen sekundären weißen 「使い方を見る」 Button. Unter den Buttons sollen genau 3 Vertrauenspunkte mit kleinen violetten Häkchen-Symbolen stehen: 「登録不要で始める」, 「いつでも解約OK」, 「Webブラウザで利用可能」.

Features-Bereich: Unter dem Hero-Bereich füge ein zentriertes Sektionslabel „FEATURES“ in Violett sowie die Überschrift 「DevKnow でできること」 hinzu. Erstelle genau 4 abgerundete Feature-Karten in einer Reihe mit weichen Schatten und violetten Symbolen: 1) Blitz-Symbol, Titel 「毎日の厳選ニュース」, Beschreibung 「AI・テック・個人開発の最新ニュースを毎日厳選してお届けします。」; 2) Ebenen-Symbol, Titel 「カテゴリで簡単に検索」, Beschreibung 「興味のあるカテゴリを選んで、必要な情報にすぐアクセス。」; 3) Lesezeichen-Symbol, Titel 「保存してあとで読む」, Beschreibung 「気になるニュースを保存して、あとでゆっくり読めます。」; 4) Glocken-Symbol, Titel 「通知で見逃さない」, Beschreibung 「重要なニュースは通知でお知らせ。トレンドを逃しません。」

Stilvorgaben: Die Seite soll wie eine moderne, produktionsreife Landingpage aussehen, nicht wie ein einfacher App-Screenshot. Verwende großzügige Abstände, abgerundete Ecken, dezente Schatten, violette Gradienten-Buttons, eine klare japanische Typografie und entferne jegliche Unordnung außerhalb der gestalteten Landingpage. Der Inhalt des Referenz-App-UI soll sichtbar bleiben, aber gegenüber dem Landingpage-Design in den Hintergrund treten.

Maschinell übersetzt — das Original hat dieses Ergebnis erzeugt.

✨ Generieren Speichern Prompt kopieren Teilen Originalbeitrag In Hitboard öffnen