Apple Design
把苹果「流体、拟物」的界面动效理念迁移到 Web。适用于构建或审查手势驱动 UI、弹簧动画、拖拽/滑动/半屏交互、动量与可打断转场、半透明材质、排版与减弱动效。
提炼苹果的流体界面原则(核心为 WWDC 2018《Designing Fluid Interfaces》),迁移到 Web 平台(CSS、Pointer Events、requestAnimationFrame,以及 Motion/Framer Motion 等弹簧库)。主线:当动效从当前屏上数值出发、继承用户速度、向前投射动量、并可随时被抓住反向,界面才「有生命」。内容涵盖消除响应延迟(在 pointer-down 时给反馈)、带速度/位置历史与 setPointerCapture 的 1:1 直接操控、可打断且感知速度的弹簧、半透明材质与景深、排版(光学字号、字距、行距)以及减弱动效。属指导/知识型,用于构建或审查苹果风 UI,技能本身不执行代码。
生成单文件 HTML 横向翻页 PPT,两种风格——「电子杂志 × 电子墨水」(衬线 + WebGL 流体背景)与「瑞士国际主义」(无衬线 + 网格点阵),含章节幕封、数据大字报与图片网格。作者歸藏。
一个 Claude Code 插件,为编码 agent 注入设计「品味」——打包多个前端技能(brutalist、minimalist、soft、redesign、stitch、brandkit、image-to-code、imagegen 等),让 agent 不再生成乏味、千篇一律的 UI。
两阶段的 Web 视觉设计技能:先从 PRD / 参考 URL / 截图 / 关键词产出标准化的 DESIGN.md 规范,确认后据此生成达标的 UI/UX、视觉、动效与响应式网页代码。