SuperAPI AI 工具集

swiss-modern-web-designer

前端与建站

查看项目

更新于 10-15 20:30

技能介绍

用途:为 2026 年现代 Web 应用提供正宗瑞士国际主义排版风格(Swiss International Typographic Style),把 Müller-Brockmann 的数学网格原则延伸到数字场景,强调用清晰而非装饰传达信息。适合 SaaS 仪表盘与开发者工具、金融科技与企业平台、文档与内容密集型站点、以清晰度取胜的落地页、B2B 设计系统、API 文档与技术门户、面向专业受众的营销站。不适合粗野主义、Windows 复古、玻璃拟态、装饰性极繁或活泼友好风格。

主要能力:四大支柱为网格、排版、色彩、空间。网格采用 12 列模块化布局、基线对齐与不对称版式;排版使用单一无衬线字族(如 Inter)与 Perfect Fourth 比例(1.333)的字阶,靠字号与字重建立层级;色彩极度克制,最多黑、白加一个强调色,灰阶承担信息层级,强调色仅用于可操作元素;空间按 8px 基数计算,留白占视口 40% 以上。提供颜色、字号、间距、动效等 CSS 变量模板,以及按钮、卡片、导航、输入框、表格、模态框等组件规则:发丝级 1px 边框、6–8px 圆角、150ms 过渡、悬停状态克制。响应式按断点重排内容而非重新设计。

使用方式:按资料中的 CSS 变量与网格类(如 .swiss-grid、.swiss-col-content)搭建布局,遵循快速决策树选择容器、交互、排版与布局方案。资料还提供 references/component-library.md、grid-system.md、typography-guide.md、page-templates.md、dark-mode.md 等参考文件,以及无障碍建议(高对比、65ch 行宽、focus-visible 焦点环、prefers-reduced-motion)。

限制:资料未提供安装命令、价格、平台支持或效果数据,暂未提供。需避免多字族、粗边框、硬偏移阴影、渐变、装饰性色块与紧凑间距等反模式。