Webサイトテンプレート
WriteMate AI
An AI product marketing template from TailGrids built in React and Tailwind CSS. Designed to promote an AI writing tool with feature and pricing sections.
このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。
Landing Page · AI · 無料
ページ
ライブデモのページごとのスクリーンショットです。枠内をスクロールするとページ全体を見られます。
デザイン解説
このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。
この解説はまだ日本語に対応していないため、英語で表示しています。
- Overall
landing page, modern tech, medium density, dark
- Palette
background #030303; surfaces [#ffffff]; text #ffffff; muted text #9f9fa9; primary #ffffff; accents []
- Type
headings Inter, 400, sentence-case; body Inter, 16px; scale h1 60px / h2 36px / h3 24px
- Shape & spacing
button/card radius 0; borders 1px solid #1a1a1a; shadows none; section spacing 80px; content width 1232px
- Sections (top to bottom)
- Header — horizontal nav with logo, links, login, and "Start for free" CTA; black background
- Hero — full-width gradient background (blue to purple), centered headline, subheadline, input field with upload icon
- Trusted by — horizontal row of logos (Udeck, FormBold) on black background
- What You Get — four-column grid of feature cards with icons, titles, descriptions, and "Try now" buttons
- Use Cases — six-column grid of use case cards with title and description
- Plans & Pricing — three-column pricing cards with tier names, prices, features, and CTAs; "Most Popular" badge on middle card
- Community Testimonials — two-row grid of user cards with avatar, name, handle, and quote
- FAQs — two-column layout with accordion-style questions on right, intro text on left
- Call to Action — gradient background, headline, subheadline, two CTA buttons
- Footer — four-column footer with Product, Resources, Company, Legal links, copyright, and policy links
- Signature details
- Gradient backgrounds in hero and pricing sections
- Minimalist white-on-black contrast
- Consistent use of rounded corners on cards and buttons
- Horizontal logo carousel under "Trusted by"
- Accordion-style FAQ with downward chevrons
- Clean, spaced typography with consistent line height
- Other pages
- /pricing: pricing section repeated with different layout and additional plan tiers
- /docs: sidebar navigation with documentation content, clean prose layout
テンプレート情報
- カテゴリ
- Landing Page, AI
- 作者
- tailgrids
- 掲載元
- 21st.dev
- 価格
- 無料
- Landing Page
- AI
オリジナルデザイン：tailgrids（21st.dev に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。
Ottermind が起点にするブリーフ
Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。
Build a landing page website inspired by the "WriteMate AI" template. Reference brief: An AI product marketing template from TailGrids built in React and Tailwind CSS. Designed to promote an AI writing tool with feature and pricing sections. Use original copy and imagery for my brand rather than the reference's placeholder content.
このテンプレートの使い方
- 1
「このテンプレートを使う」をクリックすると、ブリーフ入りで Ottermind Studio が開きます。
- 2
ブリーフにブランド、対象者、ページ、内容を書き足します。
- 3
Ottermind がこのデザインに着想を得た新しいサイトを作ります。チャットで続けて調整できます。
