RT-Prompt-MCP

Implementation Reference

• src/index.ts:85-103 (registration)

  Registration of the 'get_ui_design_suggestions' tool with the MCP server, including input schema and handler function.
  server.tool( "get_ui_design_suggestions", { context: z.string().optional().describe("当前上下文或任务描述"), designType: z.string().optional().describe("设计类型，如线框图、高保真原型图等"), platform: z.string().optional().describe("平台类型，如Web、iOS、Android等"), }, async ({ context, designType, platform }, extra) => { const suggestions = await getUiDesignPrompts(context, designType, platform) return { content: [ { type: "text", text: suggestions, }, ], } } )
• src/index.ts:87-91 (schema)

  Zod schema defining input parameters: context, designType, platform.
  { context: z.string().optional().describe("当前上下文或任务描述"), designType: z.string().optional().describe("设计类型，如线框图、高保真原型图等"), platform: z.string().optional().describe("平台类型，如Web、iOS、Android等"), },
• src/index.ts:92-102 (handler)

  MCP handler function that calls the helper getUiDesignPrompts and returns formatted text content.
  async ({ context, designType, platform }, extra) => { const suggestions = await getUiDesignPrompts(context, designType, platform) return { content: [ { type: "text", text: suggestions, }, ], } }
• src/promptSuggestions.ts:287-397 (helper)

  Core helper function implementing the logic to generate UI design suggestions based on context, designType, and platform. Handles special case for '荣通前端UI图转换' by fetching external content.
  export async function getUiDesignPrompts(context?: string, designType?: string, platform?: string): Promise<string> { // 新增：检查是否包含特定关键词 if (context && context.includes("荣通前端UI图转换")) { // 将规则存储在数组中以提高可读性 const rongtongRules = await getContentById("1") const codingContent = await getCodingContent("https://rongtongkeji.coding.net/p/rt-lib/d/rt-lib/git/raw/master/data/README.md") return `## 荣通前端UI图转换要求\n\n${rongtongRules}\n\n${codingContent}` } let suggestions = `## UI 设计图转化提示词建议\n\n` // 设计类型相关提示词 if (designType) { suggestions += `### ${designType} 设计转化建议\n\n` if (designType.toLowerCase().includes("线框图") || designType.toLowerCase().includes("wireframe")) { suggestions += `1. 专注于布局结构和功能元素，不必关注视觉细节\n` suggestions += `2. 使用基础UI组件实现布局，如div、section等\n` suggestions += `3. 保持简洁的样式，使用基础色彩和占位图\n` suggestions += `4. 确保实现设计图中的所有功能区块\n` suggestions += `5. 使用注释说明交互行为和状态变化\n` suggestions += `6. 保持一致的间距和对齐方式\n` } if (designType.toLowerCase().includes("高保真") || designType.toLowerCase().includes("高保真原型") || designType.toLowerCase().includes("hi-fi")) { suggestions += `1. 精确实现设计稿中的视觉效果，包括颜色、字体和阴影\n` suggestions += `2. 使用CSS变量管理设计系统中的颜色和尺寸\n` suggestions += `3. 确保像素级还原设计稿中的元素大小和间距\n` suggestions += `4. 实现设计中的动画和过渡效果\n` suggestions += `5. 注意图标和图片的细节处理，使用精确的图像资源\n` suggestions += `6. 考虑不同屏幕尺寸下的适配方案\n` } if (designType.toLowerCase().includes("组件库") || designType.toLowerCase().includes("design system")) { suggestions += `1. 创建可复用的组件，确保一致的API设计\n` suggestions += `2. 实现组件的不同状态和变体\n` suggestions += `3. 提供详细的文档说明组件用法和属性\n` suggestions += `4. 设计灵活的组件接口，支持自定义和扩展\n` suggestions += `5. 保持组件间的设计一致性\n` suggestions += `6. 考虑可访问性设计标准\n` } } // 平台相关提示词 if (platform) { suggestions += `\n### ${platform} 平台开发建议\n\n` if (platform.toLowerCase().includes("web")) { suggestions += `1. 使用响应式设计确保在不同屏幕尺寸下的良好表现\n` suggestions += `2. 考虑浏览器兼容性，特别是CSS新特性\n` suggestions += `3. 使用现代CSS布局技术如Flexbox和Grid\n` suggestions += `4. 优化资源加载和渲染性能\n` suggestions += `5. 确保实现Web无障碍标准（WCAG）\n` suggestions += `6. 在多设备上测试交互体验\n` } if (platform.toLowerCase().includes("ios")) { suggestions += `1. 遵循Apple人机界面指南(HIG)\n` suggestions += `2. 使用Swift UI或适当的iOS组件库\n` suggestions += `3. 考虑不同iOS设备尺寸的适配\n` suggestions += `4. 实现iOS特有的交互模式和动画\n` suggestions += `5. 注意安全区域和刘海屏的处理\n` suggestions += `6. 使用iOS标准导航模式\n` } if (platform.toLowerCase().includes("android")) { suggestions += `1. 遵循Material Design设计规范\n` suggestions += `2. 使用Jetpack Compose或适当的Android组件库\n` suggestions += `3. 适配不同Android设备屏幕尺寸和分辨率\n` suggestions += `4. 实现Android特有的交互模式和动画\n` suggestions += `5. 注意深色模式和主题适配\n` suggestions += `6. 考虑Android系统版本兼容性\n` } } // 上下文特定建议 if (context) { suggestions += `\n### 针对"${context}"的特定建议\n\n` if (context.toLowerCase().includes("电商") || context.toLowerCase().includes("商城")) { suggestions += `1. 优化产品展示布局，突出产品图片和关键信息\n` suggestions += `2. 设计流畅的购买流程和购物车体验\n` suggestions += `3. 实现筛选和搜索功能，便于用户找到所需产品\n` suggestions += `4. 设计清晰的产品分类和导航系统\n` suggestions += `5. 优化移动端的触摸操作体验\n` suggestions += `6. 考虑个性化推荐的UI展示\n` } if (context.toLowerCase().includes("管理") || context.toLowerCase().includes("后台") || context.toLowerCase().includes("dashboard")) { suggestions += `1. 设计信息密度合适的数据展示界面\n` suggestions += `2. 实现高效的表格和列表组件，支持排序和筛选\n` suggestions += `3. 提供清晰的数据可视化和统计图表\n` suggestions += `4. 优化表单设计，提高数据录入效率\n` suggestions += `5. 设计一致的操作流程和交互模式\n` suggestions += `6. 考虑大屏展示和数据导出功能\n` } } // 通用UI设计建议 suggestions += `\n### 通用UI设计转化建议\n\n` suggestions += `1. 使用组件化思想，将界面拆分为可复用组件\n` suggestions += `2. 确保UI设计与代码实现的一致性\n` suggestions += `3. 遵循设计规范，保持视觉统一性\n` suggestions += `4. 考虑不同状态下的UI展示（加载中、空状态、错误状态等）\n` suggestions += `5. 实现良好的交互反馈和过渡动画\n` suggestions += `6. 注重无障碍设计，确保所有用户可用\n` suggestions += `7. 考虑国际化和多语言支持的布局调整\n` suggestions += `8. 使用版本控制管理设计资源和代码\n` return suggestions }