以下是生成集成 Tailwind CSS 和 Ant Design Vue 的前端项目提示词模板，可根据需求调整：

项目生成提示词

请基于以下要求创建 Vue 3 前端项目：

1. 技术栈要求

   • 使用 Vite 构建工具
   • 集成 Tailwind CSS v3.x（含官方插件）
   • 集成 Ant Design Vue v4.x（按需加载）
   • 支持 TypeScript
   • 包含 Vue Router 和 Pinia 状态管理

2. 配置要求

   • 自动生成 tailwind.config.js 并包含以下配置：

     module.exports = {
       content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
       theme: { extend: {} },
       plugins: [require('@tailwindcss/forms')]
     }
     

   • 配置 Ant Design Vue 的按需加载（通过 unplugin-vue-components）
   • 添加必要的 PostCSS 配置
   • 包含 ant-design-vue/dist/reset.css 和 Tailwind 的基础样式

3. 示例页面要求

   • 在 src/views 目录创建 DemoPage.vue
   • 展示以下组合用法：

     <template>
       <div class="p-4 bg-gray-50 min-h-screen">
         <a-button type="primary" class="mb-4">
           结合Tailwind的按钮
         </a-button>
         
         <a-table 
           :columns="columns"
           :data-source="data"
           class="shadow-lg rounded-lg overflow-hidden"
         >
           <template #action>
             <span class="text-blue-600 hover:text-blue-800 cursor-pointer">
               操作
             </span>
           </template>
         </a-table>
       </div>
     </template>
     

4. 附加要求

   • 添加 VS Code 推荐的扩展列表（Tailwind CSS IntelliSense，Volar）
   • 提供完整的依赖安装命令：

     npm install ant-design-vue @ant-design/icons-vue @tailwindcss/forms tailwindcss postcss autoprefixer unplugin-vue-components
     

   • 在 README 中包含样式覆盖指南：

     ## 样式定制
     - Ant Design 主题色：修改 `tailwind.config.js` 的 primary 颜色变量
     - 组件级样式：使用 `/deep/` 或 `:global()` 穿透
     - Tailwind 扩展：通过 `@layer` 添加自定义工具类
     

提示词使用建议：

1. 将上述内容分段提供给 AI（如分技术栈、配置、示例等模块）
2. 明确版本要求避免兼容性问题
3. 对特殊配置（如样式穿透、按需加载）做重点强调
4. 可要求生成完整的 vite.config.ts 配置文件
5. 可补充测试配置要求（如 vitest）

最终生成的项目结构应同时包含两种框架的典型使用模式，并通过组合应用展示样式系统的协同工作能力。