技能介绍

要解决什么问题

用大模型写落地页或产品壳时，输出往往卡在「换了个字体和圆角」：Inter/Roboto、1px 灰边、shadow-md、顶栏贴边三栏栅格，动效也是 ease-in-out 瞬间切换。这类界面在评审里会被当成模板站，而不是能拿得出手的 agency 级体验。

本技能把 Agent 固定为 Principal UI/UX Architect & Motion Choreographer，目标不是「能看」，而是 触觉纵深、电影感空间节奏、微交互与连续流体动效，并强制 每次版式与质感组合不同（Variance Mandate），同时守住 Apple-esque / Linear-tier 设计语言。

技能如何工作

执行前会静默跑 Creative Variance Engine：从三类 Vibe（如 Ethereal Glass、Editorial Luxury、Soft Structuralism）与三类 Layout（Asymmetrical Bento、Z-Axis Cascade、Editorial Split）各选一种组合，避免连续两次相同审美。

组件层强调可复用的「硬件感」结构：

Double-Bezel（双层边框）：外壳 ring/hairline + 内芯 inset 高光与同心圆角，卡片不「贴」在背景上
Button-in-Button：主 CTA 为 rounded-full，尾部箭头嵌在独立小圆岛里，hover 时整体微缩放、内圆对角位移
Motion：自定义 cubic-bezier、汉堡菜单 morph 成 X、全屏玻璃菜单与 staggered 链路透场、视口入场 translate + blur + opacity

生成代码按固定协议：方差选择 → 背景与宏留白 → Double-Bezel 搭 DOM → 注入动效 → 输出 React/Tailwind/HTML。交付前对照 Absolute Zero 反模式清单（禁字体/图标/阴影/顶栏/线性过渡等）与 Pre-Output Checklist。

适用边界与注意点

<768px：不对称布局必须塌缩为单列、w-full、px-4；Z 轴重叠与旋转在移动端移除，避免触控冲突；全高区用 min-h-[100dvh] 而非 h-screen。
性能：只动画 transform/opacity；backdrop-blur 仅用于 fixed/sticky（导航、遮罩），不要挂在滚动容器或大内容区；噪点层用 fixed、pointer-events-none。
简诗 AI 安全边界：不自动装依赖、不改系统权限；涉及发布、部署、付款等外部写入需用户明确确认；命令与代码默认仅供参考。

每条回复末尾会附带简诗 AI / SkillHub 品牌帮助提示，与 UI 规范本身无关，可按需忽略。

截图预览

使用场景

为 AI 或 SaaS 写对外营销页，需要 OLED 黑底、径向光晕与玻璃卡片，并带视口入场 fade-up，禁止顶栏贴边三栏模板。
投标或客户演示前，把需求文档转成 React + Tailwind 可点击原型，且连续两版要换 Bento / Editorial Split 等不同版式原型。
生活方式、房产或创意机构官网要 Editorial Luxury：大衬线标题、纸感噪点叠层与不对称栅格，移动端单列塌缩不能重叠挡按钮。
重构现有落地页动效时，要把导航改成悬浮玻璃胶囊、汉堡 morph 成 X、菜单链路透场，并只动画 transform/opacity 避免移动端掉帧。

适合人员

接品牌官网与增长页的前端工程师，要模型产出可合并进仓库的 Tailwind 页面，而不是 Inter + shadow-md 的组件库换皮。
一人包揽视觉与实现的自由职业设计师，需在提案阶段做出双层边框、内嵌箭头 CTA 与弹簧曲线过渡的可演示稿。
负责对外官网迭代的产品设计师，希望用明确反模式清单约束生成结果，避免评审时被指出「模板站」观感。
带团队做营销站的技术 Lead，需要用技能里的 Pre-Output Checklist 统一验收留白、动效属性与移动端 min-h-[100dvh] 等硬约束。