Agent Skills
返回列表
前端界面美学生成

前端界面美学生成

开发编程 更新于 2026.08.30

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

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_443fefb8/desgin-qian。

技能介绍

问题

生成前端页面时常见结果趋同：Inter/Roboto 字体、紫白渐变、常规卡片布局，代码能跑但缺乏上下文辨识度。这个技能针对的是“AI 生成感”：没有明确审美方向，视觉细节随意堆叠，最终只能算功能原型，而不是可交付界面。

工作方式

技能先要求模型在进入编码前完成设计判断：

  • 目标：界面解决什么问题，面向谁
  • 气质：选择一种明确方向，如极简、粗野、复古未来、编辑式、装饰几何等
  • 约束：框架、性能、无障碍与技术栈
  • 差异点：哪个细节会被人记住

随后输出可运行的 HTML/CSS/JS、React 或 Vue 代码，重点控制字体、CSS 变量、动效、空间构图和背景质感。它会明确避开通用字体、俗套配色和模板化组件，并强调最大化设计需要更复杂实现，极简化设计则需要克制与精度。

适用边界

适合组件、页面、应用界面等前端视觉实现；不适合纯后端、数据分析或无视觉要求的脚本。若项目已有严格设计规范，应把规范作为约束输入，避免生成风格与现有系统冲突。

使用场景

  • 为 SaaS 登录页重做视觉，输出可运行的 React 组件并避免模板化卡片。
  • 按编辑式杂志风格生成落地页，包含字体、色板、滚动动效与背景纹理。
  • 将粗糙 HTML 原型改造为生产级页面，补齐 CSS 变量、微交互和细节间距。
  • 用 Vue 构建管理端仪表盘，在深色主题下完成组件排版与空间构图。

适合人员

  • 负责官网或产品页的资深前端工程师：要把页面做出明确审美而不是默认组件。
  • 做产品原型的独立开发者：需要快速得到可运行且细节精致的前端界面。
  • 有品牌规范的设计协作方：要求生成代码匹配指定气质、字体和动效边界。
  • 负责管理端 UI 的全栈工程师：要在深色主题下重排仪表盘并保留可用性。