Agent Skills
返回列表
UI/UX Pro 设计系统助手

UI/UX Pro 设计系统助手

设计多媒体 更新于 2026.08.30

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

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_9fcd9868/uiuv。

技能介绍

解决的问题

做产品页面时，常见难点不是没有样式，而是颜色、字体、间距、悬停反馈、对比度和可访问性散落在单次实现里，最后像“拼出来”的界面。这个技能面向 UI/UX 设计、构建、审查与修复任务，先把需求转成可复用的设计系统，再进入代码实现，减少临时决策造成的视觉不一致。

技能如何工作

  • 需求分析：提取产品类型、风格关键词、行业和技术栈；未指定栈时默认 html-tailwind。
  • 生成设计系统：通过 --design-system 并行检索 product、style、color、landing、typography 等维度，输出版式、配色、字体、效果与反模式。
  • 持久化规则：使用 --persist 生成 design-system/MASTER.md 和 design-system/pages/ 页面覆盖，按“Master + Overrides”方式维护。
  • 补充检索：按需查询 style、chart、ux、typography、landing 等域，补齐图表、动画、无障碍等细节。
  • 栈规范：支持 React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、shadcn、Jetpack Compose 等实现要点。
  • 交付检查：覆盖 SVG 图标、cursor-pointer、过渡时长、浅色/深色对比、固定导航留白、响应式与可访问性。

适用边界

该技能偏向前端 UI/UX 设计与实现，适合落地页、仪表盘、SaaS、电商等界面任务；不替代品牌策略、文案写作或后端服务设计。若只想要一次随意样式，流程可能偏重；若需要跨会话一致性，应启用持久化设计系统。

使用场景

  • 为 SaaS 仪表盘确定配色、字体、图表和反模式，再生成 Tailwind 页面。
  • 为官网落地页规划 hero、社会证明、价格区与 CTA，输出可检查的样式规则。
  • 审查现有 React 页面，修正图标、悬停、焦点态、浅色对比和导航遮挡问题。
  • 维护跨会话设计规范，用 Master 文件和页面覆盖保存全局与页面级样式。

适合人员

  • 负责产品前端的工程师，需要把 UI 需求变成一致的 Tailwind 或 React 实现。
  • 负责官网或落地页的前端开发者，需要同时把控结构、配色、字体和可访问性。
  • 做仪表盘或数据页面的工程师，需要选择图表类型并处理实时展示与加载状态。
  • 维护多页面设计系统的团队，需要保存全局规则并允许页面级样式覆盖。