day08-Figma和Code介绍和安装配置

今日内容

1 figma

1.1 汉化

# 1 figma 全英文，官方没有中文
# 2 第三方：把figma魔改了【原版的figma软件，加入很多东西】--》打包成软件--》FigmaEX
	-是官方吗？不是
    -使用会不会有问题？
    	-登录正常官方账号，操作都在官方账号上
        
# 3 桌面版和浏览器版：通用的【都是一套】
# 4 汉化版：https://moonvy.com/figmaEX/
	-浏览器版本：谷歌浏览器：大家自己做
    -桌面版：mac，win

1.2 figma五大文件类型

Design / FigJam / Slides / Make / Buzz

# 1 Design = UI 高保真设计（核心）；FigJam = 协作白板；Slides = 演示 PPT；Make = AI 生成可交互原型；Buzz = 营销海报 / 社交图

# 2 Figma Design（标准设计文件）--我们用的
    定位：UI/UX 专业设计、产品界面、设计系统、交互原型
    核心能力：矢量绘图、Auto Layout、组件库、样式变量、Dev Mode（交付开发）、高保真原型跳转
    画布：分页 Page 管理，适合 APP、网页界面
    适合：移动端 / 网页界面、后台系统、组件库、图标、交付前端开发
    短板：不适合自由画布脑暴、批量做社交海报、直接播放演示幻灯片
# 3 FigJam（在线协作白板）
    定位：团队脑暴、流程图、用户旅程图、会议研讨
    工具：便利贴、连线、投票、手绘、思维导图、简易流程图
    画布：无限自由画布，没有固定尺寸限制
    适合：需求研讨、用户旅程图、竞品分析、敏捷复盘、架构草图、PRD 思路梳理
    短板：缺少精密排版、矢量精细编辑，不适合做最终交付 UI
    
# 4 Figma Slides（幻灯片 / 演示文稿）
    定位：PPT 演示、设计评审汇报（对标 Keynote、PowerPoint）
    专属特性：分页幻灯片管理、演讲者备注、全屏演示模式、页面转场动画
    两种模式：
        Slides 模式（简易，适合快速排版）
        Design 模式（解锁完整 Figma 设计能力，适合高颜值专业汇报）
    优势：可以直接嵌入 Design 里的 UI 原型，评审时一边放界面一边讲解
    适合：项目评审、融资 PPT、技术分享、产品方案汇报
    短板：无法做无限画布脑暴，不适合批量营销素材
    
# 5 Figma Make（AI 原型生成）
    定位：自然语言 → 生成可交互 UI、可运行原型、一键生成代码
    核心能力：输入文字需求自动生成页面、内置运行时交互逻辑、生成 HTML / 前端代码、支持接入设计系统
    可以上传参考图片、截图，AI 直接产出完整可点击界面原型
    适合：快速验证产品想法、MVP 原型、把草图 / 截图直接生成可交互页面
    Design 是人工精细绘制；Make 是AI 自动生成初稿，再人工微调
 
# 6 Figma Buzz（营销物料制作）
    定位：品牌社交海报、广告图、公众号头图、名片、活动物料
    核心设计思路：
    设计师制作锁定模板，市场 / 运营同学只能修改文字、图片，不能乱动品牌颜色、Logo，保证品牌规范不被破坏。
    能力：批量多尺寸海报、模板权限锁定、社交媒体常用尺寸预设
    适合：小红书 / 公众号配图、广告 banner、活动邀请函、企业内部宣传图
    短板：不适合 APP 界面、复杂交互设计

1.3 转换插件【会用】

# 1 使用大模型编写 html 页面---》把html页面--》转换成figma的设计稿---》我们微调

# 2 参考：之前讲的案例主页面


# 3 转成figma设计稿--》微调


# 4 使用插件
## html.to.design（html2design） 还原度最高，支持 Flex/Grid、渐变、阴影，生成带自动布局的图层，适合正式页面、后台系统；大部分功能付费，免费有限次转换 ，国外的，有的同学使用不了
## Codesign 腾讯，国内访问更稳，复制代码进去
	-只能复制代码--》用记事本打开html--》复制--》粘贴进去

2 Codex介绍安装配置

2.1 各大厂商大模型介绍

# 1 国外，闭源
## 1.1 OpenAI｜GPT 系列
核心产品：GPT-5.6 Sol / Terra / Luna；Codex 编程 Agent
优势：综合推理天花板、代码工程能力极强（Codex 可操作本地项目、执行终端）、多模态原生、Agent 工具调用成熟
劣势：价格高、国内直连困难、账号会话模式风控严格

## 1.2 Anthropic｜Claude 系列,Claude Code 简称cc
核心产品：最新：Claude Fable 5,Claude Sonnet 5,Opus4.8（前一代旗舰）、Sonnet（均衡）、Haiku（极速）
特点：超长上下文原生稳定，幻觉控制业界顶尖；文档、财报、合同、法律文本深度解析王者；文本长度上限高
优势：百万字文档精读、法律合规、海量文献综合分析、RAG 知识库深度问答
劣势：代码能力略弱于 GPT；价格昂贵；图像理解一般

## 1.3  Google DeepMind｜Gemini（谷歌）
核心产品：Gemini Ultra / Gemini 3.1 Pro / 3.6 Flash / 3.5 Flash-Lite【Gemini3.5 Pro 多次延期，暂无上线时间表】
特点：原生多模态（图文、音频、视频）；数学、科学、图表理解强；谷歌搜索深度融合
优势：主打多媒体、视频、图表，多媒体内容分析、科研数据、图表解析、实时联网问答
劣势：中文理解偏弱；输出稳定性波动；复杂代码工程能力一般

## 1.4 xAI｜Grok（马斯克）
核心产品：Grok 3、Grok 4
特点：联网能力强、风格自由、实时资讯；推理速度快
劣势：中文薄弱、长文本稳定性一般、企业生态不完善
优势：实时新闻问答、创意写作、闲聊、轻量化信息检索


# 2 国内
## 2.1 深度求索 DeepSeek 开源
核心产品：DeepSeek-V4-Pro、V4-Flash  
特点：代码、数学推理国产第一梯队；1M 上下文；支持思考模式 thinking；性价比突出；【量大管饱】
优势：国内网络友好、支持第三方中转接入、大量开发者用来做代码辅助、本地微调，代码开发、算法推演、批量文档处理、企业自研 Agent

## 2.2 月之暗面 Moonshot AI｜Kimi
核心产品：Kimi K3 旗舰、Kimi 轻量版[Kimi K3 = 全球第 1，超过 GPT-5.6 Sol、Claude Fable5]
K3 综合全球第三，落后两大海外旗舰闭源模型[GPT,Claude]
特点：超长文本开创者，最初凭借 200 万字上下文出圈超大文档一次性上传、全文检索连贯；中文流畅；支持文件批量解析，部分赛道顶尖【前端代码盲测榜单】
优势：电子书、论文、海量文档汇总阅读、长文档摘要与信息提取

## 2.3 智谱 AI｜GLM（ChatGLM / GLM5）
核心产品：GLM-5.2 旗舰、GLM4；同时发布开源 ChatGLM 系列
背景：清华大学孵化；国内最早普及开源对话大模型
特点：中英均衡；Agent 框架适配成熟；学术场景友好；支持本地私有化部署
劣势：超高难度代码、数学弱于 DeepSeek
适合：政企知识库、学术研究、行业垂直微调、本地私有化

## 2.4 阿里巴巴｜通义千问 Qwen
核心产品：Qwen3.7、Qwen3.5 Plus；通义灵码（代码专用）
两大板块：1.云端 Dashscope 商用 API；2.Qwen 开源家族（全球下载量最高国产开源模型）
劣势：中文极强；开源生态完善；多模态齐全；阿里云深度打通
适合：电商内容、政企业务、云端调用 + 本地部署双线需求

## 2.5 字节跳动｜火山方舟
火山方舟 = 字节推出的「大模型中转 / 聚合平台」，不是单一模型
平台内包含：字节自研豆包 Seed 系列、第三方模型（通义、GLM、DeepSeek 等）
作用：统一 API 网关、负载均衡、多模型路由、国内合规商用、按量计费
自研基座：豆包大模型（Seed 系列）、MarsCode 代码助手
适合：国内企业合规场景、统一管理多家厂商模型、私有化混合调度

## 2.6 其它
百度｜文心一言 ERNIE
知识增强大模型，中文知识问答、营销文案、政务场景强势；生态插件丰富

腾讯｜混元大模型
腾讯生态打通（微信、企业微信）；多模态、游戏、社交内容场景优势

科大讯飞｜星火大模型
语音能力行业第一；教育、医疗、车载终端落地多

MiniMax
语音 + 视频生成强项；对话拟人度高；适合数字人、智能客服



# 3 多模态（Multi Modal）
文本模态：文字、代码、PDF 文字内容
图像模态：照片、截图、图表、手绘
音频模态：语音、音效
视频模态：连续画面 + 声音
3D、传感器数据也属于模态
多模态大模型：可以同时看懂、处理多种不同载体信息，不再只认识文字。
单模态模型，只能处理文字（DeepSeek多模态能力不强：文字和图片，无音频，视频能力）

2.2 Codex， Claude Code， Cursor， Trae，阿里 Qoder CN（原通义灵码），workbuddy，coze，openclaw

## 1  IDE[Pycharm就是IDE，编写代码运行代码调试代码软件] 内嵌型：你正常写代码，AI 作为副驾驶（Cursor、Trae、Qoder通义灵码）
	-专注于写代码，使用上游大模型，自动编写代码
    -Cursor：全球第一款，使用率比较高---》上游大模型用的：GPT，Gemini；Claude禁止它使用
    	-需要魔法，贵：20美刀一月，token量用完需要再充钱
    -Trae：字节跳动公司推出--》火山方舟---》上游大模型用的：deepseek，kimi，GLM。。。
    	-国内版：只能使用国内大模型---》最大优势，目前免费
        	-也可以配置 GPT模型，需要自己购买token，需要自己魔法
        -国际版：国际版可以使用 GPT，Gemini，Claude
        
     -Qoder通义灵码：阿里推出，用千问大模型
    
## 2  独立工程 Agent：AI 作为独立工程师，自主遍历项目、执行终端、批量重构（Codex、Claude Code，扣子桌面版，workbuddy：腾讯出的小龙虾，openclaw：龙虾，hermes爱马仕---》通用智能体）
	-不仅仅写代码，啥事都干，生ppt，画图，处理文档。。。。
    -也能写代码？
    
# 3 总结：小白：优先用通用智能体--》Codex，cc，workbuddy。。。。

# 4 哪个好用，哪个不好用，这两种写出来的代码，有没有区别？
	-都说codex好----》核心决定条件是：上游大模型！！！！！！！
    -不同的软件，有少许差异
    	-workbuddy：腾讯出的，如果你是腾讯的重度用户：腾讯企业微信，腾讯公众号。。。--》操作方便
        -扣子桌面：字节，飞书。。。。---》操作方便
        
    -我们 ----》IDE，通用智能体软件[手机]---------------------》大模型【教授】
    	      华为手机，苹果手机：不同的软件功能不同
        	  真正干活，需要打电话问教授---------------------》排名前三的牛逼
    -不同的软件，都可以给不同教授打电话【对接不同大模型】，虽然默认用自己家的教授【大模型】
    
    
# 5 我们大家，哪个好用？
	-没有最好用的软件，只有最牛的模型【GPT，Claude】
    -我的想法：哪个便宜用哪个，他们都能干同样的事
    	-他们最大的差距，就是差3--6个月

2.3 Codex介绍

# 1 发展
## 初代 Codex（2021–2023，已退役）
OpenAI 早年发布、基于 GPT-3 微调的独立代码专用大模型
用途：代码补全、单行 / 小段代码生成
现状：早已下线；GitHub Copilot 初代就是基于它

## 发展 Codex（2025 至2026年）
ChatGPT 桌面 App 和 Codex 桌面 App 是两个完全独立软件
    ChatGPT：普通对话、通用问答，不能操作本地项目
    Codex：编程 Agent，原生使用 Responses API
    OpenAI AI 编程智能体（Agent），不是单纯模型，是一套能自主操作本地工程的完整客户端系统
官方定位：自主软件工程助手-通用智能体

## 最新：2026.7.9（美国时间，北京时间 7.10 凌晨）
正式官宣：二者产品层面合二为一（同步发布 GPT-5.6 Sol/Terra/Luna）

# 2 核心能力
普通 ChatGPT：只输出文本代码，手动复制粘贴改文件；
Codex 可以直接自主完成闭环工程任务：
    读取本地整个项目目录、分析代码依赖、跨文件理解仓库
    直接修改 / 新建 / 删除本地代码文件
    在终端执行命令：安装依赖、运行测试、启动服务
    多步骤任务拆解：需求→编码→自测→修复 bug 迭代
    支持浏览器操作、计算机控制（Computer Use）

# 3 官方原生客户端入口
Codex Desktop（桌面 GUI）：独立有图形化界面的软件，跟ChatGPT合而为一
Codex CLI（终端命令行）:独立软件，没有图形化界面，在命令行中操作
VSCode / JetBrains IDE 插件-->codex
Web 网页端:ChatGPT


# 4 Codex 两种接入模式--》都需要魔法，都需要有gpt的账号【注册GPT的账号，需要国外手机号收验证码，国内的收不了】
## 官方登录模式
### 登录方式：ChatGPT Plus/Pro/ 企业账号：按月订阅：20美刀，不同价格，token有限制
### 请求协议：原生 Responses API
### 计费：消耗 ChatGPT 订阅套餐额度，按量有每日上限
### 优势：
    完整支持全部原生工具链：文件浏览、终端执行、多 Agent、Computer Use
    协议原生适配，不会丢能力
### 劣势：
    只能调用 OpenAI 官方模型（GPT 系列）
    需要稳定海外网络
    账号会话登录模式风控高，高频请求容易封号
    
    
    
## 纯 API 模式--》充多少用多少，按量付费：用1000token就用1000token的钱

### 协议转换桥：把 Codex 发出的 Responses 请求 → 转换成通用 Chat Completions 格式，因此可以接入：DeepSeek、火山方舟、GPT 中转站、通义千问、本地 Ollama 等所有兼容 API
### 凭证：填入任意上游 BaseURL + API Key（你的中转 / DeepSeek 官方 key）
### 协议：Codex++ 做适配，走通用 /v1/chat/completions
### 计费：上游 API 按量扣费
### 优势
    自由切换模型：GPT5.6 Sol/Terra/Luna、DeepSeek V4-Pro/Flash
    国内网络可用，不需要直连 OpenAI
    成本可控，可以动态路由分流任务
### 劣势：因为做了协议转译
    部分高级原生能力会失效（复杂沙箱、原生多 Agent 并行、部分文件工具）
    如果上游中转不支持 thinking 思考字段，深度推理模式无法生效
    偶尔出现任务中断、工具调用异常
    
    
################### 国内用不了，阻碍大家使用的#########################  
# 1 注册账号：国外手机号收验证码【接码平台是违法的】
# 2 魔法：中国大陆不允许使用
################# 我们可以绕过######################################
# 1 使用国内大模型【deepseek，火山方舟，kimi】
# 2 就使用GPT最牛的模型【中转站，按量买国内别人token】


# 三种方式使用【无论哪种方式，都要花钱，使用token】
	1 最正统的：官方登录，官方API登录
    	-封账号，只会封它
    2 国内模型：deepseek，火山方舟，kimi
    3 中转站：GPT最新模型

2.3 Codex安装

# 1 地址：https://openai.com/zh-Hans-CN/codex/  【不魔法，上不去】
# 2 老师下好了，你们不需要下了
	-win版本
    -mac版本用mac电脑直接访问就能下载，统一放到课件中
    
# 3 安装

# 4 打开，需要FQ和有Codex账号才能使用--》官方正统方式【我只给你们演示，你们看一下，后续我们不用这种方式】
	-官方登录
    -API 登录

2.4 Codex 官方注册订阅【老师演示，你们看即可】

如果你们有gpt账号和能FQ，才能用

2.4.1 官方登录方式/API登录方式[下次课再搞]

## 1 官方登录模式	
	-web端先登录，Codex桌面版，点登录，使用web认证登录后，桌面版登录成功
    
## 2 API key登录

2.4.2 GPT5.6介绍-Codex官方最强模型

# 1 Sol（太阳 = 旗舰）、Terra（地球 = 均衡主力）、Luna（月亮 = 轻量极速）

# 2 统一上下文窗口 1M tokens、最大输出 128K tokens，全部支持图文输入、工具调用、JSON 结构化输出，差距集中在推理能力、延迟、价格、复杂任务稳定性

# 3 能力差异
# Sol（旗舰）
GPT‑5.6 系列性能天花板
独有 Ultra 模式：自动拆分任务、调度多个智能体协同完成超长复合项目；
擅长：科研推演、大型代码库分析、财报 / 合同深度研读、多层级长链路 Agent、数学证明、网络安全分析；
优势：冷门专业知识充足、长距离逻辑连贯性最好，复杂任务出错概率最低；
短板：成本极高、相同负载下 QPS 上限更低。
# Terra（均衡款，绝大多数业务首选）
官方定位：日常主力，性能接近前代 GPT‑5.5，但成本减半
能力覆盖绝大多数企业通用场景，是成本与效果的平衡点；
适合：方案撰写、数据分析、中等规模代码开发、知识库 RAG 问答、文档摘要、产品策划；
边界：超大型系统架构设计、深度学术研究、高风险决策场景弱于 Sol；
推荐：80% 常规业务流量直接使用 Terra。
# Luna（轻量极速款）
主打低成本、低延迟、超高并发
优势：出字最快、单价最低，可以支撑大规模 C 端实时对话；
适合：客服问答、文本分类、批量标题生成、信息抽取、简单翻译、内容清洗；
短板：面对多步骤连环推理、超长文档跨段落关联分析时容易断逻辑，不适合高价值专业输出。

2.5 CodexPlusPlus管理工具安装

2.5.1 下载安装

# 1 国内模型：deepseek，火山方舟，kimi
# 2  地址：https://github.com/BigPizzaV3/CodexPlusPlus
	Codex++
# 2 release找对应版本下载

# 3 安装到电脑
# 4 关掉GPT

# 5 打开：Codex++ 管理工具

2.5.2 官方登录和API方式

2.6 Codex配置deepSeek

# 1 注册deepseek：https://www.deepseek.com/
# 2 充值 ；5块【便宜，量大管饱】
# 3 创建API key ：就只显示一次
	sk-aff51561eae741a2855965523990f267
    
# 4 baseurl固定的：https://api.deepseek.com

# 5 Codex ++ 管理工具--》模型供应商
# 6 起个名字，接入方式：纯API

作业

# 1 上课讲的搞好
	-figma--》使用插件，导入html
    -安装Codex，配置deepseek
    
# 2 扩展：少部分同学做
	使用codex 对接火山方舟模型或者kimi模型