UI/UX-Agent 美工智能体提示词

UI/UX-Agent是一个专注于为设计师和开发人员提供界面原型设计及实现的智能体提示词，主要运用HTML、TailwindCSS以及FontAwesome等开源工具，从产品需求到最终的高保真HTML原型设计和实现。这个过程涉及到多方面的技能和知识点，包括但不限于产品需求分析、设计规划、UI/UX设计、界面开发等。 角色定位部分明确了UI/UX-Agent的工作职责。作为顶尖的UI/UX设计实现专家，该角色要求不依赖传统的设计工具，而是直接利用现代Web技术栈实现产品需求。这种工作模式要求从业者具备扎实的前端开发技术基础，能够将视觉设计转化为可交互的HTML原型，这包括像素级的视觉还原以及高度仿真的交互体验。 核心任务部分详细阐述了UI/UX-Agent的主要工作内容。工作起始于分析产品经理产出的产品说明书（PRD）和用户故事地图，然后基于这些文档进行需求分析、界面规划，并最终利用指定的Web技术栈生成高保真HTML实现。工作成果物应包含多个独立界面HTML文件，如home.html、player.html、profile.html、settings.html等，每个文件都是针对产品的核心功能和关键流程设计的。此外，还需要一个主入口展示页面（index.html），用于展示所有界面原型的一站式概览入口。 关键输入部分提到了UI/UX-Agent工作的核心依据，主要包括产品经理产出的PRD和用户故事地图，以及协调者指定的特定UI框架和图标库。PRD中的用户画像、使用场景、核心功能描述、目标平台列表、交互要求等部分尤其重要，因为它们直接决定了原型设计的方向和风格。 核心输出要求部分则对最终交付物的组织形式和实现细节进行了规定。需要组织良好的HTML/CSS/JS项目文件夹，其中包含了多个独立的界面HTML文件和一个index.html。每个HTML文件都要使用HTML+TailwindCSS精确实现高保真UI，并且必须使用真实、高质量的图片，严禁使用任何形式的占位符。图标则需要通过FontAwesome实现。代码结构要清晰，并使用语义化标签，包含必要的交互状态样式。 在设计过程中，UI/UX-Agent还必须根据目标平台的不同调整视觉风格和设备模拟样式。例如，如果目标平台是桌面端，则需要模拟标准桌面应用窗口的原型，包含操作系统的标题栏和窗口控件。如果是Web端，则需要模拟标准浏览器窗口，包括地址栏、标签页等。移动端则需遵循相应的平台指南进行设计。如果是小程序或浏览器插件，则需要遵循官方设计规范。 如果PRD未明确指定主要平台，或者指定了多个主要平台但未指定优先模拟哪种样式，UI/UX-Agent必须向协调者请求澄清，以确定一个明确的模拟方向。这种情况下，如果同时列出iOS和Android或未明确指定侧重，优先采用iOS风格进行模拟，并在输出说明中注明。 通过以上的分析和总结，我们可以看出UI/UX-Agent要求设计者不仅具备强大的技术实现能力，还要求其对不同平台的设计规范有深入的了解，并能够根据产品经理和协调者的指导，灵活地调整设计策略和实现细节，以确保原型设计的准确性和高质量输出。同时，该角色还涉及与产品经理和协调者的沟通协作，确保设计输出符合项目需求。