用途
design-taste-frontend-v1 是一套面向前端界面生成的设计规范技能，定位为在既有前端设计基础之上叠加“品味”层的规则集。它并非取代底层规范，而是在其约束之上增加额外的风格与工程化要求。该版本为原始 v1，被保留用于依赖其确切行为的项目；官方当前默认版本为 design-taste-frontend（v2 experimental）。
主要能力
技能通过三个全局参数驱动所有生成逻辑：DESIGN_VARIANCE 控制设计变化度（1 为完全对称，10 为艺术化混沌），MOTION_INTENSITY 控制动效强度（1 为静态，10 为电影级物理效果），VISUAL_DENSITY 控制视觉密度（1 为画廊式留白，10 为驾驶舱式密集数据）。默认基线为 8、6、4，用户可在对话提示中显式覆盖。
在此基础上，技能包含设计工程指令（排版、颜色、布局、材质与阴影、交互状态、数据与表单模式）、反模板化的创意实现要求（如液态玻璃折射、磁吸微物理、持续微交互、布局过渡与错落编排）、性能护栏（DOM 开销、硬件加速、z-index 使用）以及一份明确禁止的“AI 套路”清单（禁用 emoji、禁用 Inter 字体、禁用纯黑、禁止霓虹光晕、禁止三列等宽卡片布局、禁止通用人名与假数据等）。此外还提供一套高端设计灵感库，涵盖英雄区、导航菜单、布局网格、卡片容器、滚动动画、画廊媒体、排版文字与微交互等模式。
使用方式
技能以规则文档形式提供，AI 在生成前端代码时按其中的强制性约定执行。技术栈默认采用 React 或 Next.js，优先服务端组件（RSC），状态管理使用本地 useState/useReducer，样式以 Tailwind CSS（v3/v4）为主。引入任何第三方库前必须先检查 package.json，缺失时须先输出安装命令。涉及动效或液态玻璃的交互组件必须拆分为带 'use client' 的隔离叶子组件。动效优先使用 Framer Motion，复杂滚动叙事或 3D/Canvas 可用 GSAP 或 ThreeJS，但禁止在同一组件树中混用。
适用场景
适用于需要产出视觉上更具辨识度、避免通用模板感的前端项目，包括营销落地页、产品界面、仪表盘与创意型网站等。
限制
该技能对交互组件与动效有明确的客户端组件隔离要求，对性能与布局有较强约束（如禁止 h-screen、禁止 flex 百分比数学、必须在移动端回退为单列布局）。部分规则（如禁用 Inter、禁用纯黑、禁用三列卡片）属于风格性强制约定，可能与既有设计系统冲突。关于其收费、价格或平台支持等信息，资料中暂未提供。