技能介绍

问题背景

很多由大模型生成的前端页面看起来相似：默认字体、白底紫色渐变、居中卡片、均匀配色和可预测布局。资料中这个技能不是提供组件库，而是约束生成过程：在写代码前先确定目的、语气、约束和 差异化，避免把“前端需求”直接翻译成一套通用模板。对于需要对外展示、演示原型或快速迭代页面的工程师，这类页面最容易被判断为“像 AI 做的”。

工作方式

技能会把输入的需求拆成设计决策，再实现可运行代码。关键步骤包括：

审美方向：选择明确风格，例如极简、杂志感、复古未来、工业感或奢华细节；
排版：避免 Arial、Inter、Roboto 等通用字体，优先搭配有辨识度的展示字体与正文；
色彩：使用 CSS 变量维持一致性，让主色和强调色承担层次；
动效：重视页面加载、滚动触发的编排，而不是散落的微交互；
布局：采用非对称、重叠、对角线流、打破网格或受控密度；
背景：加入纹理、渐变、阴影、透明度等细节来制造氛围。

它支持 HTML/CSS/JS、React、Vue 等实现，但要求代码达到 production-grade，而不是只输出视觉效果图。

适用边界

这个技能适合页面、组件、应用壳或演示界面的设计与实现，尤其需要“看起来被认真设计过”的场景。它不解决业务逻辑、后端接口、权限体系或完整产品流程。若项目已有设计规范，应以团队规范优先；若要用于生产，还需补充 可访问性、性能预算、响应式策略 和浏览器兼容性要求。最终效果会受模型审美判断影响，适合作为设计起点，而不是最终设计系统。