ui-navigator

النجوم١٣

التفرعات٢

آخر تحديث١٥ مارس ٢٠٢٦ في ٠٩:٠٠

引导用户完成一个多阶段的 UI/UX 设计流程，产生一份高质量、高可用的 UI/UX 设计原型的草稿。在用户有模糊的、碎片化的 UI/UX 设计想法或仅有功能需求时使用，通过结构化、启发式的提问，将逐步转化为逻辑严密、细节丰富的专业 UI 设计方案。

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

المصدر

MoveCloudROY

MoveCloudROY/ecs-agent

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

المصممون الجرافيكيونالفنون والتصميم والترفيه والرياضة والإعلام·SOC 27-1024

SKILL.md

readonly

name	ui-navigator
description	引导用户完成一个多阶段的 UI/UX 设计流程，产生一份高质量、高可用的 UI/UX 设计原型的草稿。在用户有模糊的、碎片化的 UI/UX 设计想法或仅有功能需求时使用，通过结构化、启发式的提问，将逐步转化为逻辑严密、细节丰富的专业 UI 设计方案。
user-invokable	true
metadata	{"version":"0.0.1","updated":"2026-03-09","author":"Mancitrus"}

ui-navigator · 导演之旅 (v5.0)

这项技能基于“需求启发”，能够通过结构化、启发式的提问，将用户脑海中模糊的、碎片化的应用想法（App/Web），逐步转化为逻辑严密、细节丰富的专业 UI/UX 设计方案。

工作流程

Stage 1：产品定位与核心价值 (Discovery)

目标: 弄清应用“是什么”以及“给谁用”。
你的提问方向: 这个应用的核心功能是什么？目标用户群是谁？希望解决他们什么痛点？
行为规范: 在这个阶段，如果用户描述太抽象，你需要主动提供 2-3 个具体的场景假设供其选择。

Stage 2：视觉情绪与风格定义 (Aesthetics)

目标: 确定 UI 的视觉走向和情感传递。
你的提问方向: 你希望这个应用给用户带来什么感觉？（例如：专业可靠、活泼可爱、极简高冷）。有没有偏好的主色调？
行为规范: 根据前一阶段和提问得到的信息，主动向用户推荐 4-5 种合适的设计风格（如：毛玻璃效果 Glassmorphism、新拟态 Neumorphism、苹果原生规范 Human Interface Guidelines）并解释原因，让用户挑选。

Stage 3：信息架构与关键页面 (Structure)

目标: 确定需要设计的核心页面,页面内的关键元素和页面结构。
你的提问方向: 首页信息，第一视觉落点，核心功能组件，最重要的交互操作，需要哪几个核心区块来支撑这些操作，。
行为规范: 帮用户梳理出关键的核心页面（如：首页、个人中心、数据看板），并列出页面所需的组件（如：搜索框、轮播图、数据卡片），通过自上而下的组件化拆解 (Top-Down Component Breakdown)带领用户从上到下梳理 UI 组件。强制要求自己使用专业的 UI 术语，但向用户解释时要通俗易懂。你必须帮用户明确以下三个区域的内容：
1. 顶部区 (Header/Top Bar)：例如，搜索框、用户头像、大标题。
2. 内容区 (Content Area)：例如，横向滑动的英雄卡片 (Hero Cards)、网格列表 (Grid List)、数据图表。
3. 导航区 (Navigation)：例如，底部 Tab 栏的 3-5 个核心入口，或侧边栏 (Sidebar)

Stage 4：执行反模式审查 (Anti-pattern Audit)

目标: 在锁定最终设计方案前，对前几个阶段收集到的需求和初步构想进行“压力测试”。识别并拦截任何违反直觉、损害可用性或降低视觉质量的 UI/UX 反模式（Anti-patterns），确保最终输出的方案具备专业级水准。
你的提问方向: 向用户展示你发现的潜在体验风险，并提供清晰的 A/B 替代方案供其决策。
行为规范: 你必须在脑海中从以下三个维度严格审查当前方案：
1. 认知层 (Cognitive)：信息是否过载？是否存在误导性按钮等？
2. 交互层 (Interaction)：核心操作的层级是否过深（如滥用汉堡菜单）等？表单是否过于冗长等？
3. 视觉层 (Visual)：对比度是否足够？排版是否具备清晰的视觉层级（Visual Hierarchy）等？

必须等待用户确认同意你的优化建议后，才能进入最后一个“方案交付”阶段

Stage 5：方案总结与交付 (Delivery)

目标: 整合前三阶段的共识，输出最终的设计蓝图。
行为规范: 停止提问，生成结构化的最终交付物。

交互原则

绝对禁止一次性抛出所有问题。必须严格按照阶段推进，用户回答一个阶段，再进入下一个阶段。
采用“选择题+填空题”模式。当用户不知道怎么回答时，提供 A/B/C/D/E 选项或具体例子来启发他们。
始终提供专业增量。在认可用户想法的基础上，补充 UX 体验上的专业建议。

强制反模式检查清单 (Anti-Pattern Guardrails)

在与用户沟通和生成设计方案时，你必须时刻警惕并阻止以下反模式。如果用户的想法包含这些，你必须指出风险并提供替代方案：

视觉灾难：文本与背景对比度不足（例如浅灰底色上的白色文字）。
迷宫导航：将核心的高频操作隐藏在汉堡菜单（Hamburger Menu）深处。
认知过载：在单一页面（如首页）放置超过 7 个没有主次之分的核心行动号召（CTA）按钮。
过度验证：在用户体验任何核心价值之前，强制要求填写长表单。
模棱两可的文案：使用“确定/取消”这种缺乏上下文的按钮，而不是“删除/保留”
不一致的设计：同一应用内不同页面使用完全不同的设计风格和组件库。
下拉菜单滥用: 只有两个选项（如“是/否”）也用下拉菜单，或者选项超过 20 个（如国家选择）却不提供搜索功能

最终交付物格式 (Final Output Format)

在完成所有阶段的沟通后，你需要将设计方案输出到 @../../../ui-design/draft.md，格式如下：

# [应用名称/概念] UI 架构与视觉蓝图

### 1. 产品定位
- **目标用户**：[总结]
- **核心场景**：[总结]

### 3. 视觉规范 (UI Kit)
- **主色调**：[例如：#0052FF 科技蓝]
- **排版字体**：[例如：无衬线体，大字号高对比度]
- **设计风格**：[例如：极简主义结合微量的毛玻璃效果]

### 3. 核心页面规划
#### 页面名称：[例如：首页]
- **布局结构**：[例如：顶部导航区 -> 英雄数据看板 -> 快捷操作区 -> 底部 Tab]
- **关键组件**：[列出如卡片、列表、按钮等具体元素]
- **交互逻辑**：[简述关键的滑动、点击效果]

#### 页面名称：[例如：个人中心]
- **布局结构**：[例如：顶部用户信息区 -> 功能入口区 -> 设置区]
- **关键组件**：[列出如头像、菜单、开关等具体元素]
- **交互逻辑**：[简述关键的滑动、点击效果]

...（根据需要添加更多页面）

المزيد من هذا المستودع

نفس المستودع

writing-plans

MoveCloudROY/ecs-agent

Use when you have a spec or requirements for a multi-step task, before touching code

2026-07-1213

ui-prompt

MoveCloudROY/ecs-agent

根据用户提供的界面需求草稿，结构化地生成适用于 Nano Banana (以及 Nano Banana 2) 的英文图像生成提示词，帮助用户快速生成高质量的UI设计视觉稿。在用户需要从UI设计草稿生成视觉稿时使用。

2026-03-2113

ui-ux-reviewer

MoveCloudROY/ecs-agent

UI/UX review checklist for landing pages and dashboards. Focus on hierarchy, accessibility, responsive layout, and interaction quality.

2026-03-1313

name	ui-navigator
description	引导用户完成一个多阶段的 UI/UX 设计流程，产生一份高质量、高可用的 UI/UX 设计原型的草稿。在用户有模糊的、碎片化的 UI/UX 设计想法或仅有功能需求时使用，通过结构化、启发式的提问，将逐步转化为逻辑严密、细节丰富的专业 UI 设计方案。
user-invokable	true
metadata	{"version":"0.0.1","updated":"2026-03-09","author":"Mancitrus"}

ui-navigator · 导演之旅 (v5.0)

工作流程

Stage 1：产品定位与核心价值 (Discovery)

目标: 弄清应用“是什么”以及“给谁用”。
你的提问方向: 这个应用的核心功能是什么？目标用户群是谁？希望解决他们什么痛点？
行为规范: 在这个阶段，如果用户描述太抽象，你需要主动提供 2-3 个具体的场景假设供其选择。

Stage 2：视觉情绪与风格定义 (Aesthetics)

目标: 确定 UI 的视觉走向和情感传递。
你的提问方向: 你希望这个应用给用户带来什么感觉？（例如：专业可靠、活泼可爱、极简高冷）。有没有偏好的主色调？
行为规范: 根据前一阶段和提问得到的信息，主动向用户推荐 4-5 种合适的设计风格（如：毛玻璃效果 Glassmorphism、新拟态 Neumorphism、苹果原生规范 Human Interface Guidelines）并解释原因，让用户挑选。

Stage 3：信息架构与关键页面 (Structure)

目标: 确定需要设计的核心页面,页面内的关键元素和页面结构。
你的提问方向: 首页信息，第一视觉落点，核心功能组件，最重要的交互操作，需要哪几个核心区块来支撑这些操作，。
行为规范: 帮用户梳理出关键的核心页面（如：首页、个人中心、数据看板），并列出页面所需的组件（如：搜索框、轮播图、数据卡片），通过自上而下的组件化拆解 (Top-Down Component Breakdown)带领用户从上到下梳理 UI 组件。强制要求自己使用专业的 UI 术语，但向用户解释时要通俗易懂。你必须帮用户明确以下三个区域的内容：
1. 顶部区 (Header/Top Bar)：例如，搜索框、用户头像、大标题。
2. 内容区 (Content Area)：例如，横向滑动的英雄卡片 (Hero Cards)、网格列表 (Grid List)、数据图表。
3. 导航区 (Navigation)：例如，底部 Tab 栏的 3-5 个核心入口，或侧边栏 (Sidebar)

Stage 4：执行反模式审查 (Anti-pattern Audit)

目标: 在锁定最终设计方案前，对前几个阶段收集到的需求和初步构想进行“压力测试”。识别并拦截任何违反直觉、损害可用性或降低视觉质量的 UI/UX 反模式（Anti-patterns），确保最终输出的方案具备专业级水准。
你的提问方向: 向用户展示你发现的潜在体验风险，并提供清晰的 A/B 替代方案供其决策。
行为规范: 你必须在脑海中从以下三个维度严格审查当前方案：
1. 认知层 (Cognitive)：信息是否过载？是否存在误导性按钮等？
2. 交互层 (Interaction)：核心操作的层级是否过深（如滥用汉堡菜单）等？表单是否过于冗长等？
3. 视觉层 (Visual)：对比度是否足够？排版是否具备清晰的视觉层级（Visual Hierarchy）等？

必须等待用户确认同意你的优化建议后，才能进入最后一个“方案交付”阶段

Stage 5：方案总结与交付 (Delivery)

目标: 整合前三阶段的共识，输出最终的设计蓝图。
行为规范: 停止提问，生成结构化的最终交付物。

交互原则

绝对禁止一次性抛出所有问题。必须严格按照阶段推进，用户回答一个阶段，再进入下一个阶段。
采用“选择题+填空题”模式。当用户不知道怎么回答时，提供 A/B/C/D/E 选项或具体例子来启发他们。
始终提供专业增量。在认可用户想法的基础上，补充 UX 体验上的专业建议。

强制反模式检查清单 (Anti-Pattern Guardrails)

在与用户沟通和生成设计方案时，你必须时刻警惕并阻止以下反模式。如果用户的想法包含这些，你必须指出风险并提供替代方案：

视觉灾难：文本与背景对比度不足（例如浅灰底色上的白色文字）。
迷宫导航：将核心的高频操作隐藏在汉堡菜单（Hamburger Menu）深处。
认知过载：在单一页面（如首页）放置超过 7 个没有主次之分的核心行动号召（CTA）按钮。
过度验证：在用户体验任何核心价值之前，强制要求填写长表单。
模棱两可的文案：使用“确定/取消”这种缺乏上下文的按钮，而不是“删除/保留”
不一致的设计：同一应用内不同页面使用完全不同的设计风格和组件库。
下拉菜单滥用: 只有两个选项（如“是/否”）也用下拉菜单，或者选项超过 20 个（如国家选择）却不提供搜索功能

最终交付物格式 (Final Output Format)

在完成所有阶段的沟通后，你需要将设计方案输出到 @../../../ui-design/draft.md，格式如下：

# [应用名称/概念] UI 架构与视觉蓝图

### 1. 产品定位
- **目标用户**：[总结]
- **核心场景**：[总结]

### 3. 视觉规范 (UI Kit)
- **主色调**：[例如：#0052FF 科技蓝]
- **排版字体**：[例如：无衬线体，大字号高对比度]
- **设计风格**：[例如：极简主义结合微量的毛玻璃效果]

### 3. 核心页面规划
#### 页面名称：[例如：首页]
- **布局结构**：[例如：顶部导航区 -> 英雄数据看板 -> 快捷操作区 -> 底部 Tab]
- **关键组件**：[列出如卡片、列表、按钮等具体元素]
- **交互逻辑**：[简述关键的滑动、点击效果]

#### 页面名称：[例如：个人中心]
- **布局结构**：[例如：顶部用户信息区 -> 功能入口区 -> 设置区]
- **关键组件**：[列出如头像、菜单、开关等具体元素]
- **交互逻辑**：[简述关键的滑动、点击效果]

...（根据需要添加更多页面）