第 0 课：认知重构

┌─────────────────────────────────────────────────────────────────┐
│  🎯 核心观点：技术选型需要增加"AI友好性"这个新维度              │
├─────────────────────────────────────────────────────────────────┤
│  📚 你将学到：                                                   │
│    • 理解为什么 AI 友好性成为技术选型的关键因素                  │
│    • 掌握 LLM 理解代码的底层机制（Token化、上下文窗口）          │
│    • 识别 AI 友好代码的四大特征                                  │
│    • 了解完整的 AI-Native 技术栈全景图                          │
└─────────────────────────────────────────────────────────────────┘

.user-card__avatar--large {
  width: 64px;
  height: 64px;
}

[".user", "-", "card", "__", "avatar", "--", "large", " {", "\n",
 "  width", ":", " ", "64", "px", ";", "\n",
 "  height", ":", " ", "64", "px", ";", "\n", "}"]

<img className="w-16 h-16" />

["<img", " className", '="', "w", "-", "16", " h", "-", "16", '"', " />"]

组件文件（JSX）     → 1500 tokens
样式文件（CSS）     → 2000 tokens  
类型定义（TS）      → 1000 tokens
工具函数            → 500 tokens
─────────────────────────────────
总计                → 5000+ tokens

组件文件（JSX + 内联样式 + 类型）→ 2000 tokens
─────────────────────────────────────────────
总计                             → 2000 tokens

// UserCard.jsx
import styles from './UserCard.module.css'

export function UserCard({ user }) {
  return (
    <div className={styles.card}>
      <Avatar user={user} />        {/* AI需要读 Avatar.jsx */}
      <UserInfo user={user} />      {/* AI需要读 UserInfo.jsx */}
    </div>                          {/* AI需要读 UserCard.module.css */}
  )
}

import { Avatar } from '@/components/ui/avatar'

export function UserCard({ user }) {
  return (
    <div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow-sm">
      <Avatar src={user.avatar} alt={user.name} className="w-12 h-12" />
      <div className="flex-1">
        <h3 className="font-semibold text-lg">{user.name}</h3>
        <p className="text-sm text-gray-600">{user.email}</p>
      </div>
    </div>
  )
}

import { Dialog } from 'antd'

<Dialog title="提示" visible={open}>
  内容
</Dialog>

import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'

<Dialog open={open}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>提示</DialogTitle>
    </DialogHeader>
    内容
  </DialogContent>
</Dialog>

class BaseDialog extends Component { }
class ModalDialog extends BaseDialog { }
class ConfirmDialog extends ModalDialog { }
// AI 需要理解整个继承链

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title />
      <Dialog.Description />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
// AI 能清楚看到每个原语的作用