SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-taste-frontend

design-taste-frontend

前端与建站

查看项目

更新于 10-15 18:37

技能介绍

用途

该技能定位为「资深 UI/UX 工程师」，目标是在生成数字界面时主动覆盖大语言模型默认的设计偏好（即所谓「AI 套路」），产出更接近高端定制的前端界面。它通过一套可配置的基线参数和一系列强制规则来约束生成行为。

主要能力

1. 基线配置

技能定义三个全局变量，默认值为：

  • DESIGN_VARIANCE（设计变化度）：8（1=完全对称，10=艺术化混乱）
  • MOTION_INTENSITY（动效强度）：6（1=静态无动效，10=电影级/魔法物理）
  • VISUAL_DENSITY（视觉密度）：4（1=画廊/通透，10=驾驶舱/密集数据）

默认基线固定为 (8, 6, 4)，但会根据用户在对话中的明确要求动态调整。

2. 默认架构与约定

  • 依赖校验（强制）：导入任何第三方库前必须检查 package.json，缺失时必须先输出安装命令。
  • 框架：React 或 Next.js，默认使用服务端组件（RSC）。
  • RSC 安全：全局状态仅在客户端组件中可用；Next.js 中需用 "use client" 包裹 provider。
  • 交互隔离：涉及动效/液态玻璃的交互组件必须抽离为带 'use client' 的叶子组件。
  • 状态管理：局部 UI 用 useState/useReducer，全局状态仅用于避免深层 prop 传递。
  • 样式：90% 使用 Tailwind CSS（v3/v4），并校验版本锁定与 v4 配置守卫。
  • 反 emoji 政策（关键）：代码、标记、文本、alt 文本中禁止使用 emoji，改用高质量图标（Radix、Phosphor）或干净 SVG。
  • 响应式与间距：标准化断点，页面容器用 max-w-[1400px] mx-auto 或 max-w-7xl；全高 Hero 区禁用 h-screen，必须用 min-h-[100dvh]；复杂布局用 CSS Grid 而非 flex 百分比计算；图标统一使用 @phosphor-icons/react 或 @radix-ui/react-icons 并统一 strokeWidth。

3. 设计工程指令（偏差纠正）

  • 规则 1 确定性排版：标题默认 text-4xl md:text-6xl tracking-tighter leading-none；反对用 Inter 营造「高端/创意」感，强制使用 Geist、Outfit、Cabinet Grotesk 或 Satoshi；仪表盘/软件 UI 禁用衬线字体；正文默认 text-base text-gray-600 leading-relaxed max-w-[65ch]。
  • 规则 2 配色校准：最多 1 个强调色，饱和度 < 80%；禁止「AI 紫/蓝」美学；使用中性基底（Zinc/Slate）搭配单一高对比强调色；整个输出保持同一色板。
  • 规则 3 布局多样化：当 LAYOUT_VARIANCE > 4 时禁止居中 Hero/H1，强制分屏、左文右图或非对称留白。
  • 规则 4 材质、阴影与反卡片滥用：VISUAL_DENSITY > 7 时禁止通用卡片容器，改用 border-t、divide-y 或负空间分组；仅在需要表达层级时使用卡片，阴影需带背景色调。
  • 规则 5 交互状态：必须实现完整交互循环，包括骨架屏加载、空状态、错误状态，以及 :active 时的 -translate-y-[1px] 或 scale-[0.98] 触感反馈。
  • 规则 6 数据与表单模式：标签置于输入框上方，辅助文本可选，错误文本置于下方，输入块统一 gap-2。

4. 创意主动性（反套路实现）

  • 液态玻璃折射：在 backdrop-blur 基础上加 1px 内边框与内阴影模拟边缘折射。
  • 磁性微物理（MOTION_INTENSITY > 5）：按钮向光标轻微吸附，必须使用 Framer Motion 的 useMotionValue 和 useTransform，禁止用 useState。
  • 持续微交互：嵌入脉冲、打字机、浮动、微光、轮播等无限微动画，交互元素使用弹簧物理（stiffness: 100, damping: 20）。
  • 布局过渡：使用 Framer Motion 的 layout 与 layoutId。
  • 交错编排：用 staggerChildren 或 CSS 级联实现瀑布式揭示，父子必须位于同一客户端组件树。

5. 性能护栏

  • DOM 成本：颗粒/噪点滤镜仅用于固定、pointer-events-none 的伪元素，禁止用于滚动容器。
  • 硬件加速：禁止动画 top/left/width/height，仅用 transform 和 opacity。
  • Z-index 克制：不随意使用 z-50/z-10，仅用于系统性层级。

6. 技术参考（档位定义）

  • DESIGN_VARIANCE：1-3 可预测（对称网格）；4-7 偏移（重叠、多样宽高比）；8-10 非对称（瀑布流、分数单位网格、大留白）。移动端覆盖：4-10 级在 < 768px 时必须回退为严格单列布局。
  • MOTION_INTENSITY：1-3 静态（仅 hover/active）；4-7 流式 CSS（cubic-bezier 过渡、延迟级联）；8-10 高级编排（滚动触发、视差，禁止 window.addEventListener('scroll')）。
  • VISUAL_DENSITY：1-3 画廊模式；4-7 日常应用模式；8-10 驾驶舱模式（小间距、1px 分隔线、数字用等宽字体）。

7. 禁止的 AI 特征

  • 视觉与 CSS：禁止霓虹/外发光、纯黑 #000000、过饱和强调色、大面积渐变文字、自定义鼠标光标。
  • 排版：禁用 Inter 字体；禁止超大 H1；衬线字体仅用于创意/编辑设计，禁止用于仪表盘。
  • 布局与间距：对齐与间距需数学精确；禁止三列等宽卡片布局，改用两列 Z 字、非对称网格或横向滚动。
  • 内容与数据：禁止通用人名（John Doe 等）、通用头像、可预测假数字（99.99%、50%）、创业套路名（Acme、Nexus、SmartFlow）、填充词（Elevate、Seamless、Unleash、Next-Gen）。
  • 外部资源与组件：禁止 Unsplash 链接，改用 picsum.photos 或 SVG UI Avatars；shadcn/ui 必须定制，不得使用默认状态。

8. 创意武器库

提供高端灵感清单，包括标准 Hero 范式、导航与菜单（Mac OS Dock 放大、磁性按钮、Gooey 菜单、Dynamic Island、径向菜单、浮动速度拨号、Mega Menu）、布局与网格（Bento Grid、Masonry、Chroma Grid、分屏滚动、幕布揭示）、卡片与容器（视差倾斜卡、聚光边框卡、玻璃拟态面板、全息箔卡、Tinder 滑动堆栈、形变模态）、滚动动画（粘性堆叠、横向滚动劫持、Locomotive 序列、缩放视差、滚动进度路径、液态滑动过渡）、画廊与媒体（穹顶画廊、Coverflow 轮播、拖拽平移网格、手风琴图片滑块、悬停图片轨迹、故障效果）、排版与文字（动态跑马灯、文字遮罩揭示、文字乱码效果、圆形文字路径、渐变描边动画、动态排版网格）、微交互与效果（粒子爆炸按钮、液态下拉刷新、骨架微光、方向感知悬停按钮、涟漪点击、SVG 线条绘制、网格渐变）。并说明 GSAP/ThreeJS 与 Framer Motion 不得混用于同一组件树。

使用方式

该技能以规则集形式提供，用户在生成前端界面时加载此技能，技能会按上述基线参数与规则约束生成过程。用户可在对话中明确覆盖基线值。具体安装或调用方式在提供的资料中暂未说明。

适用场景

适用于需要产出高质量、非模板化、视觉突出的前端界面，尤其是 React/Next.js + Tailwind CSS 技术栈下的 UI 生成任务。

限制

资料未提供该技能的收费、价格、平台支持范围、实际效果验证等信息。部分规则（如具体字体可用性、图标库版本）依赖项目实际环境。