网站模板
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 以这套设计为灵感生成一个全新网站，你可以在对话中继续修改。
