Webサイトテンプレート
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（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 がこのデザインに着想を得た新しいサイトを作ります。チャットで続けて調整できます。
