前言

我平时从零搭项目比较多，Cursor用下来的感受是：它再强也得我先告诉它写什么。可大多数时候我自己都没想清楚该写什么。

比如客户丢一句“我想要个类似飞书文档的管理后台”，然后就没下文了。打开Cursor，编辑器一片空白，你跟它说什么？它又不了解国内项目的业务细节，更不可能凭空把整套流程给你跑通。没PRD、没设计稿，AI编码工具基本使不上劲。

为了解决上下游衔接的问题，我试了一套“AI做设计 + Cursor写代码”的组合。上游负责出设计原型和前端代码的是墨刀AI，原本只是当个原型工具用，没想到它的AI能力比我想象的实用。下面分享一下这套组合怎么把一周前端工期压到两天的。

业务上游：AI生成PRD

拿一个面向中小企业的CRM数据看板来说。打开墨刀AI，对话框里直接丢一段需求描述进去，让它以资深产品经理的角色出一份PRD。实测不到两分钟，文档就出来了，功能模块树拆得挺清楚，数据看板该盯哪些维度也列好了。拿着这个去对需求，省得反复掰扯，对方看到文档也会觉得你做事靠谱。

设计中游：AI生成高保真界面

接下来是出界面。这个用Cursor确实搞不定。PRD基本确认之后，直接让AI继续生成高保真交互稿。出来的东西不是那种套开源模板拼凑的，配色和布局明显是按需求定制的，风格偏国内SaaS那种调调。

就拿数据看板来说，深色背景、渐变的漏斗图、折线图的排版，看着像是正经设计师花过心思的。对我们这种没有UI搭把手的开发者，直接拿这个界面去给客户演示，基本够用了。

研发下游：导出Vue工程代码

以前用这类AI原型工具只能看界面，现在能直接导出工程代码了。点了一下界面上方的代码模式，我本来以为会生成一堆带绝对定位的DIV，结果打开工程目录和源码之后，被硬控了。

导出的代码质量确实不错，甚至有点意外：

• 直接上了 Vue 3（Composition API）+ Pinia + Vue Router + TypeScript + Tailwind，全套类型检查都有；
• 没有依赖任何第三方UI库（Element Plus、Echarts这些都没用），侧边栏、卡片、甚至那个销售转化漏斗图和折线图，全是AI用Tailwind原生手写的。

随便看一段导出来的Vue源码长什么样：

codeTypeScript

// AI纯手写的漏斗图坐标系算法 (Vue3 + TS)

<script setup lang="ts">

import { computed } from 'vue';

import { mockFunnelStages } from '../mock/data';

// 连图标都精准使用了 lucide-vue-next

import { UserPlus, DollarSign, TrendingUp } from 'lucide-vue-next';

 

// 漏斗图动态宽度系数量化计算

const funnelData = computed(() => {

  return mockFunnelStages.map((stage, index) => {

    // 纯手工计算梯形效果的递减宽度

    const maxWidth = 100;

    const minWidth = 40;

    const width = maxWidth - (index * (maxWidth - minWidth) / (mockFunnelStages.length - 1));

    return {

      ...stage,

      width: `${width}%`

    };

  });

});

</script>

它不是只写了静态UI，而是把漏斗每一层的宽度用 computed 做了动态推演，配合数学逻辑原生渲染出梯形效果。连 lucide-vue-next 图标库都提前 import 好了。这种代码质量，就算找个中级前端手写，也得大半天吧。

接力Cursor：补全灵魂与核心逻辑

拿到AI生成的 Vue + TS 工程后，底层架子已经搭得挺瓷实了。接下来Cursor上场，基本就是收尾工作：

• 真实API对接。选中组件，按Cmd+K，告诉Cursor“把 mockFunnelStages 换成从 /api/v1/crm/funnel 拉取真实数据，再加个loading状态”。
• 全局状态流转。Pinia已经预装好了，让Cursor把侧边栏菜单点击和全局Store联动起来就行。

墨刀AI生成的DOM结构命名规整，TypeScript类型也定义得清楚，Cursor读代码基本没有障碍，补逻辑的时候一遍就过，也没把布局搞乱。

总结

前面产品经理和UI设计师的活儿，在这类设计型AI工具里一块儿搞定了，理需求、出界面、搭前端工程一条龙。Cursor就专心处理网络请求、状态管理、算法这些编码层面的东西。

国内开发者不管是接私活还是小团队，不用只盯着某一个编码工具。找一个偏业务/界面的国产AI工具，配一个像Cursor这样的代码模型，我个人觉得是目前效率比较高的搭配。