提升 AI 前端开发审美：打造高质感 UI 与交互设计

解决 AI 生成前端界面过于“模版化”的问题：通过注入资深设计师的审美逻辑，强制 AI 避开常见的 UI 陷阱，构建具有精准色彩、高级排版和物理级动效的现代化界面。

为什么需要这个技能

大多数 LLM 在编写前端代码时具有明显的“统计学偏差”：倾向于使用居中的 Hero 区域、泛滥的紫色渐变、过度依赖卡片布局以及毫无灵魂的 Inter 字体。这种“AI 腔”的设计让产品看起来像廉价的模版。

本技能通过一套严苛的 设计工程指令（Design Engineering Directives），强制 AI 在执行时进行审美校准。它不仅关注视觉，还涵盖了从视口稳定性（防止 iOS Safari 跳动）到高性能动效（避免 React 状态导致掉帧）的专业工程实践。

适用场景

• 打破模版感：需要构建一个看起来像 Vercel 或 Apple 风格的高端 SaaS 界面。
• 精细化交互：需要实现物理级弹簧动效（Spring Physics）或复杂的 Bento Grid 布局。
• 专业前端交付：要求 AI 输出的代码不仅能运行，且在色彩饱和度、排版对比度和响应式细节上达到生产环境标准。
• 复杂状态处理：需要 AI 自动补全 Loading 骨架屏、空状态和错误状态，而非仅提供一个静态成功页面。

核心工作流

1. 参数化风格定义：通过三个维度（设计多样性 DESIGN_VARIANCE、动效强度 MOTION_INTENSITY、视觉密度 VISUAL_DENSITY）量化界面风格。
2. 执行审美禁令（Anti-Slop）：严格禁止使用纯黑色（#000）、过度饱和的霓虹色、以及被滥用的 3 列等宽卡片布局。
3. 构建技术底座：
   • 强制检查 package.json 依赖，避免凭空猜测库版本。
   • 采用 min-h-[100dvh] 替代 h-screen 以确保移动端稳定性。
   • 使用 CSS Grid 替代复杂的 Flexbox 百分比计算。
4. 注入高级组件模式：调用“液态玻璃”折射、磁力按钮或非对称布局等高级设计模式。
5. 性能护栏检查：确保所有高频动画通过 transform 和 opacity 实现，且复杂的 Client Component 与 Server Component 严格分离。

下载和安装

下载 design-taste-frontend 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐