SuperAPI AI 工具集

elevated-design

设计与创作

查看项目

更新于 10-16 07:23

技能介绍

用途:Elevated Design 是一套受苹果企业设计语言启发的网页界面设计方法,用于制作高端、精致、具有企业质感的页面。资料给出的适用场景包括:高级落地页与首屏、企业营销网站、产品展示、特性区块、高端 SaaS 产品页,以及需要传递品质与信任的品牌体验。触发说法包括“让它更精致”“做苹果风格设计”“看起来更贵”“像奢侈科技品牌”等。

主要能力:以大留白构建层级与节奏;使用系统字体栈(-apple-system、BlinkMacSystemFont、Segoe UI 等),以 300–400 字重为主,标题采用 72px、96px 等大比例并与正文形成对比;文字颜色使用灰阶(如 #1d1d1f、slate 系列),避免纯黑;采用 12 列栅格并做 7-5、8-4 的非对称分割;配色接近单色,仅用一个品牌强调色(约占 1%–2%),主要用于 CTA;动效时长 400–600ms,交互目标不小于 44×44px;间距遵循 8px 基准网格;卡片圆角 12–24px,阴影与玻璃拟态用于营造轻微纵深。

用法:资料提供了 Tailwind 风格的排版、字距、行高、间距、容器宽度、按钮与卡片组件的类名参考,例如主按钮使用 bg-[#0071e3]、rounded-xl、px-5 py-3、text-[15px]、transition-all duration-400;卡片常用 bg-slate-50、border-slate-100、rounded-2xl、p-8/p-10。文档同时给出 Do 与 Don't 清单,如不要使用 font-bold、不要低于 16px 正文字号、不要用 2px 以上边框(按钮除外)、不要用 150ms 以内过快过渡、避免完全对称栅格。

限制:资料未说明该技能的安装命令、收费方式、支持的平台或框架范围、版本信息及具体实现细节;技能来源为 nitinm21/youtube_summarizer 中的 elevated-design,页面地址为 https://www.skills.sh/nitinm21/youtube_summarizer/elevated-design。上述内容仅为设计规范与组件示例,实际使用需自行判断与技术适配。