用ideogram_ai做设计稿，用v0.dev开发后，直接爆火，公众号也每天以100的粉丝量增长。之后又迷上了Cursor这一个强大的开发工具。

正好觉得数字栩生的数字人SASS服务平台非常漂亮，就用这个工具一步步复刻它的界面吧。

1. 从cursor官网下载安装cursor

https://www.cursor.com/

安装完之后，会让我们选择直接调用本地vscode中的代码。下面是安装后的样子，跟VScode很像。

2. 快捷键

ctrl+L 是开始聊天的方式生成代码，ctrl+K是直接生成代码。这里选择第一种方式。

3. 在聊天框中上传刚才的第一张截图，然后用内置的claude-3.5-sonnet直接生成代码。当然它还内置了gpt4o,cursor等好几个gpt。自己根据需要选择就好。

我输入提示词：

帮我用react,tailwind,shadcn,radix ui实现这个图片中的效果，兼容移动端。

直接生成了下面的代码： * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

import React from 'react';import { Card, CardContent } from "@/components/ui/card";import { Button } from "@/components/ui/button";import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";import {   LayoutGrid,   MessageSquare,   Book,   Image,   Headphones,   Users,   Settings,  UserCircle,  FileText,  Mic,  MessageCircle,  Music,  Cog} from 'lucide-react';
const DigitalHumanManagement = () => {  const digitalHumans = [    { name: '小A', image: '/path-to-image-1.png', isActive: true },    { name: '新忆琪', image: '/path-to-image-2.png' },    { name: '新小羽', image: '/path-to-image-3.png' },    { name: '小羽', image: '/path-to-image-4.png' },  ];
  const sidebarItems = [    { icon: <UserCircle />, label: '数字人' },    { icon: <MessageSquare />, label: '对话' },    { icon: <Book />, label: '知识库' },    { icon: <Image />, label: '素材' },    { icon: <Headphones />, label: '语音' },    { icon: <Users />, label: '团队' },    { icon: <Settings />, label: '设置' },  ];
  const quickActions = [    { icon: <UserCircle />, label: '角色设定' },    { icon: <FileText />, label: '个性知识库' },    { icon: <Mic />, label: '语音指令' },    { icon: <MessageCircle />, label: '引导话题' },    { icon: <Music />, label: '对话设置' },    { icon: <Cog />, label: '其它设置' },  ];
  return (    <div className="flex h-screen bg-gray-900 text-white">      {/* Sidebar */}      <aside className="w-16 md:w-64 bg-gray-800 p-4">        <div className="mb-8">          <img src="/logo.png" alt="Logo" className="w-8 h-8 md:w-12 md:h-12" />        </div>        <nav>          {sidebarItems.map((item, index) => (            <div key={index} className="flex items-center mb-4 cursor-pointer">              {item.icon}              <span className="ml-2 hidden md:inline">{item.label}</span>            </div>          ))}        </nav>      </aside>
      {/* Main content */}      <main className="flex-1 p-8">        <h1 className="text-2xl font-bold mb-6">数字人角色管理</h1>        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">          {digitalHumans.map((human, index) => (            <Card key={index} className={`bg-gray-800 ${human.isActive ? 'border-blue-500' : ''}`}>              <CardContent className="p-4">                <img src={human.image} alt={human.name} className="w-full h-48 object-cover mb-2" />                <p className="text-center">{human.name}</p>              </CardContent>            </Card>          ))}        </div>      </main>
      {/* Right sidebar */}      <aside className="w-64 bg-gray-800 p-4 hidden md:block">        <div className="flex items-center mb-6">          <Avatar>            <AvatarImage src="/avatar.png" />            <AvatarFallback>XA</AvatarFallback>          </Avatar>          <div className="ml-3">            <p className="font-semibold">小A</p>            <p className="text-sm text-gray-400">我是能口述笔录的人</p>          </div>        </div>        <h2 className="text-lg font-semibold mb-4">快捷入口</h2>        <div className="grid grid-cols-2 gap-4">          {quickActions.map((action, index) => (            <Button key={index} variant="outline" className="flex flex-col items-center justify-center h-20">              {action.icon}              <span className="mt-2 text-xs">{action.label}</span>            </Button>          ))}        </div>        <Button className="w-full mt-6">去编辑</Button>      </aside>    </div>  );};
export default DigitalHumanManagement;

可以看到代码非常干净整洁，没有一点多余的代码。运行一下程序的效果：是不是很完美，而且兼容移动端。是不是非常优秀。

为此它还跟着详细的解释：

然后我们让它做点交互，点击效果，我让它点击中间的卡片才出现右侧信息，而且会出现半透明折罩，点击折罩恢复原状。

当然这只是cursor功能的冰山一角，等我探索更多好玩功能再继续分享。

再补充有用的信息。

下面是给 cursor定的规则：

所以为了让cursor写更简洁的代码，至少我们需要熟悉typescript 、nodejs、next.js、react、Shadcn UI、Radix UI， Tailwind。这是个人做独立开发的标配。