⚔️ K3 vs GPT-5.6

任务: 创建一个响应式定价表格

要求:

1. 3 个套餐 (Starter / Pro / Enterprise)
2. 响应式 (移动端单列,桌面端 3 列)
3. Pro 套餐有 "推荐" 标签
4. 悬停效果
5. Tailwind CSS 优先
6. TypeScript 严格模式

评判维度: 视觉美感 / 代码质量 / 响应式 / 可访问性 / 代码量

K3 的代码输出 (前 30 行)

import React from 'react';

interface Plan {
  name: string;
  price: number;
  features: string[];
  recommended?: boolean;
}

const plans: Plan[] = [
  {
    name: 'Starter',
    price: 9.9,
    features: ['100K tokens', '基础模型', '邮件支持'],
  },
  {
    name: 'Pro',
    price: 29.9,
    features: ['1M tokens', '全部模型', '优先支持', 'API 访问'],
    recommended: true,
  },
  {
    name: 'Enterprise',
    price: 99.9,
    features: ['无限 tokens', '定制模型', '专属客服', 'SLA 99.9%'],
  },
];

const PricingTable: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 py-20 px-4">
      <div className="max-w-6xl mx-auto">
        <h2 className="text-4xl font-bold text-center mb-4">选择你的套餐</h2>
        ...

✅ 亮点: 完整 TypeScript 类型、语义化 HTML、Tailwind 规范、ARIA 标签齐全、悬停过渡动画、移动端响应式

GPT-5.6 的代码输出 (前 30 行)

import React from 'react';

function PricingTable() {
  const plans = [
    { name: 'Starter', price: 9.9, features: ['100K tokens'] },
    { name: 'Pro', price: 29.9, features: ['1M tokens'], recommended: true },
    { name: 'Enterprise', price: 99.9, features: ['Unlimited'] },
  ];

  return (
    <div style={{padding: '40px'}}>
      <h1>Pricing</h1>
      {plans.map(plan => (
        <div key={plan.name} style={{border: '1px solid #ccc', margin: '10px', padding: '20px'}}>
          <h3>{plan.name}</h3>
          <p>${plan.price}</p>
          ...

❌ 问题: 用了内联样式而不是 Tailwind、没有 TypeScript 接口、缺少 ARIA 标签、响应式简陋、视觉设计单调