用途
minimalist-design 提供一套极简、等宽的网页设计系统,用单一字体与单一字号,通过 ASCII 式排版约定而不是字体变化来组织内容层级。它适合需要朴素、统一、强调结构与留白而非装饰的页面。
主要能力
- 排版统一:所有文本使用 IBM Plex Mono,1rem / 400 字重,不使用字号阶梯、粗体或斜体,行高 1.6。
- 层级来自 ASCII 约定:页面标题与副标题就是前两行普通文本;段落标题使用全大写文本并前后留空行;正文段落之间以空行分隔;缩进表示从属或代码示例;列表使用短横线;键值对使用两空格对齐的两列。
- 颜色克制:默认使用 stone 色系。浅色模式为 stone-700 文字(#44403C 语境中的 stone-700)配 stone-100 背景,深色模式反转,对比度 9.42:1,达到 AAA。通过 prefers-color-scheme 自动切换,不依赖 JavaScript。
- 无装饰:不使用阴影、渐变、圆角或边框,除非功能上必需;留白构成结构。
- 可替换色板:可用任一单色 Tailwind 色阶(slate、zinc、neutral、gray)替换,但不可混用色阶。
使用方式
字体从 Google Fonts 加载,仅需 400 normal 一种变体,不要加载 500 或斜体:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
字体样式:
font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'Courier New', monospace; font-size: 1rem; /* 16px — the only size / font-weight: 400; / the only weight / line-height: 1.6; font-style: normal; / no italic */
颜色(仅两色):
浅色模式 background: #FAFAF9 (stone-50) text: #0C0A09 (stone-950)
深色模式(prefers-color-scheme: dark) background: #0C0A09 (stone-950) text: #FAFAF9 (stone-50)
布局:
max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 6rem;
单列、左对齐,不用网格;flexbox 可用于行内对齐,但不用于整体布局。
结构示例(ASCII 约定):
Page title <- first line, nothing special Tagline <- second line, nothing special
SECTION HEADING <- all-caps, preceded by blank line
Body text flows here as paragraphs separated by blank lines.
Indented content suggests subordination or a code example.
- bullet list item
- another item
key value <- two-space-aligned columns for key/value pairs
明确禁止的做法
- 除 400 以外的字重
- font-style: italic
- 用透明度做文字层级;透明度仅用于装饰(分隔线、提示字符等)
- 链接使用下划线(text-decoration: underline),而不是变色
- 不使用 text-xl、text-2xl 等字号类
- 不使用 font-bold、font-medium、font-semibold
- 不使用 text-gray-400、text-stone-500 等弱化颜色变体
- 不使用 shadow-、rounded-、gradient-*
- 除基础背景令牌外不使用其他背景色
- 边框不作为装饰,只作为功能性分隔(如 <hr>)
参考资料
design-system.md — CSS 令牌、颜色值、深色模式 components.md — 可直接粘贴的 HTML 模式 tailwind-config.md — Tailwind v3/v4 配置 prompting.md — 现有页面的审查清单
适用场景
需要极简、统一、以留白和 ASCII 结构组织信息的内容型页面,例如文档、说明页或追求朴素视觉的界面。
限制
本技能要求严格约束字体、字号、字重与颜色;不使用装饰性阴影、渐变、圆角与边框,也不以颜色变化表示链接。色板可替换但不可混用。资料未提供具体框架集成或安装命令等更多信息。