toolin.ai logo
toolin.ai
首页
AI工具
AI技能包
AI资讯
精选推文
AI提示词
提交AI工具提交
toolin.ai logo
toolin.ai

AI玩家的创作利器库,发现最佳AI工具组合,提升您的创作效率

AI工具1,343个
技能包11个
产品功能
  • AI工具
  • AI技能包
  • AI资讯
  • 精选推文
  • 提交AI工具
关于我们
  • 关于Toolin
  • 联系我们
  • 合作洽谈
  • 更新日志
关注我们
© 2025 toolin.ai. All rights reserved.
服务条款隐私政策

两个开源 Skill:让 Codex/Claude Code 帮你做配图和网页设计

2026/07/11
·toolin小编

开源 guizang-material-illustration 文章配图 Skill 和 web-design-taste 网页设计 Skill,一行命令装进 Codex,告别 AI 味配图和千篇一律的网页。

两个开源 Skill:让 Codex/Claude Code 帮你做配图和网页设计
两个开源 Skill:让 Codex/Claude Code 帮你做配图和网页设计
2026/07/11

两个开源 Skill:让 Codex/Claude Code 帮你做配图和网页设计

开源 guizang-material-illustration 文章配图 Skill 和 web-design-taste 网页设计 Skill,一行命令装进 Codex,告别 AI 味配图和千篇一律的网页。

Skill 1:guizang-material-illustration(文章配图)它解决什么问题核心能力安装与使用适合 / 不适合Skill 2:web-design-taste(网页审美)它解决什么问题核心机制感受词翻译表安装与使用两个 Skill 配合使用
AI教程

写文章最烦的不是写,是配图——要么贴密密麻麻的截图,要么 AI 画一张漂亮但谁也看不懂的插画。做网页也一样,AI 一出手就是蓝紫渐变 + 圆角卡片 + 居中大标题,换个客户还是这一套。2026 年 7 月,社区开源了两个适配 Codex / Claude Code 等 Agent 环境的 Skill,专门解决这两个问题:guizang-material-illustration(文章配图)和 web-design-taste(网页审美)。两个 Skill 都是一行命令安装,对 Agent 说自然语言就能用。

Skill 1:guizang-material-illustration(文章配图)

它解决什么问题

写文章、做周报、发社交媒体、准备 PPT,都绕不开"概念配图"——把一个概念、一套流程、一组数据讲清楚的图。难的不是封面(模板能搞定),而是需要箭头、标注、空间关系的解释图。

这个 Skill 由歸藏(@op7418)开源,基于 GPT-Image 2.0,把你的文章、笔记、数据或产品说明变成一张带中文标签的 3D 材质风格解释图。读者扫一眼就能抓到你在说什么。

配图效果展示

干净白底、克制的 3D 材质、中文标签直接印在图里,远看像杂志内页,近看细节都读得清。

核心能力

  • 场景适配:工作汇报/产品说明、数据图表(柱状图、甘特图、桑基图、热力图)、教育解释图(杠杆原理、电磁感应)、人文配图(丝绸之路、古诗意象)
  • 统一视觉语言:白底工作室光线、克制 3D 材质、一个鲜明点缀色(默认 IKB 蓝)、图内嵌短中文标签
  • 冷门概念检索:Agent 先评估概念是否冷门(如 PKCE 流程、Zettelkasten 卡片系统),冷门则先检索参考图片提取视觉线索,再转化为统一风格
  • 图表重画而非换皮:从原图截图或原始数据中提取语义信息(图表类型、坐标、数据值、极值),再让 GPT-Image 2.0 从零画一张全新的材质化图表
  • 反模式纠正 + QA 审核:交付前逐项检查标签准确性、数据正确性、画面裁切、水印乱码,发现问题直接重新生成

安装与使用

GitHub 仓库:github.com/op7418/guizang-material-illustration

安装命令(对你的 Codex 或其他 Agent 说):

npx skills add https://github.com/op7418/guizang-material-illustration --skill guizang-material-illustration

装好后直接用自然语言驱动,例如:

用歸藏的材质插画 Skill,帮我把这段产品说明做成一张带中文标签的机制图

把这篇文章挑 3 个核心概念,各生成一张带字配图

不用选模式、不用指定参数,Agent 根据材料自动判断该生成什么类型的图。

💡 提示:这套提示词只在 GPT-Image 2.0 上测试过,搭配 Codex 调用 GPT-Image 2.0 效果最稳定。也可以和歸藏的 PPT Skill、社交媒体卡片 Skill 配合使用。

适合 / 不适合

适合:文章配图、知识解释图、概念拆解图、工作汇报配图、产品机制图、系统架构图、数据图表美化、教学材料配图、人文观点配图、社交卡片中心图、PPT 主视觉。

不适合:完整的小红书卡片排版(那是社交卡片 Skill 的工作)、PPT 结构设计、真实摄影修图、人像写真、长文海报排版。

Skill 2:web-design-taste(网页审美)

它解决什么问题

让 AI 做网页,出来的东西一眼就是"AI 味"——蓝紫渐变、圆角卡片、居中大标题,换个客户还是这一套。问题不在 AI 没能力,而在你说不清要什么。"高级"是什么?黑白是高级,留白是高级,衬线字体也是高级,AI 不知道你脑子里的"高级"长什么样,只能给平均值。

这个 Skill 由陈仲瑶(Alice59357)开源,核心思路一句话:不让你描述设计,只让你做选择题。

核心机制

七张预设风格卡片,每张自带完整设计参数。你不需要懂栅格、字距、设计令牌,只需要回答三个人话问题:

  • 这个页面给谁看?
  • 看完之后,希望对方干什么?
  • 手上有什么素材?

然后它给你出风格卡片,每张一句话描述气质。你选一张,或者说"像 A 但更暖一点",剩下的翻译工作 AI 来做。

七种风格覆盖典型场景:

  • 苹果式 · 产品极简:一屏只说一件事,安静笃定贵
  • Vogue · 杂志编辑风:超大衬线标题压黑白人像,适合个人 IP 主页
  • 坂本龙一 · 静默留白:页面像乐谱里的休止符,几乎什么都没有但每个字都在正确位置
  • 暖光玻璃感:温暖梦幻有科技感但不冷,适合 AI 作品集
  • 手作纸感:米白纸色手写批注,亲切诚恳,适合教育内容
  • 暗色仪器感:深底发光数字扫入数据条,专业锋利,适合 AI 工具页
  • 明快转化型:痛点钩子→信任状→收益→见证→价格→行动,适合销售/报名页

感受词翻译表

传统流程里你看到成品不满意但说不出哪里不对,"就是感觉不对"——设计师听到这句话想死。这个 Skill 内置了一张感受词翻译表,把你的感受自动翻译成具体设计动作:

  • "这里看着挤" → 加留白
  • "颜色有点脏" → 降饱和、减色
  • "不够高级" → 缩小正文字号

你说人话,它改专业的。

安装与使用

GitHub 仓库:github.com/Alice59357/web-design-taste

下载后按照仓库 README 安装到你的 Agent 环境,然后用自然语言驱动:回答三个问题(给谁看、要对方干什么、手上有什么素材),选风格卡片,用感受词迭代修改。

两个 Skill 配合使用

两个 Skill 解决的是创作链路上的不同环节,可以组合:

  1. 用 web-design-taste 定网页整体风格和结构
  2. 用 guizang-material-illustration 给关键概念段落生成中心配图
  3. 配合歸藏的 PPT Skill 或 社交卡片 Skill 完成多平台分发

这是一套"语言边界决定能力边界"的实践——把说不清的审美拆成可选的卡片、可翻译的感受词、固定的技术底座,说不清的东西就变成了可以选择、可以复制的东西。

所有文章

作者

avatar for toolin小编
toolin小编

分类

  • AI教程
Skill 1:guizang-material-illustration(文章配图)它解决什么问题核心能力安装与使用适合 / 不适合Skill 2:web-design-taste(网页审美)它解决什么问题核心机制感受词翻译表安装与使用两个 Skill 配合使用

相关文章

ShotStream:实时导演多镜头长视频的开源框架(ECCV 2026)
AI产品

ShotStream:实时导演多镜头长视频的开源框架(ECCV 2026)

港中文 & 快手可灵联合开源 ShotStream,首个实时流式多镜头长视频生成框架,生成速度提升 25 倍,支持边生成边调整情节。

avatar for toolin小编
toolin小编
17小时前
歌歌AI(GoGo):国内首个纯中文 AI 音乐模型实操解析
AI产品

歌歌AI(GoGo):国内首个纯中文 AI 音乐模型实操解析

专为华语优化,单卡 10 秒生成一首中文歌,已接入抖音、剪映等七大平台。歌歌AI 模型能力、接入方式与创作者变现路径。

avatar for toolin小编
toolin小编
17小时前
Claude Sonnet 5 发布:性能逼近 Opus 4.8,价格只要 60%
AI产品

Claude Sonnet 5 发布:性能逼近 Opus 4.8,价格只要 60%

Anthropic 发布 Claude Sonnet 5,默认开启自适应思考、引入新分词器,定价维持 $3/$15,8月31日前享 $2/$10 限时价。

avatar for toolin小编
toolin小编
1天前