SuperAPI AI 工具集

visual-design-system

设计与创作

查看项目

更新于 10-16 03:15

技能介绍

用途:为落地页选定并固化视觉设计系统,解决 AI 生成页面千篇一律(Inter/Poppins 字体、蓝紫渐变、玻璃拟态卡片、居中 eyebrow pill 英雄区、三张等权卡片等)的问题,并通过机器可读规范让智能体真正遵守。

主要能力:设定受限的美学预算——配色不超过 4 个角色(两个中性色 + 一个墨色 + 一个强调色,强调色仅用于链接与主 CTA),背景用暖白 #fafaf9、墨色 #1c1917,避免纯白纯黑;字体 1-2 款,正文不小于 16px;间距用 8px 尺度,区块间距约 96px。显式写出禁止清单(蓝紫渐变、玻璃拟态、闪光图标、三张等权卡片、居中 eyebrow pill 英雄区、跑马灯 logo 条等)。将规范编码为 DESIGN.md:YAML token 加散文说明,token 按角色而非原始值定义,放在仓库根目录 AGENTS.md 旁。用确定性门禁强制执行:安装 ux-guardrails 钩子做写入时的间距/字体/对比度/通用化检查,CI 可叠加 ESLint、Stylelint、TypeScript 判别联合、Playwright 视觉回归、axe-core。对比度底线为正文 4.5:1、大文本与非文本 UI 3:1。

使用方式:先设定美学预算,再写禁止清单,然后编码为 DESIGN.md,最后接入 lint 与视觉、无障碍门禁;限制智能体自我修正循环,禁止其修改 lint 配置。

适用场景:需要选择配色/字体/间距、消除通用 AI 观感、建立智能体可遵守的机器可读设计系统时。

限制:不负责在 token 存在前决定整体视觉方向(属 landing-page-art-direction),不负责文案、区块骨架、动画、组件构建、完整 WCAG 合规与排名性能。DESIGN.md 是 2026 年快速收敛的约定(Google Labs,alpha),非正式标准,需对照当前规范核实。具体安装命令与完整代码示例资料未提供。