{"author":{"name":"凌风"},"description":"A personal blog built with GoFrame","feed_url":"https://mircool.cn/feed","home_page_url":"https://mircool.cn","items":[{"id":67,"title":"用Image2复刻任意画面：RTF反编译提示词方法","slug":"image2-rtf-reverse-engineer-prompt","content":"## 引言\n\n\u003e 一套用 RTF 框架复刻任意画面的实用方法论——从参考图到提示词模板，再到高还原度输出。\n\n## 起点：一张干净醒目的封面\n\n看见一个还不错的封面，简单、干净、醒目，准备用 Image2 来套用它。\n\n![封面参考图](https://goframe-blog-upyun.mircool.cn/blog/1777700192600913480.jpg)\n\n## 第一轮：直接让模型反推提示词\n\n最开始我是直接把图片扔进大模型，让它给我反推提示词。没有意外的是它给了我一个版本的提示词，并告诉我怎么做效果更好。\n\n![对话截图](https://goframe-blog-upyun.mircool.cn/blog/1777700194514888209.png)\n\n没出意外的是，出来的图效果很差（就不展示了），连着测试了好几次，最终得到结论：这种大众化的做法没法很好地完成复刻。\n\n## 转折：RTF 反编译框架\n\n于是想到了姚金刚老师之前分享的\"图片反编译\"提示词模板。它的核心是 RTF 框架——通过给定图片，重新定义 Role（角色）、Task（任务）和 Format（格式），然后输出一版提示词。\n\n通过这个模板，我得到了如下版本的提示词（以公众号封面设计为例）：\n\n---\n\n    根据参考图和下列提示词，对用户内容文字进行公众号封面设计\n\n    ## Role\n    你是专业的微信公众号封面设计师，根据用户内容生成完全符合\"中文爆款文章封面\"风格的横版海报。\n\n    ## Task\n    用户内容：{}\n    严格按照以下原图规范执行：\n\n    ### 宽高比约束（不可更改）\n    - 精确比例：2.4221（约 2.42:1）\n    - CSS实现：aspect-ratio: 482 / 199\n    - 兼容方案：padding-top: 41.29%\n\n    ### 字体系统（精确规格）\n    - 主数字标题：font-size: 165px; font-weight: 900; line-height: 0.9; letter-spacing: -0.06em\n    - 次级超大标题：font-size: 160px; font-weight: 900; line-height: 0.9; letter-spacing: -0.05em\n    - 小辅助字：font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -0.02em\n    - 底部结论文案：font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -0.03em\n    - 角标文字：font-size: 13px; font-weight: 700; line-height: 1\n    - 字体族：font-family: \"Source Han Sans SC\", \"Noto Sans SC\", \"Microsoft YaHei\", sans-serif\n    - 字形要求：极粗、紧凑、块面感强，接近报纸头版标题或压缩黑体\n\n    ### 色彩系统（精确色值）\n    - 主色：#BF1F24，用于大号数字和重点字\n    - 背景：#EBDCC8，带轻微纸张颗粒感\n    - 文字色：#131211，用于大标题黑字与主要结构\n    - 底部黑条：#090908\n    - 标签文字：#FFFFFF\n    - 装饰色：#BD211D，用于底部重点字或小面积强调\n\n    ### 布局系统（精确定位）\n    - 整体为固定定位横版封面，留白极少，冲击力优先\n    - 左侧放一个超大红色数字组，占画面高度约 70%\n    - 中部偏左插入一个黑白老人半身像，头部与手臂压在大字前方\n    - 中部偏右放一个超大红字，右侧放一个超大黑字，组成标题主骨架\n    - 底部设置通栏黑色横条，高度约画面 39%\n    - 左下角放一个小型黑色胶囊标签\n    - 右下角在黑条上放一句强结论型白字标题，最后一个字可用红色强调\n\n    ### 视觉元素系统（完整规格）\n    - 人物元素：中国老人，黑白纪实肖像，开怀大笑，表情夸张但真实，半身出镜\n    - 动作设计：一只手扶着底部黑条边缘，另一只手向镜头举起黑色卡片或手机\n    - 道具设计：黑色卡片/手机，顶部有一个白色符号，局部有少量红字，像\"成果展示\"\n    - 背景系统：纯米白底，轻微印刷颗粒和复古纸张质感\n    - 标签元素：左下角黑色圆角胶囊，白字，像\"文章角标\"\n    - 风格限制：不要科技蓝，不要电商渐变，不要复杂光效，不要真实杂乱环境\n\n    ### 内容模块架构\n    - 模块1：左侧超大数字，负责第一眼抓人\n    - 模块2：中央人物，负责情绪和传播感\n    - 模块3：中右侧超大标题字，负责主题补全\n    - 模块4：底部黑条文案，负责结论输出\n    - 模块5：左下角小标签，负责平台感和封面完成度\n\n    ### 排版系统深度约束\n    - 所有超大标题必须互相贴近，形成高密度标题墙\n    - 人物必须压在大字前面，形成明确前后层次\n    - 底部黑条必须贯穿全宽，成为承载文案和托住人物的结构面\n    - 视觉重心位于画面中部偏左，依靠人物脸部和手中卡片建立焦点\n    - 整体追求\"微信爆文封面\"的直接、粗暴、好传播，不追求精致优雅\n\n    ### 内容处理规则\n    - 主标题：优先拆成\"数字/关键词/结果\"三段式结构\n    - 小辅助字：用来补足时间、单位、语气词\n    - 结论文案：必须像一句口语化判断，如\"你也能行\"\n    - 角标：可固定为同类平台感小标签\n    - 内容适配：字数过多时优先保留数字、结果词、结论句，删掉解释性废话\n\n    ### 输出风格关键词\n    微信公众号封面、中文爆款标题、黑红米白、报纸头版感、复古宣传海报感、纪实老人肖像、夸张情绪、超大黑体字、底部黑条、强传播性、高对比、极简粗暴、社交媒体点击感\n\n    ## 输出格式\n    生成一张横版公众号封面图，要求中文可读、标题巨大、人物表情抓人、底部结论醒目。\n\n---\n\n## 输出效果\n\n输出的图片是这样的：\n\n![输出效果](https://goframe-blog-upyun.mircool.cn/blog/1777700196732166267.png)\n\n对比参考图和输出结果，效果还是令人满意的。\n\n## 关键步骤总结\n\n1. 放入提示词时，自定义用户内容要考虑字数、版面位置等维度。\n2. 不需要的内容可以在提示词中删除，比如左下角的小文字/角标。\n3. 原图最好能和提示词一起用作参考。\n\n---\n\n## 图片反编译 RTF 通用提示词\n\n以下是姚金刚老师的图片反编译 RTF 通用提示词（版本 V0.8），支持海报、卡片、banner 等多种设计类型：\n\n    \u003c!--\n      作者：姚金刚\n      版本：V0.8\n      描述：上传参考图片，精确分析设计参数（宽高比、字体、色彩、布局、视觉元素），自动生成个性化RTF提示词，实现90%+还原度的图片反编译。\n      框架：RTF结构化提示词框架，支持海报、卡片、banner等多种设计类型的像素级精确还原。\n      创建日期：2025-06-23\n    --\u003e\n\n    # 图片反编译 - RTF通用提示词\n\n    ## Role（角色）\n    你是图片反编译专家，能够精确分析图片的设计参数并生成可复用的RTF提示词模板。\n\n    ## Task（任务）\n    当用户上传图片时，你需要：\n\n    ### 第一步：像素级精确分析\n    1. 宽高比测量：识别有效内容边界，计算宽度÷高度，精确到小数点后4位\n    2. 字号测量：测量字符实际高度，然后根据字体类型推算font-size（实际高度通常是font-size的80-90%）\n    3. 色彩提取：使用取色工具精确获取RGB值，转换为16进制色值\n    4. 布局识别：测量元素间距、对齐基准线、网格尺寸的像素值\n    5. 装饰分析：测量边框宽度、阴影偏移、圆角半径的精确数值\n\n    ### 第二步：生成可执行RTF提示词\n    将所有测量数值填入模板，生成可直接复制使用的完整提示词\n\n    ## 分析输出格式\n    ### 分析报告格式（基于实际上传图片）\n\n    **第一步：基础测量**\n    1. 识别图片有效内容区域，测量实际宽度和高度\n    2. 计算精确宽高比：宽度÷高度，保留4位小数\n    3. 判断设计类型：海报/卡片/banner/信息图/其他\n    4. 识别设计风格：现代简约/商务专业/科技未来/复古经典/其他\n\n    **第二步：字体系统分析**\n    1. 识别所有文字层级（主标题/副标题/正文/辅助文字）\n    2. 测量每个层级的字符实际高度（像素值）\n    3. 根据字体类型推算font-size（实际高度通常是font-size的80-90%）\n    4. 测量字重（笔画粗细）、行高、字间距\n    5. 识别字体族（中文/英文字体名称）\n\n    **第三步：色彩系统提取**\n    1. 提取主色：最突出/最重要的颜色，记录RGB和16进制值\n    2. 提取背景色：纯色/渐变，记录完整参数\n    3. 提取文字色：各层级文字的具体颜色\n    4. 提取装饰色：边框/图标/分割线等元素颜色\n    5. 分析色彩层次关系和应用规律\n\n    **第四步：布局结构解析**\n    1. 识别布局类型：网格/流式/固定定位\n    2. 测量网格参数：行数、列数、间距\n    3. 测量对齐基准线位置\n    4. 建立间距体系：找出基础间距单位和倍数关系\n\n    **第五步：视觉元素完整分析**\n    1. 图片/图标识别：位置、尺寸、样式、与文字的关系\n    2. 边框装饰：宽度、样式、颜色、圆角、位置\n    3. 阴影效果：偏移、模糊、扩散、颜色、透明度、层次\n    4. 背景系统：渐变角度、颜色节点、图片、纹理、透明度\n    5. 形状元素：几何图形、分割线、装饰框、标签等\n    6. 特殊符号：图标、bullet点、箭头、星号等的具体参数\n\n    **第六步：内容模块结构分析**\n    1. 模块识别：标题区、内容区、图片区、CTA区、装饰区等\n    2. 模块关系：层次关系、空间关系、视觉权重分配\n    3. 信息架构：主要信息→次要信息→辅助信息的层级\n    4. 视觉流程：用户视线的引导路径和阅读顺序\n    5. 功能区域：logo位置、联系方式、二维码、按钮等\n\n    **第七步：排版系统深度解析**\n    1. 网格系统：主网格、子网格、网格嵌套关系\n    2. 对齐规律：多重对齐基准线、对齐的一致性规则\n    3. 留白策略：内边距、外边距、模块间距的规律\n    4. 比例关系：黄金比例、模块尺寸比例、字号比例关系\n    5. 视觉平衡：重量分布、对称性、视觉重心位置\n\n    **完整分析输出示例**\n\n    基础信息：宽高比[实测值] ([比例])，内容区域[宽]×[高]px，类型[实际类型]，风格[实际风格]\n    字体系统：主标题[实测值]px/字重[实测值]/行高[实测值]，副标题[参数]，正文[参数]，字体族[实际字体]\n    色彩系统：主色#[实测色值]/背景[实际参数]/文字色[实测值]/装饰色[实测值]\n    布局结构：[实际布局类型]，[实测网格参数]，对齐[实测基准线]，间距[实测体系]\n    视觉元素：图片[位置尺寸]/边框[参数]/阴影[参数]/背景[参数]/形状[参数]/符号[参数]\n    内容模块：[模块类型和数量]/[模块关系]/[信息架构]/[视觉流程]/[功能区域分布]\n    排版系统：网格[嵌套关系]/对齐[多重基准]/留白[策略]/比例[关系]/平衡[重心位置]\n\n    ---\n\n    ## RTF提示词生成器（动态模板）\n\n    基于上述分析结果，自动生成个性化RTF提示词：\n\n    ## Role\n    你是专业的[根据分析结果填入：设计类型]设计师，根据用户内容生成完全符合指定风格的设计。\n\n    ## Task\n    用户内容：{}\n    严格按照以下原图规范执行：\n\n    ### 宽高比约束（不可更改）\n    - 精确比例：[填入实测宽高比] ([填入简化比例])\n    - CSS实现：aspect-ratio: [宽] / [高]\n    - 兼容方案：padding-top: [高/宽×100]%\n\n    ### 字体系统（精确规格）\n    - 主标题：font-size: [实测值]px; font-weight: [实测值]; line-height: [实测值]; letter-spacing: [实测值]em\n    - 副标题：font-size: [实测值]px; font-weight: [实测值]; line-height: [实测值]; letter-spacing: [实测值]em\n    - 正文：font-size: [实测值]px; font-weight: [实测值]; line-height: [实测值]; letter-spacing: [实测值]em\n    - 字体族：font-family: [实际识别的字体栈]\n\n    ### 色彩系统（精确色值）\n    - 主色：[实测色值] - 应用于[实际应用场景]\n    - 背景：[实测背景参数：纯色或渐变]\n    - 文字色：[各层级实测色值和说明]\n    - 装饰色：[实测色值] - [实际应用场景]\n\n    ### 布局系统（精确定位）\n    - 网格：display: [实际布局类型]; [实测网格参数]\n    - 容器：max-width: [实测值]px; padding: [实测的上下左右数值]\n    - 间距：[各种间距的实测值和应用场景]\n    - 对齐：[实际的对齐方式和基准线]\n\n    ### 视觉元素系统（完整规格）\n    - 图片元素：[实测位置、尺寸、样式参数及CSS实现]\n    - 边框装饰：border: [实测完整边框参数]; border-radius: [实测值]px\n    - 阴影效果：box-shadow: [实测完整阴影参数]\n    - 背景系统：background: [实测完整背景参数]\n    - 形状元素：[几何图形、分割线的完整CSS实现]\n    - 特殊符号：[图标、符号的完整实现代码]\n\n    ### 内容模块架构（精确还原）\n    - 模块布局：[各模块的位置、尺寸、层级关系]\n    - 信息层级：[主要→次要→辅助信息的视觉权重分配]\n    - 视觉流程：[用户视线引导的具体实现方式]\n    - 功能区域：[logo、CTA、联系方式等的精确定位]\n\n    ### 排版系统深度约束\n    - 网格嵌套：[主网格和子网格的完整定义]\n    - 多重对齐：[所有对齐基准线的精确位置]\n    - 留白策略：[内外边距的完整规律和数值]\n    - 比例系统：[所有尺寸比例关系的数学定义]\n    - 视觉平衡：[重心位置和平衡点的精确控制]\n\n    ### 内容处理规则\n    - 主标题：[根据原图分析的字数范围]，提取核心主题\n    - 副标题：[根据原图分析的字数范围]，补充说明\n    - 正文：按\"[根据原图实际结构分析得出的顺序]\"重组内容\n    - 内容适配：过多时智能截取，过少时保持结构填充装饰\n\n    ### 响应式适配（保持宽高比）\n    - 移动端（小于768px）：字号×0.85，间距×0.8，容器 max-width: [根据原图计算的移动端宽度]px\n    - 桌面端（大于等于768px）：原始尺寸，容器 max-width: [实测容器宽度]px\n\n    ## 输出格式\n    生成包含所有实测参数的完整可运行HTML代码\n\n    ## 质量标准\n    - 宽高比精度：误差\u003c0.01\n    - 字号精度：误差\u003c1px\n    - 色彩精度：色差\u003c3%\n    - 整体还原度：\u003e95%\n\n---\n\n**使用方法**：\n\n1. 上传参考图片，AI 分析核心参数\n2. 获取 RTF 提示词，复制模板使用\n3. 输入内容，生成高还原度设计\n\n如果画面不满意，是可以微调的。\n\n---\n\n*来源：[阳阳ai分享](https://mp.weixin.qq.com/s/NnPONb0j-H5CQyuiP8VPLw)*\n","summary":"一套用 RTF 框架复刻任意画面的实用方法论——从参考图到提示词模板，再到高还原度输出。附姚金刚老师的图片反编译 RTF 通用提示词模板。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777700192600913480.jpg","categoryId":3,"isDraft":0,"viewCount":24,"createdAt":"2026-05-02 05:37:37","updatedAt":"2026-05-04 15:32:43"},{"id":66,"title":"GPT Image-2 提示词实战手册：7 类场景 15 条模板","slug":"gpt-image2-prompt-guide","content":"\u003e GPT Image-2 上线后，大量案例表明：出图质量的差距不在模型，在提示词。本文整理了 7 类共 15 条实测有效的提示词模板，以及写好提示词的 7 条核心规则。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686253780226952.jpg)\n\n## 为什么你生成的图总是差一点\n\n很多人的提示词是这样的：\n\n- 做一张高级海报\n- 生成一个好看的 UI\n- 做一张电影感照片\n\n出来的结果不难看，但也不惊艳。\n\n问题在于：你在描述结果，而不是描述设计。\n\nGPT Image-2 已经不是抽卡模型了，它更像一个能理解结构的设计师。甚至在复杂信息图、排版等场景中，它已经能自己规划视觉结构。\n\n下面按类别整理了实测稳定的提示词模板。\n\n---\n\n## 社交截图类\n\n这一类是目前最容易出效果的，因为它不需要审美判断，直接模拟现实。\n\n### 宋朝朋友圈\n\n适合历史人物与社交媒体混搭，做趣味内容或文化科普。\n\n提示词：\n\n    画一张手机朋友圈截图，但背景是宋朝。头像用宋代文人的画，用户名叫\"苏东坡SuShi_Official\"。发的内容是：\"刚到黄州，被贬了但心情还行。今天自己做了东坡肉，味道绝了，附菜谱：\"配图是工笔画风格的东坡肉。点赞显示：黄庭坚、秦观、佛印等 126 人。评论区有两条：王安石说\"呵呵\"，司马光说\"还是那个味道\"。点赞图标换成宋代花纹。手机状态栏写\"大宋移动 5G\"和\"元丰三年\"。整体深色模式，配上宋朝那种淡雅的颜色。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686255712680890.jpg)\n\n### 抖音直播截图\n\n适合模拟直播界面，做产品演示或虚拟直播效果图。\n\n提示词：\n\n    一张抖音直播截图。一个短发美女在直播，戴青色鸭舌帽，帽子上写着\"TECHCAFE\"，头发右边有一撮粉色头发。她手里举着牌子，上面写着：\"谢谢捌捌的大火箭！\"\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686257323419528.jpg)\n\n这类提示词几乎可以骗过不仔细看的人。\n\n---\n\n## UI 设计类\n\n### AI 音乐 App 界面\n\n适合快速生成 App 概念截图，做产品演示或 PPT 配图。\n\n提示词：\n\n    设计一套完整 AI 音乐创作 App UI 图\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686258748315874.jpg)\n\n### 梦幻电商网站\n\n适合生成高颜值网站概念图，做设计提案或灵感参考。\n\n提示词：\n\n    fairy milk + cosmic milk，dark mode，glassmorphism，极简风\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686260177040277.jpg)\n\n关键点不是内容本身，而是 dark mode、glassmorphism 这些控制画面的核心词。\n\n---\n\n## 海报类\n\n### 新中式海报\n\n适合文化或艺术类海报，S 型构图加撕纸效果，极简留白。\n\n提示词：\n\n    一张极简新中式风格的画。浅灰白色底，像纸做的立体剪影。画面中间有一条 S 形的撕裂口，像把纸撕开了，露出里面彩色的东方山水。裂口里，一条弯弯曲曲的河流从上流下来，蓝色深浅不一，像丝带一样。河两边有青色的山丘和梯田，绿色和红色交错。沿河有古风建筑，飞檐翘角，白墙黑瓦。岸边有树，河中间停着一艘小船。整个画面是 S 形构图。画的边缘像撕开的纸，有浮雕感。下面写着黑色楷体\"东方美学\"，底下还有醒目的\"CHINA\"。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686261600144741.jpg)\n\n### 叙事海报（万能模板）\n\n将【主题：xxx】替换成任意概念即可生成收藏级海报。\n\n提示词：\n\n    【主题：咖啡】，收藏级海报，唯美简约，大面积留白\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686263743514448.png)\n\n这条建议收藏，可以无限复用。\n\n---\n\n## 插画类\n\n### 成都美食地图\n\n适合复杂构图的信息类插画，城市旅游或美食类内容。\n\n提示词：\n\n    手绘成都地图，鸟瞰视角，12 个美食点，手写标注，水彩加彩铅\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686266288098503.jpg)\n\n### 涂鸦人物\n\n将描述替换为任意角色，可生成涂鸦风人物画。\n\n提示词：\n\n    用涂鸦速写风格画一个 AI builder。线条要随手画的感觉，夸张、粗细不匀、有点乱但有节奏感。颜色用粗糙、干刷的效果，能看出涂抹痕迹和刷子留下的纹理。背景留白，整体看起来像没画完的草稿，轻松随性又有设计感。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686268245582757.jpg)\n\n这类适合做小红书封面或内容配图。\n\n---\n\n## 电商类\n\n### 淘宝详情页\n\n电商运营直接出商品详情页，把商品名替换成你自己的就行。\n\n提示词：\n\n    商品华为 Mate X7，生成详情页长图，包含卖点、参数\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686269791702937.jpg)\n\n### 博物馆信息图\n\n将主题替换为任意主题，生成博物馆展板级别信息图。\n\n提示词：\n\n    做一张关于\"瓷器\"的中文信息图，风格像博物馆里的展板或图鉴。画面要有写实的瓷器主体，旁边拆解它的结构，并用中文标出各个部分。还要说明材质、纹样有什么寓意、颜色代表什么，最后总结它的特点。整体背景用米白、浅茶色这类像旧纸张的颜色，看起来高级、专业，像收藏级资料。版式固定：顶部写主标题、副标题和一段导语；左边是结构拆解；右上方讲材质和工艺；右中间讲纹样和色彩寓意；底部画一个流程图说明制作或构成顺序，外加核心特征总结。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686271489618366.jpg)\n\n这类能力是 GPT Image-2 最大突破之一，因为它能处理复杂结构。\n\n---\n\n## 人像类\n\n### 电影剪影\n\n适合氛围感人像，做头像、封面或情绪类配图。\n\n提示词：\n\n    Generate a cinematic minimal portrait of a solitary man standing in an intense orange to red gradient environment, strong silhouette lighting, deep shadow contrast, reflective glossy floor, symmetrical composition, minimal.\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686272666631644.jpg)\n\n### 日系胶片\n\n适合清新文艺风人像，做社交媒体头像或生活方式配图。\n\n提示词：\n\n    Analog 35mm film photography, soft airy Japanese-style aesthetic, gentle diffused natural window light, slight overexposure, pastel tones, low contrast, soft highlights, minimal indoor setting near a window with white curtains, clean light-colored wall, young East Asian woman, natural minimal makeup, soft realistic skin texture, long slightly messy dark hair, oversized white button-up shirt, barefoot, simple and relaxed styling, standing naturally with relaxed posture, gentle soft smile, subtle stillness, soft film grain, dreamy and understated atmosphere.\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686273973085543.jpg)\n\n重点不在人物，而在摄影语言。\n\n---\n\n## 脑洞玩法类\n\n### 名人打工\n\n把名人放到意想不到的场景里，适合做趣味内容或社交传播。\n\n提示词：\n\n    Sam Altman、Donald Trump 和 Elon Musk 三个人，在很忙的肯德基柜台后面一起工作。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686275357937655.jpg)\n\n### 游戏关卡\n\n用游戏视角包装现实场景，适合做科技或游戏类创意内容。\n\n提示词：\n\n    Hitman 任务，在 OpenAI 总部偷 GPT-6\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686276548404722.jpg)\n\n### 微软整活\n\n用 PPT 截图的形式做幽默内容，适合科技圈段子。\n\n提示词：\n\n    微软发布会，展示 Edge 是下载第一浏览器，Chrome 排第二\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686277656154235.jpg)\n\n这类的核心不是画面，而是梗。\n\n---\n\n## 写好提示词的 7 条规则\n\n1. 一定要写\"风格\"——水彩、胶片、UI\n2. 一定要写\"构图\"——对称、S 型、留白\n3. 一定要写\"材质\"——纸张、颗粒、光影\n4. 一定要写\"用途\"——海报、UI、商品\n5. 模板化——用【主题】替换\n6. 用真实视觉词，而不是抽象词\n7. 指定比例——9:16 或 1:1\n\n提示词工程正在变成一项能力。GPT Image-2 拉开的差距不在模型，在用户。同一个模型，有人能做商业级设计，有人只能出\"还行\"的图。原因只有一个：表达能力不同。\n\n\u003e 来源：微信公众号「捌捌探AI」，[原文链接](https://mp.weixin.qq.com/s/7ceV8okdf3aFJpLFVvwnFQ)\n","summary":"GPT Image-2 提示词实战手册，覆盖社交截图、UI 设计、海报、插画、电商、人像、脑洞玩法 7 类场景，共 15 条可直接使用的提示词模板，以及写好提示词的 7 条核心规则。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777686253780226952.jpg","categoryId":3,"isDraft":0,"viewCount":13,"createdAt":"2026-05-02 01:45:53","updatedAt":"2026-05-04 15:32:46"},{"id":65,"title":"用Image2把一人公司品牌设计全面升级","slug":"image2-brand-design-upgrade","content":"\u003e 用 GPT-Image2 跑了四个真实设计场景：多语种海报、仿真直播截图、Y2K 风格年鉴效果包、App 品牌全家桶。从出图到落地，全程在星流平台完成。\n\n![品牌设计升级概览](https://goframe-blog-upyun.mircool.cn/blog/1777654888346784517.png)\n\n前一篇跑通了一人品牌设计全流程，收到不少反馈。两个主要问题：出图需要反复抽卡，以及网络访问不便。\n\n刚好 Image2 正式发布，第一时间测了一圈，这两个痛点基本解决。\n\n指令遵循能力提升明显——你要什么就给什么，不再需要反复抽卡试运气。\n\n![指令遵循能力提升](https://goframe-blog-upyun.mircool.cn/blog/1777654887950901058.png)\n\n文字生成能力也发生了质变。以前 AI 生图最大的问题是中文必乱码，现在中英日韩文字、手写体都能直接渲染进图里。\n\n![萨摩耶科普百科图](https://goframe-blog-upyun.mircool.cn/blog/1777654887305479604.jpg)\n\n一句话提示词也能生成完整的品牌视觉指南。\n\n![咖啡品牌视觉设计指南](https://goframe-blog-upyun.mircool.cn/blog/1777654887992979206.png)\n\n写实感也上了一个台阶。Raw 质感、iPhone 拍摄感，AI 那股塑料味基本消失，放到社交平台里不一定能认出是 AI 做的。\n\n---\n\n## Case 1：多语海报与产品拆解\n\n同一套产品视觉出六个语言版本，是做出海内容的常规需求。之前用其他模型避免不了抽卡，Image2 上线后流程直接压缩了。\n\n通用提示词模板：\n\n为「品牌名」出一套产品宣传海报，同时生成六个语言版本：简体中文、英语、日语、韩语、法语、阿拉伯语。品牌调性：填入品牌调性描述。产品核心卖点：3 条以内。版式要求：9:16 竖版海报，产品图居中，品牌名在顶部，卖点文字在底部，每个语言版本保持相同版式结构。\n\n在星流输入提示词，选择 Image2：\n\n![星流平台输入提示词](https://goframe-blog-upyun.mircool.cn/blog/1777654889170044880.png)\n\n先让它生成中文版看看效果：\n\n![中文版海报](https://goframe-blog-upyun.mircool.cn/blog/1777654889105587171.png)\n\n排版准确、文字无乱码，构图色彩都不错，一版直出。\n\n确认没问题后，用 Agent 一键生成剩余五个语言版本：\n\n![Agent 并行生成多语言海报](https://goframe-blog-upyun.mircool.cn/blog/1777654890192236753.png)\n\n5 个任务并行，30 秒完成，效率直接提升 5 倍。\n\n![多语言海报成品](https://goframe-blog-upyun.mircool.cn/blog/1777654888052736835.png)\n\n没有改原图，而是直接替换文字。中文不乱码，日文假名正确，泰语从右往左排版方向也对。\n\n如果个别文字表达不准，用编辑文字功能精准修改即可：\n\n![编辑文字精准修改](https://goframe-blog-upyun.mircool.cn/blog/1777654887466060726.png)\n\n其他场景也测试了一下。\n\n建筑竞赛图纸一键生成：\n\n![建筑设计竞赛排版展板](https://goframe-blog-upyun.mircool.cn/blog/1777654887884724083.jpg)\n\nOOTD 穿搭拆解：\n\n![穿搭拆解参考图](https://goframe-blog-upyun.mircool.cn/blog/1777654887512376088.png)\n![穿搭拆解成品](https://goframe-blog-upyun.mircool.cn/blog/1777654887590712670.jpg)\n\n账号名片也能生成，直接省了外包设计费用：\n\n![账号名片生成](https://goframe-blog-upyun.mircool.cn/blog/1777654910017555506.png)\n![名片成品](https://goframe-blog-upyun.mircool.cn/blog/1777654910110160270.png)\n\n---\n\n## Case 2：仿真直播截图\n\n做社媒热点内容，直播切片素材需求量大。但真实拍摄一条的成本不低——布置直播间、真人出镜、后期剪辑，出一条成品至少半天。\n\n之前用其他模型出的图一眼假：\n\n![其他模型 vs Image2 对比](https://goframe-blog-upyun.mircool.cn/blog/1777654909742515628.jpg)\n\nImage2 的 UI 还原能力直接解决了这个问题。一句话生成高仿真的 YouTube 直播截图，弹幕、粉丝数、商品卡片、平台 UI 细节全部在正确位置。\n\n![YouTube 直播截图](https://goframe-blog-upyun.mircool.cn/blog/1777654909938306273.png)\n\n这一代 UI 还原能力已经很强，基本不需要大改，最多用编辑功能改几个字。\n\n在星流画布内还可以直接转视频——把截图拖进视频生成器，用一句话提示词让画面动起来：\n\n![直播截图转视频](https://goframe-blog-upyun.mircool.cn/blog/1777654909097641210.png)\n\n大约 1-2 分钟，直播切片视频直接生成。全程不需要离开星流，从静图到视频在一个画布里完成。\n\n不过图越来越像真的，识别信息的能力也要跟着升级。涉及隐私或转账的截图，需要提高警惕。\n\n---\n\n## Case 3：Y2K 年鉴效果包\n\n做系列素材最头疼的不是出一张图，而是出一套图——角色一致性、色调一致性、质感一致性都要保持。\n\nImage2 的 Raw 写实能力配合星流的 Agent，直接解决了这个问题。\n\n做的是 Y2K 风格年鉴效果包：胶片颗粒感、褪色色调、年代感字体，12 种版式，角色全程保持一致。\n\n通用提示词模板：\n\nY2K 胶片年鉴风格照片，拍摄于 2003 年左右。主体：描述人物或产品。风格细节：胶片颗粒感明显有轻微过曝、色调偏暖略微褪色对比度偏低、画面边缘有轻微暗角、时间戳印在右下角格式 2003.08.14、构图自然有随手拍的生活感。画质：真实胶片质感，8K 分辨率。\n\n先用上面的提示词产出基准图，确认颗粒感、色调、时间戳位置：\n\n![Y2K 基准图](https://goframe-blog-upyun.mircool.cn/blog/1777654909717014586.jpg)\n\n基准图确认后，新建对话框防止提示词污染，把基准图作为视觉参考锁进去。\n\n然后在同一个约束下描述 12 种不同的版式需求。产品特征、色调基准、胶片质感全程统一：\n\n![Y2K 12种版式变体](https://goframe-blog-upyun.mircool.cn/blog/1777654909837514528.png)\n\n12 张图全部生成满意后，用「编辑元素」把每张图拆成独立图层：产品层、背景层、时间戳文字层、胶片效果层。拆完后就是 12 套可以独立调用的素材资产。\n\n![编辑元素拆分图层](https://goframe-blog-upyun.mircool.cn/blog/1777654911528654447.png)\n\n---\n\n## Case 4：App 品牌全家桶\n\n完整走一遍 App 品牌设计全流程。\n\n第一步，把初步想法丢给 Agent：\n\n帮我为一款 iOS 睡眠追踪 App 建立完整的品牌视觉规范。产品名称：Lumi。功能定位：通过声音和光线监测睡眠质量，早晨用渐进式唤醒替代闹钟。目标用户：25-35 岁注重睡眠质量的都市人。品牌调性：克制、温柔、有科技感但不冷漠，像深夜里一盏刚好亮度的灯。请生成：色彩系统、字体层级建议、UI 基础组件、一张完整的 Brand Kit 展示图。\n\n不要想太多，先看结果：\n\n![Lumi Brand Kit 生成](https://goframe-blog-upyun.mircool.cn/blog/1777654910504556532.png)\n\n色调和 Logo 设计审美在线：\n\n![Brand Kit 细节](https://goframe-blog-upyun.mircool.cn/blog/1777654930158772319.png)\n\n下一步拆分 Logo、色彩系统、字体、UI、场景预览：\n\n![品牌视觉拆分](https://goframe-blog-upyun.mircool.cn/blog/1777654929060489750.png)\n\n因为是并行任务，很快就产出了一整套设计细则：\n\n![设计细则 1](https://goframe-blog-upyun.mircool.cn/blog/1777654930674640419.png)\n![设计细则 2](https://goframe-blog-upyun.mircool.cn/blog/1777654930151209692.png)\n![设计细则 3](https://goframe-blog-upyun.mircool.cn/blog/1777654929916013434.png)\n![设计细则 4](https://goframe-blog-upyun.mircool.cn/blog/1777654931338646121.png)\n\n完整设计细则有了，接下来实际应用。\n\n基于品牌物料产出 App Store 宣传图：\n\n![App Store 宣传图 1](https://goframe-blog-upyun.mircool.cn/blog/1777654930602803154.png)\n![App Store 宣传图 2](https://goframe-blog-upyun.mircool.cn/blog/1777654930151209692.png)\n\n文字排版有 App Store 的风格了，圆角细节也做了出来。\n\n一键修改四国语言版本：\n\n![多语言版本](https://goframe-blog-upyun.mircool.cn/blog/1777654929185497613.png)\n\n利用 Mockup 一键嵌入真实场景：\n\n![Mockup 场景替换](https://goframe-blog-upyun.mircool.cn/blog/1777654929033917612.png)\n\n---\n\n四个 Case 跑下来的感受：不是出图变好看了，是设计生产的门槛又降低了一个量级。\n\nImage2 的四项核心能力——文字无乱码、UI 逼真、Raw 写实、复杂布局——每一项都在把必须找专业人做的事，变成一个人一句话能搞定的事。\n\n星流解决的是生成之后怎么用的问题。从创意到交付，品牌设计生产链确实跑顺了。\n\n\u003e 本文转自微信公众号「路人甲TM」，[查看原文](https://mp.weixin.qq.com/s/bwK5wTStGhY96o7kdOYJhg)\n","summary":"用 GPT-Image2 跑了四个真实设计场景：多语海报、仿真直播截图、Y2K年鉴效果包、App品牌全家桶，从出图到落地全流程实测。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777654887171301341.jpg","categoryId":3,"isDraft":0,"viewCount":21,"createdAt":"2026-05-01 10:10:39","updatedAt":"2026-05-05 05:18:45"},{"id":64,"title":"GPT Image 2 全场景实测：游戏UI、电商、品牌设计挨个试了一遍","slug":"gpt-image-2-full-scenario-test","content":"GPT Image 2 最近刷屏了。各种评测铺天盖地，说几秒钟能干掉设计师。我花了一周时间，从游戏 UI、电商视觉、品牌全案，到写实照片、3D 渲染、插画创作，全品类测了一遍。\n\n![GPT Image 2 全场景测试概览](https://goframe-blog-upyun.mircool.cn/blog/1777594493931143443.webp)\n\n## 和其他 AI 绘图工具有什么不同\n\nGPT Image 2 不只是画图，它对商业设计的底层规则有理解：\n\n- 能遵循 iOS/Android 设计规范、微信小程序标准、印刷出血位、游戏 UI 层级等行业规则，生成的图尺寸、比例、交互逻辑不会出硬伤\n- 配色色值、圆角数值、信息层级、材质质感、光影参数这些细节可以精确控制\n- 游戏金属磨砂、美妆玻璃通透感、国风鎏金水墨、实景 raw 格式质感，还原度都比较高\n- 可以先让 GPT 梳理需求、优化创意，再一键出图，不满意的地方用自然语言迭代\n\n---\n\n## 1. 游戏 UI 设计\n\n这可能是 GPT Image 2 最有意思的场景。不同风格的游戏 UI、控件、原型、场景人物武器，都能生成。\n\n提示词组合方式：游戏 UI 类型，加上游戏品类、核心风格、核心功能模块、材质质感、设计规范和画质要求，按这个顺序组织。\n\n实际做法是先生成 UI 规范和控件，再基于规范生成完整的游戏界面，这样风格更统一。\n\n![游戏UI规范生成](https://goframe-blog-upyun.mircool.cn/blog/1777594528047391520.webp)\n\n![游戏UI界面生成1](https://goframe-blog-upyun.mircool.cn/blog/1777594557252640091.webp)\n\n![游戏UI界面生成2](https://goframe-blog-upyun.mircool.cn/blog/1777594560758312475.webp)\n\n![游戏UI界面生成3](https://goframe-blog-upyun.mircool.cn/blog/1777594563789235601.webp)\n\n![游戏UI界面生成4](https://goframe-blog-upyun.mircool.cn/blog/1777594565450594998.webp)\n\n![游戏UI场景生成1](https://goframe-blog-upyun.mircool.cn/blog/1777594568017487352.webp)\n\n![游戏UI场景生成2](https://goframe-blog-upyun.mircool.cn/blog/1777594570124074797.webp)\n\n---\n\n## 2. 电商设计\n\n电商是目前 GPT Image 2 使用频率最高的场景。淘宝主图、详情页头图、平台 banner、直通车图、抖音直播间背景、小红书种草图、产品渲染、短视频封面、促销海报，基本一句话生成，不需要复杂提示词。\n\n![电商设计示例](https://goframe-blog-upyun.mircool.cn/blog/1777594498336333882.webp)\n\n---\n\n## 3. 通用 UI 设计\n\n覆盖游戏之外的全品类 UI：数据可视化、APP 界面、B 端后台、品牌官网、H5 活动页、车载系统、智能设备界面等。\n\n提示词组合方式：UI 界面类型，加上适配平台、核心功能模块、设计规范、风格调性、主配色和分辨率。\n\n![通用UI设计规范](https://goframe-blog-upyun.mircool.cn/blog/1777594500754074614.webp)\n\n![APP界面设计](https://goframe-blog-upyun.mircool.cn/blog/1777594502674948200.webp)\n\n![数据可视化设计](https://goframe-blog-upyun.mircool.cn/blog/1777594505923935767.webp)\n\n官网 UI：\n\n![官网UI设计](https://goframe-blog-upyun.mircool.cn/blog/1777594508602875880.webp)\n\n古风文化 app：\n\n![古风文化APP设计](https://goframe-blog-upyun.mircool.cn/blog/1777594512581308076.webp)\n\n---\n\n## 4. 平面设计\n\n海报、长图、宣传单页、企业画册、三折页、邀请函、门票、包装设计、展板、易拉宝，从线上传播到线下印刷都能覆盖。\n\n电影海报：\n\n![电影海报设计](https://goframe-blog-upyun.mircool.cn/blog/1777594515857804414.webp)\n\n三折页：\n\n![三折页设计](https://goframe-blog-upyun.mircool.cn/blog/1777594518193029877.webp)\n\n海报宣传：\n\n![海报设计1](https://goframe-blog-upyun.mircool.cn/blog/1777594520886587714.webp)\n\n![海报设计2](https://goframe-blog-upyun.mircool.cn/blog/1777594524057995557.webp)\n\n运营长图：\n\n![运营长图设计](https://goframe-blog-upyun.mircool.cn/blog/1777594532470959416.webp)\n\n---\n\n## 5. 品牌设计\n\nGPT Image 2 能理解品牌的行业属性、定位和目标人群，生成风格统一的品牌视觉。五台山文旅品牌是个不错的例子。\n\n![品牌设计-五台山文旅](https://goframe-blog-upyun.mircool.cn/blog/1777594535380100155.webp)\n\n![品牌视觉体系](https://goframe-blog-upyun.mircool.cn/blog/1777594538423879763.webp)\n\n---\n\n## 6. 写实照片\n\n生成的生活场景照片，接近真实水平。\n\n![写实照片示例1](https://goframe-blog-upyun.mircool.cn/blog/1777594541916914888.webp)\n\n![写实照片示例2](https://goframe-blog-upyun.mircool.cn/blog/1777594544301996694.webp)\n\n---\n\n## 7. 其他场景\n\n除了上面六个方向，插画创作（国风、二次元、商业插画、儿童绘本）、3D 视觉设计、空间设计（家装效果图、工装设计、建筑外立面）、影视动画创作、文创非遗设计，也在尝试范围内。\n\n![其他场景示例1](https://goframe-blog-upyun.mircool.cn/blog/1777594552915686543.webp)\n\n![其他场景示例2](https://goframe-blog-upyun.mircool.cn/blog/1777594547151530182.webp)\n\n![其他场景示例3](https://goframe-blog-upyun.mircool.cn/blog/1777594550017274460.webp)\n\n---\n\n## 使用建议\n\n1. 先定框架再写提示词。先让 GPT 帮你梳理需求，比如\"我要做一个国风仙侠手游的登录界面，帮我梳理核心设计元素和视觉重点\"，再基于梳理结果写提示词，输出质量会好不少。\n\n2. 规范优先。把行业规范、尺寸要求、核心约束放在提示词最前面，比如\"符合微信小程序设计规范\"\"预留 3mm 印刷出血位\"\"800x800 像素正方形\"，避免生成的图好看但没法用。\n\n3. 分层约束，明确优先级。核心需求放前面，次要需求放后面。电商主图先写\"产品居中，核心卖点在画面顶部\"，再写风格、质感、光影。\n\n4. 迭代优化。不用追求一次完美，第一版出来后直接用自然语言告诉 GPT 修改方向，比如\"按钮改成磨砂玻璃质感，主色调换成 #FF6B6B\"。\n\n---\n\n\u003e 原文：[优设网 - GPT Image 2 全场景深度测试](https://www.uisdc.com/gpt-image-2-5)\n","summary":"花了一周时间把 GPT Image 2 从游戏UI、电商视觉、品牌全案到写实照片全品类测了一遍，记录实际效果和使用建议。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777594493931143443.webp","categoryId":3,"isDraft":0,"viewCount":20,"createdAt":"2026-05-01 00:17:29","updatedAt":"2026-05-05 02:54:37"},{"id":63,"title":"Open Design：Claude Design 的开源平替，30+ 设计 Skills + 71 套设计系统","slug":"open-design-claude-design-alternative","content":"![Open Design](https://goframe-blog-upyun.mircool.cn/blog/1777590392061500251.jpg)\n\n最近发现了一个 Claude Design 的开源替代品——[Open Design](https://github.com/nexu-io/open-design)，GitHub 上 nexu-io 的项目。\n\n用不上 Claude Design 的可以试试这个。工具跑在你自己电脑上，也能发布成网页，用的是你自己的 AI/API 密钥。\n\n简单说就是一个开源 AI 设计生成器：做网页、PPT、App 原型、仪表盘、文档，能预览也能导出。\n\n整个流程是这样的：\n\n1. 输入需求，它会先弹个表单让你确认设计目标、受众、风格、品牌约束\n2. 然后选视觉方向和设计系统\n3. 调用你本地装好的 AI 编程工具，自动读模板、写代码、生成页面\n4. 在网页里预览，导出成 HTML、PDF、PPTX、ZIP、Markdown 都行\n\n## 一、能做什么\n\n内置 19 个 Skills，也就是设计任务模板：\n\n- 网页原型\n- SaaS 落地页\n- 仪表盘\n- 定价页\n- 文档页\n- 博客文章\n- 移动 App 原型\n- 简单演示文稿\n- 杂志风 PPT\n- 产品需求文档\n- 周报\n- 会议纪要\n- 工程运行手册\n- 财务报告\n- 入职计划\n- 发票\n- 看板\n- OKR 表\n\n还内置了 71 套设计系统，每套都是 Markdown 格式的 DESIGN.md，涵盖颜色、字体、间距、布局、组件、动效、品牌语气这些。生成设计时 AI 按你选的设计系统来，不是瞎搞。\n\n## 二、好在哪\n\n这个项目强调\"反 AI 味\"的设计流程。先确认需求，再结合预设设计方向、设计系统、检查清单和自评流程，让结果更准确、更统一。\n\n核心思路四步：\n\n**先问问题再设计。** 新设计 brief 会先让你填表单，确认页面类型、受众、语气、品牌上下文，然后才进生成流程。\n\n**风格不是瞎猜。** 没有品牌规范的话，会让你从 5 个视觉方向里选：编辑杂志风、现代极简、技术工具感、粗野主义、柔和温暖风。\n\n**结果落成本地文件。** 本地生成真实项目文件，方便继续编辑、交付或二次开发。\n\n**技能和设计系统都能自定义。** 新增 SKILL.md 技能文件夹，修改 DESIGN.md 设计系统，适配你自己的工作流。\n\n## 三、怎么用\n\n用 Codex 让它下载项目，或者直接用 Claude Code 也行。\n\n跟 Claude Code 说\"打开这个项目的网页地址\"，等几分钟它会给你一个网址：\n\n![Codex 使用](https://goframe-blog-upyun.mircool.cn/blog/1777590393928610285.png)\n\n![项目页面](https://goframe-blog-upyun.mircool.cn/blog/1777590395798320545.png)\n\n选【本地 CLI】表示用电脑上已有的命令行工具来生成。本地有就直接点【Get started】：\n\n![Get started](https://goframe-blog-upyun.mircool.cn/blog/1777590397708684723.png)\n\n【人类学 API】选项是你自己提供 API 配置：\n\n![API 配置](https://goframe-blog-upyun.mircool.cn/blog/1777590399115505500.png)\n\n### 1. 示例\n\n右边有一堆示例：\n\n![示例列表](https://goframe-blog-upyun.mircool.cn/blog/1777590401085478692.png)\n\n可以【使用此提示】或者【打开预览】看效果：\n\n![预览效果](https://goframe-blog-upyun.mircool.cn/blog/1777590402612253484.png)\n\n打开预览还能看到各种下载方式：\n\n![下载方式](https://goframe-blog-upyun.mircool.cn/blog/1777590404296055679.png)\n\n### 2. 设计系统\n\n示例右边是 71 套设计系统：\n\n![设计系统列表](https://goframe-blog-upyun.mircool.cn/blog/1777590405839523712.png)\n\n看看爱彼迎的设计系统，内容非常全：\n\n![Airbnb 设计系统1](https://goframe-blog-upyun.mircool.cn/blog/1777590407271431018.png)\n\n![Airbnb 设计系统2](https://goframe-blog-upyun.mircool.cn/blog/1777590408468814438.png)\n\n![Airbnb 设计系统3](https://goframe-blog-upyun.mircool.cn/blog/1777590410059309555.jpg)\n\n### 3. 生成 UI 设计页面\n\n填原型名称，比如\"运动健身网站\"，选设计系统（单选多选都行）：\n\n![创建原型](https://goframe-blog-upyun.mircool.cn/blog/1777590411547857031.png)\n\n选【高保真】，点【创建】：\n\n![高保真创建](https://goframe-blog-upyun.mircool.cn/blog/1777590413047212085.png)\n\n输入你要做的页面，比如\"做一个运动健身网站首页\"，点【发送】：\n\n![输入需求](https://goframe-blog-upyun.mircool.cn/blog/1777590414438650698.png)\n\n它会让你选一些信息来辅助设计：\n\n![设计信息](https://goframe-blog-upyun.mircool.cn/blog/1777590416074075017.png)\n\n等一会儿，UI 设计界面就出来了：\n\n![生成结果1](https://goframe-blog-upyun.mircool.cn/blog/1777590417649851120.png)\n\n![生成结果2](https://goframe-blog-upyun.mircool.cn/blog/1777590419589263867.png)\n\n### 4. PPT\n\n做 PPT 也一样，选幻灯片后创建：\n\n![PPT 创建](https://goframe-blog-upyun.mircool.cn/blog/1777590420858300539.png)\n\n随便给它一个主题，它会问你一些问题，包括要不要上传参考资料：\n\n![PPT 需求](https://goframe-blog-upyun.mircool.cn/blog/1777590422513482872.png)\n\n然后选个视觉方向，挑你喜欢的颜色就行：\n\n![视觉方向](https://goframe-blog-upyun.mircool.cn/blog/1777590424247611261.png)\n\n再等一会儿，PPT 就出来了：\n\n![PPT 生成1](https://goframe-blog-upyun.mircool.cn/blog/1777590426032308957.png)\n\n![PPT 生成2](https://goframe-blog-upyun.mircool.cn/blog/1777590427761827041.gif)\n\n---\n\n除了 UI 页面和 PPT，Open Design 里还有很多其他 Skills：产品需求文档、仪表盘、周报、会议纪要、财务报告、OKR 表等等。\n\n对设计师来说，它的价值不只是能生成页面——而是把\"需求确认、风格选择、设计系统约束、文件导出\"这些环节串成了一套完整流程。\n\n如果你经常做网页原型、产品方案、汇报 PPT 或内部文档，可以把它当成本地优先的 AI 设计工作台试试。\n\n\u003e 原文：[萤柳设计](https://mp.weixin.qq.com/s/bOLe_TnLgRARjzwgLcrZuA)\n","summary":"Open Design 是 Claude Design 的开源替代品，内置 19 个设计 Skills 和 71 套设计系统，支持网页、PPT、App 原型等多种设计生成。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777590392061500251.jpg","categoryId":3,"isDraft":0,"viewCount":11,"createdAt":"2026-04-30 23:08:06","updatedAt":"2026-05-04 21:17:28"},{"id":62,"title":"GPT-Image2 生成的 PSD，不是假分层","slug":"gpt-image2-generate-psd-layers","content":"\u003e GPT-Image2 现在可以直接生成分层的 PSD 文件了。不是那种把所有内容压成一张图的假 PSD，而是真正分层、每个元素单独可编辑。下载后直接丢进 Photoshop，图层、分组、顺序全部到位，改换主体、调背景都不用重新抠图。4 步搞定。\n\n---\n\n## 整体思路\n\nGPT-Image2 是 OpenAI 的新一代图像生成模型，生图质量不错。重点在于它有个 **thinking 模式**，能理解复杂的图像拆分指令，把一张完整的图拆成多个独立的图层。\n\n然后再告诉它用 Photoshop 作为导出源，它就会把拆好的图层图片合并成一个真正的、分层的 PSD 文件。\n\n整个链路：\n\n**文字 → AI 生图 → thinking 拆分图层 → Photoshop 合成 PSD → 下载编辑**\n\n---\n\n## 4 步跑通完整流程\n\n### 第 1 步：用 GPT 生成一张海报\n\n直接让 GPT-Image2 生成你想要的图，提示词根据需求写就行。\n\n![生成海报](https://goframe-blog-upyun.mircool.cn/blog/1777542562446034477.jpg)\n\nImage2 的出图效果不错，细节和质感都在线。你也可以上传自己的图片。\n\n### 第 2 步：开启 thinking 模式拆分图层\n\n这一步是关键，**一定要选 thinking 模式**。\n\nthinking 模式下，GPT 会先\"想一遍\"再执行，对复杂的图像拆分指令理解更准。把下面这段 JSON 格式的提示词发给它：\n\n```json\n{\n  \"task\": \"split_image_layers\",\n  \"input\": \"generated_image\",\n  \"output\": {\n    \"type\": \"multiple_images\",\n    \"background\": \"solid_white\",\n    \"avoid\": \"fake_transparency\"\n  },\n  \"requirements\": {\n    \"one_element_per_image\": true,\n    \"canvas_size\": \"same_as_original\",\n    \"preserve_element_size\": true,\n    \"preserve_relative_position\": true,\n    \"photoshop_ready_overlay\": true,\n    \"no_manual_movement_needed\": true\n  }\n}\n```\n\n![开启 thinking 模式](https://goframe-blog-upyun.mircool.cn/blog/1777542564041320410.jpg)\n\n跑完后你会收到一堆拆分好的图层图片。每个元素单独一张，画布大小和原图一样，元素位置和大小都不变，底色是纯白色。\n\n![拆分后的图层图片](https://goframe-blog-upyun.mircool.cn/blog/1777542565716941547.gif)\n\n切图效果取决于提示词写得够不够清楚，目前只能说一般，要做好还得再调。\n\n### 第 3 步：添加源，选择 Photoshop\n\n拿到拆分好的图层图片后，**选 Photoshop 作为添加源**，然后发这段 JSON：\n\n```json\n{\n  \"task\": \"merge_layers_to_psd\",\n  \"input\": \"split_layer_images\",\n  \"output\": {\n    \"type\": \"psd\",\n    \"remove_background\": \"solid_white\",\n    \"layers\": \"independent_editable_layers\"\n  },\n  \"requirements\": {\n    \"canvas_size\": \"same_as_original\",\n    \"preserve_relative_position\": true,\n    \"preserve_z_order\": true,\n    \"photoshop_editable\": true\n  }\n}\n```\n\n![添加 Photoshop 源](https://goframe-blog-upyun.mircool.cn/blog/1777542566644164399.jpg)\n\n它会把这些白底图层图片去除白色背景，转成透明图层，然后按正确的顺序和位置合成到一个 PSD 文件里。\n\n### 第 4 步：下载 PSD，直接在 PS 中编辑\n\n下载生成的 PSD 文件，拖进 Photoshop 打开。\n\n图层面板里每个元素都是独立的，背景、主体、装饰各自分层。改哪个改哪个，不用手动抠图。\n\nAI 也会直接输出所有拆分好的 PNG 图层图片，可以单独下载。\n\n![输出下载界面](https://goframe-blog-upyun.mircool.cn/blog/1777542568382545949.jpg)\n\n![拆分好的多张 PNG 图层](https://goframe-blog-upyun.mircool.cn/blog/1777542569560852394.jpg)\n\n---\n\n## 优点\n\n- **Image2 生图效果好**：细节、质感、构图都在线，生成的图本身质量就高\n- **减少手动工作量**：不用一个个抠元素、不用反复调整图层顺序\n- **门槛低**：4 步搞定，不需要写代码，不需要专业工具，会打字就行\n\n---\n\n## 不足和避坑\n\n**切图不是非常准**，偶尔会翻车：\n\n- 丢失背景，元素位置也变了，拼出来不是原图\n\n- 位置对了，但切的块不完整，像拼图碎裂\n\n不过对于做海报、电商图、自媒体封面这类场景，已经够用了。\n\n**避坑建议**：\n\n1. **提示词用 JSON 格式**：上面两个 bad case 都是用自然语言写的，效果不稳定。结构化指令更精准，AI 不会乱发挥\n2. **把关键条件写进 requirements**：画布大小、元素位置、背景类型，越具体越好。文字效果这块还可以继续优化\n3. **新开窗口**：有问题不要在原窗口调整，新开一个对话窗口重置上下文\n\n---\n\n## 适合谁\n\n**适合**：\n- 做海报、电商图、自媒体封面的设计师和创作者\n- 想提高效率、减少重复劳动的人\n- 需要快速出初稿再精细调整的场景\n\n**不适合**：\n- 对切图精度要求极高的专业场景\n- 需要精细控制每个图层细节的设计师\n- 希望 AI 一步到位、完全不用管的\n\n---\n\n## 总结\n\nGPT-Image2 生图 + thinking 拆分图层 + Photoshop 合成 PSD，一套流程跑下来省下大量手动切图、抠图、排图层的时间。提示词用 JSON 格式效果更稳。\n\n---\n\n*来源：[鳕小堡的AI轻笔记](https://mp.weixin.qq.com/s/OWuolHuKsHaiBSMk8nRmsA)*\n","summary":"GPT-Image2 + thinking 模式 + Photoshop，4 步生成真正分层的 PSD 文件。不是假分层，每个元素独立可编辑。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777542562446034477.jpg","categoryId":3,"isDraft":0,"viewCount":13,"createdAt":"2026-04-30 09:50:38","updatedAt":"2026-05-02 17:42:38"},{"id":61,"title":"GPT Image 2 生成手作感拉满的景区导视设计","slug":"gpt-image2-scenic-signage-design","content":"谁懂啊！GPT Image 2 直接帮我把导视设计卷上天✨\n\n之前还在头疼的景区导视，没想到用 AI 一键生成，直接出了这种「原木雕刻+山水肌理」的神仙方案！从天然木纹的质感，到层叠雕刻的山谷溪流，甚至导览信息和景区氛围的融合度，都完全踩中了我想要的原生态感，细节丰富到我都想直接落地施工了！\n\n现在的 AI 设计也太香了，打工人的灵感库直接被 GPT Image 2 喂饱，效率和质感双在线，这波我直接吹爆！📸\n\n![图1](https://goframe-blog-upyun.mircool.cn/blog/1777451319709393542.jpg)\n\n![图2](https://goframe-blog-upyun.mircool.cn/blog/1777451331945661567.jpg)\n\n![图3](https://goframe-blog-upyun.mircool.cn/blog/1777451336627879100.jpg)\n\n![图4](https://goframe-blog-upyun.mircool.cn/blog/1777451339646246168.jpg)\n\n![图5](https://goframe-blog-upyun.mircool.cn/blog/1777451341873635534.jpg)\n\n![图6](https://goframe-blog-upyun.mircool.cn/blog/1777451343783537063.jpg)\n\n![图7](https://goframe-blog-upyun.mircool.cn/blog/1777451345969884367.jpg)\n\n![图8](https://goframe-blog-upyun.mircool.cn/blog/1777451347909095911.jpg)\n\n![图9](https://goframe-blog-upyun.mircool.cn/blog/1777451350201346597.jpg)\n\n---\n\n*来源：[阿夕爱设计](https://mp.weixin.qq.com/s/z6LXzhbKIdKdOtjcqoiV2A)*","summary":"GPT Image 2 生成原木雕刻+山水肌理风格的景区导视设计，手作感拉满，效率和质感双在线。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777451319709393542.jpg","categoryId":4,"isDraft":0,"viewCount":17,"createdAt":"2026-04-29 08:30:53","updatedAt":"2026-05-03 22:05:12"},{"id":60,"title":"Open Design：Claude Design 的开源替代，19 个 Skills + 71 套设计系统，让你的 AI 编码助手秒变设计师","slug":"open-designclaude-design-的开源替代19-个-skills--71-套设计系统让你的-ai-编码助手秒变设计师","content":"2026 年 4 月 17 日，Anthropic 发布了 Claude Design——当 LLM 不再写散文，而是直接出设计稿。它刷屏了。但它闭源、付费、云端运行，锁定在 Anthropic 的模型和技能体系里，没有自部署选项。\n\n**Open Design（OD）就是开源替代品。** 同样的循环，同样的设计优先思维，但没有任何锁定。它不自带 Agent——最强的编码 Agent 已经在你的电脑上了。它做的是把这些 Agent 接入一个技能驱动的设计工作流，支持 `pnpm dev` 本地运行、Vercel 部署、每层 BYOK。\n\n![Open Design Banner](https://goframe-blog-upyun.mircool.cn/blog/1777434069478050135.jpg)\n\n---\n\n## 它能做什么？\n\n一句话：**让你的 AI 编码助手变成一个高级设计师。**\n\n输入一句 `make me a magazine-style pitch deck for our seed round`，OD 会：\n\n1. 弹出交互式问卷，锁定设计方向（表面、受众、调性、品牌、规模）\n2. 从 5 个策展视觉方向中挑选一个（每个方向附带确定性调色板和字体栈）\n3. 生成实时 TodoWrite 计划，流式展示到 UI\n4. 构建真实的项目文件夹，包含种子模板、布局库和自检清单\n5. Agent 读取模板，执行五维自评，然后输出一个 `\u003cartifact\u003e`，在沙盒 iframe 中秒级渲染\n\n这不是\"AI 试着设计点什么\"，而是一个**被 prompt 栈训练成高级设计师**的 AI——有工作文件系统、确定性调色板库和清单文化。\n\n---\n\n## 核心亮点一览\n\n| 维度 | 内容 |\n|------|------|\n| **支持的编码 Agent** | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Anthropic API (BYOK) |\n| **内置设计系统** | **71 套** — Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma 等 |\n| **内置 Skills** | **19 个** — 原型、PPT、移动端、仪表盘、定价页、文档、博客、SaaS 落地页 + 10 个文档模板 |\n| **视觉方向** | 5 大流派（编辑 Monocle · 现代极简 · 技术实用 · 粗野主义 · 柔暖温暖） |\n| **设备框架** | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Chrome 浏览器 |\n| **部署方式** | 本地 (pnpm dev) · Vercel · 单进程生产 (npm start) |\n| **许可证** | Apache-2.0 |\n\n---\n\n## 效果演示\n\n**入口视图** — 选择 Skill、设计系统，输入需求描述：\n\n![Entry View](https://goframe-blog-upyun.mircool.cn/blog/1777434027325290362.png)\n\n**第一轮发现问卷** — 在模型动笔画一个像素之前，锁定需求：\n\n![Discovery Form](https://goframe-blog-upyun.mircool.cn/blog/1777434028463039825.png)\n\n**方向选择器** — 5 个策展视觉方向，一键确定调色板和字体：\n\n![Direction Picker](https://goframe-blog-upyun.mircool.cn/blog/1777434029581786076.png)\n\n**实时 Todo 进度** — Agent 的计划实时流式展示：\n\n![Todo Progress](https://goframe-blog-upyun.mircool.cn/blog/1777434030678233986.png)\n\n**沙盒预览** — 每个作品在干净的 iframe 中渲染，支持 HTML/PDF/ZIP 导出：\n\n![Sandboxed Preview](https://goframe-blog-upyun.mircool.cn/blog/1777434031932155860.png)\n\n**71 套设计系统库** — 每个产品系统展示其四色签名：\n\n![71 Design Systems](https://goframe-blog-upyun.mircool.cn/blog/1777434033053142044.png)\n\n**杂志风 PPT** — 内置 guizang-ppt Skill，杂志排版、WebGL 背景：\n\n![Magazine Deck](https://goframe-blog-upyun.mircool.cn/blog/1777434034214366366.png)\n\n**移动端原型** — 像素级精确的 iPhone 15 Pro 框架：\n\n![Mobile Prototype](https://goframe-blog-upyun.mircool.cn/blog/1777434037392074384.png)\n\n---\n\n## 六个核心理念\n\n### 1. 不自带 Agent——你手上的就够了\n\n守护进程启动时扫描 PATH 中的 claude、codex、cursor-agent、gemini、opencode、qwen。找到哪个就用哪个作为设计引擎。没找到？Anthropic API BYOK 同样能跑。\n\n### 2. Skill 是文件，不是插件\n\n遵循 Claude Code 的 SKILL.md 规范——每个 Skill 就是 SKILL.md + assets/ + references/。往 skills/ 丢一个文件夹，重启守护进程，它就出现在选择器里。\n\n### 3. 设计系统是 Markdown，不是 JSON\n\n9 节 DESIGN.md schema——颜色、排版、间距、布局、组件、动效、语调、品牌、反模式。切换设计系统 → 下一次渲染自动使用新 token。\n\n### 4. 交互式问卷阻止 80% 的返工\n\nOD 的 prompt 栈硬编码了一条规则：每个新设计任务的第一轮必须是问卷表单，而不是代码。30 秒的勾选胜过 30 分钟的返工。\n\n### 5. 守护进程让 Agent 真正活在你的电脑上\n\n守护进程以项目文件夹为 cwd 启动 CLI，Agent 获得 Read、Write、Bash、WebFetch——真实工具、真实文件系统。会话、对话、标签页持久化在本地 SQLite 数据库中。\n\n### 6. Prompt 栈就是产品\n\n发送时组合的不只是\"system + user\"，而是：\n\n- 发现指令（第1轮表单 + 第2轮品牌分支 + TodoWrite + 5维自评）\n- 身份章程（官方设计师 Prompt + 反 AI 味 + 初级设计师流程）\n- 活跃 DESIGN.md（71 套系统可选）\n- 活跃 SKILL.md（19 个 Skill 可选）\n- 项目元数据\n- Skill 侧文件（自动注入：读取模板 + 参考文档）\n\n---\n\n## 19 个内置 Skill\n\n### 展示类 Skill\n\n| Skill | 模式 | 产出 |\n|-------|------|------|\n| web-prototype | 原型 | 单页 HTML — 落地页、营销页 |\n| saas-landing | 原型 | Hero/功能/定价/CTA 营销布局 |\n| dashboard | 原型 | 管理后台/分析仪表盘 |\n| pricing-page | 原型 | 独立定价+对比表 |\n| docs-page | 原型 | 三栏文档布局 |\n| blog-post | 原型 | 编辑式长文 |\n| mobile-app | 原型 | iPhone 15 Pro / Pixel 框架应用 |\n| simple-deck | PPT | 极简横向滑动 |\n| guizang-ppt | PPT | 杂志风 Web PPT（默认 PPT 模式） |\n\n### 文档类 Skill\n\n| Skill | 产出 |\n|-------|------|\n| pm-spec | PM 规格文档 |\n| weekly-update | 团队周报 |\n| meeting-notes | 会议决策记录 |\n| eng-runbook | 故障处理手册 |\n| finance-report | 财务摘要 |\n| hr-onboarding | 入职计划 |\n| invoice | 单页发票 |\n| kanban-board | 看板快照 |\n| team-okrs | OKR 评分表 |\n\n---\n\n## 设计系统库\n\n![71 Design Systems Library](https://goframe-blog-upyun.mircool.cn/blog/1777434024994377834.png)\n\n71 套设计系统开箱即用，涵盖 AI \u0026 LLM、开发者工具、生产力、金融科技、电商、媒体、汽车等多个领域，包括 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma 等知名品牌的设计风格。\n\n---\n\n## 快速开始\n\n```bash\ngit clone https://github.com/nexu-io/open-design.git\ncd open-design\npnpm install\npnpm dev:all         # 启动守护进程 (:7456) + Vite (:5173)\nopen http://localhost:5173\n```\n\n首次启动会自动检测 Agent CLI、加载 19 个 Skill 和 71 套设计系统、弹出欢迎对话框让你粘贴 Anthropic API Key。然后就可以开始设计了。\n\n---\n\n## 架构概览\n\n- **前端**：Vite 5 + React 18 + TypeScript\n- **守护进程**：Node 18+ · Express · SSE 流式 · better-sqlite3\n- **Agent 传输**：child_process.spawn，claude-stream-json 解析器 + 行缓冲\n- **存储**：.od/projects/ 文件夹 + SQLite 数据库\n- **预览**：沙盒 iframe (srcdoc) + 每Skill artifact 解析器\n- **导出**：HTML / PDF / PPTX / ZIP / Markdown\n\n---\n\n## 与竞品对比\n\n| 维度 | Claude Design | Open CoDesign | **Open Design** |\n|------|---------------|---------------|-----------------|\n| 许可证 | 闭源 | MIT | **Apache-2.0** |\n| 可部署到 Vercel | ❌ | ❌ | **✅** |\n| Agent 运行时 | 绑定 Opus 4.7 | 绑定 pi-ai | **委托给你已有的 CLI** |\n| 设计系统 | 专有 | 路线图 | **71 套已发布** |\n| 初始问卷 | ❌ | ❌ | **✅ 强制规则** |\n| 5 维自评 | ❌ | ❌ | **✅ 输出前门控** |\n| 文件系统级工作区 | ❌ | 部分 | **✅ 真实 cwd + SQLite** |\n\n---\n\n## 项目地址\n\n**GitHub**：[https://github.com/nexu-io/open-design](https://github.com/nexu-io/open-design)\n\nApache-2.0 开源，欢迎 Star、PR、贡献新 Skill 和设计系统。\n","summary":"2026 年 4 月 17 日，Anthropic 发布了 Claude Design——当 LLM 不再写散文，而是直接出设计稿。它刷屏了。但它闭源、付费、云端运行，锁定在 Anthropic 的模型和技能体系里，没有自部署选项。Open Design（OD）就是开源替代品。同样的循环，同样的设计优先思维，但没有任何锁定。它不自带 Agent——最强的编码 Agent 已经在你的电脑上了。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777433044521605348.jpg","categoryId":3,"isDraft":0,"viewCount":22,"createdAt":"2026-04-29 03:25:18","updatedAt":"2026-05-02 11:27:22"},{"id":59,"title":"Image 2 能批量生图了，23 个真实场景和提示语一口气学会！","slug":"image2-batch-generation-23-scenes","content":"如果说 Image 2 的能力是夯，能可以批量生图的 Image 2 只能说是夯爆了。\n\n![▶ 视频封面](https://goframe-blog-upyun.mircool.cn/blog/1776941956916461719.jpg)\n\n[▶ 点击播放视频](https://goframe-blog-upyun.mircool.cn/blog/1776941472937607411.mp4)\n\n（温馨提示：上方图片由 Image-2 生成、视频由 seedance 2.0 生成，本文所有图片均由 AI 生成）\n\n上周五刚灰度测完 Image 2，当时的我测了一大把提示语，这两天还用来做 PPT 来着。但我真没想到全量之后大家的脑洞能那么大。。。。\nLovart 也火速接入了，甚至安排了三种图像质量的档位，供大家自行选择。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940020223157060.png)\n\n于是我跟 Lovart 一拍即合，又给大家测了一大波提示语，直接上图吧。🎁\n下面图片的提示语，有一些文字会比较多，我会都整理到文档里面，后台回复 \"Lovart 2\" 就可以了。\n\n首先，因为这个版本的 Image 2 对于多文字的稳定性提升非常大，所以很多人都在尝试它的文字生成能力。我感觉目前大家玩得比较多的，一般是这种图鉴类型的图片。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940022239655122.jpg)\n\n或者是 MBTI 人格解释图鉴，\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940024911040731.jpg)\n\n或者是上班摸鱼姿势大图鉴，\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940028773332096.jpg)\n\n做这些效果，我其实都没有写什么复杂的提示语，给的就是一句话，\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940029894914429.png)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940030081333256.png)\n\n就这么简单，因为它本身就具有非常强的联网分析能力，它能根据你给的一个主题去自动搜索出非常多匹配这个主题的信息，然后给你结合在一张图上。\n\n而且 Lovart 自带了 TouchEdit 功能。像这种一张图中包含很多元素的图，如果你想指哪打哪地修改，只靠文字告诉 AI 其实是比较难去定位修改位置的。\n比如说我这里有一张画了这么多猫的图，我可以精准地选中其中的波斯猫和美国短毛猫，然后让它把这两只猫替换成两只狗。\n\n![▶ 视频封面](https://goframe-blog-upyun.mircool.cn/blog/1776941957492763735.jpg)\n\n[▶ 点击播放视频](https://goframe-blog-upyun.mircool.cn/blog/1776941473948062852.mp4)\n\n这种多文字的信息图，除了上面这种图鉴类型，其实还可以做很多产品分析类型，比如说分析一款食品的热量。\n给我生成一份超高热量食物的热量组成分析图，你自己以一个具体的热量很高的食物为例\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940035661840957.png)\n\n或者是给一个产品做原理分析图，这里我拆解了一个充电宝，🍞\n给我生成一张充电宝内部构造的深度分析图片\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940041502542638.jpg)\n\n或者是详细的历史事件分析图，\n给我生成一张赤壁之战的历史事件分析图\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940044352855262.jpg)\n\n像这种一张含有超级多文字信息的图，Image 2 都能保持小字稳定不崩，甚至还带了很强的设计感。\n\n而且比如说这种信息图，如果做出一个排版已经确定好是自己想要的样式，还可以直接通过 Lovart 的 Agent 让它批量给你生成很多同系列的图片。这样的话就非常省时省力，你不需要再持续地对话然后调整提示语，让他一张一张生成。\n比如说我很喜欢上面做出来的这个热量分析图，所以我让 Lovart 直接根据这个热量分析图的样式，再给我批量出了 10 张其他食物的热量分析图。可以看到，所有的排版布局以及信息都是跟着第一张图来的，一致性很强。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940048555400048.jpg)\n\n而且，这次 Image 2 的更新，其实它对于 IP 类的形象设计做得也会更好。比如说，这里我让 Lovart 直接帮我做了一个三花猫的 IP 形象的设计图。\n我给的提示语就只是一句帮我给一只可爱的三花小猫设计一个 IP 形象，就得到了下面这张图。这张图的内容非常全面，既有它的三视图，又有各种表情和配色，甚至还做出了它的个人简介，包括性格、平时喜欢玩的道具以及它的习惯，整个 IP 图的设计既美观又详细。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940050523718493.jpg)\n\n那现在来到 IP 设计和品牌设计领域，基本上就可以让 Lovart 掌控全场了。\n定下这个 IP 形象之后，我还想设计一系列周边，所以我可以先用 TouchEdit 把主形象提取出来，让它给我做一个这个 IP 的正面视图形象照。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940052761214082.jpg)\n\n为了让我们对这个 IP 了解得更加清楚，我们可以直接用 Lovart 里面这个多角度功能，把这个 IP 调整成任何我们想要查看的视角。\n\n![▶ 视频封面](https://goframe-blog-upyun.mircool.cn/blog/1776941957684306075.jpg)\n\n[▶ 点击播放视频](https://goframe-blog-upyun.mircool.cn/blog/1776941475002545289.mp4)\n\n然后我也可以在确定好这个小猫形象之后，直接在 Lovart 的 Agent 里面引用这个形象，做出一个全套的 IP 图片。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940055127682664.jpg)\n\n然后也可以把它们从这张图里面拆分出来，一次性把每一个周边产品都单独做成一张大图。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940057462760612.jpg)\n\n或者 Lovart 还有一个很有趣的功能，就是我可以做一个空白产品图，比如我这里做了一个空白的抱枕，然后用 Mockup 样机的功能，把小猫这张图片直接印在空白产品上去看效果图。\n\n![▶ 视频封面](https://goframe-blog-upyun.mircool.cn/blog/1776941957883687184.jpg)\n\n[▶ 点击播放视频](https://goframe-blog-upyun.mircool.cn/blog/1776941475606933928.mp4)\n\n或者我直接可以在 Lovart 上创建一个视频生成器，调用 Seedance 2.0 给这些小周边做一个可爱的展示动画。\n\n![▶ 视频封面](https://goframe-blog-upyun.mircool.cn/blog/1776941958088022277.jpg)\n\n[▶ 点击播放视频](https://goframe-blog-upyun.mircool.cn/blog/1776941476707981428.mp4)\n\n果然，当一个新的生图模型出来之后，配上 Lovart 其中的各项功能加持，就会变得更加好用。\n\n其实这种多信息图，我们在上次 Image 2 灰度的时候也做过对比。它跟 Banana 最大的区别在于，容纳的文字信息量比 Banana 要多得多，文字排版设计上更美观，层级区分更加清晰，阅读起来有主次之分。\n\n那因为 Image 2 这次有了更强的世界知识，我们可以让它画各种各样的，你能想到的，想不到的。无论是以前网络上有的还是没有的，或者是你熟悉的，不熟悉的，那些曾经存在过的记忆，它都能画出来。\n\n说实话，看到下面这些图，我是真的有点分不清了。比如说，这些你熟悉的界面，QQ 空间、QQ 农场，甚至还有 4399 小游戏，哪个不是我的童年记忆啊这些，这味儿也太正了，连退出键都有。。。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940059878516991.jpg)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940062603483554.jpg)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940068281824588.png)\n\n在它有设计思维，又有世界知识的基础上，是非常适合应用到现在的平面设计领域的。大家一起来看看下面这些图，也就能体会到为什么这么多人都在说，设计师这回真的不需要设计了。\n\n例如，一个新店开业的海报，它能够拿捏住中式餐厅的主题，把福利和主打推荐的菜品都画出相应的图片，并且进行标注。说实话，我感觉整个页面 AI 味真的没有很重，包括画出来的这些菜品，其实看起来都还挺真实的。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940074186067006.jpg)\n\n或者是这种青年作者电影周的放映排期表，对应的信息都覆盖在它应有的位置上，整个排版非常有条理和设计感。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940076523073099.jpg)\n\n我还做了两张展览类型的海报。可以看到，一旦到了中式美学或者是空间美学这类风格，Image 2 会非常喜欢使用留白的方式，给整个画面带来一种呼吸感，让人一眼望去就觉得主次分明，设计感很强。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940078902567146.jpg)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940080673290394.jpg)\n\n到了品牌和产品这里，我分别做了一款香水上市和一瓶洗发水上市的新品海报。\n从海报中可以看到，它很能拿捏这些产品的调性，整个画面的字体设计、搭配使用的英文、各种元素 icon，这些细节的组合让整个画面显得非常高级。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940081961811713.jpg)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940083456558261.jpg)\n\n而且这种多文字的海报在 Lovart 里面，可以直接使用它的编辑文字功能直接对其中的文字进行修改，不会改变原图的其他元素，还能保证字体一致性。\n比如我这里用餐厅新年开业的那张海报去修改了一下，修改的整个过程非常丝滑。\n\n![▶ 视频封面](https://goframe-blog-upyun.mircool.cn/blog/1776941958276841150.jpg)\n\n[▶ 点击播放视频](https://goframe-blog-upyun.mircool.cn/blog/1776941478712281617.mp4)\n\nLovart 也确实不会对原图进行其他不必要的改动，只改变了文字，而且原有的字体也会延续下来。对于设计师们想要对海报进行二次修改的需求，它是非常友好的。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940086017096347.jpg)\n\n再到 UI 设计这一块，如果你跟它说要设计一款 App 的 UI 界面，它基本上都会直接匹配好现在手机整个的界面尺寸。可以看到下面这些设计并不是我们比较熟悉的既定标准尺寸，而是匹配好了手机屏幕的长度尺寸。\n然后再看画面，我先让他做了一个类似于手账风格的日常记账类 App，然后又让他给我输出了一个苹果风格的天气 App 页面。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940093961808423.png)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940101306423492.png)\n\n看不完，根本看不完，接下来是一个健康类 App 和一个外卖 App。\n只能说看到这个页面，我都觉得它确实处于一个接近真实的状态。你甚至可以持续跟它对话，让它给你生成首页，或者是这个 App 的另一个功能页面，都是可以的。\n我觉得产品经理在前期调研、设计 UI 草稿的时候，其实现在根本就不用自己去画了。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940104523641418.png)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940108818300879.png)\n\n我还做了一个 AI 助手，也就是桌面端 AI 助手的这样一个交互页面，基本上和现在市面上的产品逻辑是一致的。要是 CodeX App 再把 Image 2 上了就离谱了。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940113027011253.png)\n\n再到游戏这一块，我觉得其实话都不用多说了，大家直接从画面中就能感受到 Image 2 的厉害了。我的提示语基本上给的都不是很复杂，就是让他给我生成一些，抽卡游戏的抽卡结算画面、古风幻想类的手游角色画面、恋爱类手游的角色互动画面，真的很真实了，我都感觉有玩过这些游戏。。。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940116770785893.jpg)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940118755337022.jpg)\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940120742815070.jpg)\n\n再到电脑端类型的这种横屏类的游戏，甚至让他做了一个角色升级页面，以及战斗画面、地图界面等等。\n你看到他这些道具、这些装备，\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940122886197103.jpg)\n\n这些战斗画面中应该出现的元素包括队友角色，进度信息，敌方血条，暴击消耗的点数，大招，以及其他相关的内容，相当细节。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940125954327659.jpg)\n\n他又帮我生成了一个这款游戏的地图，我只能说太 6 了。\n他基本上把整个游戏都构想出来了，包括世界地图中存在的几个大陆，存在的几种地形，可能存在的任务点，这些全都画出来了。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940129087595091.jpg)\n\n照例是月度 pro 可以免积分用一个月的自动模式的 Image 2，也算是上新模型的老传统了。\nLovart 最近还更新了 Skill 工作流，我还可以把生图生视频穿在一起，Image 2 + Seedance 2，这下我图片生成 PPT 迎来一波史诗级加强了。\n\n@ 作者 / 卡尔 \u0026 阿汤\n\n最后，感谢你看到这里 👏 如果喜欢这篇文章，不妨顺手给我们点赞｜在看｜转发｜评论 📣\n如果想要第一时间收到推送，不妨给我个星标 🌟\n如果你有更有趣的玩法，欢迎在评论区聊聊 🤝\n更多的内容正在不断填坑中……\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1776940130890081753.jpg)","summary":"Image 2 全量上线后批量生图能力详解，涵盖图鉴生成、信息图、IP设计、海报设计、UI设计、游戏画面等 23 个真实场景，配合 Lovart 的 TouchEdit、Mockup、Agent 批量生成等功能，配合 Seedance 2.0 生成视频展示。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1776940020223157060.png","categoryId":1,"isDraft":0,"viewCount":38,"createdAt":"2026-04-23 10:34:21","updatedAt":"2026-05-04 15:32:47"},{"id":58,"title":"我把热门前端设计 Skill 跑了一遍：谁最惊艳，谁最\"AI 味\"","slug":"frontend-design-skill-comparison-review","content":"无论什么时候，颜值都是第一生产力。自从有了 AI Coding，大家伙儿纷纷都成为了\"全干工程师\"，那么对于前端界面效果这块就是一个绕不过去的问题。这篇文章对 7 个热门前端设计 Skill 做了一次横评，帮你省掉一轮踩坑。\n\n## 先说结论\n\n- **综合最稳**：Taste Skill\n- **第一屏最能打**：Frontend-Design\n- **最适合快速出一版能展示的稿子**：UI UX Pro Max\n- **最佳辅助**：Impeccable\n\n### 这次我是怎么测的\n\n为了尽量减少\"题目不同导致结果不同\"的干扰，这次所有方案都围绕同一个产品介绍页需求：「**写一个产品「爱情广场」App的介绍页，配色要亮眼能够吸引人，要有一点动画和光效，有立体感**」展开。均是一次性生成不做修改（交互类的除外）。给予 AI 评审的核心观察维度统一为 5 项：\n\n- 视觉呈现\n- 布局实现\n- 代码结构 + 质量\n- 响应式与兼容性\n- 可维护性\n\n提前说明几点：\n\n- **本文主要基于静态截图和实际页面预览做判断**，一些微交互、滚动动效、细节过渡，在展示图片里看不全。\n- **这不是学术 benchmark**，而是更偏真实工作流的横评：我更关心\"它像不像一版能拿给人看的页面\"，而不是只看某一项跑分。\n- **AI 评分不代表一切**，更重要的还是各位看官的观感体验。\n\n### 总分榜排名\n\n| 排名 | 方案 | 总分 | 一句话判断 |\n|------|------|------|-----------|\n| 1 | Frontend-Design + impeccable优化 | 86 | 强氛围路线里完成度最高 |\n| 2 | Taste Skill | 86 | 最均衡，柔和、完整、稳定 |\n| 3 | Frontend-Design | 84 | 第一屏最抓人，但偏展示型 |\n| 4 | UI UX Pro Max | 84 | 结构完整，适合快速出稿 |\n| 5 | 原生生成 + impeccable优化 | 84 | 稳、顺、耐看，但不够炸 |\n| 6 | UI Aesthetics | 82 | 首屏漂亮，后劲不足 |\n| 7 | 原生生成 | 81 | 能用，但明显还停在\"合格作业\"层面 |\n\n## 实测体验\n\n![横评展示项目](https://goframe-blog-upyun.mircool.cn/blog/1776830104752571075.jpg)\n\n人的体感是很玄学的，要说哪个好哪个不好，可能各有各的说法。我这里也只是单个方案生成，然后再创建了一个页面项目进行横评展示。最后再单独进行模型打分评价。\n\n这个展示项目和对应的7个静态方案我已经放置到后台了，可以公众号回复「**20260421**」进行下载。\n\n## 1）原生生成：能做，但天花板最明显\n\n![原生生成效果](https://goframe-blog-upyun.mircool.cn/blog/1776830107775825023.jpg)\n\n**AI 评分：81/100**\n\n说实话，如果不挂任何 Skill 直接让模型原生生成，其实好像也没那么差。当然，它的问题不在于\"能不能看\"，而是**有点像一个认真完成任务的默认答案**：结构完整、配色友好、基本动效也有，但整体记忆点不够，品牌气质也不够集中。\n\n这版最明显的优点，模型能力就让它已经具备一个基本介绍页该有的闭环，而不是一两年前的模型能力只能做出来的半成品。但缺点也很清楚：首屏冲击力一般，中后段讲述力度偏弱，CTA 也更像形式上的存在。\n\n**一句话评价**：能交差，但不像\"高水平前端设计稿\"。\n\n\u003e **我的评价**：不用 Skill 也能看，就是感觉没什么亮点但也没太大缺点，日常使用也是妥妥的。\n\n## 2）UI Aesthetics：第一眼很会打，后半程没跟上\n\n仓库地址：https://github.com/kasonye/ui-aesthetics-skill\n\nUI Aesthetics 的定位是一个多平台 AI Skill 包，用来提升 AI 在 Web UI 生成、评审和重构时的视觉判断力。它不是单纯要求模型\"做得更炫\"，而是强调更清晰的构图和层级、更紧的间距与排版、更精致的按钮/卡片/表单/表格/浮层，以及更克制的 hover、focus、loading、error 等状态。\n\n![UI Aesthetics效果](https://goframe-blog-upyun.mircool.cn/blog/1776830110759616286.jpg)\n\n**AI 评分：82/100**\n\n这类方案最容易讨人喜欢，因为它几乎把\"设计感\"三个字直接写在脸上了。深色背景、多色渐变、玻璃拟态、发光标签、舞台式首屏，第一眼确实很容易把氛围提起来。如果你的需求只是\"先出一版看起来高级一点的页面\"，它会比原生生成更有说服力。\n\n但问题是，这版的优势主要集中在前半段。越往后看，越会发现它更擅长做\"好看的开头\"，不那么擅长把整页的叙事节奏和转化动作收完整。所以它不是不强，而是**强在开场，弱在收尾**。\n\n**一句话评价**：适合用来拉高第一眼，不适合指望它单独撑起完整转化页。\n\n## 3）UI UX Pro Max：最像一版\"已经可以拿去展示\"的正式稿\n\n仓库地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill\n\nUI UX Pro Max 的仓库介绍更偏\"设计系统生成器\"。它不是只给模型一组审美偏好，而是试图根据产品类型和需求，生成一套完整的设计系统：页面结构、视觉风格、配色、字体、关键动效、反模式，以及交付前检查清单。\n\n![UI UX Pro Max效果](https://goframe-blog-upyun.mircool.cn/blog/1776830113940049701.jpg)\n\n**AI 评分：84/100**\n\n这版最大的特点就是**完成度极高**。不是那种\"某一个区块特别亮眼\"，而是从头到尾每个模块都有清晰的设计意图，排版规整，间距合理，动效不过度但都恰到好处。最关键的是，它不像某些方案那样\"好看但不知道在卖什么\"，这版的叙事线非常清晰，CTA 的位置和视觉层次都处理得比较成熟。\n\n**一句话评价**：不需要改就能发，适合追求速度和稳妥的团队。\n\n## 4）Frontend-Design：第一屏最抓人，但偏展示型\n\nFrontend-Design 是目前社区里使用度最高的前端设计 Skill 之一。它的核心理念是\"让 AI 生成的前端页面不再是模板味\"，通过预设的视觉规范和排版规则，引导模型输出更接近专业设计稿的效果。\n\n![Frontend-Design效果](https://goframe-blog-upyun.mircool.cn/blog/1776830117395780533.jpg)\n\n**AI 评分：84/100**\n\n这版的优势非常集中：**第一屏的视觉冲击力在所有方案里排第一**。背景光效、文字动效、色彩饱和度都拉得很到位，让人一打开就\"哇\"的感觉。但翻过首屏之后，中后段的节奏感和信息层次就开始回落，像一个开场炸裂但后半程收得有些匆忙的表演。\n\n**一句话评价**：如果只需要一个超强的首屏，选它没错；如果需要整页高质量，还得手动补后半段。\n\n## 5）Taste Skill：综合最均衡\n\nTaste Skill 的定位更偏\"审美调控\"而非\"视觉轰炸\"。它不追求某一块特别炸裂，而是强调整体的一致性、配色的高级感和排版的舒适度。\n\n![Taste Skill效果](https://goframe-blog-upyun.mircool.cn/blog/1776830119820726210.jpg)\n\n**AI 评分：86/100**\n\n这版最大的特点就是**没有明显短板**。每一屏都保持在一个比较高的水平，不会出现\"前面好看后面拉垮\"的情况。配色柔和但有质感，间距舒适，信息层次清晰，动画克制但有效。如果用一个词形容，就是\"耐看\"。\n\n**一句话评价**：不需要最炸的，但需要每一屏都不出错，选它。\n\n## 6）impeccable 二次优化：最佳辅助\n\nimpeccable 不是直接生成页面的 Skill，而是一个**二次优化器**。你在用任何 Skill 生成页面后，再加上 impeccable 做一轮\"打磨\"，效果会进一步提升。\n\n![impeccable优化效果](https://goframe-blog-upyun.mircool.cn/blog/1776830123428576532.jpg)\n\n**AI 评分：Frontend-Design+impeccable 86分，原生+impeccable 84分**\n\n不管是搭配 Frontend-Design 还是搭配原生生成，impeccable 都能带来肉眼可见的提升。最明显的变化是细节打磨：间距更均匀、字体层级更清晰、动效更流畅、整体质感更\"完成\"。\n\n**一句话评价**：不管你用什么方案生成，加一轮 impeccable 都不会亏。\n\n![最终效果对比](https://goframe-blog-upyun.mircool.cn/blog/1776830126820745917.jpg)\n\n## 总结\n\n| 需求场景 | 推荐 Skill |\n|---------|-----------|\n| 不想折腾，一次到位 | **Taste Skill** |\n| 追求首屏炸裂效果 | **Frontend-Design** |\n| 快速出一版能展示的正式稿 | **UI UX Pro Max** |\n| 给任意方案加buff | **+ impeccable** |\n| 不想用Skill | 原生生成也够用 |\n\n前端设计 Skill 的竞争才刚开始，目前没有一个方案能做到全面碾压。选 Skill 就像选工具，关键是看你的场景和需求。希望这篇横评能帮你少踩几个坑。\n\n\u003e Tags: #前端设计 #AI Coding #Skill评测 #UI设计","summary":"用同一个题目连续跑了7个前端设计Skill方案，包含原生生成、4个直接生成型Skill，以及2组加上impeccable后的二次优化版本，从视觉呈现、布局实现、代码质量、响应式与兼容性、可维护性5个维度进行横评。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1776830104752571075.jpg","categoryId":1,"isDraft":0,"viewCount":30,"createdAt":"2026-04-22 02:57:30","updatedAt":"2026-05-05 09:51:26"},{"id":57,"title":"Hue：一键提取网站风格，AI 设计系统新工具","slug":"hue-ai-design-system","content":"看到喜欢的网站风格，想用 AI 工具复刻却不知道怎么写 prompt？Hue 这个开源工具可以帮你一键提取任何网站的设计风格，生成完整的设计系统文件，直接用于 Claude Code 等 AI 编程工具。\n\n## 什么是 Hue\n\nHue 是一个完全免费的开源工具，访问 hueapp.io 即可使用。它的核心功能是从任何网站中提取设计风格，转换为可复用的设计系统和 Skill 文件。\n\n## 如何使用\n\n安装完成后，在任何 AI 对话中使用触发词即可：\n\n- \"仿照 stripe 创建设计系统\"\n- \"用 hue 从 notion 提取设计系统\"\n- \"generate a hue skill from this screenshot（附截图）\"\n\nHue 会自动执行完整的 16 步流程：分析网站 → 拆解组件 → 选择图标 Kit → Hero 区域 → 确认 → 生成完整的 Skill 文件夹（包含 SKILL.md + design-model.yaml + references + 4 个 HTML 预览）。\n\n## 版权保护机制\n\nLogo 和产品图片属于版权资产，Hue 不会将别人的 Logo 复制到你的 Skill 中。\n\n图标同样有保护机制——Hue 内置了 icon-kits.md 替代库：它会识别品牌图标的风格（线宽、圆角、humanist/geometric），然后从 6 个开源免费图标库（Lucide、Phosphor、Tabler、Iconoir、Material Symbols、Heroicons）中挑选最接近的替代方案。\n\n## 适用场景\n\n对于使用 Claude Code 等 AI 编程工具做 Vibe Coding 的开发者来说，Hue 是一个非常实用的辅助工具。它解决了\"看到好设计却不知道如何用 prompt 描述\"的痛点，让 AI 能更准确地理解和复刻设计风格。","summary":"遇到喜欢的网站想模仿风格却不会写 prompt？Hue 是一个完全免费的开源工具，能一键提取任何网站的设计风格，生成可复用的设计系统和 Skill 文件，让 AI 编程工具直接使用。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1776734002558439580.png","categoryId":1,"isDraft":0,"viewCount":30,"createdAt":"2026-04-21 09:13:00","updatedAt":"2026-05-04 15:32:48"},{"id":56,"title":"根据行业制定不同风格，图标、按钮、色彩搭配等细微调整…","slug":"industry-ui-design-style-guide","content":"这是一篇关于 UI 设计提示词的分享，通过根据不同行业制定差异化风格，对图标、按钮、色彩搭配等细节进行微调，生成适配各类移动端 App 的精美 UI 功能卡片。下面展示了一组农业类 App 的 UI 设计案例。\n\n## 提示词\n\n请生成一张移动端App的UI功能卡片，包含4个圆角渐变风格的卡片并排列成2x2布局，每个卡片均由标题、副标题、\"立即查看\"按钮和对应的图标构成；左边是提示词，右边是图标。\n\n这些立体图标设计微拟态风格，亚克力材质，柔和渐变，8k，要求大小协调、细节清晰且风格保持一致，图标需置于卡片右侧居中展示。\n\n具体内容为：\n\n- **第一个卡片（浅橙渐变）**：标题\"赣南脐橙\"，副标题\"维C小炸弹\"\n- **第二个卡片（浅红渐变）**：标题\"红颜草莓\"，副标题\"营养心头好\"\n- **第三个卡片（浅粉渐变）**：标题\"水蜜桃\"，副标题\"甜，熟出来的\"\n- **第四个卡片（浅蓝渐变）**：标题\"坠露蓝莓\"，副标题\"一抹蓝色音符\"\n\n整体风格简洁清新，背景为浅色。整体风格简洁专业，背景设为浅白色，适配农业类 APP界面。\n\n## 效果展示\n\n![UI功能卡片设计](https://goframe-blog-upyun.mircool.cn/blog/1776521203970586571.jpg)\n\n![风格细节展示](https://goframe-blog-upyun.mircool.cn/blog/1776521206263900173.jpg)\n\n![色彩搭配方案](https://goframe-blog-upyun.mircool.cn/blog/1776521208545417577.jpg)\n\n![图标设计细节](https://goframe-blog-upyun.mircool.cn/blog/1776521210810376216.jpg)\n\n![渐变风格展示](https://goframe-blog-upyun.mircool.cn/blog/1776521213329968254.jpg)\n\n![拟态风格效果](https://goframe-blog-upyun.mircool.cn/blog/1776521216169021554.jpg)\n\n![整体布局展示](https://goframe-blog-upyun.mircool.cn/blog/1776521217447131268.jpg)\n\n---\n\n\u003e Tags: #UI设计 #AIGC #提示词","summary":"根据行业制定不同风格，对图标、按钮、色彩搭配等进行细微调整，生成适配不同行业的移动端App UI功能卡片。涵盖农业类、科技类等多种风格提示词。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1776521202498826532.png","categoryId":1,"isDraft":0,"viewCount":47,"createdAt":"2026-04-18 14:08:50","updatedAt":"2026-05-04 15:32:47"},{"id":55,"title":"杀死UI！普通人也能做最酷炫的 5 种 AI 动态网页","slug":"5-ai-dynamic-webpage-styles","content":"最近探索到了一种酷炫的 AI 登陆页制作方式，不需要专业的 UI 能力，你也可以制作出非常精美的动态网页。本文将介绍 5 种不同风格的 AI 动态网页制作案例。\n\n![AI动态网页制作](https://goframe-blog-upyun.mircool.cn/blog/1776230700810692027.png)\n\n## 案例1：赛博飞驰\n\n第一个案例做的是大漠飞驰赛车主题官网。整个网页以动态赛车视频为背景，配合暗色玻璃拟态设计，极具视觉冲击力。\n\n![赛博飞驰效果](https://goframe-blog-upyun.mircool.cn/blog/1776230705047989985.png)\n\n### 1、制作封面图片\n\n制作首尾帧两张图片，确定主题风格。\n\n首帧提示词：\n\n```\n拉力赛车在戈壁沙漠赛道飞驰，黄沙漫天，强烈速度线，夕阳逆光，大气史诗构图，无雪山，无雪景，电影级光影，高饱和度，机械细节丰富，紧张刺激氛围，hyperrealistic，dynamic motion\n```\n\n![首帧](https://goframe-blog-upyun.mircool.cn/blog/1776230711950796309.png)\n\n尾帧提示词：\n\n```\n史诗结局镜头，一辆红色拉力赛车停在赛道上，尘埃缓缓落下，金色夕阳照亮车尾，剪影效果，宁静且胜利的氛围，电影级静帧，高细节，超写实，无动态模糊，干净背景，广阔荒漠景观，暖色调，杰作。\n```\n\n![尾帧](https://goframe-blog-upyun.mircool.cn/blog/1776230718230579490.png)\n\n### 2、图生视频\n\n有了首尾帧，以两张图作为参考图，再用提示词结合，就比较好控制视频生成的效果。\n\n视频提示词：\n\n```\n15-second cinematic video, 24fps, 8K, hyperrealistic, warm golden sunset lighting, consistent style throughout.\nA red rally car speeds through the Gobi desert:\nopening with a low-angle shot of the car roaring forward, kicking up massive sand clouds with dynamic motion blur (matches your first frame), then drifting sharply around a desert bend with tires scraping the ground and sand spraying in slow motion, followed by the car jumping high over a sand dune in mid-air with sunset rays piercing the body,\nthen gradually slowing down as dust settles, and finally ending with a rear-view shot of the car driving directly into the setting sun as a silhouette (matches your second frame), smooth transitions between all shots,\nepic atmosphere, intense speed in the first 8 seconds, gradual calm in the last 7 seconds, cinematic lighting, detailed mechanical textures, vast desert landscape, no snow, no mountains.\n```\n\n### 3、制作网页\n\n网页风格提示词：\n\n```\ndark futuristic website UI, fullscreen 15s racing car desert sunset video as background, glass morphism cards, semi-transparent blur overlay, glowing neon blue accents, sleek modern typography, hero section with large title, minimal clean layout, racing game style interface, high contrast, cinematic atmosphere, responsive web design, 8K, ultra detailed\n```\n\n### 4、合成动态网页\n\n给 Claude Code 的指令：\n\n```\n\"C:\\你的文件路径\\视频.mp4\"这里有是视频，我要做个以这个视频为背景的网页。\ndark futuristic website UI, fullscreen 15s racing car desert sunset video as background...\n网页作为游戏介绍页\n```\n\n## 案例2：流光动效网页\n\n这个案例更加酷炫，核心是制作多 HLS 视频背景页面。采用 React、TypeScript、Tailwind CSS 构建，每个 Section 都有独立的视频背景，配合滚动触发入场动画。\n\n总结难点：把视频变成半透明的、可定位的背景层，同时保证性能、文字可读性、视觉美感。\n\n## 案例3：星际探索\n\n陨石效果非常突出，适合太空展览官网。首帧是星系全景，尾帧是飞船驶向远方。\n\n首帧提示词：\n\n```\n史诗科幻宇宙场景，遥远璀璨星云，宏大螺旋星系，明亮蓝紫色宇宙射线，漂浮小行星碎片，电影级广角镜头，戏剧性光影，超精细细节，8K，暗黑未来美学\n```\n\n网页风格：\n\n```\ndark futuristic space exhibition website UI, fullscreen 15s cosmic galaxy video as background, minimalist tech design, thin glowing blue lines, glass morphism cards, subtle light particle effects...\n```\n\n## 案例4：敦煌古风\n\n这个 AI 套路非常适合做一些文化馆藏官网。视频利用豆包内置的 Seedance 2.0 Fast 全能视频模型生成。\n\n视频提示词：\n\n```\n生成一段敦煌壁画文化的视频，用于网页制作，要求如下：16:9宽屏，敦煌壁画文化宣传片，超精细唐代净土变壁画特写，一位面带微笑冥想的菩萨，细腻线条，飘动丝带，盛开莲花环绕...\n```\n\n网页风格：\n\n```\n黑暗神秘主义敦煌艺术展网站 UI，全屏莫高窟壁画动态视频背景，极简东方设计，细小的发光金箔线条，砂岩质感玻璃拟态卡片...\n```\n\n## 案例5：都市现代风\n\n这个风格非常适合一些城市展厅的官网。并不需要过多的内容展示，用户进入官网就能了解到整个展厅的内容。\n\n![都市现代风](https://goframe-blog-upyun.mircool.cn/blog/1776230721467955165.jpg)\n\n## 总结\n\n随着 AI 的进步，前端做 UI 越来越方便。核心流程总结：\n\n1. **制作首尾帧图片** — 确定主题和风格\n2. **图生视频** — 用 AI 视频工具生成动态背景\n3. **确定网页风格** — 写出详细的风格提示词\n4. **用 Claude Code 合成** — 把视频和网页提示词结合，生成动态网页\n\n这套方法让不懂 UI 的人也能做出酷炫的动态网页，大家可以用这套提示词和流程去修改，做出更多精美的作品。\n\n![往期推荐](https://goframe-blog-upyun.mircool.cn/blog/1776230722870783059.jpg)\n\n![往期推荐](https://goframe-blog-upyun.mircool.cn/blog/1776230723535841090.jpg)\n","summary":"本文介绍 5 种酷炫的 AI 动态网页制作方式，涵盖赛博飞驰、流光动效、星际探索、敦煌古风、都市现代等风格，不需要专业 UI 能力也能制作精美网页。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1776230700810692027.png","categoryId":1,"isDraft":0,"viewCount":42,"createdAt":"2026-04-15 13:30:00","updatedAt":"2026-05-04 15:32:32"},{"id":54,"title":"2万+ Star！让 Claude 像原始人说话，砍掉 75% Token 还不丢精度，这项目太狠了","slug":"caveman-claude-token-compression","content":"caveman 是一个 Claude Code / Cursor / Codex 的 Skill 插件，让 AI 像\"原始人\"一样说话，砍掉 65%-87% 的 Token，技术准确度完全不变。上线一周收获 2 万多 Star。\n\n![caveman 封面](https://goframe-blog-upyun.mircool.cn/blog/1776070872655982444.png)\n\n## 这东西到底在干嘛\n\ncaveman 本质上是 AI 编程助手的**一个 skill（技能插件）**。安装之后，AI 的输出风格会变成\"原始人说话\"：\n\n**Normal Claude（69 个 Token）：**\n\n\u003e The reason your React component is re-rendering is likely because you're creating a new object reference on each render cycle. When you pass an inline object as a prop, React's shallow comparison sees it as a different object every time, which triggers a re-render. I'd recommend using useMemo to memoize the object.\n\n**Caveman Claude（19 个 Token）：**\n\n\u003e New object ref each render. Inline object prop = new ref = re-render. Wrap in useMemo.\n\n同一个答案，**Token 少了 72%，信息量一模一样**。\n\n说白了，就是把 Claude 输出里的\"废话\"全部砍掉——冠词（the/a/an）、寒暄（Sure! I'd be happy to help）、铺垫（The reason is likely because）、废话转折词（just/really/basically），全部剔除，只留下技术骨架。\n\n![caveman benchmarks](https://goframe-blog-upyun.mircool.cn/blog/1776070935949018186.png)\n\n## 四个强度，还有文言文模式\n\n这项目给了四个挡位：\n\n| 等级 | 效果 |\n|------|------|\n| **Lite 🪶** | 去掉填充词，保留正常语法。像精简版的技术文档 |\n| **Full 🪨** | 默认档。砍冠词、用碎片句、原始人完全体 |\n| **Ultra 🔥** | 极限压缩。电报式，缩写一切 |\n| **文言文 📜** | 用古汉语回复，人类发明的最省 Token 的文字 |\n\n文言文模式这个点真的吹爆。文言文本来就是人类语言中信息密度最高的形式之一，用来压缩 LLM 输出简直是天才想法。\n\n## 实测效果\n\n以下是 SWE-bench 基准测试的部分结果：\n\n| 任务 | Normal Token | Caveman Token | 压缩率 |\n|------|-------------|---------------|--------|\n| 代码解释 | 2847 | 683 | **76%** |\n| Bug 修复 | 1523 | 412 | **73%** |\n| 重构建议 | 3105 | 746 | **76%** |\n| 代码审查 | 1956 | 547 | **72%** |\n| API 文档 | 2234 | 601 | **73%** |\n\n平均压缩率在 **65%-87%** 之间，而且技术准确度完全不受影响。\n\n## 安装方式\n\n### Claude Code\n\n```bash\n# 一键安装\nclaude install-skill caveman\n```\n\n或者手动添加到 `.claude/skills/` 目录。\n\n### Cursor\n\n在项目根目录创建 `.cursorrules` 文件，把 caveman 的规则粘贴进去即可。\n\n### Codex\n\n在 `codex.md` 中添加 caveman 的指令。\n\n## 为什么有效\n\n背后的原理其实很直觉：\n\n1. **LLM 的输出有大量冗余**：英文中 the/a/an/is/are 这些词占了大量 Token，但对技术理解毫无帮助\n2. **程序员本来就习惯简练表达**：代码注释、commit message、PR review 天然就是碎片化的\n3. **技术内容的信息密度本来就高**：变量名、函数名、错误信息这些才是核心信息\n\n所以砍掉\"废话\"不影响理解，但能省下一大笔钱。\n\n## 注意事项\n\n- 建议从 **Lite 模式** 开始，适应后再升级到 Full\n- 如果发现 AI 的回复理解起来有困难，可以随时切回正常模式\n- 文言文模式虽然省 Token，但阅读体验因人而异\n- **只影响输出，不影响 AI 的理解能力**\n\n## 总结\n\n如果你用 Claude Code 或类似工具，Token 账单越来越高，caveman 值得一试。让 AI 说\"人话\"不如说\"原始人话\"，省下的都是真金白银。\n\n\u003e 项目地址：https://github.com/juliusbrussee/caveman\n","summary":"caveman 是一个 Claude Code/Cursor/Codex 的 Skill 插件，让 AI 像\"原始人\"一样说话，砍掉 65%-87% 的 Token，技术准确度完全不变。上线一周收获 2 万多 Star。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1776070872655982444.png","categoryId":1,"isDraft":0,"viewCount":39,"createdAt":"2026-04-12 18:20:00","updatedAt":"2026-05-04 15:32:37"},{"id":53,"title":"10 种顶级 UI 设计风格 Skills，让你的 AI 生成界面从土味变惊艳！","slug":"top-10-ui-design-style-skills","content":"UI-SKILLS 是一套 UI 设计风格工具包，包含 10 种顶级设计语言，每一种都是经过验证的、经久不衰的设计系统。只需要告诉 AI \"用这个 SKILL\"，就能生成风格高度一致的 UI 界面。\n\n![10种UI设计风格](https://goframe-blog-upyun.mircool.cn/blog/1775971501121901378.png)\n\n## 🎨 10 种设计风格全景图\n\n每一种风格都代表了全球顶级科技公司的设计语言精华，可以直接用于 AI 生成。\n\n### 🌌 01 · Linear 式极简深色\n\n**调性：** 精准、专业、极客  \n**色彩：** 深黑背景 + 品牌靛蓝紫  \n**核心：** Inter 字体 + 负字间距 | 半透明边框系统 | 多层阴影 | 状态指示器  \n**场景：** AI 代码助手、SaaS 管理后台、开发者平台  \n**品牌：** Linear、Vercel、Raycast  \n\n### 📝 02 · Notion 式温暖极简\n\n**调性：** 亲和、创作、放松  \n**色彩：** 暖白背景 + Notion 蓝  \n**核心：** 近黑文字替代纯黑 | 超薄 1px 边框 | 超柔和阴影 | 8px 基础间距  \n**场景：** 笔记工具、文档协作、教育科技、创意写作  \n**品牌：** Notion、Obsidian、Craft  \n\n### 🎯 03 · Figma 式工具美学\n\n**调性：** 创意、专业、灵活  \n**色彩：** 纯黑 + 纯白  \n**核心：** 严格黑白界面 | 变量字体极端权重 | 胶囊按钮(50px) | 虚线焦点环  \n**场景：** 设计工具、无代码平台、开发者文档  \n**品牌：** Figma、Canva、Framer  \n\n### 💻 04 · Supabase 式终端美学\n\n**调性：** 技术、硬核、开发者  \n**色彩：** 近纯黑 + 翡翠绿  \n**核心：** HSL 透明层级 | Source Code Pro | Pill 按钮(9999px) | 终端原生感  \n**场景：** 数据库管理、API 平台、云基础设施  \n**品牌：** Supabase、GitHub Desktop  \n\n### 💳 05 · Stripe 式精致奢华\n\n**调性：** 信任、精致、专业  \n**色彩：** 纯净白底 + Signature 紫  \n**核心：** 300 字重超轻标题 | 蓝调多层阴影 | 保守圆角(4-8px) | 金融级信任  \n**场景：** 支付平台、SaaS 定价、发票工具  \n**品牌：** Stripe、Square、Plaid  \n\n### 🍎 06 · Apple 式戏剧极简\n\n**调性：** 高级、戏剧、尊贵  \n**色彩：** 纯黑 + 浅灰  \n**核心：** SF Pro Display | 极致留白(80-120px) | 动态岛设计 | 戏剧性光效  \n**场景：** 高端消费品牌、产品官网、品牌叙事  \n**品牌：** Apple、Nothing、Tesla  \n\n### 🚀 07 · Vercel 式暗黑未来\n\n**调性：** 前沿、极简、技术  \n**色彩：** 纯黑 + 纯白  \n**核心：** 纯黑白对比 | Geist Sans | 4px 微圆角 | 三角形 Logo 叙事  \n**场景：** 开发者工具、API 文档、技术官网  \n**品牌：** Vercel、Next.js、Turbo  \n\n### 🎮 08 · Nintendo 式童趣活力\n\n**调性：** 快乐、包容、游戏化  \n**色彩：** 纯白 + 任天堂红  \n**核心：** 超大圆角(16-24px) | 鲜艳色彩块 | 游戏化交互 | 趣味图标  \n**场景：** 儿童产品、游戏平台、教育娱乐  \n**品牌：** Nintendo、Duolingo、Roblox  \n\n### 🪐 09 · GitHub 式中性工程\n\n**调性：** 冷静、专业、可靠  \n**色彩：** 暗色背景 + 蓝调灰  \n**核心：** 系统字体栈 | 6px 圆角 | Octicon 图标 | 代码优先 UI  \n**场景：** 代码托管、开发者社区、技术文档  \n**品牌：** GitHub、GitLab、Bitbucket  \n\n### 🎨 10 · Nothing 式透明科技\n\n**调性：** 工业、创新、未来  \n**色彩：** 深灰 + 白色  \n**核心：** 点阵字体 | 透明玻璃效果 | 工业线条 | 机械纹理  \n**场景：** 硬件展示、科技品牌、创新产品  \n**品牌：** Nothing、Teenage Engineering  \n\n## 🛠 怎么用？\n\n1. 选择一种设计风格（比如 Linear 式极简深色）\n2. 把对应的 SKILL 文件喂给 AI（Claude Code / Cursor / Windsurf 等）\n3. 告诉 AI：\"用这个 SKILL 的风格来设计界面\"\n4. AI 会按照该风格的设计语言生成高度一致的 UI\n\n## 💡 适用场景\n\n- 用 Claude Code 快速生成特定风格的 UI 组件\n- Cursor 中保持项目整体设计一致性\n- 快速原型设计，直接产出生产级界面\n- 设计团队与 AI 协作时统一设计语言\n\n## 总结\n\nUI-SKILLS 的核心价值在于：**把隐性的设计知识变成显性的 AI 指令** 。不需要你精通每种设计风格的细节，只需要一个 SKILL 文件，AI 就能输出专业级的 UI 设计。\n\n\u003e 项目地址：https://github.com/uxiuwu/ui-skills\n","summary":"UI-SKILLS 是一套 UI 设计风格工具包，包含 Linear、Notion、Figma、Stripe、Apple 等 10 种顶级设计语言，让 AI 生成风格高度一致的 UI 界面。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1775971501121901378.png","categoryId":1,"isDraft":0,"viewCount":49,"createdAt":"2026-04-12 13:25:00","updatedAt":"2026-05-04 15:32:44"},{"id":52,"title":"近 2.5 万 Star！Claude Code 每月省下 80% Token，这个 Rust 工具太狠了","slug":"rtk-claude-code-token-saver","content":"RTK（Run Tool Kit）是一个用 Rust 编写的 CLI 代理工具，GitHub 上已收获 23.4k Star，专门解决 AI 编程工具中 Token 浪费的问题。\n\n## 你的 Claude Code 账单，可能有一半在烧冤枉钱\n\n用 Claude Code 写了一天代码，回头一看 Token 消耗——11.8 万。其中 8 万多是 `git status`、`cat`、`cargo test` 这些基础命令的原始输出喂进去的。\n\n说白了，AI 编程工具的 Token 开销大头，根本不在代码生成本身，而在那些反反复复执行的终端命令。每次 `git diff`、`ls`、`grep` 输出的完整内容，全都原封不动塞进上下文窗口，占着 Token 位。\n\n最近 GitHub 上冒出来一个叫 **RTK** 的项目，23.4k Star，专门解决这个痛点——在命令输出到达 LLM 之前，先帮你「减肥」。\n\n![RTK 对比](https://goframe-blog-upyun.mircool.cn/blog/1775952439523237130.png)\n\n## 一个 Rust 二进制，干了什么脏活\n\nRTK 的全称没什么花哨的，就是一个 CLI 代理工具。用 Rust 写的，编译出来就一个二进制文件，零外部依赖。\n\n它的思路非常简单粗暴：**拦截命令输出 → 智能压缩 → 再喂给 LLM**。\n\n![RTK 工作原理](https://goframe-blog-upyun.mircool.cn/blog/1775952440318162260.png)\n\n具体来说，RTK 对每条命令的输出做四件事：\n\n- **智能过滤**：把注释、空行、样板代码这些对 AI 理解毫无帮助的噪音全删掉\n- **分组聚合**：把类似的东西归类到一起，比如按目录结构折叠文件列表\n- **智能截断**：保留核心上下文，砍掉冗余部分\n- **去重折叠**：重复的日志行合并成一行，后面标个出现次数\n\n说白了就是，以前 `git status` 输出 2000 个 Token，RTK 压缩后只剩 400 个，AI 照样能理解当前项目状态，但成本降了 80%。\n\n最狠的是 `git add/commit/push` 这类操作——执行完了输出「ok main」就够了，RTK 直接砍掉 92% 的 Token。\n\n## 上手体验：三分钟搞定\n\n安装就一行命令的事：\n\n```bash\nbrew install rtk\n```\n\n没有 Homebrew 的话，curl 一行搞定：\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/rtk-ai/rtk/refs/heads/master/install.sh | sh\n```\n\n装完之后，运行初始化：\n\n```bash\nrtk init -g\n```\n\n这条命令会自动安装一个 Bash Hook——之后你在 Claude Code 里输入的命令，RTK 会在执行前透明地改写。比如你敲 `git status`，Claude Code 发出去的时候自动变成 `rtk git status`，输出被压缩后再返回给 Claude。\n\n**Claude 那边完全无感知**——它看到的只是精简后的输出，理解力和之前一样，但上下文窗口被省下了一大截。\n\n## 实测效果\n\n以下是一些典型场景的压缩效果：\n\n| 命令 | 原始 Token | 压缩后 Token | 压缩率 |\n|------|-----------|-------------|--------|\n| `git status` | 2000 | 400 | 80% |\n| `git diff` | 5000 | 1500 | 70% |\n| `cargo test` | 8000 | 2000 | 75% |\n| `git log` | 3000 | 600 | 80% |\n| `git add/commit` | 1500 | 120 | 92% |\n\n实际使用下来，一天的 Token 消耗从 11.8 万降到了 2.4 万，省了将近 **80%**。\n\n## 支持 Claude Code 之外的 AI 编程工具\n\nRTK 的设计并不绑定 Claude Code。理论上任何通过 Shell 执行命令的 AI 编程工具都能用：\n\n- **Claude Code**：完美支持\n- **Cursor**：通过 Shell 集成可用\n- **Aider**：兼容\n- **Windsurf**：兼容\n- **Continue**：兼容\n\n只要你用的是 Bash/Zsh 环境，RTK 就能在后台默默帮你压缩 Token。\n\n## 为什么选 Rust\n\n作者选择 Rust 而不是 Python 或 Node.js 来写这个工具，原因很明确：\n\n- **零依赖**：编译出来就一个二进制，不需要运行时环境\n- **极致性能**：命令输出的压缩是实时进行的，Rust 确保零延迟\n- **可靠性**：作为 Shell Hook，崩溃是不可接受的，Rust 的内存安全保证了这一点\n\n安装包只有几 MB，启动时间几乎为零，完全不会拖慢你的开发流程。\n\n## 注意事项\n\n- RTK 目前主要针对 `git`、`cargo`、`npm`、`go test` 等常见命令做了优化\n- 自定义命令的输出可能不会被完美压缩（但也不会出错）\n- 如果发现压缩后 AI 理解力下降，可以用 `rtk off` 临时关闭\n\n## 总结\n\n如果你在用 Claude Code 或类似的 AI 编程工具，Token 账单越来越高，RTK 值得一试。一个二进制文件，三分钟安装，立刻省下 80% 的 Token 开销。\n\n\u003e 项目地址：https://github.com/rtk-ai/rtk\n","summary":"RTK 是一个用 Rust 编写的 CLI 代理工具，23.4k Star，通过拦截命令输出并智能压缩，帮 Claude Code 等AI编程工具节省80%的Token消耗。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1775952439523237130.png","categoryId":1,"isDraft":0,"viewCount":48,"createdAt":"2026-04-12 08:10:00","updatedAt":"2026-05-01 14:20:03"},{"id":51,"title":"Claude Code 必装的 9 个 Skill！解放双手","slug":"claude-code-9-must-have-skills","content":"Claude Code 的 Skill 生态越来越丰富，以下 9 个 Skill 覆盖了工作流、UI 设计、记忆管理、项目管理、知识库集成等场景，值得每个 Claude Code 用户了解。\r\n\r\n## 1. Superpowers\r\n\r\nGitHub：https://github.com/obra/superpowers\r\n\r\nClaude Code 结构化开发工作流框架，提供头脑风暴、计划编写、执行计划等命令，规范 AI 开发流程。\r\n\r\n![Superpowers](https://goframe-blog-upyun.mircool.cn/blog/1775868779571050575.png)\r\n\r\n## 2. Everything Claude Code\r\n\r\nGitHub：https://github.com/affaan-m/everything-claude-code\r\n\r\nAnthropic 黑客松冠军项目，集成 16+ 代理、65+ 技能、40+ 命令，一站式增强 Claude Code 能力。\r\n\r\n![Everything Claude Code](https://goframe-blog-upyun.mircool.cn/blog/1775868780882338256.png)\r\n\r\n## 3. UI UX Pro Max\r\n\r\nGitHub：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill\r\n\r\nAI 设计智能工具包，内置 UI 风格、配色、字体、UX 规范库，让 Claude 生成专业级 UI/UX。\r\n\r\n![UI UX Pro Max](https://goframe-blog-upyun.mircool.cn/blog/1775868782018711627.png)\r\n\r\n## 4. Claude Mem\r\n\r\nGitHub：https://github.com/thedotmack/claude-mem\r\n\r\nClaude Code 持久记忆插件，自动捕获会话内容、AI 压缩、注入相关上下文，解决上下文遗忘问题。\r\n\r\n![Claude Mem](https://goframe-blog-upyun.mircool.cn/blog/1775868783430514882.png)\r\n\r\n## 5. GSD (Get Shit Done)\r\n\r\nGitHub：https://github.com/glittercowboy/get-shit-done\r\n\r\n轻量级元提示与规范驱动开发系统，解决长对话上下文腐烂问题，提供 24+ 项目管理命令。\r\n\r\n![GSD](https://goframe-blog-upyun.mircool.cn/blog/1775869722194875527.png)\r\n\r\n## 6. Awesome Claude Code\r\n\r\nGitHub：https://github.com/langgpt/awesome-claude-code\r\n\r\n精选 Claude Code 相关仓库、工具、资源集合，含官方仓库、核心扩展、GUI 集成等分类。\r\n\r\n![Awesome Claude Code](https://goframe-blog-upyun.mircool.cn/blog/1775868786115734050.png)\r\n\r\n## 7. LightRAG — EMNLP\r\n\r\nGitHub：https://github.com/HKUDS/LightRAG\r\n\r\nEMNLP 2025 论文开源项目，轻量级检索增强生成框架，结合图结构实现高效知识检索。\r\n\r\n![LightRAG](https://goframe-blog-upyun.mircool.cn/blog/1775868787296719223.png)\r\n\r\n## 8. Obsidian Skills\r\n\r\nGitHub：https://github.com/kepano/obsidian-skills\r\n\r\nObsidian 创始人打造，让 Claude 直接操作 Obsidian 知识库，自动生成笔记、画布、数据库。\r\n\r\n![Obsidian Skills](https://goframe-blog-upyun.mircool.cn/blog/1775868788510906239.png)\r\n\r\n## 9. n8n-MCP\r\n\r\nGitHub：https://github.com/czlonkowski/n8n-mcp\r\n\r\nn8n 工作流自动化 MCP 服务器，让 Claude 可创建、管理、监控 n8n 工作流，打通 AI 与自动化。\r\n\r\n![n8n-MCP](https://goframe-blog-upyun.mircool.cn/blog/1775868789941241938.png)\r\n\r\n","summary":"9 个值得安装的 Claude Code Skill，涵盖结构化开发工作流、一站式增强、UI/UX 设计、持久记忆、项目管理、资源合集、RAG 检索、Obsidian 集成、n8n 自动化等场景。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1775868779571050575.png","categoryId":1,"isDraft":0,"viewCount":45,"createdAt":"2026-04-11 08:00:00","updatedAt":"2026-05-01 18:39:12"},{"id":50,"title":"Impeccable 入门教程","slug":"impeccable-tutorial","content":"Impeccable 入门教程`Impeccable` 是一套给 AI 编程工具补充设计能力的技能包. 截至 2026 年 3 月 23 日, 官网展示版本为 `v1.5.1`. 它的核心目标不是替代你写页面, 而是让 `Codex`、`Claude Code`、`Cursor`、`Gemini CLI` 这类工具在做前端时, 更稳定地产出有设计感的结果.\n\n如果你只想先记住一句话, 可以这样理解:\n\n- **先用 `Impeccable` 建立设计上下文**\n- **再用不同命令让 AI 做审计, 统一风格, 补细节, 加亮点**\n\n## 它提供了哪些能力\n\n官网和 GitHub README 里, `Impeccable` 主要提供这几类能力:\n\n| 能力 | 说明 |\n| --- | --- |\n| 增强前端设计能力 | 提供一个强化版 `frontend-design` skill, 让 AI 更偏向可落地, 有风格, 避免模板味的前端产出. |\n| 20 个可直接调用的设计命令 | 你可以按目标调用命令, 例如做审计, 统一视觉, 优化排版, 增强动画, 提升响应式等. |\n| 项目级设计上下文 | 通过 `teach-impeccable` 生成 `.impeccable.md`, 让后续命令读取你的品牌, 风格, 受众和约束. |\n| 设计反模式约束 | 它会主动规避一些常见的 AI 设计坏味道, 例如系统默认字体, 过度依赖灰色, 卡片套卡片, 乱用弹性动效等. |\n| 多工具支持 | 官网列出了 `Codex CLI`、`Claude Code`、`Cursor`、`Gemini CLI`、`VS Code Copilot`、`OpenCode` 等多种 harness. |\n| 可持续更新 | 支持检查更新和升级, 不需要每次手动复制全部文件. |\n\n## 它有哪些命令\n\n`Impeccable` 当前提供的命令可以分成 5 组.\n\n### 1. 初始化与诊断\n\n| 命令 | 作用 | 什么时候用 |\n| --- | --- | --- |\n| `teach-impeccable` | 采集项目设计背景, 生成 `.impeccable.md`. | 第一次接入项目时先跑一遍. |\n| `audit` | 做综合 UI 审计, 覆盖可访问性, 性能, 主题, 响应式等. | 接手旧页面, 或改版前先摸清问题时. |\n| `critique` | 从 UX 和视觉层面做设计点评. | 你想先拿意见, 暂时不急着改代码时. |\n\n### 2. 统一与收敛\n\n| 命令 | 作用 | 什么时候用 |\n| --- | --- | --- |\n| `normalize` | 往设计系统和现有模式上收敛. | 页面风格散, 组件各写各的时. |\n| `distill` | 去掉冗余装饰和无效复杂度. | 页面显得乱, 重, 信息层级不清时. |\n| `clarify` | 优化文案, 标签, 提示语和交互说明. | 页面能用但不好懂时. |\n| `extract` | 抽取可复用组件, token 和模式. | 一个页面改好了, 想沉淀成设计资产时. |\n| `arrange` | 调整布局, 间距和视觉节奏. | 版面拥挤, 列表和卡片缺少秩序感时. |\n| `typeset` | 优化字体, 层级, 字重和可读性. | 文本很多, 但看起来像默认样式时. |\n\n### 3. 体验增强\n\n| 命令 | 作用 | 什么时候用 |\n| --- | --- | --- |\n| `polish` | 做上线前细节打磨. | 主要功能已完成, 准备收尾时. |\n| `animate` | 增加有目的的动画和微交互. | 页面缺少反馈, 但你不想做花哨动效时. |\n| `delight` | 增加一些记忆点和趣味性. | 产品太平, 想补一点个性时. |\n| `colorize` | 有策略地增加颜色表达. | 整体太灰, 缺少重点和情绪时. |\n| `bolder` | 把过于保守的设计做得更有冲击力. | 页面安全但无记忆点时. |\n| `quieter` | 给太躁的视觉降噪. | 颜色, 阴影, 对比度都偏重时. |\n| `overdrive` | 做更有技术亮点的高级效果. | 需要 hero section, 实验性展示, 品牌页面时. |\n\n### 4. 稳定性与适配\n\n| 命令 | 作用 | 什么时候用 |\n| --- | --- | --- |\n| `adapt` | 补齐不同屏幕和场景下的适配. | 页面桌面端能看, 但移动端不稳时. |\n| `harden` | 加强异常, i18n, 溢出, 边界条件处理. | 准备上线, 想减少真实数据下的问题时. |\n| `optimize` | 优化性能, 渲染和资源加载. | 页面视觉不错, 但加载和动画偏重时. |\n| `onboard` | 改善 onboarding, 空状态和首次使用体验. | 新用户不知道从哪开始时. |\n\n### 5. 命令之间怎么配合\n\n实战里通常不是只跑一个命令, 更常见的是这些组合:\n\n- 老页面接手: `audit` → `critique` → `normalize`\n- 新页面收尾: `polish` → `harden` → `optimize`\n- 品牌感增强: `typeset` → `colorize` → `animate`\n- 做首页亮点: `arrange` → `bolder` → `overdrive`\n- 首次接入: `teach-impeccable` → `audit` → `polish`\n\n## 支持哪些工具\n\n官网当前列出的支持对象包括:\n\n- `Claude Code`\n- `Cursor`\n- `Gemini CLI`\n- `VS Code Copilot`\n- `Codex CLI`\n- `Antigravity`\n- `Kiro`\n- `OpenCode`\n- `Pi`\n不同工具的命令写法会有一点差异, 但命令名本身基本一致.\n\n## 怎么安装\n\n### 推荐方式\n\n大多数场景优先用官方推荐的安装命令:\n\n```bash\nnpx skills add pbakaus/impeccable\n```\n\n这条命令会根据你当前使用的 AI harness, 安装对应的配置和命令文件.\n\n### 更新方式\n\n```bash\nnpx skills check\nnpx skills update\n```\n\n如果你已经装过一次, 后续通常只需要检查更新并升级.\n\n### Claude Code 的插件方式\n\n官网还给出了 `Claude Code` 的插件安装方式:\n\n```text\n/plugin marketplace add pbakaus/impeccable\n```\n\n### 手动安装\n\n如果你不想走命令行安装, 官网也提供了 `Universal ZIP` 手动安装包. 解压到项目根目录后, 会生成对应工具需要的隐藏目录和命令文件.\n\n## 第一次怎么用\n\n下面是一套最适合第一次上手的流程.\n\n### 第 1 步: 先建立设计上下文\n\n先运行 `teach-impeccable`, 让它为当前项目生成 `.impeccable.md`.\n\n通用写法通常是:\n\n```text\n/teach-impeccable\n```\n\n按 README 中 `Codex CLI` 的示例, 它通常使用 `/prompts:\u003c命令名\u003e` 语法, 例如:\n\n```text\n/prompts:teach-impeccable\n```\n\n这个步骤很重要, 因为后面的命令会读取这里面的设计约束. 没有它, AI 仍然能改页面, 但风格通常不够稳定.\n\n### 第 2 步: 先做一次体检\n\n挑一个正在维护的页面, 先跑审计:\n\n```text\n/audit checkout page\n```\n\n或在 `Codex CLI` 中:\n\n```text\n/prompts:audit checkout page\n```\n\n你会先得到一份问题清单, 适合作为后续改造的起点.\n\n### 第 3 步: 按目标下命令, 不要一口气全改\n\n最稳的方式不是一句\"把页面改好看\", 而是拆成几个明确动作:\n\n```text\n/normalize pricing page\n/typeset pricing page\n/polish pricing page\n```\n\n这样做的好处是:\n\n- 每一步目标更明确\n- 你更容易看出每个命令的差异\n- 回滚和对比也更容易\n\n### 第 4 步: 最后再补亮点\n\n如果基本结构已经稳定, 再考虑加动画或更强的视觉表达:\n\n```text\n/colorize landing hero\n/animate landing hero\n/overdrive landing hero\n```\n\n不要一开始就直接上 `overdrive`, 否则很容易在结构没稳的时候放大问题.\n\n## 一个够用的入门工作流\n\n如果你今天就想在真实项目里试一次, 可以直接照这个顺序走:\n\n- 安装 `Impeccable`.\n- 运行 `teach-impeccable`, 生成项目设计上下文.\n- 选一个页面执行 `audit`.\n- 根据问题先跑 `normalize` 和 `typeset`.\n- 页面基本稳定后执行 `polish`.\n- 准备上线前补 `adapt`、`harden`、`optimize`.\n- 如果是营销页或首页, 最后再考虑 `colorize`、`animate` 或 `overdrive`.\n\n## 它特别适合什么场景\n\n`Impeccable` 最适合下面几类需求:\n\n- 你已经能用 AI 生成前端, 但结果总像模板.\n- 你想让 AI 改页面时更贴近现有设计系统.\n- 你不缺代码能力, 缺的是稳定的视觉判断和收尾能力.\n- 你想把\"先审计, 再统一, 再打磨\"这套流程固定下来.\n如果你当前最关心的是业务逻辑, 接口联调或后端实现, `Impeccable` 不是主工具. 它更像前端设计质量的放大器.\n\n## 常见误区\n\n- 不要跳过 `teach-impeccable`. 少了项目上下文, 后续效果通常会漂.\n- 不要一开始就直接用 `overdrive`. 它更适合结构稳定后的增强.\n- 不要一次混用太多命令. 先确定目标, 一次只推一类改动.\n- 不要把它当成纯视觉滤镜. 它同样覆盖可访问性, 响应式, 性能和边界处理.\n\n## 参考链接\n\n- 官网: [https://impeccable.style/](https://impeccable.style/)\n- 命令速查: [https://impeccable.style/cheatsheet](https://impeccable.style/cheatsheet)\n- GitHub 仓库: [https://github.com/pbakaus/impeccable](https://github.com/pbakaus/impeccable)\n- 设计反模式: [https://impeccable.style/anti-patterns](https://impeccable.style/anti-patterns)","summary":"Impeccable 是一套给 AI 编程工具补充设计能力的技能包，让 Codex、Claude Code、Cursor 等工具在做前端时更稳定地产出有设计感的结果。","coverUrl":"","categoryId":1,"isDraft":0,"viewCount":67,"createdAt":"2026-04-10 21:30:00","updatedAt":"2026-05-05 09:52:28"},{"id":44,"title":"Windows 11 快速切换虚拟桌面的小技巧","slug":"windows11-virtual-desktop-shortcuts","content":"## 为什么要用虚拟桌面\n\n如果你经常同时处理多件事——写代码、查文档、回消息、看数据——屏幕上窗口越堆越多，Alt+Tab 切到怀疑人生。虚拟桌面就是给这些窗口分\"房间\"，每个桌面一个主题，互不干扰。\n\nWindows 11 自带虚拟桌面功能，不需要装任何软件。\n\n## 最快方式：快捷键切换\n\n```\nWin + Ctrl + ←  切换到左边的桌面\nWin + Ctrl + →  切换到右边的桌面\n```\n\n这是最常用的操作。习惯了之后几乎是肌肉记忆，不到一秒就能在桌面之间跳转。比用鼠标点来点去快得多。\n\n## 管理桌面\n\n| 快捷键 | 功能 |\n|--------|------|\n| Win + Tab | 打开任务视图，看到所有桌面和窗口 |\n| Win + Ctrl + D | 新建一个桌面 |\n| Win + Ctrl + F4 | 关闭当前桌面（窗口会移到下一个桌面） |\n\n**Win + Tab** 是虚拟桌面的\"总控台\"。按下去之后，屏幕上方会显示所有桌面的缩略图，下方是当前桌面的所有窗口。可以用鼠标拖拽窗口到不同的桌面，也可以直接点击切换。\n\n## 触控板手势\n\n如果你用的是笔记本，还有更自然的操作方式：\n\n**四指左右滑动** — 在桌面之间切换\n\n跟快捷键效果一样，但手势更直观。触控板用户首选。\n\n## 实用技巧\n\n**按应用分桌面。** 比如桌面 1 放 IDE 和终端，桌面 2 放浏览器和文档，桌面 3 放聊天工具。这样切桌面就是切\"工作上下文\"，思路不会被打断。\n\n**右键窗口标题栏可以移动窗口到其他桌面。** 不用先切到目标桌面再拖过去，直接右键选择\"移动到 → 桌面 N\"就行。\n\n**新窗口默认在当前桌面打开。** 所以不用担心窗口跑到别的桌面去。\n\n## 写在最后\n\n虚拟桌面是个小功能，但用好了确实能提升效率。核心就记住一组快捷键：`Win + Ctrl + ←/→`，剩下的按需探索就行。\n","summary":"Win + Ctrl + ←/→ 秒切虚拟桌面，还有任务视图、触控板手势等实用操作。一篇文章掌握 Windows 11 虚拟桌面的全部快捷键。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1775628452487269346.png","categoryId":2,"isDraft":0,"viewCount":51,"createdAt":"2026-04-08 14:07:49","updatedAt":"2026-05-01 13:04:36"},{"id":43,"title":"Claude Code 里敲一行命令，52 个文件变知识图谱，Token 暴降 71 倍","slug":"graphify-knowledge-graph-skill","content":"## Karpathy 的 /raw 文件夹问题\n\nAndrej Karpathy 有个习惯——遇到有意思的论文、推文、截图、笔记，随手丢进一个叫 /raw 的文件夹。时间一长，文件堆积如山，想找某个概念和哪篇论文有关联？纯靠记忆，基本不现实。\n\n这个场景其实每个开发者都遇到过：电脑里收藏了几百篇技术文章、几十个代码仓库的笔记、一堆随手保存的截图。要用的时候，翻都翻不到。\n\n最近 GitHub 上有个叫 **graphify** 的项目试图解决这个问题。它是一个 Claude Code 的 Skill 插件，输入一行 `/graphify`，就能把任意文件夹——代码、文档、PDF、图片——全部转成一张可查询的知识图谱。\n\n最吸引人的数字：在 Karpathy 的仓库 + 5 篇论文 + 4 张图片（共 52 个文件）的测试中，查询时 Token 消耗降低了 **71.5 倍**。\n\n![graphify 项目封面](https://goframe-blog-upyun.mircool.cn/blog/1775553647969769820.png)\n\n项目地址：https://github.com/safishamsi/graphify\n\n## graphify 到底做了什么\n\n简单说，它干了一件事：把非结构化的文件堆，变成结构化的知识图谱，然后让你可以像查数据库一样去查它。\n\n具体来看，扔进去一个文件夹，它会输出这些东西：\n\n```\ngraphify-out/\n├── graph.html       # 交互式图谱，可点击节点、搜索、按社区筛选\n├── obsidian/        # 可直接用 Obsidian 打开的笔记库\n├── wiki/            # 类 Wikipedia 风格的文章（--wiki 模式）\n├── GRAPH_REPORT.md  # 核心报告：关键节点、意外关联、推荐问题\n├── graph.json       # 持久化图谱，几周后再查不用重新跑\n└── cache/           # SHA256 缓存，只处理变更过的文件\n```\n\n这里最实用的是 `GRAPH_REPORT.md`。它不是简单罗列文件内容，而是告诉你：\n\n- **God Nodes（核心节点）**：哪些概念是连接数最高的？所有东西都通过它串联\n- **Surprising Connections（意外关联）**：跨文件发现的关系，你大概率没想到\n- **Suggested Questions（推荐问题）**：这个图谱能回答哪些你没想到该问的问题\n\n比如在 Karpathy 的仓库测试中，它发现 `from_pretrained()` 在 nanoGPT 和 minGPT 之间居然有调用关系——一个 INFERRED（推理）出来的关联，代码里并没有直接写出来。\n\n## 核心原理：不是简单索引，是真的\"理解\"\n\n![graphify 处理流水线](https://goframe-blog-upyun.mircool.cn/blog/1775553648981527049.png)\n\ngraphify 的处理流水线分五个阶段：\n\n**第一阶段：检测。** 扫描目录，按扩展名把文件分成代码、文档、PDF、图片四大类。\n\n**第二阶段：提取。** 这一步是整个项目最关键的地方。对不同类型文件用不同策略：\n\n- **代码文件**：用 tree-sitter 做 AST 解析，提取函数调用、import 关系、类继承等结构化信息，再做一次 call-graph 第二遍扫描得到 INFERRED（推理）关系\n- **文档/Markdown**：交给 Claude 提取概念和概念之间的关系\n- **PDF 论文**：先挖引用网络，再用 Claude 提取核心概念\n- **图片**：用 Claude Vision 去\"看\"——截图识别 UI 模式，图表提取趋势，手写白板识别想法和箭头，甚至其他语言的图片也能处理\n\n所以它是多模态的，不是只能处理文本。\n\n**第三阶段：建图 + 聚类。** 用 NetworkX 构建图结构，然后用 Leiden 算法做社区发现。社区发现就是把图谱中联系紧密的节点自动分成不同的\"圈子\"，每个圈子代表一个主题领域。\n\n**第四阶段：分析 + 报告。** 计算每个节点的度（连接数），找出核心节点；跨文件、跨社区寻找意外关联；生成推荐问题。\n\n**第五阶段：导出。** 输出交互式 HTML 图谱（用 vis.js 渲染）、Obsidian 笔记库、JSON 持久化文件等。\n\n## 每条边都带\"可信度标签\"\n\n这个设计挺值得说的。\n\ngraphify 给每条关系边都打了三种标签：\n\n| 标签 | 含义 |\n|------|------|\n| EXTRACTED | 源码中明确存在的（比如 import 语句、直接调用） |\n| INFERRED | 合理推理出来的（比如共享数据结构、隐含依赖） |\n| AMBIGUOUS | 不确定的，标记出来让人工复核 |\n\n很多知识图谱工具的问题是\"幻觉\"——它告诉你两个东西有关系，其实根本没有，只是 AI 编的。graphify 至少诚实，它会明确告诉你哪条关系是它\"猜\"的。Karpathy 那个测试中，81% 的关系是 EXTRACTED，19% 是 INFERRED，0% AMBIGUOUS。\n\n这种\"说实话\"的设计理念，在到处都是\"AI万能\"包装的当下，算是一股清流。\n\n## Token 暴降 71 倍是什么概念\n\n![Token 消耗对比](https://goframe-blog-upyun.mircool.cn/blog/1775553649496255104.png)\n\n用 graphify 作者的原话说：71.5x fewer tokens per query vs reading the raw files。\n\n翻译一下，就是每次查询时，你只需要读取图谱中相关的子图，而不是把 52 个文件全部重新喂给 LLM。**428K tokens 变成 6K tokens**。按 GPT-4 的价格算，每次查询从 $6.42 掉到 $0.09。\n\n而且这个压缩比和文件数量正相关：6 个文件只有约 1 倍提升（因为本来就不大，直接读也够），但 52 个文件就能到 71 倍。你收藏的东西越多，它越值。\n\n`graph.json` 做了持久化，图谱建好后存在本地。几周后你想再问\"Attention 机制和 Optimizer 有什么关系？\"，直接查图谱就行，不用把所有文件重新跑一遍。\n\n## 代码实战：从安装到出图\n\n前提条件：需要先装好 Claude Code 和 Python 3.10+。\n\n安装就一行：\n\n```\npip install graphifyy \u0026\u0026 graphify install\n```\n\nPyPI 上的包名暂时叫 `graphifyy`（多一个 y），但 CLI 命令和 Skill 触发命令都是 `graphify`。\n\n安装完后，在 Claude Code 里打开任意目录，输入：\n\n```\n/graphify .\n```\n\n就这一行，它会自动跑完整个流水线。\n\n常用的几个命令：\n\n```\n# 对指定文件夹生成图谱\n/graphify ./my-project\n\n# 更新模式：只重新处理变更过的文件，合并进现有图谱\n/graphify ./my-project --update\n\n# 深度模式：更激进地推理隐含关系\n/graphify ./my-project --mode deep\n\n# 把网页丢进去（论文、推文都行）\n/graphify add https://arxiv.org/abs/1706.03762\n\n# 查询：BFS广度遍历，适合获取广泛上下文\n/graphify query \"what connects attention to the optimizer?\"\n\n# 查路径：两个概念之间的最短路径\n/graphify path \"AuthModule\" \"Database\"\n\n# 解释某个节点\n/graphify explain \"SwinTransformer\"\n```\n\n还有几个高级功能值得一提：\n\n- **`--watch` 模式**：后台运行，文件变了自动更新图谱。代码文件用 AST 秒级重建，文档/图片变更会通知你手动跑 `--update`。适合多 Agent 并行写代码的场景。\n- **`graphify hook install`**：装一个 git post-commit hook，每次 commit 后自动重建图谱。不需要后台进程，任何编辑器都能用。\n- **`--wiki` 模式**：生成类 Wikipedia 风格的 Markdown 文章，每个社区一篇，带 `index.md` 入口。可以把任何 Agent 指向 `index.md`，它就能通过读文件来导航整个知识库，不用解析 JSON。\n- **`--mcp` 模式**：启动一个 MCP stdio server，让其他 Agent 通过标准协议查询图谱。\n- **`--svg` / `--graphml` / `--neo4j`**：导出为各种格式，可以接 Gephi、yEd、Neo4j 等专业图分析工具。\n\n## 技术栈和架构\n\ngraphify 的技术栈很\"实在\"：\n\n- **NetworkX**：Python 图处理库\n- **Leiden (graspologic)**：社区发现算法\n- **tree-sitter**：多语言 AST 解析\n- **Claude**：语义提取和 Vision 分析\n- **vis.js**：交互式图谱可视化\n\n没有 Neo4j，不需要服务器，全部本地运行。\n\n架构设计也比较干净——每个阶段是单独的模块，模块之间通过纯 Python dict 和 NetworkX Graph 通信，没有共享状态，副作用只出在 `graphify-out/` 目录里。想扩展新语言，加个 tree-sitter 解析器就行。\n\n## 谁适合用 graphify\n\n几个典型场景：\n\n- **接手新代码库**——先跑一下 `/graphify`，看 `GRAPH_REPORT.md`，比翻文档快 10 倍。你不用一行行读代码，先看核心节点是谁、哪些模块之间有意外关联。\n- **收藏了一堆论文和笔记**——全丢进一个文件夹，跑一次 `/graphify --wiki`，生成可导航的知识库。以后想查\"这篇论文和那个概念什么关系\"，直接问图谱。\n- **多 Agent 协作开发**——`--watch` 模式保持图谱实时更新，多个 Agent 写完代码，图谱自动反映最新结构。\n- **个人的 /raw 文件夹**——随手收藏的东西丢进去，让它慢慢长成一张知识网，想查什么随时查。\n\n## 一些真实的问题\n\n它也不是万能的。\n\n6 个文件的小项目，压缩比只有约 1 倍——这时候 graphify 的价值不在省 Token，而在结构清晰度。你能看清模块之间的实际关系，这个比压缩数字更重要。\n\n在 Karpathy 仓库的测试中，它识别出了 65 个孤立节点——只有 0-1 条连接的概念，可能是真的孤立的，也可能是漏了边。还有不少\"薄社区\"（只有 2 个节点），效果存疑。\n\nINFERRED 的关系也不是 100% 对的。虽然它区分了\"确定的\"和\"猜的\"，但 19% 的推理关系里，有多少是真的有价值、有多少是噪音，还得人自己判断。\n\n另外它目前强绑定 Claude Code，如果你的主力 AI 编程工具不是 Claude Code，用起来会有门槛。\n\n## 写在最后\n\ngraphify 解决的不是\"AI 能不能读文件\"的问题——任何 LLM 都能读。它解决的是**大规模非结构化信息的结构化管理**问题。\n\n收藏夹里那 200 篇论文、3 个代码仓库的笔记、一堆随手存的截图，它们之间的关联是什么？哪些概念是反复出现的核心节点？有没有跨领域的意外联系？这些问题，光靠人脑记不住，光靠 LLM 每次从头读成本太高。\n\ngraphify 走了第三条路：建一次图谱，持久化，反复查。\n\n项目还在早期阶段（v0.3.1），但它解决的问题很真实，设计理念也够诚实。如果你是 Claude Code 用户，收藏夹里又堆了不少东西，值得试一试。\n","summary":"graphify 是一个 Claude Code Skill 插件，能把任意文件夹转成可查询的知识图谱。支持代码、文档、PDF、图片多模态处理，Token 消耗降低 71.5 倍。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1775553647969769820.png","categoryId":1,"isDraft":0,"viewCount":58,"createdAt":"2026-04-07 16:50:00","updatedAt":"2026-05-05 09:48:55"}],"title":"凌风 Blog","version":"https://jsonfeed.org/version/1"}