CommunityImagegithub.com

Éditeur vectoriel Pixerate

Comment dessiner et modifier des illustrations vectorielles dans l'éditeur vectoriel Pixerate via ses commandes vector.* – ajout de formes et chemins SVG, texte, symboles, contraintes CAD, plans de travail, connecteurs, remplissages et contours superposés, effets, masques, dégradés, opérations booléennes, export SVG et plus encore.

Qu'est-ce que Éditeur vectoriel Pixerate ?

Cette compétence décrit l'utilisation complète de l'éditeur vectoriel Pixerate à travers ses commandes `vector.*`, destinée aux agents IA qui créent ou modifient des illustrations vectorielles, des icônes, des logos, des glyphes ou des badges. Elle couvre la création et l'édition de nœuds (chemins, texte, instances, groupes), les styles d'apparence (remplissages, contours, pinceaux, dégradés, effets), les masques, les contraintes CAD, les connecteurs, les symboles, les blocs de texte, les plans de travail et les cadres avec contraintes de redimensionnement, ainsi que les opérations booléennes et le Pathfinder. La compétence met l'accent sur un flux de travail non destructif utilisant des effets en direct avant de les figer, le traitement par lots avec `run_commands` pour des actions atomiques, et des bonnes pratiques comme l'utilisation de cadres pour les mises en page adaptables et de symboles pour les éléments réutilisables. Elle prend en charge l'importation et l'exportation aux formats SVG, PDF et Lottie, et fournit des commandes pour la vectorisation d'images, le texte, la gestion des contraintes et les réseaux de déformation. La référence complète comprend des tableaux détaillés de toutes les commandes disponibles pour la lecture, la création, le style, l'édition de texte, le travail sur les symboles, les masques, les contraintes, les connecteurs, les calques, les transformations, l'exportation et les opérations avancées.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Pixerate/editor/tree/HEAD/packages/core/skills/pixerate-vector

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait Éditeur vectoriel Pixerate ?

Le document vectoriel est un plan de travail (largeur x hauteur en unités du document, y vers le bas) contenant une arborescence de nœuds : des nœuds path (un ou plusieurs sous-chemins d'ancres Bezier, avec remplissage, contour et paramètres de contour), des nœuds text (une chaîne définie comme texte ponctuel, texte de zone ou le long d'un chemin, peinte avec les mêmes remplissages et contours), des nœuds instance (une copie placée d'un symbole) et des nœuds group. Les groupes peuvent également être des booléens en direct, des fondus en direct, des groupes de masques, ou porter une pile d'effets en direct. Chaque commande est une commande vector.* exécutée avec run_command / run_commands (voir pixerate-agent-tools pour le traitement par lots avec les références "$0.id", atomic: true et les codes d'erreur).

  • IDs de nœuds proviennent de vector.list et de ce que les écritures retournent ({ id }, { ids }).
  • Ancres sont { nodeId, subpath, index } : numéro de sous-chemin dans le chemin, puis numéro d'ancrage dans le sous-chemin, tous deux à partir de 0. Les commandes qui prennent ancres par défaut aux points sélectionnés avec l'outil direct ; celles qui prennent ids par défaut à la sélection.
  • Peinture est une couleur CSS, null pour aucune, ou un objet dégradé { type, stops: [{ offset, color, opacity?, midpoint? }], ... }.
  • Apparence : un chemin peut empiler plusieurs remplissages et plusieurs contours (de bas en haut ; tous les remplissages se dessinent sous tous les contours), chacun avec sa propre opacity, blendMode et visible, et chaque contour avec sa propre largeur, alignement, pointillés, extrémités, jointures, pointes de flèche et profil, ou un trait de pinceau (vector.addBrushstroke, vector.setBrushstroke, vector.listBrushes) peint le long du contour avec un pinceau sec ou humide, un Mixer Brush, un effet de maculage ou de fusion, une peinture dégradée, une gigue aléatoire et un grain de papier. Les calques sont adressés par index dans leur pile, 0 en bas. fill / stroke et les paramètres de contour de vector.setStyle sont des raccourcis pour le calque supérieur ; null efface la pile. Tout nœud peut également avoir un blendMode et des filtres (ombre portée / interne, lueur externe / interne, flou de calque, plume), qui ne modifient jamais la géométrie.
  • Masques : le premier enfant (en bas) d'un groupe de masques est son masque ; les enfants au-dessus n'apparaissent qu'à l'intérieur du contour du masque (clip), ou là où il est lumineux (luminance) ou opaque (alpha). invert échange visible et caché. vector.list donne à un groupe de masques un mask { type, invert, maskId, contents, enabled } ; un masque caché (enabled: false) ne masque rien.
  • Texte a une police font de base (famille, graisse, italique, taille, crénage, interlignage, décalage de ligne de base, souligné, barré), des séquences facultatives qui remplacent les champs sur des plages (start / end en unités de code UTF-16, plus un fill de plage), un style paragraph et un frame : point (x, y de la première ligne de base), area (une boîte dans laquelle il s'enroule) ou path (une ligne qu'il suit).
  • Symboles sont des éléments réutilisables conservés avec le document (vector.listSymbols), dessinés par des nœuds instance via une transformation qui, contrairement à celle des autres nœuds, peut mettre à l'échelle et incliner. Modifier un symbole (vector.editSymbol … vector.exitSymbolEdit) modifie chaque instance.
  • Contraintes (de type CAD) maintiennent des relations géométriques et des dimensions entre ancres, segments et chemins ronds ; elles sont résolues après chaque édition, de sorte que les mouvements ultérieurs les respectent.
  • Cadres sont des groupes avec un rectangle frame (vector.listFrames) : ils dessinent un arrière-plan, découpent leurs enfants et se sélectionnent par leur rectangle ; les cadres de niveau supérieur sont des plans de travail. Lorsqu'un cadre est redimensionné, ses enfants suivent leurs contraintes de redimensionnement (left horizontal / right / leftRight / center / scale, top vertical / bottom / topBottom / center / scale) au lieu d'être mis à l'échelle.
  • Connecteurs sont des chemins ouverts avec un connector dont les extrémités sont collées aux sites d'autres objets (le milieu d'un côté, ou le centre) ; ils sont reroutés après chaque édition, de sorte qu'ils suivent ce qu'ils connectent. Une extrémité libre reste là où elle est.
  • Groupes de symétrie dessinent leurs enfants ainsi que des copies réfléchies ou pivotées. Ajoutez de l'art à un avec parentId sur vector.addShape / vector.addPath ; seuls les originaux sont stockés et édités.
  • Les coordonnées sont en unités du document. Un nœud pivoté stocke sa géométrie dans son propre espace : le bounds que vector.list rapporte est dans l'espace du document, son d est celui du nœud lui-même.

Les détails des paramètres (champs de dégradé, paramètres d'effet, profils de largeur, enveloppes) se trouvent dans references/commands.md.

Compétences de flux de travail

Pour ces tâches, chargez également la compétence de flux de travail : elle contient la méthode, les vérifications entre les étapes et les pièges, et utilise les commandes ci-dessous.

  • pixerate-vector-icon-set : icônes sur une grille, un seul contour et style, nettes, sous forme de symboles et SVG.
  • pixerate-vector-logo : marques à partir de booléens, une composition, variantes de couleur, fichiers de livraison avec contours.
  • pixerate-vector-illustration : blocage, dégradés et remplissages empilés, masques, fondus, ombres.

Méthode de travail

  1. Lire. vector.list donne la taille du plan de travail, chaque nœud en profondeur d'abord (id, type, nom, limites, rotation, remplissage, contour, d, effets, fondus et informations booléennes, piles, mode de fusion et filtres) et la sélection. vector.getAppearance donne les piles complètes et les filtres d'un seul nœud.
  2. Planifier en calques. Décidez des formes, de leur empilement (de bas en haut) et de leur regroupement avant de dessiner. Commencez par les primitives (vector.addShape) et combinez-les ; écrivez du d brut uniquement pour les courbes que les primitives ne peuvent pas créer.
  3. Écrire par lots. Placez une séquence de construction dans un seul run_commands avec atomic: true et un label, en chaînant les ids ("$0.id", "$last.ids"), de sorte qu'il s'agisse d'une seule étape d'annulation qui s'applique en tout ou rien.
  4. Préférer le direct, développer en dernier. Utilisez des booléens live: true, des effets de chemin, des enveloppes, des coins en direct et des fondus pendant la conception ; figez avec vector.expandAppearance, vector.expandBlend ou vector.outlineStroke uniquement lorsque l'utilisateur a besoin de chemins simples.
  5. Vérifier. vector.list à nouveau : limites là où vous les vouliez, aucun nœud errant, noms sensés. vector.exportSvg donne le balisage final ; examinez-le, ou rendez-le si possible, avant de le remettre.

Bonnes pratiques

  • Cadres pour tout ce qui est redimensionnable. Construisez des écrans, des cartes, des boutons et des bannières à l'intérieur d'un cadre (vector.addFrame ou vector.frameSelection), définissez les contraintes de chaque enfant avec vector.setResizing (arrière-plans et séparateurs leftRight, icônes épinglées à leur coin, titres center), puis redimensionnez avec vector.setFrame pour produire d'autres tailles à partir d'un seul design. Exportez chaque plan de travail avec vector.exportFrameSvg.
  • Symboles pour les répétitions. Lorsque le même élément apparaît plusieurs fois (icônes dans un ensemble, arbres dans une scène, puces, un logo), créez-le une fois et placez des instances (vector.makeSymbol, puis vector.placeSymbol avec x / y ou un transform), de sorte qu'une seule modification en isolation les change tous. Donnez à chacun un nom clair. Utilisez vector.setInstanceOptions fill / stroke pour les variantes de couleur et hidden pour supprimer une partie, plutôt que de détacher ; ne détachez que lorsqu'une copie doit diverger définitivement.
  • Texte. Utilisez le texte ponctuel pour les étiquettes et les titres, le texte de zone (largeur, hauteur) pour tout ce qui doit s'enrouler, le texte sur un chemin pour les badges et les sceaux. Vérifiez overflow dans le résumé que chaque écriture de texte retourne : les lignes ou caractères cachés signifient que la boîte ou le chemin est trop petit. Gardez une ou deux familles par design (vector.listFonts liste ce que le moteur de composition a ; une famille manquante s'affiche dans un repli et apparaît dans missingFonts). Stylisez les plages avec vector.setTextStyle plutôt que de diviser le texte en nœuds séparés, de sorte qu'il s'édite encore comme un seul paragraphe. Créez des contours uniquement pour l'art final ou les logos qui ne doivent pas dépendre des polices ; conservez une copie en tant que texte s'il peut changer.
  • Chemins, contours, traits de pinceau, booléens, dégradés, piles, masques, ombres, connecteurs, contraintes et texte vertical : lisez d'abord references/best-practices.md.
  • Non destructif d'abord. Les booléens en direct (vector.boolean avec live: true), les effets de chemin et les enveloppes gardent les opérandes modifiables. Un booléen destructif ou un Pathfinder remplace ses entrées ; faites-le en dernier, et seulement lorsque demandé pour une sortie plate.
  • Regroupement et dénomination. Regroupez les parties d'un objet (vector.group avec un name), nommez les chemins qui comptent (name lors de l'ajout), et gardez l'arborescence peu profonde.
  • Hygiène SVG. Exportez avec precision 2 ou 3 (défaut 3) ; plus élevé uniquement pour les très petits plans de travail. Développez les effets, les fondus et les contours à largeur variable avant de remettre du SVG à des outils qui ne lisent pas les attributs data-vector-* de Pixerate ; les autres lecteurs voient l'apparence dessinée mais pas la source en direct.

Commandes

Lire

CommandeUtilisez-la pour
vector.listLire le document : { largeur, hauteur, nœuds, sélection, outil }. Chaque nœud a id, type, nom, profondeur, bounds dans l'espace du document, rotation (degrés dans le sens horaire), visible, verrouillé, sélectionné, et pour les chemins remplissage, contour, strokeWidth et d ; les groupes listent children, blend, liveBoolean, effects, mask. Les bounds d'un groupe de masques sont son résultat masqué. Appelez-la en premier et après chaque lot.
vector.shapeBuilderFacesLister les régions que les chemins donnés divisent le plan : données de chemin, aire, un point à l'intérieur de chacun et les ids des chemins le remplissant. Utilisez les points avec vector.shapeBuilder.
vector.exportSvgObtenir le document en tant que balisage SVG autonome ({ svg }) ; precision de 0 à 8 décimales (défaut 3).
vector.exportPdfObtenir un PDF vectoriel prêt à imprimer en tant que data URL base64 : une page, ou une par plan de travail avec pages: "artboards". Retourne { pdf, pages, bytes, notes } ; vérifiez notes (les filtres, les masques d'opacité et le texte sans polices chargées sont omis).
vector.exportLottieObtenir le document (ou ids) en tant que JSON Lottie pour les lecteurs d'animation : les effets de chemin restent en direct en tant que modificateurs Lottie, les dégradés en tant que remplissages de dégradé. Retourne { lottie, notes } ; lisez notes pour ce qui a été approximé (filtres, dégradés de maillage, texte sans contours).

Créer et supprimer

CommandeUtilisez-la pour
vector.traceImageTransformer un PNG (data URL) en chemins vectoriels dans un groupe : mode threshold pour l'art monochrome (logos, scans, silhouettes ; channel: "alpha" pour les découpes), mode color pour un chemin empilé par couleur (colors 2–32). Augmentez tolerance pour moins d'ancres, cornerRoundness 0 pour des polygones nets. Placez-le avec x, y, largeur. Retourne { id, paths } ; vérifiez les comptes subpaths et simplifiez ou supprimez les taches après.
vector.mosaicImageStyliser un PNG en tuiles de mosaïque (cell px, shape square / circle, gap, colors) : pixel art, fresques en tuiles. Retourne { id, paths }, un chemin composé par couleur.
vector.halftoneImageStyliser un PNG en points de trame sur un écran tourné (cell, angle, couleur d'encre color ou null pour les couleurs de l'image) : effets bande dessinée et pop art, effets d'impression.
vector.lowPolyImageStyliser un PNG en triangles low-poly (cell, jitter, seed, colors) : portraits et arrière-plans géométriques.
vector.hatchImageStyliser un PNG en lignes de gravure qui gonflent là où il est sombre (cell espacement, angle, couleur d'encre color) : aspects billet de banque, gravure sur bois et art linéaire.
vector.addPathByDimensionsDessiner un chemin comme un utilisateur CAD le tape : depuis start, chaque étape { length, angle } (degrés dans le sens antihoraire sur la page : 0 à droite, 90 en haut), { dx, dy } ou { x, y } ; closed relie les extrémités. Utilisez-le pour les contours techniques exacts (supports, plans d'étage, longueurs et angles donnés) au lieu de calculer des coordonnées à la main. Retourne { id, anchors }.
vector.addShapeAjouter un kind rect, ellipse, polygon (sides, au moins 3), star (points, innerRatio 0 à 1) ou line à x, y, largeur, hauteur (tous requis ; pour une ligne, largeur et hauteur sont le décalage de la fin). cornerRadius et cornerKind donnent des coins en direct ; tout champ de style et name s'appliquent. Utilise le style par défaut de l'éditeur pour tout ce qui n'est pas donné. Retourne { id }.
vector.addPathAjouter un chemin à partir de données de chemin SVG d (M, L, H, V, C, S, Q, T, A, Z absolus ou relatifs ; les arcs et quadratiques deviennent des cubiques) en unités du document, avec name et champs de style ; le style non défini provient des valeurs par défaut de l'éditeur. Échoue lorsque d n'a pas de points. Retourne { id }.
vector.importSvgAjouter les formes d'un balisage SVG svg sur le dessus du document, ou remplacer le document avec replace: true. Lit les chemins, les formes de base, les groupes, les transformations, les dégradés linéaires et radiaux, les références clip-path / mask (en tant que groupes de masques), <text> (en tant que texte ponctuel : contenu, police, ancre et remplissage) et <use> (en tant qu'instances de symboles créés à partir de ce à quoi ils se réfèrent) ; ignore les images et les filtres étrangers.
vector.importLottieAjouter une frame d'une animation Lottie (objet ou texte) en tant que groupes modifiables, ou remplacer le document (replace: true). Les modificateurs deviennent des effets en direct. Retourne { ids, notes }.
vector.deleteSupprimer des nœuds (ids).
vector.renameRenommer le nœud id en name (son nom dans le panneau Calques). Nommez ce que vous faites par ce que c'est ; renommez les calques de l'utilisateur uniquement lorsqu'on vous le demande. Retourne { id, name }.

Style

CommandeUtilisez-la pour
vector.setStyleDéfinir fill, stroke, strokeWidth, strokeLinecap (butt, round, square), strokeLinejoin (miter, round, bevel), strokeDasharray, fillRule (nonzero, evenodd), strokeAlign (center, inside, outside ; formes fermées uniquement), startArrow / endArrow (triangle, arrow, open, circle, square, bar, ou null), arrowAlign (extend, tip), startArrowScale / endArrowScale (multiples de la largeur du contour, par défaut 1), strokeWidthProfile sur ids. Les groupes s'appliquent à chaque chemin à l'intérieur. Passez au moins un champ.
vector.setGradientModifier le dégradé du remplissage (target par défaut) ou du contour ids : type (linear, radial, conic, reflected, diamond), stops, angle (degrés, 0 en haut, dans le sens horaire), cx / cy / r, start / end / largeur / focal explicites, units, spread, interpolation (srgb par défaut, linear, oklab), smoothness, strokeMode, aspect, reverse. Les champs manquants conservent leur valeur ; une couleur unie devient un dégradé d'elle-même au blanc. Retourne le nœud mis à jour.
vector.addFillAjouter un calque de remplissage (paint, opacity, blendMode, visible) au sommet de la pile pour ids. Retourne l'index.
vector.addStrokeAjouter un calque de contour (paint, width, opacity, blendMode, visible, strokeAlign, dasharray, linecap, linejoin, startArrow, endArrow, startArrowScale, endArrowScale, arrowAlign, strokeWidthProfile) au sommet de la pile pour ids. Retourne l'index.
vector.setAppearanceLayerModifier les champs d'un calque existant (index dans la pile, target fill ou stroke) sur ids.
vector.removeAppearanceLayerSupprimer le calque à index (ou le calque supérieur si omis) de ids.
vector.setFilterAjouter ou mettre à jour un effet de filtre sur ids : type (dropShadow, innerShadow, outerGlow, innerGlow, blur, feather), color, opacity, blur, offsetX, offsetY, spread, knocksOut, noise.
vector.removeFilterSupprimer tous les filtres de ids.
vector.addBrushstrokeAjouter un trait de pinceau à ids : brush (nom de la cellule de pinceau de vector.listBrushes, ou un nom exact), paint, width, opacity, blendMode, fit (center, stretch, fill). Le pinceau s'applique au chemin ; les paramètres dynamiques (jitter, rotation, opacity sur le coup) peuvent être définis avec vector.setBrushstroke.
vector.setBrushstrokeModifier le trait de pinceau à index sur ids : brush, paint, width, opacity, blendMode, fit, et les paramètres dynamiques.
vector.listBrushesLister les cellules de pinceau disponibles : { category, name, paint }. Utilisez le name pour vector.addBrushstroke.

Texte

CommandeUtilisez-la pour
vector.addTextAjouter un nœud de texte point (x, y), area (x, y, largeur, hauteur) ou path (pathId, startOffset). Contenu text, font (famille, weight par défaut 400, italic booléen, size en unités du document, tracking, leading), paragraph (align left/center/right/justify, indent), frame type. Le texte de zone a besoin de largeur/hauteur ; s'il est trop étroit, lisez overflow.
vector.listFontsLister les polices chargées : { family, styles: [{ weight, italic }] }.
vector.setTextStyleAppliquer les champs de style de police sur une plage de start/end (unités de code UTF-16) ; remplace les champs de base. Utilisez-le pour les plages en gras ou colorées plutôt que de diviser le texte.
vector.createOutlinesConvertir les nœuds de texte ids en chemins (courbes de contour). Chaque caractère est un chemin composé, préservant l'apparence.
vector.getTextPathObtenir les ancres du chemin de texte pour l'édition (pathId et ancre).
vector.setPathTextAttacher le texte id au chemin pathId avec un startOffset optionnel.

Symboles

CommandeUtilisez-la pour
vector.makeSymbolTransformer les nœuds ids en un symbole nommé : name (obligatoire, unique), exportName, guideLayer. Retourne { id } (le symbole) ; les nœuds originaux deviennent une instance.
vector.addSymbolAjouter un symbole nommé (name de vector.listSymbols) au document, placé avec x, y, width, height, transform (objet matrice 2D). Retourne { id } de l'instance.
vector.placeSymbolAlias de vector.addSymbol ; place un symbole nommé. Retourne { id }.
vector.editSymbolEntrer en mode d'édition de symbole pour la source de l'instance id. Après cela, les commandes modifient le symbole ; vector.exitSymbolEdit applique les modifications à toutes les instances.
vector.exitSymbolEditQuitter le mode d'édition de symbole. Toutes les instances se mettent à jour.
vector.listSymbolsLister les symboles : { name, id, bounds, instanceCount }.
vector.setInstanceOptionsRemplacer fill, stroke, opacity, blendMode, visible, hidden (tableau de noms de calques enfants à masquer) sur l'instance id.
vector.detachInstanceDétacher l'instance id du symbole : les nœuds deviennent des copies locales indépendantes.

Masques et découpage

CommandeUtilisez-la pour
vector.makeMaskCréer un groupe de masques à partir de ids : type clip/luminance/alpha, invert. Le premier enfant est le masque.
vector.setMaskModifier les propriétés du masque du groupe id : type, invert, enabled.
vector.releaseMaskDissoudre le groupe de masques : les enfants sont libérés en tant que nœuds indépendants, non masqués.

Contraintes

CommandeUtilisez-la pour
vector.addConstraintAjouter une contrainte : type (coincident, concentric, tangent, perpendicular, parallel, equal, horizontal, vertical, fix, distance, angle, radius, diameter), arguments spécifiques au type (ancres, segments, chemins, valeur). Retourne { id }.
vector.listConstraintsLister les contraintes sur ids (ou toutes si ids est omis).
vector.deleteConstraintSupprimer la contrainte id.
vector.solveConstraintsRésoudre manuellement toutes les contraintes (résolu automatiquement après chaque édition).

Connecteurs

CommandeUtilisez-la pour
vector.makeConnectorMarquer le chemin id comme connecteur ; attache ses extrémités avec startAttachment/endAttachment { siteId, siteType }. siteType : center, left, right, top, bottom, midLeft, midRight, midTop, midBottom. Retourne { id }.
vector.setConnectorModifier un connecteur : attachements, routing (direct, orthogonal, bezier), gap, padding.
vector.listConnectorsLister les connecteurs : chemins avec des extrémités attachées.
vector.releaseConnectorSupprimer l'état de connecteur du chemin id, le laissant comme un chemin ordinaire.

Calques et ordre

CommandeUtilisez-la pour
vector.groupGrouper ids en un groupe nommé (name). Retourne { id }.
vector.ungroupDissoudre le groupe id (les enfants sont libérés).
vector.sendToBack / vector.sendBackward / vector.bringForward / vector.bringToFrontRéordonner ids dans leur parent.
vector.lock / vector.unlockVerrouiller/déverrouiller ids (verrouillé ne peut pas être sélectionné ou modifié visuellement).
vector.hide / vector.showMasquer/afficher ids.

Transformer

CommandeUtilisez-la pour
vector.moveDéplacer ids de dx, dy (unités du document).
vector.rotatePivoter ids de angle degrés autour du centre des limites du nœud, ou d'un center { x, y }.
vector.scaleMettre à l'échelle ids d'un facteur sx, sy autour du centre des limites du nœud, ou d'un center.
vector.transformAppliquer une matrice de transformation matrix (objet 2D { a, b, c, d, e, f }) à ids ; remplace la transformation actuelle.
vector.flipRetourner ids horizontalement (horizontal: true), verticalement (vertical: true), ou les deux.
vector.alignAligner ids : align (left, center, right, top, middle, bottom), et/ou distribute (horizontal, vertical) avec distributeSpacing optionnel.

Exporter

CommandeUtilisez-la pour
vector.exportSvg(Voir ci-dessus) Exporter en SVG.
vector.exportPdf(Voir ci-dessus) Exporter en PDF.
vector.exportLottie(Voir ci-dessus) Exporter en Lottie.
vector.exportFrameSvgExporter le plan de travail (ou cadre) id en SVG isolé.
vector.exportPngPixeliser l'art à une resolution (ppp) et exporter en PNG (data URL).

Avancé

CommandeUtilisez-la pour
vector.booleanOpérations booléennes en direct : operation (unite, subtract, intersect, exclude, divide, trim), live: true par défaut. Les opérandes sont les ids. Avec live: false, remplace les entrées par le résultat. Retourne { id }.
vector.pathfinderAlias pour vector.boolean ; prend en charge toutes les opérations de Pathfinder.
vector.shapeBuilderRemplir les régions sélectionnées par un point : utilisez les points de vector.shapeBuilderFaces.
vector.paintBucketRemplir une région fermée avec la couleur de color (CSS) ; trouve la région sous le point { x, y } (espace du document).
vector.addPathEffectAjouter un effet de chemin en direct : type (trim, repeater, zigZag, offset), paramètres selon le type. Retourne { id }.
vector.editEnvelopeDéformer les nœuds ids avec une enveloppe : type (warp, freeDistort), points de contrôle, preserve.
vector.addBlendCréer un fondu entre les chemins ids : steps, orientation (align, none), shape (smooth, linear, specific) ; live: true par défaut. Retourne { id }.
vector.expandAppearanceFiger les effets en direct, les traits de pinceau, les enveloppes et les booléens en direct en chemins simples.
vector.expandBlendFiger un fondu en direct en ses étapes de fondu en tant que nœuds séparés.
vector.outlineStrokeConvertir les contours en chemins remplis.

Outils d'ancrage

CommandeUtilisez-la pour
vector.joinJoindre les ancres à anchors (exactement 2) avec une ligne ou en fermant un sous-chemin.
vector.smoothLisser les ancres à anchors (les rend symétriques).
vector.simplifySimplifier les chemins ids : tolerance (unités du document), angleThreshold (degrés). Supprime les ancres redondantes.
vector.knifeCouper les chemins ids le long d'une ligne de start à end (espace du document). Retourne { ids } des nouveaux chemins.
vector.eraserEffacer les parties des chemins ids à l'intérieur d'un rectangle { x, y, largeur, hauteur }.
vector.splitDiviser un chemin en un point d'ancrage (sépare le sous-chemin en deux).
vector.mergeFusionner les sous-chemins dans un seul chemin composé.
vector.addAnchorAjouter un point d'ancrage sur un segment (pathId, subpath, segmentIndex, t 0-1).
vector.deleteAnchorSupprimer l'ancre anchor.
vector.setAnchorDéplacer l'ancre et/ou ses poignées : anchor { nodeId, subpath, index }, point, handleIn, handleOut, type (corner, smooth, symmetric).

Groupes de symétrie

CommandeUtilisez-la pour
vector.makeSymmetryCréer un groupe de symétrie à partir de ids : axis (vertical, horizontal, radial), count (pour radial), center (point).
vector.setSymmetryModifier un groupe de symétrie : axis, count, center.
vector.releaseSymmetryFiger la symétrie en nœuds réels.

Utilitaires

CommandeUtilisez-la pour
vector.measureMesurer la distance, l'angle, la zone, etc., entre des ancres ou des points.
vector.snapAligner les nœuds sélectionnés sur une grille (gridSize, gridStyle).
vector.guidesAjouter/supprimer des guides (lignes droites ou points).
vector.undoAnnuler la dernière action.
vector.redoRefaire la dernière action annulée.
vector.selectDéfinir la sélection : ids (tableau).
vector.deselectDésélectionner tout.

Voir également references/commands.md pour les détails complets des paramètres, et references/best-practices.md pour les conseils sur les flux de travail non destructifs, le texte et les symboles.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Pixerate/pixerate-animation-editor

How to author and edit vector animations (motion graphics, logo reveals, animated icons, explainer scenes, UI micro-interactions) in the Pixerate animation editor through its agent tools - artwork SVG with ids, shots of commands (enter, exit, draw, move, rotate, scale, fade, morph, Smart Animate match, follow a path, pulse, shake, wiggle), easing and springs, stagger, camera, beat and voiceover cues, drivers, reusable clips, checking, rendering frames and contact sheets, and exporting to Flair or Lottie. Use when animation tools such as get_animation, insert_shots or edit_animation are available, or when asked to animate, time, ease, stagger or export vector motion, and provider motion and vector effects (for example Flair) applied to nodes.

Pixerate/pixerate-brushes

How to find, describe, create, change, check and share brushes in the Pixerate brush library through list_brush_presets, describe_brush, create_brush, update_brush, duplicate_brush, remove_brush, check_brush, export_brushes, import_brushes, import_brush_pack, preview_brush, add_brush_source and list_brush_sources - brushes made of facets (kind, medium and variety or tool, tip, marks, dynamics, behaviour, light, motion, colour), image tips and tip grain made from image sources, the built-in presets, and the host profiles that say what the paint editor, image editor, canvas and vector strokes can render. Use when asked to make, design, tweak, save, copy, delete, export, import or check a brush, make a brush from an image (a scanned mark, a leaf, a texture), give a brush grain, bring in a Photoshop .abr or Procreate .brush / .brushset pack, find a brush for a medium (pencil, ink, watercolour, oil, airbrush, highlighter), or make a brush work in another editor.

Pixerate/pixerate-canvas

How to build and edit a Pixerate design canvas or node graph through its agent tools - drawing freehand pen, highlighter and dry-brush strokes (canvas.drawFreehand), annotating with hand-drawn circles, underlines, arrows, brackets, strikes, crosses and ticks (canvas.circle, canvas.arrow), adding, connecting, updating and laying out nodes (canvas_add_node, canvas_layout), reading state with get_editor_state and looking at it with view_editor, reusable components with variants, instances and overrides (create_component, add_variant, set_instance_properties), align, distribute, lock and layer order, shape boolean operations (unite, subtract, offset path, outline stroke), auto layout frames, and keyframe animation with easing and CSS export. Use when working on a canvas, whiteboard, flow chart, node graph, frame, design system, component library, button variants, layout, alignment, z-order or a canvas animation in a Pixerate editor.

Pixerate/pixerate-video-editor

How to edit video projects in the Pixerate non-linear video editor through its agent tools - adding video, audio and image assets, building a rough cut on video and audio tracks, inserting, overwriting, moving, trimming, splitting and ripple-deleting clips, slip, slide and roll edits, lift and extract of a time range, razor cuts across tracks, sync-locked tracks, keyframed opacity, volume and transform, closing gaps, titles and colour clips, fades, volume and speed, crossfade, dip and wipe transitions with handles, J and L cuts, markers, checking the project, adjustment clips over tracks, clip masks, skin-tone protected LUTs, edit plans proposed for review before they apply, provider effects (clip effects, effect clips, effect transitions), rendering frames and contact sheets, and exporting an ffmpeg command or a CMX 3600 EDL. Use when video tools such as get_video_project, add_video_clip or edit_video are available, or when asked to cut, trim, assemble, sequence or export footage on a timeline.

Skills associés