get_frontend_suggestions
Generate targeted frontend development suggestions based on context, framework, and device type to enhance LLM content creation. Optimize UI/UX decisions with precise inputs.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| context | No | 当前上下文或任务描述 | |
| deviceType | No | 设备类型，如移动端、桌面端等 | |
| framework | No | 前端框架，如React、Vue等 |
Implementation Reference
- src/index.ts:51-61 (handler)The handler function for the get_frontend_suggestions tool. It calls getFrontendPrompts with the input parameters and returns the suggestions formatted as MCP content.async ({ context, framework, deviceType }) => { const suggestions = getFrontendPrompts(context, framework, deviceType) return { content: [ { type: "text", text: suggestions, }, ], } }
- src/index.ts:46-50 (schema)Zod input schema defining optional parameters: context, framework, deviceType.{ context: z.string().optional().describe("当前上下文或任务描述"), framework: z.string().optional().describe("前端框架，如React、Vue等"), deviceType: z.string().optional().describe("设备类型，如移动端、桌面端等"), },
- src/index.ts:44-62 (registration)Registration of the get_frontend_suggestions tool using server.tool, including schema and handler.server.tool( "get_frontend_suggestions", { context: z.string().optional().describe("当前上下文或任务描述"), framework: z.string().optional().describe("前端框架，如React、Vue等"), deviceType: z.string().optional().describe("设备类型，如移动端、桌面端等"), }, async ({ context, framework, deviceType }) => { const suggestions = getFrontendPrompts(context, framework, deviceType) return { content: [ { type: "text", text: suggestions, }, ], } } )
- src/promptSuggestions.ts:117-210 (helper)The getFrontendPrompts helper function that generates frontend development prompt suggestions based on framework, deviceType, and context.export function getFrontendPrompts(context?: string, framework?: string, deviceType?: string): string { let suggestions = `## 前端开发提示词建议\n\n` // 框架相关提示词 if (framework) { suggestions += `### ${framework} 框架开发建议\n\n` if (framework.toLowerCase().includes("react")) { suggestions += `1. 组件划分应遵循单一职责原则\n` suggestions += `2. 使用函数组件和 React Hooks 而非类组件\n` suggestions += `3. 使用 Context API 或 Redux 管理全局状态\n` suggestions += `4. 合理使用 useMemo 和 useCallback 优化性能\n` suggestions += `5. 实现懒加载和代码分割提高初始加载速度\n` suggestions += `6. 合理设计组件的 props 接口，使用 TypeScript 定义类型\n` } if (framework.toLowerCase().includes("vue")) { suggestions += `1. 遵循 Vue 风格指南组织代码结构\n` suggestions += `2. 利用 Composition API 提高代码复用性\n` suggestions += `3. 使用 Pinia 或 Vuex 管理状态\n` suggestions += `4. 组件通信优先使用 props 和 emits\n` suggestions += `5. 合理使用计算属性和侦听器\n` suggestions += `6. 善用异步组件和动态导入优化性能\n` } if (framework.toLowerCase().includes("angular")) { suggestions += `1. 遵循 Angular 风格指南和最佳实践\n` suggestions += `2. 使用 NgRx 管理复杂应用状态\n` suggestions += `3. 合理拆分模块，实现惰性加载\n` suggestions += `4. 使用 TypeScript 接口定义数据模型\n` suggestions += `5. 利用 RxJS 处理异步数据流\n` suggestions += `6. 创建可复用的组件和指令\n` } } // 设备类型相关提示词 if (deviceType) { suggestions += `\n### ${deviceType} 设备开发建议\n\n` if (deviceType.toLowerCase().includes("移动") || deviceType.toLowerCase().includes("mobile")) { suggestions += `1. 实现响应式设计，适配不同屏幕尺寸\n` suggestions += `2. 使用移动优先（Mobile First）的设计思路\n` suggestions += `3. 优化触摸交互，设计适合手指操作的界面元素\n` suggestions += `4. 考虑网络不稳定情况下的用户体验\n` suggestions += `5. 优化资源加载提高移动设备性能\n` suggestions += `6. 实现离线功能，增强用户体验\n` } if (deviceType.toLowerCase().includes("桌面") || deviceType.toLowerCase().includes("desktop")) { suggestions += `1. 利用更大屏幕空间优化信息展示\n` suggestions += `2. 支持键盘快捷键提高操作效率\n` suggestions += `3. 考虑高分辨率显示器的显示效果\n` suggestions += `4. 实现拖拽等桌面特有交互方式\n` suggestions += `5. 设计合理的布局结构，避免空间浪费\n` suggestions += `6. 针对不同操作系统考虑特定优化\n` } } // 上下文特定建议 if (context) { suggestions += `\n### 针对"${context}"的特定建议\n\n` if (context.toLowerCase().includes("表单") || context.toLowerCase().includes("form")) { suggestions += `1. 实现渐进式表单验证，即时反馈\n` suggestions += `2. 使用清晰的错误提示信息\n` suggestions += `3. 保存表单状态，防止意外丢失\n` suggestions += `4. 支持键盘导航提高可访问性\n` suggestions += `5. 使用合适的输入控件（日期选择器等）\n` suggestions += `6. 长表单考虑分步骤填写提高完成率\n` } if (context.toLowerCase().includes("数据可视化") || context.toLowerCase().includes("chart") || context.toLowerCase().includes("图表")) { suggestions += `1. 选择合适的图表类型展示数据关系\n` suggestions += `2. 提供交互功能如过滤、钻取等增强分析能力\n` suggestions += `3. 实现响应式设计，适应不同屏幕尺寸\n` suggestions += `4. 使用合适的配色方案提高可读性\n` suggestions += `5. 提供数据导出功能\n` suggestions += `6. 考虑大数据集的性能优化\n` } } // 通用前端建议 suggestions += `\n### 通用前端开发建议\n\n` suggestions += `1. 界面设计应考虑响应式布局，适配不同设备\n` suggestions += `2. 实现无障碍设计（WCAG标准），确保所有用户可用\n` suggestions += `3. 性能优化：资源压缩、懒加载、缓存策略等\n` suggestions += `4. 使用CSS预处理器（如SCSS）提高样式管理效率\n` suggestions += `5. 实现良好的错误处理和反馈机制\n` suggestions += `6. 考虑国际化支持多语言\n` suggestions += `7. 注重组件的复用性和可维护性\n` suggestions += `8. 使用现代CSS布局技术（Flexbox、Grid）\n` return suggestions }