Agent Skills
返回列表
独特前端美学生成

独特前端美学生成

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_173d434e/yw-test-1。

技能介绍

要解决的问题

前端生成代码经常陷入同一套审美：白底紫渐变、Inter、Roboto、居中卡片、通用按钮。它可能能跑，但缺少上下文和记忆点。这个技能处理的是从需求到界面风格之间的缺口：先决定界面为什么存在、给谁用、采用哪种明确美学方向，再写可运行的代码。

技能如何工作

它会按两步推进：

  • 设计判断：解析 purpose、tone、constraints、differentiation，要求选择一个可执行的方向，例如极简、粗野、编辑感、复古未来、玩具感、工业感等，而不是堆叠形容词。
  • 代码落地：输出 HTML/CSS/JS、React、Vue 等生产级界面，关注 Typography、Color & Theme、Motion、Spatial Composition 与背景质感。它会倾向避开 Arial、Inter、Roboto、系统字体和“白底紫渐变”这类默认组合，并让复杂度匹配美学目标。

适用边界

这个技能适合组件、页面、应用原型或交互界面设计，不适合纯后端逻辑、数据库设计或非视觉任务。若项目已有品牌规范、设计系统或无障碍硬性指标，应把这些约束放在提示里；它的“大胆选择”不能替代可访问性、性能和真实业务约束。

使用场景

  • 为数据看板设计一个深色工业风页面，需要自定义字体、强对比配色与加载动效。
  • 用 React 做产品落地页，避免紫渐变白底，要求有明确编辑感和 staggered reveal 动效。
  • 将组件原型改成具有粗野主义风格的界面，强调不对称布局、粗边框和独特字体搭配。
  • 为工具应用构建登录页，要求根据受众选择复古未来风并实现 CSS-only 微交互。

适合人员

  • 负责官网首页重构的前端工程师，需要把需求变成有明确美学方向的 React 页面。
  • 做产品演示原型的独立开发者，需要避免通用模板感并输出可运行的 HTML/CSS/JS 界面。
  • 负责设计系统落地交互的前端设计师，需要约束字体、配色、动效和布局风格。
  • 做 SaaS 落地页的前端工程师，需要按目标受众选择编辑感或工业感等方向。