网站模板

Scalar - Product/app/SaaS template Next.js & Astro

A modern product/app/saas template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for github projects, open source projects or developer focused saas and community driven projects.

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

SaaS · E-commerce · 免费

打开在线演示
Scalar - Product/app/SaaS template Next.js & Astro

设计解读

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

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

Overall

SaaS product, clean and technical, low density, light

Palette

background #ffffff; surfaces #ffffff, #f9fafb; text #111827; muted text #6b7280; primary #10b981; accents #374151, #ef4444, #f59e0b

Type

headings Inter, 700, sentence-case; body Inter, 14px; scale h1 48px, h2 32px, h3 24px

Shape & spacing

button/card radius 8px, borders 1px solid #e5e7eb, shadows none, section spacing 80px, content width 1280px

Sections (top to bottom)
  • Header — horizontal nav with logo, links, user count, login, CTA button; white background
  • Hero — centered headline, subheading, two CTA buttons (dark and outlined); white background
  • Workflow table — full-width data grid with columns for workflows, triggers, status, users, last updated; light gray header row, alternating row opacity; white background
  • Sidebar — right-aligned code snippet panel with syntax-highlighted GraphQL query; fixed position, semi-transparent overlay
Signature details
  • Monospaced code block in sidebar with syntax highlighting
  • Status indicators using colored tags (green, red, gray)
  • Avatar icons with initials and color-coded backgrounds
  • Minimalist UI with no decorative elements
  • Hover states on table rows and buttons
  • Clean, aligned typography with consistent spacing
Other pages
  • /workflows: workflow management interface with filter/sort controls
  • /community: discussion forum layout with user avatars and message threads

模板信息

分类
SaaS, E-commerce
技术栈
Next.js, Astro, Tailwind CSS, shadcn/ui
许可
Commercial
作者
Shadcnblocks
价格
免费

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

Ottermind 起步用的需求

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

Build a saas website inspired by the "Scalar" template. Reference brief: A modern product/app/saas template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for github projects, open source projects or developer focused saas and community driven projects. Use original copy and imagery for my brand rather than the reference's placeholder content.

如何使用这个模板

  1. 1

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

  2. 2

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

  3. 3

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