DeepSeek写前端页面需求提示词怎么输出可执行清单-人工智能-PHP中文网

你作为资深前端架构师→生成一份可执行的html/css/js页面开发清单→基于vue 3.4 + typescript 5.4 + tailwind css 3.4，禁用任何框架外的第三方ui库；① 创建dashboard.vue文件 → ② 定义userstats/recentorders/systemalerts三个响应式ref → ③ 每个widget封装独立组件并支持30s轮询 → ④ 权限校验usepermission(‘admin’)失败时重定向403页 → ⑤ 使用v-show控制widget显隐 → ⑥ 所有图表容器添加min-h-64类确保渲染空间。temperature=0.3 top_p=0.7 max_tokens=1200 → 输入: type=dashboard, widgets=[userstats, recentorders, systemalerts], refreshinterval=30s, permissionlevel=admin

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

deepseek写前端页面需求提示词怎么输出可执行清单

用DeepSeek生成可直接交付开发的前端页面提示词，必须让模型输出带明确动作、可验证结果、含技术约束的执行清单，不能只给模糊描述或纯代码。

第一步：用三元组指令锁定核心动作

在提示词开头写死“主谓宾”结构：你作为资深前端架构师→生成一份可执行的HTML/CSS/JS页面开发清单→基于Vue 3.4 + TypeScript 5.4 + Tailwind CSS 3.4，禁用任何框架外的第三方UI库。

这一步漏掉技术栈版本，模型会默认用Vue 2或React 18，【生成的清单将无法在项目里直接运行】。

第二步：强制嵌入三个真实输入-输出示例

方法一：选你团队正在用的登录页组件当模板
输入: type=login, showWechat=true, hasForgetPassword=true, fields=[email,password,code]
输出: 包含6项可执行动作：① 创建LoginForm.vue文件 → ② 在setup中定义email/password/refCode三个ref → ③ 使用useForm校验规则（必填+邮箱格式+6位验证码）→ ④ 绑定v-model至input → ⑤ 点击微信图标触发window.open(‘https://open.weixin.qq.com/connect/oauth2/authorize…’) → ⑥ 提交前检查所有校验状态，任一失败则focus首个错误字段。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

方法二：用Ant Design官网“表单布局”片段作输入
输入: layout=vertical, labelAlign=right, labelWidth=80px, gutter=16
输出: 清单第7～12项对应实现：⑦ 用grid-cols-1 sm:grid-cols-2 lg:grid-cols-3控制响应式列数 → ⑧ label元素加text-right类 → ⑨ 强制设置w-20类实现80px宽度 → ⑩ 用space-y-4替代gutter → ⑪ 所有FormItem包裹在form标签内 → ⑫ 每个FormItem必须含label+slot+error-message三部分DOM结构。

方法三：反向构造上次失败的弹窗组件
输入: modalTitle=“确认删除”, visible=false, onOk=() => api.delete(), onCancel=() => setVisible(false)
输出: 清单第13～16项修复点：⑬ visible必须用v-model:visible双向绑定 → ⑭ onOk回调需包裹try/catch并显示loading状态 → ⑮ onCancel必须重置所有内部表单数据 → ⑯ 弹窗关闭动画使用transition-group + fade-enter/fade-leave-to类。