Monologue

Monologue以克制的炭灰界面搭配醒目的衬线标题和清晰的等宽字体说明。青绿色产品画面穿插在长篇分区叙事中，展示听写、语音笔记与会议记录功能。

North star · Keep the page quiet and charcoal-led, using serif headlines for editorial emphasis and teal primarily inside product demonstrations.

The page uses a dark, narrow-centered composition framed by subtle vertical and horizontal hairlines. Charcoal (#282828) anchors most sections, while near-black (#121212) marks the product-display band and helps separate major content. Large, centered serif headlines create an editorial voice; compact Geist Mono text handles navigation, labels, body copy, and controls. White and warm off-white foregrounds establish contrast, with muted grays reserved for supporting copy and secondary details. Pale, raised download buttons are the strongest recurring action. Teal appears chiefly in colorful product mockups and restrained accent details, not as a broad page background. The layout alternates spacious explanatory passages with denser feature cards, interface demonstrations, pricing panels, and a comparison table. Thin borders, inset highlights, and soft dark shadows define surfaces without making the page feel glossy or heavily layered.

配色

点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。

字体

字号阶梯：Perfect Fourth（比例约 1.361，正文 14px）。示例用免费替代字体渲染，数值为实测。

间距与布局

基准单位 4px · 密度：适中

A centered page frame uses a measured maximum content width of 798px, with thin vertical rails and full-width horizontal section rules. Most content aligns to a single central column, shifting into two-column feature explanations and multi-column cards, pricing, and comparison layouts. The hero is centered; later feature sections favor left-aligned headings and copy. Section spacing is generous and consistent, while product panels and pricing areas are comparatively dense. Keep component padding and gaps tied to the measured spacing scale rather than introducing arbitrary values.

圆角与层次

Surfaces rely on thin gray or near-black borders, faint inset highlights, and soft dark shadows rather than pronounced elevation. The bright download button is the most visibly raised control, with a light edge and compact shadow. Product mockups layer over teal media panels, while ordinary content sections remain largely flat.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。

Imagery · Product UI is the primary imagery: framed app screens, message windows, coding-agent panels, and device-related demonstrations. Teal and turquoise surrounds appear in mockups as a vivid contrast against the charcoal page; treat them as illustrative product media rather than recoloring the site canvas. A subdued, blurred human silhouette appears behind the hero copy. Logos and interface details remain small, crisp, and secondary to the headline.

页面版块

共 17 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。

首页

首屏主视觉

Centered headline, supporting copy, download action, and subdued backdrop within the framed page.

产品展示产品演示

Dark full-width band with a three-choice feature bar above a centered product demonstration.

品牌墙客户品牌

A shallow horizontal band of partner logos beneath a small centered caption.

图文交替产品理念

Single-column, left-aligned editorial copy within a spacious charcoal section.

图文交替听写功能

Long feature sequence mixing two-column copy, app screenshots, and stacked demonstrations.

使用步骤笔记流程

Section introduction above a full-bleed, four-part numbered process display.

功能网格功能总览

Introductory heading and download action above a dense grid of capability cards.

产品展示支持平台

Centered title, supporting line, and download prompt in a single-column block.

用户评价用户评价

Compact multi-column social-proof band with quote attribution and brand marks.

价格方案价格方案

Centered pricing heading and billing toggle above two plan cards and a bundle panel.

对比表功能对比

Centered product summary and download action above a wide comparison matrix.

定价页 · 原网页 ↗

价格方案套餐价格

Centered pricing heading and billing summary above a monthly/yearly toggle; two side-by-side plan cards, followed by a full-width Every bundle banner.

用户评价用户评价

Centered customer quote and attribution above a horizontal row of selectable publication or customer-name tabs.

常见问题常见问题

Two-column section with a left-aligned FAQ heading and a vertical list of questions on the right.

行动号召下载行动号召

Centered headline and supporting sentence above two side-by-side links, on a softly textured dark background.

页脚网站页脚

Brand and social links sit above five compact navigation columns, followed by legal and copyright details.

其他底部装饰

A separate, nearly black single-column strip below the footer with two small images and no visible text.

该做与不该做

给 AI 的提示词

想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。