SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场ui-designer

ui-designer

设计与创作

查看项目

更新于 10-15 10:43

技能介绍

用途

UI Designer Skill（v2）用于在用户需要界面方向、设计系统选择、主题化，或在实现前/实现过程中需要视觉与产品 UX 结构时提供支持。适用场景包括仪表盘、管理后台、内部工具、CMS 等 Web 或 App 界面。

主要能力

该技能通过 MCP 工具（mcp__the-designer__*）提供以下能力：

  • 核心设计流程：evaluate_style（按产品上下文为风格打分并返回排序推荐与工作流）、detect_genre（从简报检测设计类型：editorial / modern-minimal / atmospheric / playful）、pre_flight_scan（设计前扫描现有项目的框架、字体、调色板、动效库）、list_options（列出所有可用系统、调色板、原型、混合方案）、validate_combo（生成前校验风格+调色板+混合是否有效）、generate_rules（为风格+调色板+原型组合生成设计规则）、generate_tailwind_config（生成可直接使用的 tailwind.config.js）、generate_template（生成完整 HTML 起始页）、get_component（获取生产就绪的组件片段，如按钮、卡片、导航、hero 等）、get_cross_cutting_rules（获取独立规则：无障碍、动效、图标、令牌、响应式）、generate_palette_variants（从十六进制颜色生成浅色/深色/高对比度变体）、export_project（导出完整项目脚手架）。
  • Ellis UI 模板（定制系统）：list_ellis_ui_designs（列出全部 24 个 Ellis UI 定制设计模板，如 Swiss Archival、Vintage Airmail、Brutalist）、get_ellis_ui_template（获取特定 Ellis UI 设计系统的 HTML 结构与 CSS 规则，作为高度主题化、反套路设计的结构基础）。
  • 主题与令牌系统：generate_tokens（生成完整 OKLCH 令牌系统 tokens.css，可指定主题或类型）、list_themes（列出全部 16 个精选主题及其 OKLCH 值、字体、轴元数据）、get_reference（拉取任意参考文档全文）、brand_fetch_design_md（下载真实品牌的 DESIGN.md）、brand_list（按类别列出 328+ 品牌）。
  • 颜色与调色板：palette_fetch（从 Color Hunt 获取实时调色板）、palette_convert（将调色板 JSON 转换为 CSS / Tailwind / SCSS / Figma / Android / Swift）。
  • 质量门禁（v2 新增）：anti_pattern_check（对输出运行 35 项套路测试，检测斜体标题、虚假浏览器外框、编造指标等）、self_critique（交付前按 6 个质量轴 P-H-E-S-R-V 打分，低于 3 分触发修订）、generate_8state_component（生成包含全部 8 种交互状态的演示页：hover、focus、active、disabled、loading、error、success）。
  • 实用工具：list_installed_skills（检测已安装的技能子模块）、generate_motion_snippet（为任意动画类别生成可直接粘贴的 anime.js v4 片段，含 CDN、代码与用法提示，匹配当前设计风格的缓动/时长特征，所有片段均包含 prefers-reduced-motion 保护）。

使用方式

该技能定义了强制工作流（v2），分为四个阶段：

  • 阶段 0：发现。依次调用 detect_genre、pre_flight_scan（如为现有项目）、evaluate_style。不得跳过阶段 0。评估引擎会对全部 17 种风格打分，预扫描可防止覆盖现有令牌，类型检测决定适用哪些主题与套路门禁。
  • 阶段 1：线框。调用 list_themes、generate_tokens、validate_combo、generate_rules。
  • 阶段 2：原型。调用 generate_template、get_component、generate_8state_component（如需交互组件）。
  • 阶段 3：质量。调用 anti_pattern_check、self_critique，修复任何门禁失败（反模式 < 3、自我批判 < 3），最后调用 export_project 导出完整脚手架。不得跳过阶段 3。

此外还提供标准工作流（系统优先）与品牌参考工作流（DESIGN.md 优先）。品牌参考工作流中，可通过 brand_fetch_design_md（MCP）或 npx getdesign@latest add <brand>（CLI）获取品牌 DESIGN.md，解析其前置元数据提取颜色、排版、圆角、间距、组件，映射到最接近的结构系统，生成令牌并覆盖品牌值，再生成规则、模板与组件，最后运行质量门禁并校验无障碍。

适用场景

适用于需要界面方向、设计系统选择、主题化、视觉与产品 UX 结构的场景，包括仪表盘、管理后台、内部工具、CMS 等。决策流程建议先按产品分类选择系统：企业/管理/CMS/仪表盘可选 ant、carbon 或 atlassian；Windows/Microsoft 选 fluent；Apple 平台选 apple-hig；Android/自适应选 material；电商选 polaris；内容/编辑/作品集选 minimal、swiss、swiss-archival；表现/实验性选 neo-brutalism、glass、claymorphism、neo-m3。

限制与规则

该技能强调反 AI 套路设计理念，规则包括：结构多样性（不同简报的两个页面不得共享相同的 hero → 3-feature → CTA → footer 节奏）；锁定令牌（每个颜色与字体族必须引用具名 CSS 自定义属性，不得内联 OKLCH/十六进制值绕过令牌块）；不编造内容（用户未提供的指标不得虚构，统计主导布局与证明条必须使用真实数字或标注占位符，推荐语、徽标、案例数同理）；不重绘浏览器外框（不得使用假浏览器栏、手机框、代码块标题栏，应使用真实截图置于 figure 中或完全省略外框）；排版纯粹性（标题始终为正体，斜体仅保留为正文段落内的强调）；移动端响应式硬性要求（每个输出必须在 320/375/414/768px 下渲染，无横向滚动，无可点击的两行文本，移动端区块头折叠为单列）；组件 8 状态规范（每个交互组件必须样式化全部 8 种状态）；避免默认紫色渐变（无简报依据时避免 LLM 默认的紫蓝渐变）。图标仅允许使用 6 种来源：Phosphor、Font Awesome、Google Material Symbols、Tabler、Lucide、Heroicons。所有动画必须尊重 prefers-reduced-motion。

该技能还包含大量参考文件，涵盖核心参考（快速参考、图标指南、组件模式、设计令牌、响应式布局、无障碍、动效设计、Tailwind 集成、getdesign-md 品牌参考系统）、类型参考（editorial、modern-minimal、atmospheric、playful）、系统参考（ant-design、carbon-design、fluent-design、atlassian-design、apple-hig、material-you、shopify-polaris、minimalism、swiss-design、swiss-archival、neo-brutalism、glassmorphism、claymorphism、skeuomorphism、neo-m3-hybrid、m3-pastel-glass）、页面原型（dashboard、settings、table-detail、marketing-hero、editorial-landing）以及调色板资源。