第 4 课：Design to Code（上）

// 开发者辛苦手写的代码
<div className="card">
  <div className="card-header">
    <h3 className="title">产品标题</h3>
    <span className="badge">新品</span>
  </div>
  <div className="card-body">
    <p className="description">这是产品描述...</p>
  </div>
</div>

.card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
  background: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* ...还有几十行CSS */

<button className="px-6 py-3 bg-blue-500 rounded-lg">
  点击我
</button>

<button style={{
  paddingLeft: '24px',
  paddingRight: '24px',
  paddingTop: '12px',
  paddingBottom: '12px',
  backgroundColor: '#3B82F6',
  borderRadius: '8px'
}}>
  点击我
</button>

设计师: "这个表单需要更好的视觉层次"

AI的理解:
- 增大标题字号
- 调整输入框间距
- 添加分组视觉提示
- 优化按钮对比度

设计师: "把这个登录页面改成深色模式"
AI: 自动调整所有颜色、对比度、阴影
时间: 30秒

设计师: "生成这个页面的平板和手机版本"
AI: 自动调整布局、字号、间距
时间: 1分钟

设计师: "检查这个设计的无障碍性"
AI: 自动标注对比度问题、缺失的alt文本、键盘导航问题

创建一个现代风格的产品卡片,包含:
- 产品图片
- 产品名称和价格
- 评分星级
- 加入购物车按钮
风格: 简约、圆角、柔和阴影

/* 旧版Dev Mode生成的代码 */
width: 320px;
height: 180px;
padding: 24px;
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);

// 2026版Dev Mode生成的代码
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export function ProductCard({ title, price, rating, image }: ProductCardProps) {
  return (
    <Card className="w-80 overflow-hidden">
      <div className="relative h-48">
        <img src={image} alt={title} className="object-cover w-full h-full" />
        <Badge className="absolute top-3 right-3" variant="secondary">
          新品
        </Badge>
      </div>
      <CardHeader>
        <CardTitle className="text-lg">{title}</CardTitle>
        <p className="text-2xl font-bold text-primary">¥{price}</p>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-1">
          {Array.from({ length: 5 }).map((_, i) => (
            <Star
              key={i}
              className={`h-4 w-4 ${i < rating ? "fill-yellow-400 text-yellow-400" : "text-muted"}`}
            />
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

设计变更检测:
✅ ProductCard
  - padding: 24px → 32px (建议: 更新className中的p-6为p-8)
  - border-radius: 12px → 16px (建议: 更新rounded-xl为rounded-2xl)
  ⚠️ 新增: 收藏按钮 (建议: 添加HeartIcon组件)

检测到的组件:
- 页面布局: 居中容器,最大宽度640px
- 标题: "账户设置", 24px, font-bold
- 表单: 4个输入字段
- 头像: 圆形,96px,带上传按钮
- 按钮: 主按钮 "保存更改"

组件映射:
- 页面布局 → 自定义容器 (div + Tailwind)
- 标题 → <h1> + Tailwind
- 表单字段 → <Input> + <Label> from shadcn/ui
- 头像 → <Avatar> from shadcn/ui
- 按钮 → <Button> from shadcn/ui
- 整体表单 → 使用react-hook-form

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Camera } from "lucide-react"

const profileSchema = z.object({
  name: z.string().min(2, "姓名至少2个字符"),
  email: z.string().email("请输入有效的邮箱地址"),
  phone: z.string().optional(),
  bio: z.string().max(200, "简介不超过200字").optional(),
})

type ProfileFormValues = z.infer<typeof profileSchema>

export function AccountSettings() {
  const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: "",
      bio: "",
    },
  })

  function onSubmit(data: ProfileFormValues) {
    console.log(data)
  }

  return (
    <div className="mx-auto max-w-2xl py-10">
      <h1 className="text-2xl font-bold tracking-tight mb-8">账户设置</h1>

      <Card>
        <CardHeader>
          <CardTitle>个人信息</CardTitle>
          <CardDescription>更新你的个人资料和联系方式</CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            {/* 头像上传 */}
            <div className="flex items-center gap-4">
              <Avatar className="h-24 w-24">
                <AvatarImage src="/placeholder-avatar.jpg" alt="用户头像" />
                <AvatarFallback>UN</AvatarFallback>
              </Avatar>
              <Button type="button" variant="outline" size="sm">
                <Camera className="mr-2 h-4 w-4" />
                更换头像
              </Button>
            </div>

            {/* 姓名 */}
            <div className="space-y-2">
              <Label htmlFor="name">姓名</Label>
              <Input
                id="name"
                placeholder="请输入姓名"
                {...form.register("name")}
              />
              {form.formState.errors.name && (
                <p className="text-sm text-destructive">
                  {form.formState.errors.name.message}
                </p>
              )}
            </div>

            {/* 邮箱 */}
            <div className="space-y-2">
              <Label htmlFor="email">邮箱</Label>
              <Input
                id="email"
                type="email"
                placeholder="请输入邮箱"
                {...form.register("email")}
              />
            </div>

            {/* 手机号 */}
            <div className="space-y-2">
              <Label htmlFor="phone">手机号</Label>
              <Input
                id="phone"
                type="tel"
                placeholder="请输入手机号"
                {...form.register("phone")}
              />
            </div>

            {/* 个人简介 */}
            <div className="space-y-2">
              <Label htmlFor="bio">个人简介</Label>
              <Input
                id="bio"
                placeholder="简单介绍一下自己"
                {...form.register("bio")}
              />
            </div>

            <Button type="submit" className="w-full">
              保存更改
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}

<Button className="bg-[#3B82F6] hover:bg-[#2563EB]">
  保存
</Button>

<Button className="bg-primary text-primary-foreground hover:bg-primary/90">
  保存
</Button>

:root {
  --color-primary: 59 130 246;
  --space-md: 16px;
  --radius-lg: 12px;
}

<button className="px-token-md rounded-token-lg bg-token-primary">
  保存
</button>

// figma-agent-config.json
{
  "agentSkills": {
    "codeGeneration": {
      "framework": "react",
      "language": "typescript",
      "styling": "tailwindcss",
      "componentLibrary": "shadcn-ui",
      "formLibrary": "react-hook-form",
      "validationLibrary": "zod"
    },
    "designTokens": {
      "source": "figma-variables",
      "mapping": "tailwind-config"
    },
    "output": {
      "fileNaming": "kebab-case",
      "componentNaming": "PascalCase",
      "directory": "src/components"
    }
  }
}

// components.json (shadcn/ui配置文件)
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

<!-- Penpot导出的代码就是标准的Web代码 -->
<div style="
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
">
  <h3 style="font-size: 18px; font-weight: 600;">产品标题</h3>
  <p style="color: #6B7280;">产品描述文本</p>
</div>

// MCP配置示例
{
  "mcpServers": {
    "penpot": {
      "command": "npx",
      "args": ["-y", "@penpot/mcp-server"],
      "env": {
        "PENPOT_API_URL": "https://your-penpot-instance.com/api",
        "PENPOT_ACCESS_TOKEN": "your-token-here"
      }
    }
  }
}

"读取Penpot中的登录页面设计,生成React组件代码"

VS Code左侧: 代码编辑器
VS Code右侧: Pencil.dev可视化面板

// Pencil.dev自动生成的代码(实时同步到编辑器)
export function HeroSection() {
  return (
    <section className="flex flex-col items-center justify-center min-h-[60vh] px-6 py-20">
      <h1 className="text-5xl font-bold tracking-tight text-center max-w-3xl">
        构建下一代Web应用
      </h1>
      <p className="mt-6 text-xl text-muted-foreground text-center max-w-2xl">
        使用现代工具链,让开发效率提升10倍
      </p>
      <div className="mt-10 flex gap-4">
        <Button size="lg">开始使用</Button>
        <Button size="lg" variant="outline">了解更多</Button>
      </div>
    </section>
  )
}

// 开发者手动修改代码
<h1 className="text-5xl font-bold tracking-tight text-center max-w-3xl">
  构建下一代Web应用  {/* 修改文案 → 可视化面板实时更新 */}
</h1>

传统 D2C 工具的问题：
设计图 → 像素识别 → CSS 堆砌 → 难以维护的代码

WeaveFox 的做法：
设计图 → UI 语义理解 → 页面语法结构 → 组件化代码

// WeaveFox 生成的代码示例
import { Table, Button, Tag, Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: string;
  name: string;
  status: '进行中' | '已完成' | '待处理';
  updatedAt: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '任务名称',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: (status) => {
      const colorMap = {
        '进行中': 'blue',
        '已完成': 'green',
        '待处理': 'orange',
      };
      return <Tag color={colorMap[status]}>{status}</Tag>;
    },
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button type="link">编辑</Button>
        <Button type="link" danger>删除</Button>
      </Space>
    ),
  },
];

export function TaskTable({ data }: { data: DataType[] }) {
  return <Table columns={columns} dataSource={data} />;
}

// generated: user-management-page.tsx

"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import { Search, MoreHorizontal, Plus, Pencil, Trash2 } from "lucide-react"

interface User {
  id: string
  name: string
  email: string
  role: "管理员" | "编辑" | "查看者"
  status: "活跃" | "已禁用"
  lastLogin: string
}

const mockUsers: User[] = [
  {
    id: "1",
    name: "张三",
    email: "zhangsan@example.com",
    role: "管理员",
    status: "活跃",
    lastLogin: "2026-03-25 14:30",
  },
  {
    id: "2",
    name: "李四",
    email: "lisi@example.com",
    role: "编辑",
    status: "活跃",
    lastLogin: "2026-03-24 09:15",
  },
  {
    id: "3",
    name: "王五",
    email: "wangwu@example.com",
    role: "查看者",
    status: "已禁用",
    lastLogin: "2026-03-20 16:45",
  },
]

export function UserManagementPage() {
  const [searchQuery, setSearchQuery] = useState("")

  const roleVariantMap: Record<User["role"], "default" | "secondary" | "outline"> = {
    "管理员": "default",
    "编辑": "secondary",
    "查看者": "outline",
  }

  const filteredUsers = mockUsers.filter(
    (user) =>
      user.name.includes(searchQuery) ||
      user.email.includes(searchQuery)
  )

  return (
    <div className="space-y-6 p-6">
      {/* 页面标题和操作 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">用户管理</h1>
          <p className="text-muted-foreground">管理系统中的所有用户账户</p>
        </div>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          添加用户
        </Button>
      </div>

      {/* 搜索栏 */}
      <div className="relative max-w-sm">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <Input
          placeholder="搜索用户..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="pl-10"
        />
      </div>

      {/* 用户表格 */}
      <div className="rounded-lg border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>姓名</TableHead>
              <TableHead>邮箱</TableHead>
              <TableHead>角色</TableHead>
              <TableHead>状态</TableHead>
              <TableHead>最后登录</TableHead>
              <TableHead className="w-[60px]">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredUsers.map((user) => (
              <TableRow key={user.id}>
                <TableCell className="font-medium">{user.name}</TableCell>
                <TableCell>{user.email}</TableCell>
                <TableCell>
                  <Badge variant={roleVariantMap[user.role]}>
                    {user.role}
                  </Badge>
                </TableCell>
                <TableCell>
                  <Badge
                    variant={user.status === "活跃" ? "default" : "destructive"}
                    className={
                      user.status === "活跃"
                        ? "bg-green-100 text-green-800 hover:bg-green-100"
                        : ""
                    }
                  >
                    {user.status}
                  </Badge>
                </TableCell>
                <TableCell className="text-muted-foreground">
                  {user.lastLogin}
                </TableCell>
                <TableCell>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">操作菜单</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem>
                        <Pencil className="mr-2 h-4 w-4" />
                        编辑
                      </DropdownMenuItem>
                      <DropdownMenuItem className="text-destructive">
                        <Trash2 className="mr-2 h-4 w-4" />
                        删除
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* 分页 */}
      <Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#" />
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#" isActive>1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">2</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationNext href="#" />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}

<span className="sr-only">操作菜单</span>

# 安装Pencil.dev VS Code扩展
# 在VS Code扩展市场搜索 "Pencil.dev" 并安装

// pricing-section.tsx - Pencil.dev实时生成

export function PricingSection() {
  return (
    <section className="py-20 px-6">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-3xl font-bold text-center mb-4">
          选择适合你的方案
        </h2>
        <p className="text-center text-muted-foreground mb-12">
          所有方案均包含14天免费试用
        </p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* 基础版 */}
          <div className="rounded-xl border bg-card p-8 space-y-6">
            <div>
              <h3 className="text-lg font-semibold">基础版</h3>
              <p className="text-sm text-muted-foreground mt-1">
                适合个人开发者
              </p>
            </div>
            <div className="flex items-baseline gap-1">
              <span className="text-4xl font-bold">¥0</span>
              <span className="text-muted-foreground">/月</span>
            </div>
            <ul className="space-y-3 text-sm">
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                最多3个项目
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                基础组件库
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                社区支持
              </li>
            </ul>
            <Button variant="outline" className="w-full">
              开始使用
            </Button>
          </div>

          {/* 专业版 - 推荐 */}
          <div className="rounded-xl border-2 border-primary bg-card p-8 space-y-6 relative">
            <div className="absolute -top-3 left-1/2 -translate-x-1/2">
              <Badge>最受欢迎</Badge>
            </div>
            <div>
              <h3 className="text-lg font-semibold">专业版</h3>
              <p className="text-sm text-muted-foreground mt-1">
                适合小型团队
              </p>
            </div>
            <div className="flex items-baseline gap-1">
              <span className="text-4xl font-bold">¥99</span>
              <span className="text-muted-foreground">/月</span>
            </div>
            <ul className="space-y-3 text-sm">
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                无限项目
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                完整组件库
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                AI代码生成
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                优先支持
              </li>
            </ul>
            <Button className="w-full">开始试用</Button>
          </div>

          {/* 企业版 */}
          <div className="rounded-xl border bg-card p-8 space-y-6">
            <div>
              <h3 className="text-lg font-semibold">企业版</h3>
              <p className="text-sm text-muted-foreground mt-1">
                适合大型组织
              </p>
            </div>
            <div className="flex items-baseline gap-1">
              <span className="text-4xl font-bold">¥399</span>
              <span className="text-muted-foreground">/月</span>
            </div>
            <ul className="space-y-3 text-sm">
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                所有专业版功能
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                私有部署
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                SSO单点登录
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                专属客户经理
              </li>
              <li className="flex items-center gap-2">
                <CheckIcon className="h-4 w-4 text-green-500" />
                SLA保障
              </li>
            </ul>
            <Button variant="outline" className="w-full">
              联系销售
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}

// 我把价格数据提取成配置
const plans = [
  {
    name: "基础版",
    description: "适合个人开发者",
    price: 0,
    features: ["最多3个项目", "基础组件库", "社区支持"],
    cta: "开始使用",
    variant: "outline" as const,
    popular: false,
  },
  {
    name: "专业版",
    description: "适合小型团队",
    price: 99,
    features: ["无限项目", "完整组件库", "AI代码生成", "优先支持"],
    cta: "开始试用",
    variant: "default" as const,
    popular: true,
  },
  {
    name: "企业版",
    description: "适合大型组织",
    price: 399,
    features: ["所有专业版功能", "私有部署", "SSO单点登录", "专属客户经理", "SLA保障"],
    cta: "联系销售",
    variant: "outline" as const,
    popular: false,
  },
]