Agent Skills
返回列表
💻

前端设计 Pro

开发编程 更新于 2026.08.30

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

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_24cd73cb/wb-frontend-design-pro。

技能介绍

问题：AI 前端代码往往能跑，但缺乏产品质感

默认 Tailwind 类名堆叠、间距随意、层级不清、动画缺失，会让页面看起来像原型而非产品。前端设计 Pro 将设计师判断与团队规范转成可执行约束，减少“每次生成都靠运气”的情况。

工作方式

它会围绕一套设计系统生成或改造 UI：

  • 视觉层次：用字号、色彩、留白和 font-weight 明确主次；
  • 间距系统：优先使用 8px 基准，如 gap-4、p-6；
  • 色彩语义：主色、success、warning、error、info 和中性色阶分工明确；
  • 组件模式：按钮、卡片、表单、表格保持同一项目内一致；
  • 响应式与无障碍：移动优先、alt、aria-label、:focus-visible。

如果项目已有规范，可读取 design-tokens.json 或 .frontend-design-pro.yaml 覆盖默认值。

适用边界

它适合 Tailwind CSS、React/Vue/Svelte 的页面级 UI 与组件优化，也支持深色模式变体。复杂业务交互、动画时序和可访问性仍应人工 Review；若项目使用非 Tailwind 方案，需要明确说明再适配。

使用场景

  • 在 Tailwind React 项目中生成登录页与定价页，统一间距、层级和组件样式。
  • 对现有组件库做 UI 优化，统一按钮、卡片、表单、表格的圆角、阴影和聚焦态。
  • 依据 design-tokens.json 覆盖默认规范，把业务设计令牌落实到生成代码中。
  • 生成带深色模式和无障碍属性的响应式界面，并检查 alt、aria-label 与 focus-visible。

适合人员

  • 用 Tailwind 和 React 做产品页的前端工程师，需要稳定产出有视觉层次的界面。
  • 负责组件库维护的前端团队，需要统一按钮、表单、表格的视觉规范。
  • 把 AI 生成的页面改到可评审状态的产品工程师，希望间距和色板有依据。
  • 需要深色模式与无障碍属性的界面开发，关注焦点管理和屏幕阅读器标签。