★ FEATURED ARTICLE 【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载本指南讲解 Skills 仓库中agent-skills/illustration/illustration-teal-spot这套 Agent Skill如何用一套无依赖、可复现的 Node 生成器teal3d.mjs把键盘、数据库鼓、Git 提交图、收件箱这类设计与编程概念画成单主体、青白双色的 480×360 SVG 卡片用于空状态、功能插画与引导步骤等无人物场景。读完你将掌握 11 色严格调色板、固定斜投影相机、硬阴影、凹陷/凸起结构与浮动装饰的完整画法与可脚本化生产流程并能复制配套的生成器直接产出自己的卡片。这套风格解决什么问题illustration-teal-spot的定位是把一个对象放大到卡片尺寸的产品图标浅灰卡片上只有一个像小实体模型一样的主体对象——白色主面、青色侧面、利落的深色描边、一块向右下方硬投的深青阴影外加几个悬浮小道具暗示动作。它被明确指定用于空状态empty state、功能插画feature spot、引导步骤onboarding step以及 404 / 错误插画、博客头图、营销卡片、产品图标场景核心约束是一个强对象没有人。它在同一仓库的插画体系中做了严格边界划分见 SKILL.md需要 6–8 个对象、带柔光平台的完整等距场景时改用illustration-isometric-mono需要表现人物工作时改用illustration-framed-panel或illustration-outlined-cartoon需要高饱和多色簇状构图时改用illustration-bold-pop。这套风格来自一组 42 张原创设计与编程概念卡片14 种风格中的子集examples/目录下的三张 SVG 就是它的出厂卡片command-k.svg、git-merge.svg、backup.svg由盲评评委对照商业插画包打分而来是检验同手笔、同系列的基准。风格一句话定义一个白色对象采用固定斜投影只有右侧面是青色全部边缘用 1.2px 深青色描边通过一块从不模糊、永远向右下方投射的深青色硬阴影落在浅灰卡面上。这句话同时是 style.json 中mechanism字段的原文也是整套生成器的约束总纲。调色板11 个颜色别无其他调色板从三张示例卡片中实测提取共 11 色每色的用途都已固定与 style.json 的palette数组一一对应也对应 teal3d.mjs 顶部的C常量角色Hex用在哪里卡片背景#ebebeb满幅矩形其余什么都不用Ink#0e3f3d所有描边、浅色面上的字形笔画Deep teal#0e4a48所有硬阴影、星光、深色字形、青色件的右侧面Teal dark#299c96青色件的前/左面、凹槽壁Teal#36c3b0白色件的右侧面、强调件顶面、LED、高亮 UI 行Mid teal#7fd8ca浅色件的侧面、凹槽地板、硬币侧面Pale-mid#a8e5e0仅弧线刻度Pale teal#d8f2ed键与卡片的侧面、白色面上的高光条、搜索框White#ffffff主体的顶/前/左面、卡片顶面、青色面上的字形Grey#d5d8d8标签胶囊、占位文字条、开关柄Grey dark#b9c0c0小型灰色件的右侧面三条硬性纪律无渐变、无透明度、无滤镜、无模糊、无text——字母与数字一律是描边路径白色面占对象视觉主体如果青色覆盖超过主体可见面积约三分之一就不属于这套风格Deep teal#0e4a48只以阴影或星光的形式接触灰背景永远不作主体的面。源码层面lint.mjs --palette style.json会把 SVG 中出现的所有十六进制色与style.json比对偏离调色板即输出 WARN这套风格要求零 WARNlint.mjs。线条与填充描边宽度、面着色与高光描边规则描边色统一#0e3f3d480 宽度下主体用1.2pxstroke-linejoinround开放折痕用圆头线帽卡面上的小型 UI 部件按钮、图标用 1.0–1.1px并加vector-effectnon-scaling-stroke——否则mat()面变换会拉伸内部描边LED 与极小的点用 0.8px轮廓是画在平涂填充之上的三类线实体的剪影包络、顶环、以及两色面交界处的竖向折痕单个平面内不画内部轮廓线。板块的 stroke-behind 技巧盾牌、云朵、条状物这类薄板块slab采用描边垫底画法每个侧面四边形先用 Ink 填充并以2.9px描边再以侧面颜色自描 0.5px 重填最后正面以 1.2px 轮廓收尾。这就是示例 SVG 里stroke-width2.9大量出现的原因源码在 teal3d.mjs 的slab()中实现2 * lw 0.5 2.9。分面着色一阶色调永不用渐变每种部件的顶/前/左/右面各有固定色规则如下SKILL.md 原文表格部件顶盖前、左、后右面主体白白teal#36c3b0浅色件键、UI 卡白pale#d8f2edmid#7fd8ca强调件按钮、分支圆盘tealteal dark#299c96deep#0e4a48硬币数据令牌palemidteal强调硬币徽章、计数tealteal darkdeep小型凹槽插座、井开口壁 teal dark地板 mid大型开放凹槽托盘超过顶面四分之一开口壁 mid地板 pale这套按朝向取色的机制在源码中由sideKey()teal3d.mjs实现法向量 z0.62 判为上up再按方位角把侧面切成 front/right/back/left 四个朝向solid()据此为每段可见侧面 run 填色并在 run 之下先垫一块基色填充防止 2 倍放大时侧面颜色交界处出现 1px 灰缝这也是 craft.md 的高清检查项。字形与高光条字形青色面上用白色宽 2.8–5白色/浅色面上用 deep 或 ink宽 2.4–2.8一律圆头线帽圆角连接平印在平面上的细节如井底标记是带 1.0–1.1 ink 描边的青色圆盘或圆角方加白色字形高光条两段短划一长一短间隙约为边长的 6%宽 2.2小件 1.8–1.9圆头画在白色前面上边缘下约 8 单位处色用 pale#d8f2ed青色面上改用 teal 或 mid。每面最多一条整卡最多四条。源码对应streak()teal3d.mjs默认两段比例为[0, 0.78]与[0.84, 0.95]。阴影永远硬、永远向右下所有阴影都是平涂#0e4a48形状自描 0.6px 封口防止接缝地面阴影把落点轮廓按SHD [0.78, -0.48]世界单位/每单位高度向右下推出源码常量在 teal3d.mjsfloorShadow()计算凸包悬浮道具用该道具的屏幕轮廓整体偏移(8.5, 7.6) px常量FSH对应liftShadow()teal3d.mjs立于某面上的部件用castShadow(pts3, z, 0.6)把世界点投到它站立的表面如 Git 图圆盘投到瓦片顶面k0.6 与示例一致只对真正接触该表面的部件使用悬浮板投到远处地面会变成一条细长暗条。角色塑造一个实体对象不要散件这套风格没有人物、手、脸主体对象顶替了它们的位置四条塑造原则一个实体对象主题必须是一个可触摸的物理物瓦片、鼓、键盘壳。本质是图表的想法Git 图、流水线要架在或嵌入一个实体上绝不能散成一地零件——Git Merge 第一版就是散落的环和管只得了 7 分把同一张图装进一块厚白瓦片后升到 8 分。真实厚度主体高 28–40 单位键与卡 8–14硬币 5.5板块 7–8圆角半径主体 18–24键与卡 4–9。正面细节就是产品细节一条高光条、一个灰标签胶囊26–30 × 4.4半径 2.2、一个靠近顶沿右前方的青色 LED4.6–5 圆0.8 描边。把平面形状贴到深度为 D 的盒体正面上时用pr([x, -D / 2 - 0.05, z])映射 (x, z) 点贴到顶沿用pr([x, y, H 0.01])。给泛型形状一个身份特征普通圆角盒只读作一个盒子必须加能命名对象的那一个特征——键帽之于键盘、凹槽之于数据库鼓、指槽之于信件托盘scoop()、卡槽之于读卡器。装饰与道具悬浮件、星光与弧线刻度悬浮额外件 2–4 个每个都是同一投影下的小实体倾斜 UI 卡约 84–114 × 50–58厚 8–9向后倾斜 28°、硬币半径 17–19面上有数字或图标、立式板块盾牌、云朵、信封深 7–8。每个都投自己的硬阴影偏移 8.5, 7.6或在下方留一个小地面椭圆半径 10–17星光每卡 3 个deep teal 的四点凹星一个大号6–7配一个小号3.6–5距它 12–16px放在某个额外件旁另一侧额外件旁再放一个单独的小号4–5弧线刻度 0–3 条20–40° 短弧贴在悬浮件半径 7–9 处宽 3.4–3.6pale-mid 或 teal语义是它刚动过——Backup 卡 0 条Command K 在弹起的两个键周围有 3 条卡片上的 UI 内容4.4 高半径 2.2 的灰条一条 teal 高亮行半径 4–6配白条半径 4 的 teal 小方图标配白色字形永不出现人物、植物、作为背景涂鸦的轮廓云、地面线、整场景平台、文字标签、光晕。源码中spark()与arc()是屏幕空间函数teal3d.mjs在card()完成整体居中后、以卡片坐标系放置因此不参与包围盒计算。构图480×360 的黄金位置背景一个无rx的方形满幅rect width480 height360 fill#ebebeb整组主体、阴影、额外件以包围盒中心 (240, 181) 居中宽度占卡58–90%高度占58–75%四边留白至少 30px主体本身约占卡宽的 55%主体略低于中心额外件绕行于左上、右上、左侧空隙保证没有象限空置、任何东西不碰到主体轮廓额外件错落不同高度一个高、一个与主体沿齐平三个同一高度的额外件排成一行会读作工具栏而非散点包围盒包含所有额外件每移动一个额外件向外主体就会因重新居中而缩小——card()每次移动后打印宽度百分比保持在 90% 及以下硬地面阴影属于剪影的一部分在底座右下方延伸 20–60px是对象锚地每个示例文件的结构固定为rect idP-bg→g idP-scene transformtranslate(TX TY)装载所有投影内容→g idP-decor星光与弧线卡片坐标。card()源码在 teal3d.mjs。技术内核teal3d.mjs 的五件武器所有技法都来自scripts/teal3d.mjs源码全文零依赖、完全确定性——同样的输入永远得到同样的 SVG这对 Agent 可重复生产至关重要。相机全场景只用一个正交相机makeCam({ TH: -25, PH: 36, S })S取 0.84–1.05 缩放。世界坐标约定x 指向屏幕右下y 远离观察者右上z 向上因此盒子显示顶面、长正面法向 -y左下与短右面法向 x右下。不要手画大概等距的盒子——面会偏离平行整套风格就崩了。投影实现见 teal3d.mjs所有投影点收集进cam.BOX供card()居中。实体与板块solid({ fr, r0, z0, r1, z1, col })在两个环rrect/circle之间拉伸并按键朝向分色键帽就是给一个更小的顶环slab({ fr, pts, depth, face, side })拉伸任意平面轮廓盾、云、信封并自带.shadow()mat(fr, z)把平面 2D 图案映射到面上g transform${mat(fr, z)}…字形…/g。solid()的完整实现见 teal3d.mjs。硬阴影四连见上文四种阴影的用法代码块顺序是地面阴影 → 主体 → 面细节 → 凹槽 → 凹槽内零件后到前→ 每个额外件先阴影后本体 → 装饰SKILL.md 的 Draw order。凹槽与井recess({ ring, z, depth, id })在顶面开一个口teal-dark 壁、mid 地板、裁剪大托盘传wall: C.mid, floor: C.palewell.onFloor(art)把图案裁剪到可见地板坐在里面的零件在其后按dot(centre, cam.V)后到前绘制scoop({ xa, xb, depth, y0, y1, zTop })在前壁上切一道浅弧露出地板色、内面按朝向规则取色、两侧边缘上墨teal3d.mjs。装饰spark(x, y, size)与arc(cx, cy, r, a0, a1)放在card({ prefix, scene, BOX, decor })移交的位移后包围盒锚点上。圆环torus().piece()与扫掠管tube()用于环和管道先画环的后半再画穿过它的零件最后画环的前半。当管轮廓自交时工具会打印[fold]警告把管缩短或加粗直到消失自交检测selfX与解缠untangle见 teal3d.mjs。常见失败模式评审复盘SKILL.md 总结了 12 条由实战与自测得出的失败模式是产出质量的最短教训清单散件读作图表而非 spotGit Merge 7→8 分案例青色正面属于另一套风格Command K 早期青色机壳正面被否决最终正顶白、仅右侧青太薄的阴影读作描边而非投影Backup 的地面阴影抛光时放大约四分之一确保最宽处 ≥15px两个方向的阴影破坏光照——所有阴影必须只向右下永远不要为了平衡版式镜像一个侧色之间出现发丝接缝——保留solid内置的基色填充倾斜面上的 UI 描边被剪切变形——加vector-effectnon-scaling-stroke管道轮廓打环成燕尾——减小弯度或半径装饰杂乱——背景轮廓云已被砍掉装饰就是三个星光加至多三条弧线大青色洞把主体变成青色Inbox Zero 自测——大型凹槽要逐级变浅壁 mid、地板 pale普通容器不自我介绍自测的信件托盘——前壁切指槽后 1 倍尺寸下才读出信件托盘悬浮板的投影变成游离暗条——悬浮件一律用 (8.5, 7.6) 屏幕偏移额外件碰到主体——额外件含阴影与主体剪影之间至少留 12px 灰。三个出厂示例每种技法的实物标本Command Kcommand-k.svg键盘壳带内嵌键槽⌘ 键teal与 K 键pale浮在空插座上方命令面板卡斜悬其上。展示凹槽、小顶环键帽、作为阴影的插座、倾斜 UI 卡Git Mergegit-merge.svg厚白瓦片驮着方条 Git 图青色分支拱起穿过升起的提交圆盘并入合并圆盘。展示投在瓦片顶面并被裁剪的阴影、提交圆盘、PR 卡、带地面椭圆的提交硬币Backupbackup.svg三盘数据库鼓套救生圈torus 分白/青两段配盾牌勾选板块、云上传板块与两枚数据硬币1 和 0。展示带凹槽的圆柱、前后两半绘制的圆环、投在鼓上的阴影、立式板块。完整工作流从 Brief 到交付在 skill 文件夹下运行命令WORK是任意工作目录产物为$WORK/card.svgid 前缀xx-Brief写下主题与承载它的唯一对象一行说明——主体对象、会动/会翘起的零件、2–4 个支撑主题的额外件。如果主题是流程找出装下它的物理对象搭建生成器mkdir -p $WORK cp scripts/teal3d.mjs scripts/starter.mjs $WORK/ mv $WORK/starter.mjs $WORK/gen.mjs把P改成你的前缀并改labelstarter.mjs 自带一个完整的极简示例卡注释了每一步技法与其绘制顺序只堵主体仅用solid和slab搭轮廓不画细节渲染后在 1 倍尺寸下检查剪影与阴影可读性细化画面细节、凹槽、翘起件再画额外件与装饰严格遵守上文 Draw order渲染无头、2 倍node $WORK/gen.mjs $WORK/card.svg node scripts/render.mjs $WORK/card.svg $WORK/card.png与示例并排node scripts/render.mjs --sheet $WORK/sheet.png examples/*.svg $WORK/card.svg问同一只手、同一系列面颜色、描边粗细、阴影方向与大小、白色占比放大检查从矢量重渲染绝不放大位图node scripts/render.mjs $WORK/card.svg $WORK/z1.png --zoom x,y,w,h --scale 8查色面交界折痕、凹槽边缘、面上字形、每条阴影边缘评审对照 references/craft.md 的五项评分风格保真、角色绘制、姿态与实体感、构图、主题清晰与工艺各 0/1/2 分标准 8/10其中第 2 项在本风格中变成主体对象的构造厚度、圆角、产品细节、零件可信度。修复重来预期三轮以上Lintnode scripts/lint.mjs $WORK/card.svg --prefix xx- --palette style.json修掉每个 ERROR本风格要求调色板零 WARN。references/craft.md全文还持有适用于所有插画风格的文件契约单文件自包含 SVG、viewBox0 0 480 360、禁style/class/script/image/foreignObject、短 id 前缀防冲突、满幅背景无rx、原创性规则禁止描摹参考图、禁止复用其姿态/道具/版式与评审纪律同一渲染两位评委取低分、对照只显示一个版本、修手只动手。评审循环同样是无头渲染绝不打开可见浏览器窗口检查卡片。交付前验证清单Agent 自查SKILL.md 末尾的勾选清单即最终验收标准逐项对照背景是单个无rx的#ebebeb满幅矩形卡片边缘无其他东西恰好一个主体对象无人物、植物、平台、地面线每面平涂主体顶/前白、右侧青浅色件浅侧 mid 右侧所有描边#0e3f3d1.2UI 1.0–1.1LED 0.8无其他颜色描边每个阴影平涂#0e4a48且向右下地面阴影最宽处 ≥15px每个悬浮额外件自带同向硬阴影或地面椭圆2–4 个额外件、3 个星光一大一小成对 单个、0–3 条弧线组包围盒约在 (240, 181) 居中宽占 58–90%留白 ≥30px每个白色正面一条高光条长划 短划pale2.2字形与数字为圆头描边路径无text8 倍放大下侧色交界无发丝缝、填充与描边无缝隙只出现 11 个调色板颜色lint.mjs --palette style.json无 WARN1 倍尺寸、无说明文字也能读出主题。对 Agent 的最终提示来自 demo/PROMPT.md示例Use $illustration-teal-spot to draw a 480x360 SVG card of a white password vault with its teal dial turned, for an empty state about saved passwords.——一句话即可唤起这套完整的、可验证的风格契约。赞分享【免费下载链接】SkillsAgent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents项目地址https://gitcode.com/gh_mirrors/skills48/Skills点击查看免费下载相关推荐Skills 仓库 illustration-grainy-gouache 实战指南用提示词契约生成水粉颗粒风 SVG 插画卡片Skills 仓库 illustration grainy gouache 实战指南用提示词契约生成水粉颗粒风 SVG 插画卡片 本指南围绕 Skills 开Skills 仓库 illustration-halftone-line 技能实战用 Halftone 点阵线风格生成 480×360 SVG 插画卡片Skills 仓库 illustration halftone line 技能实战用 Halftone 点阵线风格生成 480×360 SVG 插画卡片 本指Skills 仓库 illustration-one-line 技能实战用 $illustration-one-line 从零生成单线插画卡片Skills 仓库 illustration one line 技能实战用 $illustration one line 从零生成单线插画卡片 导读 illu上一篇深入解析 ultralytics.models.yolo.model 模块YOLO 与 YOLOWorld 统一模型入口下一篇Odin Book 最终项目实战用 Node.js、Express 与 PostgreSQL 从零构建社交媒体网站创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
