@Morry4AIi
iAccount based inHong Kong
About this account
- Account based in
- Hong Kong
- Connected via
- United States App Store
Account-level information from X, not a live location or the device used for a specific post.
🤖 一个正在被 AI 改造的普通人 分享 AI 教程 / Skills / 工具 / AI 视觉 / 有趣玩法
Joined December 2021
- Tweets303
- Following541
- Followers1.6K
- Likes237
最近这个叫 show-me 的Skill 火了起来,很多大佬在推荐。
实测了 5 天,它的核心作用很简单:
把当前讨论的话题,压缩成最小、最清晰的视觉结构,让你一眼看懂复杂关系。
对我这个内容创作者来说,show-me 主要被我用在 4 个地方:
01|找选题
把一条新闻、产品更新或行业事件丢给它,让它画出事件背景、关键角色和影响路径。
关系理顺以后,值得写的角度通常也就冒出来了。
——
02|生成适合截图传播的视觉素材
当普通文本图不够时,它可以制作一个聚焦单一主题的 HTML 信息图或迷你幻灯片。
用于文章配图、社交媒体截图、课程讲解和内部分享。
——
03|理解复杂的 AI 概念
碰到 Agent、RAG、MCP 这类满篇术语的话题,我会让它直接展示运行流程和数据流。
先看懂过程,再去啃技术解释,会轻松很多。
——
04|学习复杂的 AI 工具
现在不少 AI 工具功能很多、操作路径又深。我会让 show-me 把完整工作流画出来:第一步做什么、在哪里配置、结果如何进入下一步。
——
另外,个人觉得它还特别适合这些场景:
-解释一个复杂机制
-梳理系统或项目结构
-看懂流程和变化
-整理内容和知识
——
show-me skill 开源库:github.com/humanlayer/skills…
希望可以帮到你~
参考上传图片,自动识别其中的核心主体,并将主体转换成真实手工 Fuse Bead / Perler Bead 拼豆作品。
【主体还原】
严格保留参考图中主体的轮廓、比例、姿态、视角、标志性结构和主要配色,只对过于细碎的结构进行像素化简化,确保转换后仍能一眼识别原主体。
不要简单添加像素滤镜,而是将主体完全重新构建为真实拼豆作品。
【拼豆材质】
主体由数百颗大小一致、规则排列的圆柱形塑料拼豆逐颗组成。
每颗拼豆必须清晰可见:
中央圆孔、圆柱结构、规则网格、颗粒间的细微间隙。
采用有限配色,通过不同颜色拼豆表现主体的结构、阴影和高光;主体外围使用一圈米白色或白色拼豆形成完整描边。
【背景与摄影】
背景替换为干净、温暖的奶油白哑光表面,整体色调柔和、低饱和,不带明显纸张纤维、木纹或粗糙颗粒,只有极其细腻、均匀的哑光质感。
采用真实静物摄影质感。
柔和自然光从左上方照射,拼豆呈细腻的哑光塑料材质,并在奶油白背景表面形成轻微、柔软的悬浮投影。
【色彩展示】
分析参考图片以及转换后的拼豆主体,从主体中提取最具代表性的 3–5 个重点颜色,形成一组极简色卡。
色卡位于拼豆主体与文字标题之间,水平居中排列。
每个色块尺寸小巧、比例统一、间距均匀,使用纯色色块,不添加渐变、立体效果或复杂边框。
色卡颜色必须真实来源于主体,包括:
主色、辅助色、深色、浅色或具有识别度的强调色。
根据主体实际配色自动决定使用 3、4 或 5 个色块,不为了凑数量加入无意义颜色。
色卡只是辅助视觉元素,整体宽度明显小于主体,不抢夺主体视觉焦点。
【文字排版】
色卡下方根据图片内容生成简洁的中文主标题和一句极短中文副标题。
中文主标题采用现代高对比宋体 / 明朝体:
细字重、纤细锐利衬线、字形舒展、适当增加字距、居中排列。
副标题字号明显更小、更细,字距更宽。
整体具有高级中文杂志、艺术出版物和精品品牌广告的编辑感。
【构图】
画面采用 4:5 竖版极简编辑海报布局,无论参考图片原始比例如何,最终画面始终重新适配为 4:5 竖版,不跟随原图比例。
【版式结构】
上方大面积留白
↓
拼豆主体
↓
3–5 个主题色块
↓
中文主标题
↓
小号中文副标题
↓
底部大面积留白
拼豆主体位于画面中央偏上,占画面约 35%–50%。
根据主体本身的横向、纵向或不规则轮廓,自适应调整主体大小,在保持原始比例的前提下完整展示,不拉伸、不压缩、不裁切。
所有元素沿中央轴线排列,保持充足间距和大量负空间。
主体、色卡、标题、副标题全部位于安全区域内,不贴近画面边缘,不因参考图比例不同而破坏整体版式。
最终画幅固定为 4:5 竖版。
【整体风格】
Fuse Bead Craft × Pixel Art × Color Palette × Minimal Editorial Poster × Product Photography。
画面克制、安静、精致、高级,像独立设计杂志中的色彩研究页面或精品品牌视觉档案。
【避免】
普通像素画、马赛克、乐高、玻璃珠、十字绣、针织效果、复杂背景、巨大色块、彩虹配色、渐变色卡、粗黑体、卡通字体、书法字体、复杂文字特效和过度3D。
Skill 实操教程:一段提示词,让 show me 生成文章配图。
内容创作者真应该好好把这个 Skill 用起来。
show me 擅长的是把一段内容压缩成清晰的视觉结构,比如:流程图、信息图、概念解释和 UI 示意。
如果你有这种类似的内容,就可以用它试试。
——
我整理了 2 套调用 Skill 的提示词。
第一套直接用 show-me 出图;第二套适合已经有个人视觉体系的人。
——
01|直接用 show-me 出图
show-me 默认比较偏简约、现代的科技视觉。
如果你暂时没有固定的品牌风格,直接让它负责信息结构和视觉设计,效果通常已经够用。
提示词如下:
"
使用 show-me Skill,将下面的内容整理成一个聚焦单一主题的可视化 HTML。
画面比例: {{5:2 / 16:9 / 4:3 / 3:2 / 1:1 / 4:5 / 3:4 / 9:16}}
使用场景: {{文章封面 / 文章配图 / 解释复杂概念或流程 / 其他}}
要求:
1. 根据使用场景提炼核心信息,优先使用流程图、信息图、关系图或 UI 示意。
2. 建立固定尺寸的网页画布,保持清晰的信息层级和合理的文字密度。
3. 导出前检查文字、图标、连线和卡片是否存在遮挡、溢出或裁切,并完成修正。
4. 按画布原始尺寸截图,导出高清 PNG。
内容:
{{粘贴你的内容}}
"
——
02|搭配个人视觉体系出图
如果你已经有固定的字体、颜色、网格和卡片规范,就可以让 show-me 负责信息结构,再让个人视觉体系负责视觉效果。
这样生成的图片也更容易形成稳定的账号识别度。
提示词如下:
"
使用 show-me Skill,将下面的内容整理成一个聚焦单一主题的可视化 HTML。
画面比例: {{5:2 / 16:9 / 4:3 / 3:2 / 1:1 / 4:5 / 3:4 / 9:16}}
使用场景: {{文章封面 / 文章配图 / 解释复杂概念或流程 / 其他}}
要求:
1. 使用 show-me 提炼内容结构,并搭建固定尺寸、精准排版的网页画布。
2. 页面视觉严格遵循下方配图规范;如视觉效果与可读性冲突,优先保证信息清晰。
3. 控制文字密度,使用流程、卡片、图表或 UI 结构表达复杂关系。
4. 导出前检查文字、图标、连线和卡片是否存在遮挡、溢出或裁切,并完成修正。
5. 按画布原始尺寸截图,导出高清 PNG。
生成 HTML 后先检查是否有文字、图标等信息遮挡情况,并修正。
最后,按这个尺寸截图成高清 PNG导出。
内容:
{{粘贴你的内容}}
配图规范:
{{粘贴你的配图规范}}
"
——
这套方法最适合结构明确、需要解释关系和流程的内容。
它不一定能替代设计师,但可以先把最费时间的信息整理和版式搭建替你完成。
Skill 开源库地址在引用推文里
希望能帮到你,感谢互动和关注~
最近这个叫 show-me 的Skill 火了起来,很多大佬在推荐。
实测了 5 天,它的核心作用很简单:
把当前讨论的话题,压缩成最小、最清晰的视觉结构,让你一眼看懂复杂关系。
对我这个内容创作者来说,show-me 主要被我用在 4 个地方:
01|找选题
把一条新闻、产品更新或行业事件丢给它,让它画出事件背景、关键角色和影响路径。
关系理顺以后,值得写的角度通常也就冒出来了。
——
02|生成适合截图传播的视觉素材
当普通文本图不够时,它可以制作一个聚焦单一主题的 HTML 信息图或迷你幻灯片。
用于文章配图、社交媒体截图、课程讲解和内部分享。
——
03|理解复杂的 AI 概念
碰到 Agent、RAG、MCP 这类满篇术语的话题,我会让它直接展示运行流程和数据流。
先看懂过程,再去啃技术解释,会轻松很多。
——
04|学习复杂的 AI 工具
现在不少 AI 工具功能很多、操作路径又深。我会让 show-me 把完整工作流画出来:第一步做什么、在哪里配置、结果如何进入下一步。
——
另外,个人觉得它还特别适合这些场景:
-解释一个复杂机制
-梳理系统或项目结构
-看懂流程和变化
-整理内容和知识
——
show-me skill 开源库:github.com/humanlayer/skills…
希望可以帮到你~
Skill 实操教程:一段提示词,让 show me 生成文章配图。
内容创作者真应该好好把这个 Skill 用起来。
show me 擅长的是把一段内容压缩成清晰的视觉结构,比如:流程图、信息图、概念解释和 UI 示意。
如果你有这种类似的内容,就可以用它试试。
——
我整理了 2 套调用 Skill 的提示词。
第一套直接用 show-me 出图;第二套适合已经有个人视觉体系的人。
——
01|直接用 show-me 出图
show-me 默认比较偏简约、现代的科技视觉。
如果你暂时没有固定的品牌风格,直接让它负责信息结构和视觉设计,效果通常已经够用。
提示词如下:
"
使用 show-me Skill,将下面的内容整理成一个聚焦单一主题的可视化 HTML。
画面比例: {{5:2 / 16:9 / 4:3 / 3:2 / 1:1 / 4:5 / 3:4 / 9:16}}
使用场景: {{文章封面 / 文章配图 / 解释复杂概念或流程 / 其他}}
要求:
1. 根据使用场景提炼核心信息,优先使用流程图、信息图、关系图或 UI 示意。
2. 建立固定尺寸的网页画布,保持清晰的信息层级和合理的文字密度。
3. 导出前检查文字、图标、连线和卡片是否存在遮挡、溢出或裁切,并完成修正。
4. 按画布原始尺寸截图,导出高清 PNG。
内容:
{{粘贴你的内容}}
"
——
02|搭配个人视觉体系出图
如果你已经有固定的字体、颜色、网格和卡片规范,就可以让 show-me 负责信息结构,再让个人视觉体系负责视觉效果。
这样生成的图片也更容易形成稳定的账号识别度。
提示词如下:
"
使用 show-me Skill,将下面的内容整理成一个聚焦单一主题的可视化 HTML。
画面比例: {{5:2 / 16:9 / 4:3 / 3:2 / 1:1 / 4:5 / 3:4 / 9:16}}
使用场景: {{文章封面 / 文章配图 / 解释复杂概念或流程 / 其他}}
要求:
1. 使用 show-me 提炼内容结构,并搭建固定尺寸、精准排版的网页画布。
2. 页面视觉严格遵循下方配图规范;如视觉效果与可读性冲突,优先保证信息清晰。
3. 控制文字密度,使用流程、卡片、图表或 UI 结构表达复杂关系。
4. 导出前检查文字、图标、连线和卡片是否存在遮挡、溢出或裁切,并完成修正。
5. 按画布原始尺寸截图,导出高清 PNG。
生成 HTML 后先检查是否有文字、图标等信息遮挡情况,并修正。
最后,按这个尺寸截图成高清 PNG导出。
内容:
{{粘贴你的内容}}
配图规范:
{{粘贴你的配图规范}}
"
——
这套方法最适合结构明确、需要解释关系和流程的内容。
它不一定能替代设计师,但可以先把最费时间的信息整理和版式搭建替你完成。
Skill 开源库地址在引用推文里
希望能帮到你,感谢互动和关注~
最近这个叫 show-me 的Skill 火了起来,很多大佬在推荐。
实测了 5 天,它的核心作用很简单:
把当前讨论的话题,压缩成最小、最清晰的视觉结构,让你一眼看懂复杂关系。
对我这个内容创作者来说,show-me 主要被我用在 4 个地方:
01|找选题
把一条新闻、产品更新或行业事件丢给它,让它画出事件背景、关键角色和影响路径。
关系理顺以后,值得写的角度通常也就冒出来了。
——
02|生成适合截图传播的视觉素材
当普通文本图不够时,它可以制作一个聚焦单一主题的 HTML 信息图或迷你幻灯片。
用于文章配图、社交媒体截图、课程讲解和内部分享。
——
03|理解复杂的 AI 概念
碰到 Agent、RAG、MCP 这类满篇术语的话题,我会让它直接展示运行流程和数据流。
先看懂过程,再去啃技术解释,会轻松很多。
——
04|学习复杂的 AI 工具
现在不少 AI 工具功能很多、操作路径又深。我会让 show-me 把完整工作流画出来:第一步做什么、在哪里配置、结果如何进入下一步。
——
另外,个人觉得它还特别适合这些场景:
-解释一个复杂机制
-梳理系统或项目结构
-看懂流程和变化
-整理内容和知识
——
show-me skill 开源库:github.com/humanlayer/skills…
希望可以帮到你~
太喜欢这个「动森风格」的设计 Skill 了。
这个 Skill 本身是做网页 UI 设计的,但你也可以用做文章配图。
我实际测试下来,目前有 2 种作图方式(附提示词):
01|先生成网页,再截图导出图片
这是最简单、也最稳定的方法。
让 Agent 创建一张固定尺寸的 HTML 海报,把文字、数据、卡片和装饰元素排版到网页里,再通过浏览器截图导出 PNG。
可以直接使用下面这段提示词:
//
使用 animal-island-ui-style,根据以下内容设计一张 HTML 网页海报。
要求:
1. 创建固定尺寸的网页画布,尺寸为 1600×1200,宽高比 4:3。
2. 严格遵循 animal-island-ui-style 的视觉规范,包括配色、字体、圆角、边框、标题丝带、卡片和按钮层级。
3. 根据内容重新规划信息层级,不要只是把原文逐段放进卡片。
4. 突出一个核心标题、3—5 个关键信息,以及一句总结。
5. 保证所有内容完整落在画布内,不出现滚动条、溢出或文字裁切。
6. 完成后在浏览器中打开网页,检查实际渲染效果。
7. 将浏览器视口设置为 1600×1200,并截图导出为 PNG。
8. 同时保留 HTML 源文件,方便后续修改文字和排版。
需要制作的内容如下:
【粘贴你的文章内容】
//
这个方式尤其适合:
-文章封面
-知识卡片
-数据海报
-教程流程图
-小红书或公众号配图
-包含较多中文的社交媒体图片
——
02|提炼 Skill 的视觉体系,再交给生图模型
这个 Skill 的视觉规范中,包含完整的设计 Token 和组件规则。
可以先让 Agent 将这些内容转化为其他生图模型使用的视觉提示词。
先使用下面的提示词提炼风格:
//
完整阅读 animal-island-ui-style 的 SKILL.md,以及其中引用的全部视觉规范文件。
不要生成网页,也不要直接生成图片。
请将这套 UI 视觉体系提炼成一份适合图像生成模型使用的“视觉风格提示词模板”。
输出内容必须包括:风格定位、核心配色、造型语言、材质与层级、字体与文字排版、构图原则、正向提示词、负向提示词、可替换变量等。
目标是提炼出温暖、自然、圆润、轻游戏化的岛屿 UI 视觉语言。
//
拿到风格模板后,再把它和自己的视觉体系组合起来使用。
这种方式更适合:
-场景插画
-概念性配图
-无文字封面
-背景素材
-角色或物体主体
-需要更强画面表现力的内容
但它也有一个明显问题:稳定性不如网页截图。
——
如果想再进阶一点,还可以把两者结合起来:
先用生图模型生成无文字的主体插画,再用这个 Skill 创建 HTML 海报,将标题、数据和说明文字叠加上去,最后通过浏览器统一截图。
这样既保留了插画的表现力,也能保证中文排版准确。
——
唯一仍需注意的是:如果直接使用原 Skill 和组件体系,项目许可证限制非商业使用。
animal-island-ui-style 开源库:github.com/guokaigdg/animal-…
希望能帮到你,感谢互动和关注~
太喜欢这个「动森风格」的设计 Skill 了。
这个 Skill 本身是做网页 UI 设计的,但你也可以用做文章配图。
我实际测试下来,目前有 2 种作图方式(附提示词):
01|先生成网页,再截图导出图片
这是最简单、也最稳定的方法。
让 Agent 创建一张固定尺寸的 HTML 海报,把文字、数据、卡片和装饰元素排版到网页里,再通过浏览器截图导出 PNG。
可以直接使用下面这段提示词:
//
使用 animal-island-ui-style,根据以下内容设计一张 HTML 网页海报。
要求:
1. 创建固定尺寸的网页画布,尺寸为 1600×1200,宽高比 4:3。
2. 严格遵循 animal-island-ui-style 的视觉规范,包括配色、字体、圆角、边框、标题丝带、卡片和按钮层级。
3. 根据内容重新规划信息层级,不要只是把原文逐段放进卡片。
4. 突出一个核心标题、3—5 个关键信息,以及一句总结。
5. 保证所有内容完整落在画布内,不出现滚动条、溢出或文字裁切。
6. 完成后在浏览器中打开网页,检查实际渲染效果。
7. 将浏览器视口设置为 1600×1200,并截图导出为 PNG。
8. 同时保留 HTML 源文件,方便后续修改文字和排版。
需要制作的内容如下:
【粘贴你的文章内容】
//
这个方式尤其适合:
-文章封面
-知识卡片
-数据海报
-教程流程图
-小红书或公众号配图
-包含较多中文的社交媒体图片
——
02|提炼 Skill 的视觉体系,再交给生图模型
这个 Skill 的视觉规范中,包含完整的设计 Token 和组件规则。
可以先让 Agent 将这些内容转化为其他生图模型使用的视觉提示词。
先使用下面的提示词提炼风格:
//
完整阅读 animal-island-ui-style 的 SKILL.md,以及其中引用的全部视觉规范文件。
不要生成网页,也不要直接生成图片。
请将这套 UI 视觉体系提炼成一份适合图像生成模型使用的“视觉风格提示词模板”。
输出内容必须包括:风格定位、核心配色、造型语言、材质与层级、字体与文字排版、构图原则、正向提示词、负向提示词、可替换变量等。
目标是提炼出温暖、自然、圆润、轻游戏化的岛屿 UI 视觉语言。
//
拿到风格模板后,再把它和自己的视觉体系组合起来使用。
这种方式更适合:
-场景插画
-概念性配图
-无文字封面
-背景素材
-角色或物体主体
-需要更强画面表现力的内容
但它也有一个明显问题:稳定性不如网页截图。
——
如果想再进阶一点,还可以把两者结合起来:
先用生图模型生成无文字的主体插画,再用这个 Skill 创建 HTML 海报,将标题、数据和说明文字叠加上去,最后通过浏览器统一截图。
这样既保留了插画的表现力,也能保证中文排版准确。
——
唯一仍需注意的是:如果直接使用原 Skill 和组件体系,项目许可证限制非商业使用。
animal-island-ui-style 开源库:github.com/guokaigdg/animal-…
希望能帮到你,感谢互动和关注~
一篇讲 AI 设计的帖子,已经 82 万阅读、9.1K 收藏,收藏甚至是点赞的近 3 倍。
说明很多人是真的认可并准备照着做。
作者是 Figma 前工程师,原文主要讲工程师如何借助 AI 设计前端。
但我读完发现,这套方法同样适合内容创作者。
我按照他的思路,建立了一套可以反复执行、持续变好的工作流:
想清楚写什么
→ 准备参考材料
→ 让 AI 提供多个方向
→ 人来选择
→ 删除 AI 味
→ 沉淀成模板
→ 发布给真实读者
→ 复盘反馈
→ 更新下一轮规则
这套流程里,人和 AI 的分工必须明确。
——
AI 负责:
- 发散不同角度
- 快速完成初稿
- 转换成长文、短帖、口播等格式
人负责:
- 决定真正想表达的观点
- 核对事实与信息来源
- 判断哪些内容该留、哪些该删
- 对最终发布的版本负责
简单理解,就是 AI 负责快速提供更多可能,人负责判断什么值得留下。
——
无论你在写文章、做视频、设计产品还是经营账号,底层流程都差不多:
先把问题定义清楚,再让 AI 批量生成方案,最后用真实反馈修正规则。
希望能帮到你,感谢互动和关注~
内容创作者都应该把 archify Skill 用起来。
最近 Archify 冲上 GitHub Trending 榜首,Star 已经超过 5.3 万。
它的主要功能是:把文字内容输出成一个带动画、可交互、可导出的独立 HTML 文件。
我围绕这个功能,深度体验了2天,感觉对内容创作者的帮助很大,可以用来做这2件事:
01|把文字变成一眼就能看懂的图
你可以把任意文字或需求丢给它,生成一张视觉简图,作为短文的配图足够用。
有些复杂内容只用文字容易写得很绕。Archify 可以将其变成有层级、有主线、有支线的技术图。
在长文的合适位置放上一两张这样的图,不仅能缓解阅读压力,也会让整篇文章看起来更专业。
不过,Archify 目前的视觉体系相对固定。
我一般会先让它生成结构正确的 SVG,再导入 Figma 或 Illustrator,替换成自己的字体、配色和视觉风格。
如果不想手动改,这一步也可以继续交给 Agent 完成。
有需要的话,我可以再单独写一篇教程,讲讲怎么把 Archify 生成的图,改成和自己账号风格统一的配图。
——
02|给文章、视频和社交媒体制作动态素材
它可以生成带动画和交互功能的 HTML,点击不同节点,可以查看上下游关系、追踪信息路径,或者逐步播放整个流程。
如果图本身不复杂,可以直接导出成 PNG、SVG 或 WebM,用在文章、视频和社交媒体里。
如果内容必须通过交互才能讲清楚,也可以直接录屏:
一边点击节点,一边展示信息如何流动,再配上口播解释。
这样得到的素材,可以放进长文,也可以剪进视频,用来解释那些复杂机制。
——
archify skill 开源库:github.com/tt-a1i/archify
总之,经过我的深度体验,我觉得这 2 点对创作者来说,很有用!
如果你有好的创意或用法,欢迎补充分享。
希望能帮到你,感谢互动和关注~