用途:gpt-taste 是一个视觉方向技能,仅在用户明确要求这种“大胆编辑风”审美时应用,提供宽排版、密集网格、电影感间距与刻意动效的设计指导。它不是通用前端标准,使用时须保留用户需求、既有品牌体系、无障碍要求、内容结构和已选库;若用户明确选择其他具名视觉风格,应遵循该风格,不应混用互斥要求。
主要能力与要点: 构图方面,展示型标题应足够宽,避免别扭的高行折行,字号与行长根据实际文案响应式决定,而非固定行数;可依据内容使用刻意的不对称、强负空间或密集网格;bento 布局需检查各断点的占用是否有意为之;每个主要区块应有独立角色与节奏,AIDA 适用于转化页,但不应强加于仪表盘、工具或内容页;用少量标志性组件代替重复的通用卡片。
视觉特征方面,优先选择项目可合法可靠加载的表现型字体;保持文本、控件、焦点状态与媒体叠层的对比度;避免无意义的占位元标签、装饰徽章和统计数字;图片取自项目资产或已批准来源,未经确认不要引入远程占位图依赖;在具体元素上防止意外横向溢出,不要用隐藏整页溢出的方式兜底。
动效方面,静态界面同样有效;仅在有助于层级、反馈、连续性或叙事时添加动效。选择 CSS、WAAPI、Motion 或 GSAP 前先查看现有技术栈;项目已依赖或用户接受依赖时,复杂滚动编排可用 GSAP 与 ScrollTrigger,简单过渡优先用更轻的原生技术。每种动效都须包含减弱动效行为、键盘与焦点一致性、订阅或时间线清理及响应式测试;当内容长度、输入方式或设备尺寸使其脆弱时,避免强制 pinning、scrubbing 或堆叠。
实施前与验证:帮助规划时,用平实语言说明所选构图、排版、配色、响应式约束与动效目的;不要假装执行随机代码;如需变化,从若干相关方案中刻意选择,或运行真实工具并报告实际输出。在代表性视口(含小笔记本与移动端)验证渲染结果,检查对比度、焦点可见性、溢出、标题折行、网格占用与减弱动效。
限制:本技能为视觉方向指导,具体可用的字体、图片资产、库依赖与实现方式取决于项目本身,资料未提供固定命令、价格或平台信息。