SuperAPI AI 工具集

design-taste-frontend

前端与建站

查看项目

更新于 10-16 05:07

技能介绍

用途:这是一个“反套路”前端设计技能,面向落地页、作品集和网站改版,明确不适用于仪表盘、数据表格和多步骤产品界面。核心思路是先读需求(页面类型、用户使用的氛围词、参考链接、受众、已有品牌资产、合规约束),再决定设计方向,而不是直接套用默认审美。

主要能力:要求生成前先输出一行“Design Read”,说明页面类型、受众、氛围语言和倾向的设计体系;若需求确实模糊,只问一个澄清问题。随后设置三个全局旋钮:DESIGN_VARIANCE(对称到艺术化混乱)、MOTION_INTENSITY(静态到电影级)、VISUAL_DENSITY(留白到高密度),默认8/6/4,并给出按氛围、用例和改版类型的推断表。

设计系统选择:若需求对应真实体系,应安装官方包,如 Fluent UI、Material 3、Carbon、Polaris、Atlassian、Primer、GOV.UK Frontend、USWDS、Bootstrap、Radix Themes、shadcn/ui、Tailwind v4;一个项目只用一套体系。若需求是审美方向(玻璃拟态、Bento、粗野主义、编辑风、暗黑科技、极光渐变、动态字体等),则用原生 CSS + Tailwind + 组件库实现,并诚实标注哪些是借鉴而非官方。

工程约定:默认 React/Next.js 与 Server Components,交互组件需隔离为客户端叶子组件;样式默认 Tailwind v4;动画用 motion/react;字体用 next/font 或自托管;图标从指定库中选一个家族并统一线宽;响应式用标准断点、max-w 容器、min-h-[100dvh] 和 CSS Grid;导入第三方库前必须检查 package.json 并先给出安装命令。

限制与偏好:反对AI紫渐变、居中英雄区、三张等宽卡片、滥用玻璃拟态、Inter+slate-900 等默认套路;默认不用衬线体,禁用 Fraunces 和 Instrument_Serif;强调色最多一个且饱和度默认低于80%;高端消费类项目禁用米色+黄铜+浓咖啡的默认配色,并需轮换配色家族。斜体展示字需注意下伸部裁切。资料未提供具体收费、价格、平台支持范围或效果数据。