Agent Skills
返回列表
多 Agent UI 设计风格

多 Agent UI 设计风格

开发编程 更新于 2026.08.29

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

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_31070f98/ui-styles。

技能介绍

问题在哪

新产品或原型阶段，团队常要先定 UI 调性：该走 Linear 式深色科技，还是 Notion 式温暖极简？口头描述容易飘，落到代码时又缺统一的 Tailwind 配置、CSS 变量 和 设计令牌，设计和实现各写一套。

技能如何工作

本技能把「从产品描述到可落地样式」拆成多 Agent 流水线，由 主编 解析需求并调度，研究员 产出产品类型/用户/品牌向的分析并筛候选设计系统，设计师 从候选里给出风格推荐与理由，开发者 输出可直接使用的配置。

内置 10 套 参考设计系统（如 Linear、Notion、Stripe、Apple、IBM Carbon 等），配套 references/ 下的 Agent 提示词、流水线说明、产品类型→风格匹配矩阵与输出模板。完整流程适合「帮我设计这个产品的 UI 风格」「生成 Tailwind 配置」等诉求；简单问法可走 快速查询，仅返回风格推荐，不自动生成代码。

开发者 Agent 的交付物通常包括三类：Tailwind Config、CSS Variables、Design Tokens。

适用边界

  • 目标是 设计系统与样式配置，不是整页前端实现（整页可用 claude-design 等场景）。
  • 不涉及后端或 API 逻辑。
  • 不提供 Logo、图标等品牌资产，只给规范与代码化令牌。
  • 需要 Tailwind/CSS 产出时，应走完整多 Agent 流程，而非仅快速查询。

使用场景

  • 新项目立项时输入产品描述，走主编调度的四步流程，拿到风格推荐报告与 Tailwind/CSS 设计令牌。
  • 仅需判断某类产品（如 SaaS 项目管理）适合哪套参考风格时，用快速查询拿设计师推荐，暂不生成代码。
  • 需求里只有品牌调性与用户画像文字，需要开发者 Agent 输出可粘贴进仓库的 Tailwind Config 与 CSS 变量。
  • 设计评审前用研究员分析报告对齐产品类型、用户场景，并从十种内置设计系统中筛出候选风格。

适合人员

  • 独立开发者同时撰写产品说明与搭界面，希望从产品描述一次得到可落地的 Tailwind 与 CSS 变量配置。
  • 前端工程师收到「科技感/极简/金融感」等模糊表述，需要映射到 Linear、Stripe 等具体参考系并生成配置。
  • 维护组件库或设计系统的技术设计师，要把新产品线对应到知识库十种风格之一并导出统一令牌。
  • 写产品或技术方案的产品负责人，需要带理由的设计系统推荐，而非整页 UI 或 Logo 资源。