STRUT

STRUT以暖调、杂志式的页面展示AI写作工作区，重点使用醒目的大字标题与克制的产品界面画面。荧光绿按钮、深色功能区和紧凑内容网格，为较长的首页建立清晰节奏。

North star · Build a calm editorial canvas, then use oversized type, real product context, and lime accents to direct attention.

The visual system is built around a warm ivory canvas (#f3f0e8), near-black text, and a vivid lime signal reserved for primary actions and occasional emphasis. Dark bands interrupt the pale editorial flow to frame product context, learning resources, and the final conversion moment. Manrope carries nearly all interface and headline work: headings are heavy, tightly tracked, and deliberately oversized, while body copy stays compact and muted. Newsreader and Georgia provide italic serif contrast in selected headline phrases, lending a print-like, long-form character. The hero pairs a large asymmetric text column with a tactile overhead collage; later sections alternate full-width product imagery, split feature cards, article thumbnails, and thinly bordered content grids. Spacing is generous around major sections but denser inside resource cards and footer navigation. Surfaces remain mostly flat, with crisp rules and square corners rather than soft elevation.

配色

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

字体

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

间距与布局

基准单位 2px · 密度：宽松

A spacious single-page sequence uses a broad centered content area capped at the measured page width, with strong left alignment and occasional asymmetric splits. The hero divides text and collage imagery into contrasting columns. Large section gaps separate alternating pale and near-black bands; feature cards, article thumbnails, audience tables, and FAQ rows become denser within each band. Thin rules organize grids without adding heavy containers. Keep broad outer margins and generous breathing room around headline blocks, while letting the footer hold dense, multi-column navigation.

圆角与层次

Most surfaces are flat, with square-edged cards and fine measured borders doing the organizational work. Product-interface imagery supplies depth through its own layered paper and screen details. Use the measured hard card shadow only as a restrained exception; avoid generalized soft shadows, pills, or rounded containers.

组件

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

Imagery · The hero uses a tactile overhead collage of paper, notes, geometric scraps, and a hand-drawn lime mark. Product sections show the writing interface in context, framed as a wide, legible workspace rather than a floating device mockup. Article thumbnails use colorful, abstract editorial imagery. Keep imagery rectangular and integrated into the page grid; bright colors inside feature cards and thumbnails are illustrative, not replacements for the core palette.

页面版块

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

首页

首屏首页主视觉

Header above asymmetric two-column hero: text left, tactile collage right.

使用步骤写作流程

Pale editorial section with a large left headline and ordered steps alongside.

产品展示工作区预览

Full-width dark band with a headline, short copy, and broad interface image.

功能网格核心功能卡

Pale inset feature area with one large colored card and stacked smaller cards.

其他功能导航

Short pale transition band with a large heading and a small aligned link.

图文交替写作功能

Pale section combining a large feature headline with supporting content blocks.

数据亮点写作资源库

Compact full-width dark strip with headline, lime statistic, and browse action.

其他免费工具引导

Short pale title band with a prominent heading and a small right-side link.

商品网格免费写作工具

Pale area with a row of compact, outlined tool cards.

其他文章导读

Pale transition band with a large editorial title and browse link.

内容列表写作指南

Pale multi-column article grid with thumbnail images, titles, and metadata.

其他适用人群

Pale headline transition into a structured audience comparison grid.

对比表写作场景

Pale-backed audience grid with bordered cells and concise descriptions.

功能网格使用原则

Dark feature section with a headline and a row of compact bordered principles.

常见问题常见问题

Pale FAQ section with a large heading and vertically divided question rows.

行动号召创建免费账户

Full-width lime band with left-aligned message and right-aligned actions.

行动号召品牌收尾

Near-black horizontal band with white headline and lime signup button.

页脚页脚导航

Large near-black footer with brand summary, grouped columns, and a subdued bottom rule.

该做与不该做

给 AI 的提示词

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

相似风格

Slite

slite.com

以温暖清晰的设计讲述产品价值

浅色AI

Sprig

sprig.com

清爽编辑式排版，点缀暖调渐变

浅色AI

WRITER

writer.com

黑色画布映衬鲜明AI与企业级清晰表达

深色AI

Fabric

fabric.so

以编辑感极简呈现智能工作空间

浅色AI

Replit

replit.com

暖调留白，点亮创作灵感

浅色AI

ARTU

artu.works

静简排版，雕塑感家具，留白充裕

浅色设计工具