AI 前端组件一键生成：告别手写 HTML/CSS
提示词描述：
专为前端开发者与全栈工程师打造，适用于快速搭建响应式组件与UI库。通过精准填空，AI可自动生成符合现代规范的TSX/Vue代码，大幅提升页面开发效率，特别适合敏捷迭代团队。
提示语关键词：
AI写代码,前端开发提示词,React组件生成,Vue3代码模板,自动化UI搭建,程序员提效工具,AI辅助编程
提示词内容：
【模板说明】本提示词专为前端开发者与全栈工程师设计，通过结构化参数输入，快速生成符合现代 Web 规范的前端组件代码。内置响应式断点策略、无障碍访问标准及主流框架的最佳实践，大幅降低重复造轮子的时间成本。
【使用场景】适用于日常业务页面搭建、UI 组件库二次开发、设计稿高保真转码及跨端适配需求。尤其适合需要快速验证交互可行性、进行敏捷迭代的初创团队或个人独立开发者。
【模板正文】你是一名拥有十年经验的前端架构师。请根据以下参数生成 {填写} 框架的 {填写} 组件代码。要求：1. 采用 {填写} 样式方案，保持视觉一致性；2. 包含完整的 Props 定义与 TypeScript 类型校验；3. 实现响应式布局（核心断点：{填写}）；4. 添加必要的交互逻辑与状态管理（如：{填写}）；5. 代码需严格遵循 ESLint/Prettier 规范，并附带关键节点注释。
【填写指南】第一步：明确核心技术栈（如 Vue3/React18/Svelte）；第二步：精准描述组件功能（如 动态数据表格/多级联动表单/悬浮导航栏）；第三步：指定 CSS 处理方案（如 TailwindCSS/SCSS Modules/UnoCSS）；第四步：设定适配策略（如 Mobile First/PC与移动端双端适配）；第五步：补充交互细节（如 拖拽排序/防抖输入/权限显隐控制）。注意：若涉及复杂动画或第三方库，请提前声明依赖版本，AI 将自动匹配兼容 API。
【效果示例】输入参数：框架=React18，组件=用户权限卡片，样式=TailwindCSS，断点=sm:640px, md:1024px，交互=悬停展开详情+点击复制ID。输出将生成包含 TypeScript 接口定义、平滑过渡逻辑、响应式网格布局及完整 ARIA 属性的 TSX 文件，开箱即用且支持 Storybook 预览。