SuperAPI AI 工具集

design-minimal

设计与创作

查看项目

更新于 11-06 16:15

技能介绍

用途

design-minimal 是一个面向单页产物的设计技能,触发条件是用户明确要求生成独立 HTML 页面,并希望采用克制的极简风格,典型对象包括以阅读为先的仪表板、简报、讲义和地图等。它输出一个自包含的 HTML 文件,通过清晰层级、强间距、显式结构和有限配色建立视觉秩序,不使用任何装饰性效果。

主要能力

  • 单文件交付:只生成一个自包含的 HTML 文件,页面标题、结构与内容都集中在该文件内。
  • 仅用 Tailwind 控制样式:布局与组件样式全部通过 Tailwind CDN 的类实现,<style> 中仅允许在 :root 定义设计令牌,即背景色、墨色、弱化文字色、细线色、浅纸色、主字体和等宽字体等 CSS 变量。
  • 禁止自定义组件 CSS:不为卡片、网格、按钮、页眉、分区、排版或状态编写自定义 CSS 规则,也不使用 @media。
  • 固定桌面宽度:使用 w-[960px]、w-[1120px]、max-w-[1200px] 等固定宽度,以及 grid-cols-[...] 等显式网格,不提供移动端回退。
  • 视觉词汇约束:页面使用正文、外壳、网格、页眉、元信息、分区标签、实线面板、虚线软面板、文本破折号分隔线、条目、下划线链接和细线徽章等模式,禁止外部字体、JavaScript 框架、图标库、SVG 图标、渐变、阴影、圆角和强调色。
  • 语言匹配:可见界面语言与用户语言和产物语境保持一致;俄语页面中的界面标签、标题、分区名、状态说明和页脚文案应使用俄语,英文仅保留在文件路径、命令、代码标识符、字段、API 名称、模型或工具名称以及必须可复制的字面值中。若某英文术语有教学价值,可先配一次通俗的本地语言标签,之后界面统一使用本地标签。

使用方式

用户在对话中明确要求生成独立 HTML 页面,并希望采用极简风格时,该技能即被触发。生成时按文档提供的骨架组织页面:head 中引入 Tailwind CDN,:root 定义设计令牌,body 使用令牌任意值类设置背景、文字、字体、字号与行高;main 使用固定宽度与内边距;页眉使用上下粗边框;主体可用一列、两列或密集多面板网格,面板以实线或虚线边框区分;条目使用细线分隔并配编号元信息。文档也给出了标签、链接与徽章的 Tailwind 类组合,可作为直接采用的样式模式,但具体布局不应被当作强制模板,内容需要其他结构时可调整。

适用场景

适合阅读优先的仪表板、内部或外部简报、讲义、地图类页面,以及需要克制、结构化呈现信息的单页文档。也适合需要统一视觉语言、明确层级和大量留白的静态展示页面。

限制

只输出单个自包含 HTML 文件;不允许移动端适配或响应式前缀;不允许自定义组件 CSS、@media、外部字体、图标库、JavaScript 框架、SVG 图标、渐变、阴影、圆角和强调色;不得使用颜色编码的状态表示。文档中的骨架和视觉词汇是参考模式,并非必须遵循的固定布局。费用、平台兼容性和具体效果等信息暂未提供。