postrboard

Postrboard

Postrboard 是一个用于产品界面的 CSS 框架。让框架退居幕后。用户的工作、数据和决策应是页面上最突出的内容。

在使用 Postrboard CSS 构建页面、应用、仪表板、文档和组件时，请使用此技能。

权威顺序

来源之间存在冲突时，按以下顺序处理：

1. 用户的内容、用户和任务。
2. 此技能的行为规则。
3. components.md 中的组件标记。直接复制，不要改写。
4. postrboard.css 中的设计令牌，以及注册表未涵盖的类。
5. 通用设计知识。

不要凭记忆臆造类或标记结构。请从注册表中复制。

安装

将软件包或仓库中的 skill/postrboard/ 复制到 Agent 的技能目录（例如 ~/.agents/skills/postrboard/ 或项目的技能文件夹）。将 SKILL.md 保留在该路径下，以便 Agent 能按名称加载它。

设置

优先使用已安装软件包中的 CSS，以确保版本与技能和注册表匹配：

<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:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="node_modules/postrboard-css/postrboard.min.css">

仅当未安装软件包时，才使用托管文件：

https://burkeholland.github.io/postrboard-design/postrboard.min.css

只有在使用场景需要时，才在 <html> 上设置 data-mode="light" 或 data-mode="dark"。省略该属性即可遵循系统设置。对于模式相反的独立区域，请同时设置其模式、强调色和表面。

五步协议

1. 明确基础

编写标记之前，先在内部写一句话：

[Person] needs to [job] by working with [primary artifact].

然后确定：

• **模式：**操作、阅读、说服或体验。
• **侧重点：**工作流优先、证据优先、数据优先、编辑优先或转化优先。
• **主要对象：**表格、表单、队列、编辑器、日程安排、日志、比较内容、媒体或其他真实对象。
• **真实内容：**仅使用用户提供的事实和真实的占位内容。

应用应从工作界面开始，而不是从解释应用的着陆页开始。

2. 映射

不要通读整个 components.md。打开 Index，按名称查找每个界面，跳转到 ### name，然后粘贴该代码块。来源：已安装的软件包、仓库根目录或 https://burkeholland.github.io/postrboard-design/components.md。registry/index.json 的内容相同，格式为数据。

按名称将页面的每个界面映射到一个组件，然后粘贴该组件的标记并替换内容。标记就是 API。凭记忆重新输入会导致页面偏离规范。

界面	组件	自定义原因
主要操作	button	无
工作队列	list-group	无
发布历史	timeline	无
特定领域的比较	由 panel 和 data-table 组合而成	没有单个组件能够涵盖

如果注册表中没有合适的组件，请先组合两个组件，再编写新组件。只有当注册表无法表达产品特定的组合方式时，才允许使用自定义类。仅加载 Postrboard CSS，却不使用其组件，不算使用 Postrboard。

3. 决定

根据产品信号选择视觉轴，而不是根据偏爱的风格选择。

轴	API	值
强调色	data-accent	coral、azure、sage、violet、amber、slate
表面	data-surface	flat、outline、raised、glass
几何形状	data-geometry	compact、sharp、soft
密度	data-density	comfortable、compact、roomy
展示风格	data-type	neutral、sans-tight、mono-lede、editorial
氛围	data-ambient	none、noise、grid、gradient

默认值为：

coral / flat / compact / comfortable / neutral / none

开始设计新的产品界面时，应优先选择契合实际工作的方向，而不是让所有轴都保持默认值。通常只需调整一两个轴。扩展现有产品时，除非用户要求重新设计或产品含义发生变化，否则应保持既有轴设置。

这是产品契合度检查，不是追求新奇的指标。保持一致比追求多样更重要。每个调整过的轴都必须服务于使用场景。只有在材质或数据确实适用时，才使用 glass、grid 和 gradient。默认不要将 sharp 几何形状、grid 氛围和深色且以等宽字体为主的展示风格叠加使用——这种组合一眼看上去就像通用的开发工具模板。圆角平滑适中是稳妥的基线；只有在真实的技术界面需要时才使用 sharp，并且每次只突出一种强烈的技术信号。

将视觉上的大胆设计集中在一处。选择一个源自主题的标志性细节：账簿式节奏、编辑器边槽、排期线、对比轨道，或其他有意义的设计元素。其余部分保持克制。

4. 构建

先制作核心产物。只有在有助于人们使用或理解该产物时，才添加说明文字。

从 components.md 中粘贴组件，然后替换内容。以下是要查找的名称：

需求	组件
页面节奏	container、stack、type
布局组合	grid-split、grid-asymmetric、grid-thirds、grid-sidebar、grid-stack-rail、grid-holy-grail、grid-centered、grid-auto、grid-masonry、app-shell
标题	page-header、section-header
带边框的工作区	panel、card、divider、accordion、scroll-area
操作	button、button-group、icon-button、fab
表单	form、input、select、textarea、checkbox、radio、switch、segmented-control、range、combobox、floating-label、input-group、input-validation、dropzone、date-picker、time-picker、otp-input、auth-card
状态	badge、tag、alert、banner、toast、toast-region、progress、spinner、skeleton
数据	stat-strip、stat-card、data-table、sortable-table、list-group、description-list、timeline、stepper、styled-list、avatar、avatar-group、calendar、chart、empty-state
导航	navbar、sidebar-nav、nav-rail、tabs、breadcrumb、pagination
覆盖层	modal、alert-dialog、drawer、dropdown、context-menu、tooltip、popover、hover-card、command-palette
代码和内容	terminal、inline-code、cmd-pill、icon、quote-block、footer
媒体	aspect-ratio、frame、figure、media-embed
营销	feature-card、pricing-card、testimonial-card、cta-band、logo-cloud、newsletter、faq — 请先阅读它们的 避免事项说明
实用工具	utility-spacing、utility-layout、utility-text、utility-sizing、utility-surface、utility-responsive — 用于弥补组件未覆盖需求的单一用途类

在受支持时，优先使用语义状态属性：aria-current、aria-selected、aria-invalid、aria-busy、aria-disabled 和 data-state。对于看起来处于选中状态的普通按钮，优先使用 aria-pressed 或 is-selected 类，不要误用 aria-selected。

Postrboard 仅使用 CSS。CSS 可以为模态框、抽屉、下拉菜单、组合框、选项卡和弹出框设置样式，但无法提供焦点陷阱、Escape 键处理、焦点循环、选择逻辑或播报功能。请在应用代码中添加所需行为。不要声称仅由 CSS 构成的外壳就是完整的交互组件。

5. 验证

进行一轮范围明确的检查，一次性修复所有问题，然后确认一次。

1. 具体性： 这个页面是否可以属于 500 个毫不相关的产品？如果可以，请让产物、文案或布局组合更有针对性。
2. 框架使用： 每个界面元素是否都来自注册表中的组件，并通过粘贴而非重新输入的方式添加？每个自定义区块是否都有充分理由？
3. 结构： 核心产物是否位于装饰和营销内容之前？
4. 内容： 所有声明、指标、人物、徽标和引言是否均由已提供的内容支持，或明确标记为示例？
5. 状态： 交互控件是否涵盖相关的默认、悬停、焦点、激活、禁用、加载、错误、成功和空状态？
6. 无障碍： 检查语义化 HTML、标签、标题顺序、键盘操作、可见焦点、对比度、减少动态效果和强制颜色模式。
7. 响应式行为： 检查 320、375、768 像素和桌面宽度。不得出现文字被裁切、页面横向滚动、主要操作被隐藏或阅读顺序错乱。
8. 克制与多样性： 是否只有一个标志性设计手法，其余元素都围绕它展开？它是否适合该产品，而非套用现成模板？

如果有可用的设计检测器，请在界面完成后运行。

硬性规则

违反以下规则将导致无法通过：

1. 优先使用 Postrboard 原生组件，而非自定义替代组件。
2. 使用 Postrboard 设计令牌设置颜色、间距、字体、圆角、阴影、动效和焦点样式。
3. 绝不能把虚构的指标、用户评价、客户、徽标、人物或产品声明当作真实内容呈现。请使用已提供的事实、诚实的占位内容，或明确标记为示例数据的样本数据。
4. 绝不能使用表情符号作为界面图标。请使用项目现有的图标集，或小型且易于访问的 SVG。
5. 每个界面区域只使用一种主强调色。语义状态颜色须保持原有含义。
6. 不要嵌套卡片，也不要把每个部分都做成悬浮容器。
7. 除非提供的内容确实需要这种顺序，否则不要采用 Hero -> Features -> Testimonials -> Pricing -> CTA。
8. 没有功能上的理由就不要添加动效。请遵循 prefers-reduced-motion。
9. 进行视觉优化时，不要替换用户提供的文案、路由、行为或信息架构。
10. 验证通过之前，不要发布。

AI 设计痕迹

单独出现以下一种情况通常并非致命问题，但多个问题同时出现，会让页面看起来像机器生成的。

痕迹	表现	替代做法
模板化结构	居中主视觉区、三个同等功能项、底部的大型 CTA	以实际任务、数据或对象为主导
装饰性容器	每段文字都放进卡片；卡片中再套卡片	使用标题、间距和分隔线；仅为主要工作区添加边框
默认采用高端风格	大圆角、玻璃质感、光晕、处处都有柔和阴影	使用扁平或描边表面；仅在确实存在层叠时使用景深效果
技术元素堆叠	默认组合使用深色模式、尖锐圆角、方格纸纹理和粗重等宽字体	除非界面确实具有技术属性，否则保持适中的圆角并关闭纹理；强烈的技术视觉元素最多使用一种
不自然的色彩	紫蓝渐变、深色背景上的青色、彩色径向光晕	选择一种沉稳的强调色，并搭配语义状态颜色
通用字体排版	过度使用某一种无衬线字体、字号层级平淡、字距过紧	按用途使用提供的 Sans/Serif/Mono 字体角色，并建立清晰的层级
填充式结构	标题上方加眉题、随意添加章节编号	让标题和内容顺序自然发挥引导作用
图标卡片	每个标题上方都放一个圆角方形图标	仅在图标有助于说明操作或对象时使用
装饰性代码	没有实际代码，却放上终端圆点、闪烁光标或代码纹理	展示真实的命令、日志、差异、负载，或不展示终端
装饰性填充内容	抽象 SVG 色块、光球、虚构图表、装饰性仪表盘	展示产品中的真实内容，或空状态
含糊的文案	“改变您的工作流”和“强大的洞察”	说明产品的功能及其实际效果
虚构的佐证	虚构的用户、指标、引言、头像或徽标	使用真实数据，将样本数据标记为样本，或不提供
重复的动效	每个元素都使用相同的上浮、光晕或显现效果	让状态变化保持克制，只选择一个位置使用真正的动效
缺少状态	只有精美的默认状态，没有焦点、错误、加载或空状态	先构建所有状态，再进行样式设计

诚实的占位内容

使用能说明应填入何种内容的占位文本：

• Metric not yet measured
• Customer quote pending
• Connect a data source to populate this table
• Example event payload
• Integration name

不要使用 lorem ipsum 或看起来经过精心润色的虚假数据。

最终标准

成功的 Postrboard 界面应当具体、沉稳、易于访问、适配不同屏幕，并由原生组件构成。它可以简洁或柔和、紧凑或宽松、偏技术或偏编辑风格，但绝不能看起来像只替换了名词的主题模板。