技能介绍

解决什么问题

直接让大模型写前端页面，很容易产出一眼就能认出的「AI 味」界面：默认的 Inter、Roboto 或 Arial 字体，白底配紫色渐变，对称的卡片栅格，还有千篇一律的按钮和输入框。这类页面功能上没毛病，但读不出任何上下文，也没有记忆点。根源在于模型会本能地退回最常见、最安全的组合，而前端品质恰恰取决于那些不那么常见的取舍。

技能如何工作

这个技能把「先想清楚再动手」变成强制流程，而不是让模型边写边猜。

设计思考：编码之前先确定一个明确的美学方向，包含四件事——目的（界面解决什么问题、给谁用）、基调（极致极简、极繁混乱、复古未来、有机自然、奢华精致、玩具感、杂志编辑风、粗野原生、装饰艺术、柔和粉彩、工业实用等）、约束（框架、性能、可访问性），以及差异化（用户看完之后会记住什么）。关键是有意为之，而不是堆砌元素。

前端美学规范：字体要独特且有性格，把一个有表现力的展示字体与细腻的正文字体搭配起来；色彩用 CSS 变量统一管理，主导色加锐利点缀优于均匀发散的平庸配色；动效优先纯 CSS 方案，React 场景可使用 Motion 库，一次编排良好的分步显现（animation-delay）比散落各处的微交互更有效；布局鼓励不对称、重叠、斜向流动和打破栅格的元素，负空间与信息密度只取其一；背景要做出氛围和纵深，可用渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰边框、自定义光标和颗粒覆盖。

实现要求：产出的是可直接运行的 HTML/CSS/JS、React 或 Vue 代码，必须生产可用、视觉突出、风格统一、细节打磨到位。

适用边界

实现复杂度要与美学方向匹配：极繁风格需要大量动画和特效，极简风格则需要克制，把精力压在间距、字体和微妙细节上。技能只约束视觉方向与代码质感，不规定业务逻辑、状态管理或接口设计。此外需要主动避开被用滥的字体（Inter、Roboto、Arial、Space Grotesk）和白底紫渐变这类套路，每次生成都应在明暗主题、字体选择和整体风格上做出不同选择。