SuperAPI AI 工具集

design-system-management

设计与创作

查看项目

更新于 10-15 22:11

技能介绍

用途:为 riksdagsmonitor 维护一致、可扩展的设计系统,通过 CSS 自定义属性、组件模式与赛博朋克美学主题,覆盖全部 14 种语言版本。

核心原则:单一事实来源(所有设计令牌放在 CSS 自定义属性中);组件化(可复用、可组合的 UI 组件);主题一致性(所有页面统一赛博朋克风格);内置无障碍(默认符合 WCAG 2.1 AA);响应式(移动优先、流式缩放);性能(精简 CSS、高效选择器)。

主要能力:提供颜色、排版、间距、边框与阴影等设计令牌。颜色含霓虹主色(青、品红、黄)、深色背景、文本色与语义色;排版使用 Inter、Orbitron、Fira Code 字体族,并用 clamp() 实现流式字号与行高;间距同样采用 clamp() 流式缩放;阴影提供赛博朋克发光效果。组件库包含按钮(.btn、.btn-primary、.btn-secondary)、卡片(.card、.card-header、.card-title、.card-body)与导航(.nav、.nav-link、.nav-link.active),均带悬停与聚焦状态。

使用方式:新建页面时套用设计令牌;开发组件时复用或扩展组件库;重构 UI 时统一不一致样式;更新主题时修改 CSS 自定义属性;响应式设计使用流式间距与排版;无障碍增强利用内置合规。要求使用 CSS 自定义属性,不要硬编码颜色与尺寸;组件优先复用;移动优先;保证 4.5:1 对比度与 44x44px 触控目标;使用 clamp() 实现流式缩放;保持精简 CSS 与跨语言一致模式。

限制:资料未提供安装命令、依赖、平台支持、收费与价格信息;未说明具体构建工具或框架集成方式。版本 1.0,最后更新 2026-02-06。