Codex-Claude-Figma工作流精读笔记

本页汇总「Codex-Claude-Figma工作流」主题下的 46 篇精读卡，适合按编号顺序阅读，也可以通过左侧搜索直达具体主题。

AICoding实战：从Prd到代码生成AICoding实战：从Prd到代码生成提示本文从以下几个模块实现最终的Coding能力：构建AICoding标准workflow，实现端到端生码扩充模型上下文，增强对仓库... Claude Code + Figma：AI 画原型完整教程，从 PRD 到设计稿只要 5 分钟Claude Code + Figma：AI 画原型完整教程，从 PRD 到设计稿只要 5 分钟 3 种方式，按需选择 Figma 和 Claude Code 之间有 3 种协作方... Claude Code + Mermaid 一键生成架构图、时序图、流程图Claude Code + Mermaid 一键生成架构图、时序图、流程图本文将手把手教你如何用 Claude Code生成Mermaid代码，并在Mermaid、draw.i... Claude Design 提示词，拿走即用Claude Design 提示词，拿走即用对话就能出设计稿以前做设计，你得先学 Figma 或者 Photoshop，学会了才能把脑子里的想法变成图。现在你直接说：“帮我做... Claude Design 系统提示词完整版（中文版）Claude Design 系统提示词完整版（中文版）这是一份 Claude Design 的完整系统提示词（中文版），定义了专业的角色定位、工作流程、和实践。涵盖从需求到交付完... Claude Design：5分钟画完一个 APPClaude Design：5分钟画完一个 APP 试着做一个APP吧！家里养了十几盆，大大小小各种类型都有，浇水很简单，见干见湿就行了，但施肥时间是真记不住 —— 周期长，两... Claude Design：一句话生成可交互原型Claude Design：一句话生成可交互原型 🗣️ 自然语言生成设计不需要懂设计软件，不需要学 Figma，直接说话： "做一个 SaaS 落地页，主色调蓝色，包含 He... Claude Design：对话即设计Claude Design：对话即设计 Anthropic 不只是做大模型了。Claude Design 是他们第一个向设计工具市场正面出击的产品——直接挑战 Figma 的核心阵... Claude Design：小白也能做出专业级设计｜附最全玩法+官方实用技巧Claude Design：小白也能做出专业级设计｜附最全玩法+官方实用技巧所有你能想到关于设计的工作，Claude Design 现在都能做。无论是惊艳复杂的动效模拟，用简单的... Claude+Cursor+Figma/MasterGo四步生成高端的产品原型图（附提示词和步骤）Claude+Cursor+Figma/MasterGo四步生成高端的产品原型图（附提示词和步骤）第一步：发送初步简单的提示词到AI工具，表明自己的目的 [图示已省略] 第二步... Codex怎么用？国内如何使用？最全CLI使用教程与高效技巧Codex怎么用？国内如何使用？最全CLI使用教程与高效技巧如果你是一名程序员，大概知道OpenAI的Codex，最近关于Codex和Claude code谁更厉害的争得是愈演愈... FigmaMCP实现代码⇄设计稿实时双向同步（实测）FigmaMCP实现代码⇄设计稿实时双向同步（实测）一、Codex 安装流程(超简单) 主要用Codex APP来给大家演示，因为这种方式装起来是真的丝滑，直接点点点就完事。安... GPT Image 2 来了，今天起，你看到的每一张图都不可信GPT Image 2 来了，今天起，你看到的每一张图都不可信玩文生图这么久了，也经历过无数次被颠覆、被炸裂。特别是经历了去年把我们震碎过的 Nano Banana 之后，我们... GPT Image 2多场景实测，没有一张图让人失望GPT Image 2多场景实测，没有一张图让人失望想象力到位，万物可生成严肃的、活泼的、写实的、优雅的、漫画的，多场景、多风格GPT Image 2都能轻松拿捏。学术海报 ... GPT image 2的正确打开方式！GPT image 2的正确打开方式！今天一早打开订阅号列表，几乎全是关于 GPT Image 2 的内容。对于这个模型，我的评价只有一句：夯爆了。根据权威平台发布的图像模型排行... GPT-Image2的30+场景高级玩法！！GPT Image2的30+场景高级玩法！！玩法 01 摄影与真实感类 1.老照片生成：提示词：生成一张中国90年代团圆饭聚餐照片。 [图示已省略] 2.随手画的设计草图照片：... GPT-image-2资料GPT image 2资料内容状态这篇资料当前只有标题、目录、附件占位或极少量文字，不能当作完整精读正文使用。处理原则：不根据标题扩写，不伪造正文。如果它是索引型资料，只... Rules资料Rules资料 [图示已省略] Rules 辅助开发提示通过合理编写和维护 Rules 文件，可以高效规范 AI 编程助手的行为，提升团队协作与项目质量。什么是 Rules？... Skills专栏Skills专栏 [同步引用内容已省略] 吴恩达skills教程第一节：Introduction（课程介绍）第二节：Why Use Skills 1（Skills的意义）第三... claude code从需求到低保真线框图，再到高保真UI原型，全流程claude code从需求到低保真线框图，再到高保真UI原型，全流程用AI工具从需求到低保真线框图，再到高保真UI原型，全流程！先来看下效果： [图示已省略] 本文将包含所有... 「Codex 制作运营素材图」的调研+落地攻略「Codex 制作运营素材图」的调研+落地攻略 Codex 做运营素材图，最有效的方式不是“让 AI 随机画图”，而是搭建一条稳定流水线：选题库 → Codex 生成素材数据 →... 一句话搞定整套UI和PPT，不会设计也能Claude Design出高端设计稿一句话搞定整套UI和PPT，不会设计也能Claude Design出高端设计稿 4月17号凌晨，Anthropic发布了一个叫Claude Design的新产品。跟Claude ... 不会设计也能做出产品原型，claude code实战不会设计也能做出产品原型，claude code实战在这之前，用了多款「AI 生成设计」类的工具，但出来的效果总是差点意思。试了Claude Design，只能说：Amazing... 产品经理Claude Code工作流产品经理Claude Code工作流 [同步引用内容已省略] 动手做第一个 AI 产品欢迎来到动手做第一个 AI 产品阶段！这是 Easy Vibe 教程的起点，专为零基础学... 产品经理codex工作流产品经理codex工作流内容状态这篇资料当前只有标题、目录、附件占位或极少量文字，不能当作完整精读正文使用。处理原则：不根据标题扩写，不伪造正文。如果它是索引型资料，只把... 使用claude design 设计你的网站使用claude design 设计你的网站 [图示已省略] 首先是打开claude.ai/design , 起一个项目名字，就可以开始设计了。 [图示已省略] 然后就说常规的对话... 做原型不用Figma了？Claude Design 实战，一句话出交互原型做原型不用Figma了？Claude Design 实战，一句话出交互原型 Claude Design 实战，一句话出交互原型 Claude Design 是对于具有想法但没有设计... 实战：拿Claude Design改一版QQ音乐实战：拿Claude Design改一版QQ音乐第一步，快速生成一个初版上来先设置项目名，然后选高保真原型设计，点击创建就行。 [图示已省略] 然后，输入提示词。我给Clau... 用 Codex 和 Figma 构建前端 UI用 Codex 和 Figma 构建前端 UI 从设计开始构建应用 Figma MCP server 的一个核心使用场景，就是从 Figma 文件中获取上下文，并将这些上下文用于代... 用 Cursor 两步搞定产品原型图用 Cursor 两步搞定产品原型图核心提示词模板这个提示词模板可应用于任何你想设计的 APP。特别适合以下场景： 1. 快速验证产品创意：当你只有一个点子，但不知如何推进时... 用Codex 操控 Figma画布，3 分钟建好组件库+变量库用Codex 操控 Figma画布，3 分钟建好组件库+变量库打开figma文件后，点击【Share】【can edit】【Copy link】复制链接到下面的提示词中。 [... 第一章：Codex 完全指南第一章：Codex 完全指南提示 OpenAI Codex 摘要 OpenAI Codex 是新一代 AI 软件工程智能体，可作为"AI 软件工程队友"使用。相比传统代码生成器，... 第一章：安装与认证第一章：安装与认证 Critical：先把安装目标说清楚本系列不是从 CLI 开始，而是从 App 开始。你安装成功的标准不是“终端里有 codex 命令”，而是：提示 1. ... 第一章：快速上手第一章：快速上手 1.1 什么是 Claude Code Claude Code 是一个强大的 AI 助手工具。就像一个随时待命的智能同事，可以用日常语言，让它帮你分析数据、整理文... 第三章：入门基础操作第三章：入门基础操作 3.1 开始你的第一次对话现在你已经安装并配置好了 Claude Code，让我们开始第一次对话吧！输入框使用找到输入框在 Claude Code 界... 第九章：常用快捷键第九章：常用快捷键 9.1 快捷键与快捷操作掌握快捷键和快捷操作可以大大提高使用 Claude Code 的效率，让你更快地完成各种任务。常用快捷键发送消息 Windows/... 第二章：从听不懂到完全信任：我的 Codex 深度产品体验第二章：从听不懂到完全信任：我的 Codex 深度产品体验提示 Codex 正在重新定义 AI 编程工具的标准。它凭借交付完整性、可靠排错能力和复杂任务稳定性，已成为开发者日常工... 第二章：桌面工作流第二章：桌面工作流 App 的核心模型 Codex App 可以理解为一个桌面开发主控台。它把这些能力放到同一个工作流里：内嵌表格能力 App 中的意义 Thread 一条任务... 第五章：Codex的MCP工作流第五章：Codex的MCP工作流 MCP 是什么 MCP 是 Model Context Protocol。让 Codex 通过协议连接外部工具一句话：MCP 不是提示词，而是工... 第十一章：Claude高级功能使用第十一章：Claude高级功能使用 11.1 自定义工具的使用配置步骤： 1. 定义功能删除重复行填充空白单元格统一日期格式统一数字格式 2. 创建提示词模板 1. 保存... 第十二章：让Claude自动解决问题第十二章：让Claude自动解决问题 12.1 从单次任务到批量处理将单次任务转化为批量处理，提高工作效率，让Claude Code发挥更大价值。记录成功的单次任务记录的重要... 第十章：可合并结果第十章：可合并结果 App Review 是合并前的主关口 Codex 写完代码后，不要只看它的总结。提示应该进入 Review： 1. 看改了哪些文件。 2. 看每个文件 d... 第四章：项目指令、配置、权限与沙盒第四章：项目指令、配置、权限与沙盒 App 用户先写 AGENTS.md AGENTS.md 是项目级指令文件。App 打开项目后，会把它作为重要上下文。提示它应该回答：项目... 通过对话直接完成界面设计，claude design生成原型通过对话直接完成界面设计，claude design生成原型不是 AI 修图工具，不是Figma的竞品，也不是帮你生成好看封面图的东西。做的是界面设计，通过对话或者直接点击画布元... 零帧起手 Codex × Figma 双向工作流实操零帧起手 Codex × Figma 双向工作流实操 Figma 和 CodeX 打通的流程，现在是： [图示已省略] 1 软件准备（一步一步）提示 1️⃣ 安装 Node 安装... 项目推荐--Codexia：Codex CLI的强力GUI/IDE工具包项目推荐 Codexia：Codex CLI的强力GUI/IDE工具包 [图示已省略] 简介 Codexia 是一个功能强大的GUI和IDE工具包，专为OpenAI Codex C...