聊一聊这个做好的字库如何使用?这个是 font creator 十四点零专业版这个软件, 呃,你看这里的字库,我一共是六千多个字,等你把这个整体的字库做好之后,怎么安装到电脑里?有几种办法。第一种办法就是这个专业版这个软件自己就能够装到你这个 c 盘系统里, 这个在上面的中间位置有一个,这个电脑有个小箭头,这个位置安装当前字体,在这里,你点击进行下一步可以安装。还有就是字体下面最下面有个安装, 这个也可以,这两个是一样的,其实就把你当前的字体就安装到了 c 盘里。还有一种办法就是你把你当前的字体导出, 点击文件输出,输出电脑字体 ttf 格式,这样的话他就把它存到了桌面上, 就是这个文件看有多大啊, 属性八点三三兆,这个文件你就可以考给你其他电脑或者传输到你要分享的人那个电脑里,然后双击安装, 点击双击这里有安装,这也可以,还有一种办法就是右键这里有个安装。 呃,因为有的时候你尝试一种办法啊,你装完以后你使用不了,所以说我把这个所有的办法都告诉你了,你挨个尝试,还有最后的一个办法,你就把它复制, 打开你的电脑的 c 盘,找到这个 font font 这个文件夹,这个文件夹就是 c 盘你 c 盘里所有的字字体字库,你看这里有宋体立书,还有黑体立文,什么都有, 你把你刚才那个字体字库直接往里粘我,因为我这里有啊,就点的替换点试就可以了,这样的话就把当前的字库就装到你这个现有的电脑里了, 这个时候你,你再打开你的 word 或者是这个 wps 文件的时候,就可以正常使用了, 也可以正常编辑了。呃,例如说你刚才装的字体啊,在这个里选择的时候就能找到你刚才你自己编的字库了。 你看我,我现在的字库啊,做好的一共是将近七千个字,六千九百八十一个字,这时候就可以编辑了,就跟其他的字体是一样的可编辑状态了。 比如说我选几个啊?你看颜色、大小什么都可以调节了, 这个就是字库的安装, 懂的自然懂。
粉丝6442获赞6.3万

五个前端顶级 skill in tagble 这是一个专为 ai 编码工具设计的 skill 合集, github 上已经收获超二十五 k star, 用于提升 ai 生成界面的设计质量。内置前端设计反模式词典,明确告诉 ai 绝对不能犯哪些低级错误,生成的代码不仅功能完整,且更具备高级的视觉质感。 task skill 同样是一个能够提升 ai 前端设计品味的工具,只需一个 skill 文件就能让你的分为编码 ai 不 再每次都生成千篇一律、毫无新意的作品,同时支持 react、 vivo 和 spell 三大主流框架中使用,给 top 上已有一万五千多人疯狂收藏。 skills 由前端大神安森尼夫精心挑选的技能,合集 y 和 nars 开发人员的一站式资源库,把官方文档、最佳实践、个人经验结构化,让 ai 的 生成代码更符合社区规范,同时处理生成代码不规范、不符合现代前端最佳实践、配置混乱等问题。 高德地图 skill 它将高德地图 g s a p i 二点零的官方文档、最佳实践和代码模板集成到结构化的技能文件中,利用 ai 编辑器自动生成符合官方规范的地图代码包, 包含地图初识化、覆盖物、世间布局等模块核心 a p i 帮助开发者快速集成高德地图,并遵循正确的使用方式。 u i u x pro max scale 如果你的 ai 写 ui 还达不到这样的设计标准,界面丑得像二十年前的网页,并且还不支持自定义配色方案、自己搭配和图标类型等操作,这个 scale 就 可以彻底解决这些弊端。目前 gigap 已经超七点四万人收藏,可实现在跨平台和八个前端框架中使用,几个简单配置步骤即可开始。

上周我介绍的那个现象级设计师 skill github 已经狂飙到三万星了。这周直接炸出了一个更猛的玩法,有人做了一个工具,能把任何网站一键转成 design md 文件,你只需要丢一个 u r l 进去,它会自动帮你解析这个网站的配色、逻辑、字体关系、间距、系统组建规律。然后打包成一份 ai 能直接读懂的语义化设计文档。 程序员以后看到好看的网站,不用再截图存灵感了,直接把人类积累的顶级设计品味转化成 ai 可以 直接消费的结构化知识。这还没完,这次作者直接做了个设计师版 skill 宝藏聚合站,苹果、 cloud space、 耐克这些标杆网站的设计系统,全部变成可一键安装。你不是在抄样式,你是在为你的 ai 助手克隆设计基因。

是不是感觉你的 open 跨做出来的图片、视频、网页总是达不到你的预期?今天推荐六个 open cloud 必装 skill, 让你的小龙虾审美在线。 skill 一, fronten design 这个 skill 专门做前端网页界面的,不用自己写样式、调布局、配色,它能自动帮你设计好看的页面、排版按钮、布局、颜色搭配,还能直接生成能用的网页代码, 小白也能轻松做出专业美观的网站界面。 skill 二, remotion 它是个 ai 视频自动制作工具,你不用剪映、 pr 这些剪辑软件,也不用会写代码, 直接用告诉 ai 你 想要什么样的视频,比如三十秒产品介绍知识。动画带字幕的解说片,它就会自动生成画面、动画配音和字幕,最后导出成片。 skill three, nano banana pro 是 openclaw 里的专业 ai 绘图技能,主打高清纹身、图图生图和修图功能。它能让你的 ai 小 龙虾直接生成高质量图片,处理图像细节,是做封面、插画和视觉创作的核心技能。 skillful humanizers 主要把 ai 写的生硬模板化,文案改成真人语气,去掉机器感,语句变得自然流畅接地气。还能调整文风,适配短视频、文案、解说稿、推文等各种场景,让人看不出是 ai 生成的。 k 五, uic pro max 是 open 克拉里的专业 ai 界面设计技能,说出想要的页面类型和风格,它就能自动搞定专业配色、字体排版布局兼具交互动效和手机端适配,还会自动检测设计细节问题。最后直接生成可落地的前端代码,轻松做出高级耐看、没有廉价感的网页和后台界面。 skill six remotion best practices 是 open 克拉里专门优化 ai 视频制作的技能,它能教并帮你按照规范做 remotion 动画视频, 规避卡顿、画质差、排版乱这些常见问题。自动优化画面节奏、字幕布局,动画流畅度深沉,更清晰丝滑观感。专业的短视频和解说动画新手也能做出高质量成片。 想要提高 open 可乐的美商,这六个 skill 必不可少。好了,今天的视频就到这里了,点赞关注,带你玩转更多 ai 神器!

你是不是也遇到过这种情况, skill 搭好了, skill 点 md 也写了,但 agent 点又用 skill, 输出还是不稳定,一会格式乱,一会漏步骤,一会又自信地答偏。 本期我们读 google cloud tech 团队的博课, five agent skill design patterns, every adk developer should know, 他 们认为问题很少出在格式上。现在主流的 agent skill design patterns, every adk developer should know, 他 们认为问题很少统一了 skill 点 md 的 格式规范。 真正的问题出在内容设计上,也就是 skill 里面的逻辑究竟该怎么组织?他们研究了 antipastix、 酷狗内部的 skill 构建方式,总结出五种设计模式, 用对了 skill 的 输出才能稳定有质量。这五种模式对应的正是 agent 最常见的五类失控点, 第一类是知识什么时候加载,对应 tool wrapper。 第二类是输出结构总是不稳定,对应 generator。 第三类是审查标准和审查流程混在一起,对应 reviewer。 第四类是信息不全却急着开工,对应 inversion。 第五类是复杂任务,容易跳步骤,对应 pipeline。 先看第一种 tool wrapper, 它解决的是知识什么时候应该被交给 agent。 很多人会把某个技术站的全部规范提前塞进 system prompt, 比如 react 规范、 fast api 规范、团队组建、约定命名规则一次性全塞进去。问题是大部分任务根本用不到这些东西,你平时在浪费 context 模型,还更容易被无关知识干扰。 true rapper 的 做法是把这些内容放进 references。 skill 只负责判断现在这个任务是否进入了 react 领域,或者是否进入了数据库领域,只有判断命中才加载那一套知识? 你可以把它理解成 skill, 像一个总闸门,负责在合适的时候把某个专家手册接近上下文。 比如让 agent 改一个 react 页面时,再加载 references 里的 react 的 规范。但如果当前任务只是写 c 库查询,或者只是改一段产品文案,那份前端规范根本不出现。 所以 to rapper 的 本质就是按需注入知识。第二种 generator, 它解决的是为什么同样让 agent 写文档,今天长这样,明天又长成另一种样子。本质原因是模型每次都在现场重新决定这份输出该长什么样。 generate 的 答案很直接,别让它现场发挥。把输出结构固定在模板里,把表达方式固定在风格指南里, skill 点 md, 负责做的是先卜问缺失变量,再把内容填进去,所以模板回答的是 what to produce, 风格指南回答的是 how to write。 比如,你要让 agent 产出 a p i 文档,模板规定必须有接口说明、参数表、返回值、错误码、视力调用 style guide, 规定标题格式、术语统一语气和字段命名。这样你今天写,明天写,不同人触发出来的结构还是同一套。这就是为什么 generator 特别适合 a p i 文档标准化报告。 commit message 脚手架生成第三种 reviewer, 它解决的是为什么你的审查任务经常要推倒重来。很多团队把两件事写混了,一件事是检查什么,另一件事是怎么检查。 reviewer 模式要求你把这两件事硬拆开,检查什么?放进 checklist, 怎么检查留在 skill 点 m d。 这样一来,流程不动,规则可换。比如你今天做 python 风格审查,明天换成 o w a s p 安全检查, 后天又换成合规规则。你不需要为每一类审查重写一遍 skill, 只需要替换不同的 checklist, 最后输出再统一成 error warning info 这种层级。 这样人一看就知道哪些必须修,哪些建议修哪些,只是提醒。第四种, inversion, 这是我觉得最容易让人有实感的一种,因为很多 agent 最大的问题是太爱猜,他一拿到一个模糊需求就急着开始生成 信息,不够他就自己补,而且补得非常自信。 inversion 的 思路是把流程反过来, 流程会变成 agent, 先发问,用户先回答,他通常会分成三个阶段,第一阶段, discovery, 先确认你到底要解决什么问题。第二阶段, constraints, 把平台技术栈限制条件,交付要求问完整。 第三阶段, synthesis, 信息齐了之后才允许开始生成。比如你让 agent 规划一个客服机器人,他应该先问服务对象是谁,接入微信还是网页,要不要对接工单系统有没有合规要求,有没有人工接管机制, 这些没问清之前禁止直接开始写方案。所以 inversion 的 关键是用门控指令明确规定信息没齐不准开工。第五种, pipeline, 它解决的是多步骤任务,为什么总有人跳步骤? 有些任务本身就是一个强顺序流程,比如先分析输入,再生成中间产物,再组装最终结果,最后还要验证。 如果你把这件事当成一句 prompt 模型,很容易中途偷懒。 pie blind 的 做法是直接把 skill 点 m d 写成工作流定义,第一步做什么,第二步做什么,什么时候能进入下一步全都写清楚, 中间还要放 gate, 也就是显示门控。比如先解析公开 a p i, 再生成 docstring, 确认之后再组装成完整文档,最后做质量检查。 这类模式特别适合文档生成、复杂代码修改、发布流程、合规流程这种不能跳过验证的任务,因为它的价值不只是顺序清楚, 还在于每一部只加载当前所需的 references 和 templates, 能让 context 一 直保持干净。这五种模式讲完之后,最后一个问题就是到底该怎么选。这篇文章给了一个很实用的判断路径,先问这个 skill 是 否要产出内容, 不过要,而且是从模板里产出,那通常就是 generator while 要产出,但本质只是运行时加载某一套知识,那更像 tool rapper。 如果这个 skill 是 在评估已有输入,那通常是 reviewer。 如果它在开始之前必须先向用户补全信息,那就是 inversion。 如果它还有严格步骤,确认点不能跳过的门,那就是 inversion。 如果它还有严格步骤,确认点不能跳过的门,那就是 inversion。 high blind 结尾可以接 reviewer。 初 rapper 几乎可以叠在任何模式上,负责补知识。最后总结一下,别再把越来越复杂的指令一股脑塞进同一个 system prompt。 真正可靠的 skill 靠的是更合适的结构。 你要先判断自己遇到的到底是知识问题、结构问题、审查问题、澄清问题还是流程问题。模式选对了 a 阵才会稳定。这里是慢学 ai, 我 们下期再见。

只需要一句话,让你的界面从这样变成这样。然后很多朋友就问我怎么做出特别好看的页面,因为他们做的页面都是像这种蓝紫色的渐变或者 emoji 表情包。我今天就分享三种比较有效的方法,都是我工作中使用的。 第一个就是之前发过的文章,我们用了几个 skill, 一个是 front and design skill, 身上的界面已经有非常好看的交互了,包括它的背景图。第二个就是 u i u x pro max skill 和 front and design skill, 它都能生成比较漂亮的界面。那除了这两种,今天要介绍的就是这个 awesome design amt, 它是什么呢?你可以理解为它就是一个 ui 界面的说明书,告诉我们的项目到底应该是什么的样子和感觉。 它和这个 skill 的 不同,就是说我们可以定义一个规范,不让 ai 每次都随机的发挥, 那它的使用方法也非常的简单,第一步就是把网站的这个 design md 复制到你项目的根目录个直接和 ai 输出,用这个 design md 作为视觉指导,设计出什么什么页面,具体来实操一下, 直接输 design md 的 这种风格。比如说我这个是使用的是爱彼迎的风格,输一个 html 页面,那这个页面就是使用这个爱彼迎的风格,可以看到和爱彼迎的呃,官网的风格是非常的接近的, 我还让它生成了 cloud 的 设计风格。一句话总结,如果你没有自己的设计规范,只是想让页面变好看,我们可以安装这个 skill, 也就是和 uix pro max skill。 如果说我们有自己的设计规范,我们想要网站按照自己的设计规范去生成页面, 那我们就可以下载这个 awesome design md, 让所有的网页生成的都是统一的风格,当然也可以自己去设计这个 design md。 在 后面的视频中我会介绍一下如何设计自己团队的 design md。

最近,我给一个零基础,完全没有技术背景的朋友,在他的电脑上装了 cloud code 和 six skill。 结果他现在每天工作,白天就抽空构思一下想法,晚上回家花一两个小时就用 web coding 把完整的项目给做出来了。 前两天,他特别空虚地对我说,现在实现 idea 太容易了,大学里的那些编程课好像没有什么必要了。 今天这期,作为一个写了二十年代码的程序员,我直接把初学者最炸最有用的三个 skill 分享给你们。只要装上它们,你 web coding 的 能力就不再只是做一个玩具,而是质的飞跃。点赞收藏,我们直接开始第一个 skill, superpowers。 很多人以为 ai 写代码是我给一句提示词,他图一堆代码给我。如果你这么想,那你永远只能做一些小玩具。科技行业什么最值钱?是 sop, 是 标准化的工作流程。 superpowers 不是 简单的提示词,它是直接给你的 ai 注入了一整套顶级的软件公司方法论。装上它, ai 就 不再只是一个只听指令的打字机,而是瞬间成为全自动运转的技术团队。 在这个生态里,包含了十四个环环相扣的技能。当你抛出一个模糊的想法,他会先出发。 brainstorming。 他 化身产品经理,用苏格拉底的提问帮你把卵脑子里的一团乱麻梳理成专业的设计文档,专治小白的,想不清楚,说不明白。 接着是 writing plans, 它像架构师一样,把大项目拆解成一个一个好落地的小任务。 最觉得是他的 sub agent driving development。 在 执行环节,他会针对每一个小任务,自动派活给不同的 ai 员工,还会严格遵循先写测试,再写代码的红绿重构标准。 他自己可以在那里干好几个小时,绝不跑偏。最后做代码审查,查 bug, 合并代码, 这全都是自动化的流程。听到这里,你可能会问,老哥,这么多高深的概念,我需要学吗?答案是,你完全不需要懂,更不需要管。 你就像一个公司老板一样,你需要亲自去画圆形写代码做测试吗?并不需要,你只需要输入需求,整个团队自己就运行起来了。你只需要坐在那里回答 ai 抛给你的几个确认问题就行。 我朋友就是这样几句话, ai 自己分工,自己设计,全自动帮他搞定了一个 a 股行情复盘系统,这就是 web coding 的 全自动发动机。第二个 skill, front and design 后台逻辑搞定了,那界面怎么办?这个时候,第二个技能 front and design 出马了,它的核心任务是把界面变得好看,彻底干掉你页面上的 ai 位。什么是 ai 位? 万年不变的默认字体,俗气的紫色渐变,死板的居中排版,大家看了只觉得廉价,但小白又不知道怎么跟 ai 形容,我要高级感, front and design 就是 你的顶级艺术指导。你在写代码之前,它会强制你自己先做设计思考今天的网页,是走复古未来风、极简杂志风,还是旷野工业风,它自己会定基调,你不用费心描述,它会自动调用视觉武器, 抛弃烂大街的字体,换上极具性格的排版,大胆使用留白,甚至给你加上丝滑的滚动 动效和高级的造点纹理,这不仅仅是让你的项目从能跑变为能看,直接把你的野生点子包装成了过目不忘的顶级产品。第三个 skill, chrome dev tools 有了大佬执行,有了神仙颜值,一切就完美了吗?不一定,你的网页可能有 bug, chrome devtools 就是 你的全自动测试工程师。如果说前两个技能给了 ai 大 脑和画笔,那么这个基于谷歌官方 mcp 协议的神器 skill, 就是 直接给 ai 装上了眼睛和手。 以前 ai 写代码是蒙着眼睛跑,出了 bug, 你 得疯狂地复制报错信息给他。现在他能直接接管你的 chrome 浏览器, 他会像真人一样自己打开网页,点击按钮、填表单,走通整个流程。发现不对劲,他会自己去查控制台的红字报错,抓取网络请求,然后自动回去改代码。他甚至还能顺手帮你做一个加载速度和 seo 的 性能体验。 我朋友说整个流程他最震撼的就是这一步。以前听说程序员提 bug 掉头发,现在他就端着茶杯发愣,看着 ai 自己打开页面测试,自己发现错误自己修复,而他什么都不用做。各位新手想提高自己 web coding 的 能力,记住这三换神, superpowers 管大脑执行, frontend 管皮囊审美, chromevtools 管深度体验测试。 现在市场上的 agent skill 成千上百,你不用去焦虑,作为一个写了快二十年代码的程序员,我帮你验过货了。 装上这三个 skill, 再加上你的创造欲,足够你靠 web coding 做出一款商业级的产品。欢迎在评论区告诉我你有什么推荐的 skill, 这里是 acodeem, 我 会持续推荐 skill, 欢迎关注。鸡变藕不变,我们下期再见。

哈喽大家好,欢迎来到蚊虫自身日记,今天我们将为大家简单介绍一下如何快速的创建字体文件。第一步,选取字形,确定马位 本视频以鱼字为例,这里我们已经准备好了鱼字的自行模板,然后上网查询鱼字的 uniq 码为 u 九 c 七 c。 第二步,创建字体文件打开 found creator 软件,在 few 中选择新建,当然也可通过快捷键 ctrl 加案来实现。然后根据我们的个人喜好为字体文件进行命名,这里我们命名为 my handwriting。 字体样式有,常规斜体、粗体、斜粗体这里有, 我们选择常规。首选自行轮廓格式,我们选择 qtep 预定意轮廓,选择包含轮廓,点击 ok, 并进入了字体概述窗口。 第三步,创建编辑字形首先添加码位,选择银色的中的字符,输入我们刚刚查询到的优妮扣码优九 c 七 c, 点击 at, 这里便会出现对应的字形,以便我们确认输入的 uniq 码是否正确。点击 ok 并添加哈罗马位,双击我们添加的码位, 然后便进入了自行编辑窗口。然后我们将编辑自行本视频。将提供两种方法来编辑自行方法一, 自由绘制轮廓使用该方法时不需要准备自行模板,点击这个图标可进行自由绘制轮廓,也可点击音色之中的自由绘制轮廓,然后在该窗口中绘制于字的自行, 该按钮为删除上移笔画,该按钮为转换为轮廓。 方法二,导入图像可通过点击该图标来导入图像,也可点击 pose 中的导入图像。 选择我们准备好的自行模板,打开它,然后调整导入图像的相关值这里规格大小 保持百分之百不变。绿植为一百九十二,清晰度为零,光滑度选择 super, 导入模式为描径模式,点击生成,然后调整字形的大小和位置, 设置字符编辑环境是个十分复杂的步骤,更精细的操作,我们后续视频再详细介绍, 关闭该窗口便已经导入成功。第四步,设置字符属性范围, 点击放的中的属性,进入 rang 选项卡,设置字符范围这里我们勾上这个选项, 它代表的是中日韩统一象形文字等等,点击 ok。 然后编辑代码页。字符范围 这里我们勾上这个选项,它代表的是中文,简体文字等等,点击 ok, 取消勾选输出,自动更新,点击 ok。 第五步,保存并安装首先保存在 fu 下,点击 保存项目这里我们把它保存到桌面上,然后安装字体文件,点击缝中的 安装,点击 next, 点击 finish。 好了,安装成功了。 注意的是,我们不能将字体文件直接保存到 windows 默认下的放图文件中,因为这样会导致我们字体不能在 word 中正常显示。接下来我们在 word 文档中检测一下我们刚刚安装的字体文件, 选择我们命名的字体文件名,然后输入刚刚编辑的字形 显示成功,说明我们的安装成功。好了,本期视频的内容到这里就结束啦,关注文从自身日记一起实现自控自由。感谢您的观看,我们下期再见!

大家好,我是东柏。上一条我们把 skill 命令跑通了,但说实话,装上只是第一步,真正卡住的是干活的时候完全没感觉。 所以别急着再装十个,先拿一个真实任务测它。比如让 cloud code 做一个 hero 区块,这时候别只说帮我写个页面,你要直接说用 frontend design 的 规范来做,做一个有设计感的 hero, 并且避免默认蓝白模板。看结果时也别只看能不能跑,你要看三件事,有没有主动套用风格规则,布局有没有明显变好, 有没有解释设计取舍。如果他没触发,也别急着怪模型,直接指出这次没有按 skill 规范执行, 让它重新读取项目级 skill 后再做 web access 也是一样,不要只说查一下资料,要让它给官方来源、关键命令和版本风险。 skill creator 也别第一天造航母。先把这个检查流程做成一个小 skill, 输入是什么,输出是什么?验收方式是什么。所以 skill 的 闭环不是安装成功, 而是真实任务能触发,结果能变好,失败能排查,最后还能沉淀成你的流程。 别把 skill 当插件收藏,它应该像一个工位,装完以后要让它真的激活。 如果你也遇到这种装了但没用上的情况,可以先收藏这条,照这个流程测一遍。我是东白,我们继续拆真实项目。

这五个 codex skill 装好项目,从写页面到云端上线,别人真的能打开,不再卡本地演示别乱装 skill。 这套顺序覆盖代码体验、 ai 架构、云端部署,少踩坑,省时间,刚好形成闭环。 第一个 versatile react 管代码,专治一改需求就崩的前端烂尾病,让 codex 少写垃圾混乱结构。它让 codex 拆组建管状态提性能,写 next 项目 更像能上线版本,后面少返工,不乱改。第二个 web design 馆,体验首屏重点按钮层级,用户一眼看懂,愿意点下去,不迷路,不犹豫。它不看页面炫不炫,只看用户第一秒能不能找到按钮,继续点下去,少迷路。第三个方队馆 ai 架构, 别让 codex 只套聊天框,就说产品完成后面容易翻车返工。他先规划模型工具数据流,让工作流自动跑起来,不用临时救场,少补坑洞。第四个, i g o i 接云端,让本地演示变真实服务,能被别人访问调用,不再自嗨。演示 模型接口、云资源安全配置,让 codex 按上线清单一项项补齐,少踩大坑,别临门翻车。第五个, angel deploy 管上线,专治项目,只在自己电脑里能跑,别人打不开,真的太尴尬了。它处理环境变量、部署配置、访问链接,让截图变成这网页,能分享给别人看顺序别搞反, 先稳代码,再稳体验,后面搭 ai 系统才会少返工,少改错,不乱跑。页面稳住后,再用方嘴把 ai 系统蓝图先搭清楚再动手开发,后面少踩大坑,别急, 再用 a j ai 接能力。最后 deploy 推上线,项目才真正能交付,不再停在本地演示里空转乱装 skill 只是囤货, 这样装才是给 codex 搭项目生产线,少绕路,更快交付完整成果。代码有人修,体验有人看, ai 有 人搭,云端部署有人负责, 一路推,上线不掉链子。装完这五个 codex, 才不是写代码工具,而是能交付项目的执行小队真正干活。你是变量,不是常量,这里是人间变量。我们下期再见。

你的 c i m 可以 卸载了,记住这个做设计的开源神器,它在 get tab 拿下了十四点四 k 的 新标。它项目是一个在 ai 监特上的设计 skill, 不 同于传统设计工具,依赖 g u i 操作,要自己手动排版调色,添加动画。 而这个项目只要在终端里说一句话, a 监特自己独品牌资产建设记,规范生成 html 跑验证,最后交付一个可用文件,深浅页面交替出现, 视觉节奏处理的挺舒服,每页信息密度也控制的合理,质量超出预期,而且设计质量有底线,有一套反 ai slap 指南,专门规避紫色渐变、圆角卡片以及 emoji 图标,这些 ai 审美套路就非常不错。


今天教大家用 ai 的 skills 功能,快速生成风格统一的 ui 页面,同时搭建可直接编辑的组建库和变量库,步骤很简单,跟着做就行。 首先打开我们的老朋友,选中上期视频生成的设计规范,点亮思考模式,输入这段提示词,稍作等待对应的 skill 就 生成完成了。点击保存即可。保存后,点击页面上的书本图标,就能找到刚保存的 skill。 接下来我们选中首页,让它用这个 skill 来继续生成其他关联页面。 一会儿,一整套风格统一的 app 页面就生成好了,大家可以看一下这套 ui 的 风格高度统一,用 image 二生成的界面,质感果然很出色。接下来重点来了,我们用 ai 在 figma 里搭建这套 ai 的 组建库,切换到 codex 界面,承接上期视频的任务,继续输入指令。 建议大家把 figma 文件地址一起粘贴进去,能大幅提升效率。输入完成后,让 ai 自动执行任务,过程中遇到弹窗提示,全部点击允许就好。 稍等片刻,组建就会自动搭建完成,并且被分类放在不同的分页中。同时 ai 还会自动创建对应的样式和变量,操作起来特别省心。好了,赶快去试试吧!

谷歌团队最近通过研究整个 ai 生态系统中技能的构建方式,发现从 antlrack 的 存储库到 vsell 和 google 的 内部指南,反复出现了这五种设计模式,它能帮你彻底解决 agent 输出乱不稳定的痛点。第一种, tool rapper 工具包装器, 把任何第三方库或 api 封装成 ai 智能体,可直接调用的工具用,到时才加载,不用硬塞提示词,秒变领域专家。第二种, generate 生成器模式,用模板加样式指南,保证输出结构统一、格式稳定, 写报告、做文档、生成提交信息再也不会每次都不一样。第三种, reviewer 审核员模式,对照检查清单,逐条评分,按错误等级输出结果,换个清单就是新能力。第四种, version 反转模式,不让 a 诊瞎猜,先当面试官执行任务前,主动面试你 澄清需求,确认边界,大幅减少返工。第五种是排查流水线模式,复杂任务拆成多步骤,每部设检查点,强制按顺序执行, 上一步不过关就不往下走,适合代码审查、内容发布、合规审核等高质量管控场景。这五种模式不是孤立的, 还能自由组合流水线加审核生成器,配反转复杂工作流,轻松拆解,不用再堆很长提示词。用好这五种设计模式,你的 agent 能力直接升级,稳定又好用。

看到库克拉克的分享的 skill 的 设计模式,感觉使用克拉克的 qd x 的 兄弟们,你们可以直接抄了啊。兄弟们啊,以前总是乱写 skill, 乱写一些 prompt, 哎呀,很容易乱猜或跳步幻觉啊,现在用这种五种简单的方式啊,就稳定多了。兄弟们,我把原文和解读版全部都贴在这里了,你们需要的你们自己去拿。好吧,我尽量的把原文全部翻译过来。

哎,这个是漂亮的,这个很 bo 的 有没有啊?任何低于这个 design skill 产出的,我觉得就没有必要下载了。哈喽,我是妮蔻。如果你还在纠结用哪个 design skill, 你 就应该看这个视频。 如果你还没有用过 design skill, 那 你就更应该看这个视频。正确使用 design skill 可以 拯救你 bug coding 时满满的 ai 味。我收集了 get up 上最热门的十个 design skill, 用同一段 prompt 分 别跑了三次,最后以设计师的眼光给到设计细节、风格设计和综合评分。让我们开始测评吧。 首先我们看一下 op 在 纯净物 skill 下的表现,一股浓浓的 ai 味隔着屏幕飘过来了。第二个,哼哼, 第三个,看所有的字都怎么样,特别的又大又粗,太大太粗不见得所有时候都是好事儿,要看搭配,要看场景。然后我们来看一下搭配了 design skill 的 back corner 表现。 接下来登场的是有近十万热度的 astrographic skill, 它一共包含十七个 skill, 我 们用于控制前端审美的是 front and design。 让我们看一下它的比赛表现, 还可以吧,这个比那个干净多了啊,这个我喜欢,这个设计还蛮精致的有没有?你可以明显看出他和没有加 skill 之前那种很粗糙感觉的对比对不对? 他的字体就是用的更克制,然后你看他每一个大标题都会有一个高量,那这个就非常利于用户的扫读,大脑觉得省力了,他就会觉得这个是好看的。然后我觉得他最惊艳的不是设计效果,而是这个 skill 只有短短的四十三行。 当看到那个 md 文件我就, wow, wow! ok, 我 们把 asarpic 当做一个测评的审核标准,任何低于这个 design scale 产出的,我觉得就没有必要下载了。下一个选手呢?他自称 pro max get up, 热度近五万, 让我们来看一下这位选手的表现。嗯, 这个你可以说他风格,这个还行,前两个都快接近于 ai 翻车了,比那个翻车好一点点。 其实他细节上是有问题的,比如说我们什么时候要用到细文大写,是你不希望用户去阅读这个文字的时候,你想要弱化他的时候,因为大写 他读起来很累。比方说这种小标签啊,他就挺适合大写的,但是你大标题用一个细文大写,还给我三种颜色,你到底想让用户看哪? 这个是不对的,所以我觉得他的风格和细节都把控的不是很好。还 pro max 呢,华城北吧,我觉得这个不行。 pass, pass。 第三个选手, impossible, 无可挑剔的,我们来看一下他的实际表现,像不像他说的那样啊? 哎,这个是漂亮的,看着很舒服啊,我会想往下滑,然后继续看这里处理的很舒服 哦。这个很 bold 有 没有?没有一些设计功底不敢弄这么 bold, 哈哈哈,我就很双标了。现在我觉得这个他的新闻处理是 ok 的, 不从用户体验的角度,就纯风格的角度,我觉得他站住了, 他这个字不是让你阅读的,而是凸显我一种整个网站的风格。他很像一个非常漂亮的飞机稿,可能用户看一百个产品里,你视线至少会被他抓到 啊,抓到了就有戏。哎,挺好的挺好的哦。第三个,他很小清新, very soft peace 哎,很可爱,又很很优雅, 很有呼吸感,对吧?很细腻,非常非常好啊,这三个我都很喜欢,都挺喜欢的。那我觉得它在细节设计,细节和设计大胆上,至少在这三次跑下来都比 antropica 要处理的好,目前在我心目中是 top one 的, 看看后面的会不会有比它更好的。第四个 skill 呢?它叫 taste, 直接把品味写名字上,我们来看一下它是不是人如其名。 嗯,哈哈,我觉得我先下定论,我就没有 taste。 没有 taste, 这个是干净的,但是很普通,有点像 p m 画的圆形图。没有,没有什么风格。 这个呢,这个字也太胖了,不好。然后这个呢,他想用这个字体去凸显一个品味,我是有调性的,但他用的不好,他没有把这个字体衬出来。这个对齐难看死了。 哎,你看这怎么回事?代码写的可能不好。他呢,我觉得没有翻车,但是很像初级设计师想要挑战大胆,挑战品位,结果细节没处理好,就变成这样了。 它没有 ai 味儿啊,有初级设计师的味儿。第五个 skill 呢,它的名字跟别的比起来真的很朴素。我就叫 ui skill, 它这边一共有十五个 skill。 我 测了一下 bassline ui 和 front and design 这两个。那我们先来看一下 bassline ui 制作的效果。 这个是干净的,没什么问题。那这个也很干净,也没什么问题, 这个也还不错,就看着舒服,你看它两个,这个是对称的,又让我引起舒适了。那总的来说,我觉得 bassline 它就是给你纠 ui 的 错误,你至少有一个 bassline 的 ui 对 吧?你说它大胆吗?有风格吗?那是没有的。 所以我想再看一下这个 front end design。 它说 create distinctive 啊, high design quality。 我 们来看一下啊。 第一个,这叫 high quality 吗?这 low quality 好 吗?丑死了。第二个,你要吓死谁?你看了那动向没有?这什么呀?好可怕哦,不舒适了, 下面翻车了,男子渐变 ai 感 很丑。我总结一下,我觉得 baseline 是 可以用的 frontend design? no, 这是我最终给到前五名 design skill 的 一个综合评分。那后几名等到你们薪金上千我再来点评吧。