网站模板

Docsy

Theme

这个模板的介绍暂时还没有中文版本,先以英文显示。

Website · 免费

查看源码仓库
Docsy

设计解读

AI 对这套模板设计的解读:配色、字体、间距、区块和标志性细节。使用模板时,Ottermind 会以它为起点。

这份解读暂时还没有中文版本,先以英文显示。

Overall

documentation site, clean and professional, low density, light

Palette

background #f5f5f5; surfaces #ffffff, #f9f9f9; text #1a1a1a; muted text #666666; primary #0066cc; accents #0099ff, #333333

Type

headings Inter, 700, uppercase; body Inter, 16px; scale h1 48px, h2 36px, h3 24px

Shape & spacing

button radius 6px, card radius 8px, borders 1px solid #e0e0e0, shadows 0 2px 4px rgba(0,0,0,0.1), section spacing 80px, content width 1200px

Sections (top to bottom)
  • Hero — full-width layout, single column, large headline centered, two CTA buttons below, background gradient from #f5f5f5 to #e0e0e0
  • Features — three-column grid, each with icon, heading, and short paragraph, white cards on light gray background
  • Documentation — two-column layout, left sidebar with navigation list, right main content area with nested headings and code blocks
  • Testimonials — horizontal scrollable row of quote cards with avatar images, alternating alignment
  • Footer — single column, logo row, links grouped in columns, copyright line
Signature details
  • Hexagonal lettering in header logo
  • Consistent use of rounded corners across all UI elements
  • Subtle drop shadows on cards and buttons
  • Monospaced code blocks with syntax highlighting
  • Hover effects on interactive elements (buttons, nav items)
  • Clean, minimal typography hierarchy with consistent spacing
Other pages
  • /docs: structured documentation with sidebar navigation and collapsible sections
  • /blog: article list with featured image, title, excerpt, and read-more link
  • /about: team section with profile cards and mission statement

模板信息

分类
Website
技术栈
Hugo
价格
免费

原始设计来自 Hugo Themes,发布于 Hugo Themes。Ottermind 不会复制模板代码,而是根据需求生成一个全新的网站。

Ottermind 起步用的需求

它会作为草稿在 Studio 中打开,发送前先补充你的品牌、受众和页面。

Build a website website inspired by the "Docsy" template. Reference brief: Theme Use original copy and imagery for my brand rather than the reference's placeholder content.

如何使用这个模板

  1. 1

    点击「使用这个模板」,在 Ottermind Studio 中打开并自动填入需求。

  2. 2

    在需求里补充你的品牌、受众、页面和内容。

  3. 3

    Ottermind 以这套设计为灵感生成一个全新网站,你可以在对话中继续修改。