SuperAPI AI 工具集

minimalist-design

设计与创作

查看项目

更新于 10-16 06:59

技能介绍

用途

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 结构组织信息的内容型页面,例如文档、说明页或追求朴素视觉的界面。

限制

本技能要求严格约束字体、字号、字重与颜色;不使用装饰性阴影、渐变、圆角与边框,也不以颜色变化表示链接。色板可替换但不可混用。资料未提供具体框架集成或安装命令等更多信息。