網站範本
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 · 免費
設計解讀
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
點擊「使用這個範本」，在 Ottermind Studio 中開啟並自動填入需求。
- 2
在需求中補充你的品牌、受眾、頁面與內容。
- 3
Ottermind 以這套設計為靈感打造全新網站，你可以在對話中繼續修改。
