Pour la prochaine image que vous voulez faire, pourquoi commencer avec une toile vierge ?
Dans le passé, lorsque nous utilisions l'IA pour faire du contenu visuel, nous rencontrions souvent un problème :
Le modèle peut dessiner, mais il ne sait pas « pourquoi il dessine ce dessin »
Vous lui donnez un article et il peut générer une belle illustration ; vous lui demandez de dessiner un flux de produit et il peut vous donner une image qui ressemble à un organigramme.
Mais lorsque nous sommes vraiment entrés dans la scène de production de contenu, ce dont nous avons besoin n'est souvent pas « générer une belle image au hasard ».
Mais plutôt :
- Quel type de graphique devrait-il être associé à cet article ?
- Une logique de produit complexe devrait-elle être un organigramme, un diagramme d'architecture ou un diagramme de parcours de l'utilisateur ?
- Comment un article peut-il être divisé en 6 pages de contenu du petit livre rouge ?
- Comment un Markdown peut-il être transformé en un PPT ?
- Comment une histoire devrait-elle être divisée en miroirs continus ?
- Quelles directions visuelles une marque devrait-elle commencer à explorer ?
- Comment le contenu résultant peut-il finalement être livré plutôt que de rester sur une image ?
sur GitHub Design BuddyC'est ce niveau de problème que nous essayons de résoudre.
Il ne s'agit pas d'un outil de dessin d'IA séparé, mais d'un ensemble d'outils pour les créateurs de contenu, les responsables de produit, les développeurs indépendants et les collaborateurs de conception. Agent Skills Toolbox de production visuelle。
De la « conception » au « design ».
La chose la plus intéressante à propos de Design Buddy, ce n'est pas le nombre de modèles qu ' il peut appeler, c'est qu ' il change un flux de travail :
De « dire à l'IA quoi dessiner » à « laisser l'IA comprendre le contenu avant de décider de la façon dont il devrait l'exprimer ».
Par exemple, vous dites :
Faites une couverture publique pour cet article.
Idéalement, il ne devrait pas commencer à générer des images tout de suite, mais devrait d'abord comprendre le sujet de l'article, puis juger de la direction visuelle.
Les exemples donnés dans README sont :
Système de productivité AI / Gestion contextuelle / Workflow personnel
Ensuite, différentes orientations de conception sont données :
- Conceptuel + Editorial chaud
- Blueprint + schéma technique
- Vecteur plat + contraste élevé
Il est finalement déterminé que :
16 : 9 couverture + zone lisible du titre.
Ce processus est en fait très important.
Parce que le vrai travail de conception n'a jamais été aussi simple que « dessiner un dessin ».
Le design est d'abordJugement de l'information。
Qu 'est-ce que Design Buddy ?
Du point de vue de la structure de projet, Design Buddy est un système de production visuelle composé de plusieurs compétences indépendantes.
À l'heure actuelle, l'entrepôt contient des compétences dans de nombreuses directions, de la génération d'images, des graphiques, de la conception de marque, aux diapositives, à la typographie des comptes publics, au storyboard, etc.
Par exemple :
| Skill | Utilisation principale | Output |
|---|---|---|
space-gemini-image |
Gemini Wensheng et Diagramme | Image |
space-logo-generator |
Découvrez la direction du logo | Image du logo |
space-chart-html |
organigramme, schéma, diagramme ER, etc. | html |
space-chart-html-plus |
Infographiques plus complexes | html |
space-architecture-diagram |
Architecture du système, topologie de déploiement | HTML et SVG |
space-text-logic-diagram |
Visualisation logique de l'article | HTML et SVG |
space-mermaid-diagram |
Texte à Mermaid | Mermaid |
space-slide-deck |
Markdown à Slideshow | PNG / PPTX / PDF |
space-wechat-layout |
Article public Typographie | html |
space-storyboard-generator |
Story Splitter et Storyboard | Table de séparation + image |
space-markdown-poster |
Markdown partage les affiches | PNG |
space-generative-art |
P5.js générer l'art | HTML / JS |
space-image-skill-builder |
Créer une compétence personnalisée | Skill |
C'est - à - dire qu ' il ressemble plus à un :
Pipeline de conception d'IA pour « contenu → expression visuelle → livrable ».
Troisièmement, il s'agit vraiment de « choisir quelle forme visuelle ».
De nombreux outils visuels AI fonctionnent de la façon suivante :
Prompt à Image
Design Buddy est plus proche de :
Contenu → Compréhension → Décision visuelle → Génération → Livraison
Le projet README a décomposé ce processus en quatre niveaux.
Niveau 1 : Compréhension du contenu
Lisez d'abord les informations fournies par l'utilisateur :
- Article
- Exigences de produit
- Histoire
- Données
- Logique du produit
- Brand Info
Ensuite, jugez :
Qu ' est-ce que ce contenu veut exprimer ?
Niveau 2 : la prise de décision visuelle
Ensuite, il est décidé :
- Est-ce une image ou un graphique ?
- S'agit-il d'un diagramme de flux ou d'un diagramme d'architecture ?
- Est-ce une illustration conceptuelle ou un scénogramme ?
- Quel pourcentage utiliser ?
- Quelle est la densité d'information ?
- Avez-vous besoin de suivre un certain système de design de marque ?
- Devrions-nous finalement produire HTML, SVG, PNG ou PPT ?
C'est en fait un « design ».
Niveau 3 : Génération d'actifs
Une fois que la structure visuelle est déterminée, différents outils sont appelés pour générer du contenu.
Les itinéraires soutenus par le projet sont très nombreux, par exemple :
- Modèle image
- GPT-image - 2
- Gemini
- HTML et SVG
- Mermaid
- p5.js
- Le PPTX
- Compte public HTML Template
Il ne laisse donc pas « tout le problème à un modèle d'image ».
Niveau 4 : Livraison et finition
Et finalement :
et transformer les résultats générés en fichiers réellement utilisables.
Par exemple :
Un autre Markdown
↓
Analyse de l'article
↓
Générer un diagramme
↓
Insérer un article
↓
Obtenez un nouvel article
ou :
Markdown
↓
Générer un PPT Outline
↓
Générer un schéma visuel page par page
↓
Page de génération en volume
↓
PPTX / PDF
C'est aussi l'une des plus grandes différences entre Design Buddy et l'invite de création d'IA normale.
Les scénarios d'utilisation les plus intéressants
1. Afficher automatiquement des images à l'article
Supposons que vous écriviez un essai de 5000 mots.
La méthode traditionnelle pourrait être :
- Trouver des articles avec des images
- Recherche d'images
- Download
- Modifier la taille
- Insérer un article
- Trouvé que l'image et le contenu ne correspondent pas
- Rechercher
L'idée de Design Buddy est :
Laissez l'IA comprendre l'article avant de décider quel contenu visuel devrait apparaître à chaque emplacement.
Par exemple,
- Utilisez le diagramme conceptuel au début
- Flow chart d'utilisation intermédiaire
- Utiliser un diagramme de comparaison dans un certain paragraphe
- Un concept complexe utilise un diagramme logique
- Utilisation finale de la vision résumée
Cela a effectivement amélioré la « recherche d'images » en « visualisation de contenu ».
V. Dessiner la logique du produit complexe
C'est le scénario dans lequel Design Buddy convient parfaitement aux responsables de produits et aux équipes techniques.
Vous dites à AI :
Dessinez le système dans un schéma.
Il ne peut pas produire qu 'un schéma ordinaire.
Le projet a fourni :
space-architecture-diagram
et :
space-chart-html
space-chart-html-plus
space-text-logic-diagram
space-mermaid-diagram
outils différents, etc.
Ainsi, un système complexe peut choisir différentes expressions en fonction du type de relation :
- Architecture du système
- Déploiement Diagramme
- Topologie réseau
- Flux de données
- Le voyage utilisateur
- Flow chart
- Roadmap
- SWOT
- Le diagramme ER
- Graphique Mermaid
- Diagramme logique
L'idée derrière cela est en fait très simple :
Différentes structures d'information, différentes structures visuelles doivent être utilisées.
Transformer un article en un petit livre rouge multi-pages
Un autre scénario très pratique est la production de contenu pour les médias sociaux.
Par exemple :
Décomposez cet article en un petit livre rouge à 6 pages.
Design Buddy peut être démonté en fonction de la structure du contenu :
- CouvertureUn mot : Hook
- Points de douleurPourquoi les mots simples ne suffisent pas
- cadre: Méthode de base
- CasComment utiliser spécifiquement
- Inventaire: Exécuter les étapes
- Fin de: Action ou sauvegarde Boot
L'important ici n'est pas de "générer six images".
Mais plutôt :
Tout d'abord, réorganisez le contenu long dans une structure de contenu adaptée à la lecture mobile.
Cela est passé de la génération d'images à l'édition de contenu et à la chorégraphie visuelle.
VII. Markdown est directement converti en PPT
Pour les développeurs, les responsables de produit et les créateurs de contenu, c'est probablement l'une des capacités les plus rentables.
Vous pouvez proposer directement :
Faites de Markdown un PPT de 12 pages.
par Design Buddy space-slide-deck Il sera tourné autour :
Contour de contenu → Structure de page → Système de conception → Vision d'une page → PPTX / PDF
Traitement.
Le projet prend également en charge la recherche de références visuelles à partir de plusieurs systèmes de conception de marque, à utiliser pour générer des diapositives.
Cela signifie que :
Markdown n'est plus seulement un texte qui finit par être remis au lecteur, mais peut aussi être un fichier source pour une production visuelle.
Vous pouvez même mettre en :
Un article
Convertis directement en :
Article → Infographie → Slideshow → PDF → Partager une affiche
Un ensemble complet d'actifs de contenu est formé.
La typographie du numéro public a également été intégrée dans le flux de travail
Beaucoup d'outils d'IA peuvent générer des articles, mais ils s'arrêtent à Markdown.
Lorsque vous publiez réellement, vous devez faire face à :
- Titre
- sous-titre
- Paragraphe
- Image
- Référence
- Accentué
- Spacing
- html
- Compatibilité éditeur
Design Buddy propose :
space-wechat-layout
L'objectif est de convertir davantage l'article en une page de typographie adaptée à la publication du compte public WeChat et de fournir un HTML riche reproductible.
Il ne s'agit donc pas seulement de :
« Le contenu est-il généré ? »
Mais plutôt :
« Le contenu peut-il entrer directement dans le processus de publication ? »
Il couvre même le logo et le design de marque.
Si ce n'est qu ' un article accompagné d'images, ce projet n'est pas particulièrement nouveau.
Plus intéressant encore, il intègre également la conception de la marque dans l'ensemble du système de compétences.
Par exemple :
space-logo-generator
Il peut être utilisé pour explorer la direction du logo par lots.
Et :
space-brand-ui-design
et essayer de fournir des contraintes visuelles plus claires pour la génération de l'interface utilisateur en combinaison avec les spécifications de conception de marque publiques.
La logique derrière cela est toujours :
Il ne s'agit pas seulement de « générer une belle page », mais d'établir un langage de conception et de générer une page à nouveau.
Il est particulièrement utile pour les développeurs indépendants.
Dans le passé, faire un produit, peut avoir besoin de résoudre séparément :
- Le logo
- Marque de couleur
- Landing Page
- Produit UI
- Images des médias sociaux
- PPT
- Illustration du produit
Ces tâches peuvent maintenant être intégrées dans le flux de travail Visual Skills de l'agent.
La plus grande différence entre elle et Prompt ordinaire
Si vous comprenez le dessin d'IA ordinaire comme :
« Aidez-moi à dessiner une image de la technologie. »
Le résultat dépend beaucoup de Prompt.
Design Buddy a essayé de structurer le processus de prise de décision derrière Prompt.
Par exemple :
用户需求
↓
内容理解
↓
判断视觉类型
↓
确定比例
↓
选择风格
↓
选择生成工具
↓
生成
↓
检查 / 修改
↓
输出最终文件
Cela incarne en fait une tendance qui mérite d'être suivie :
La compétition des futurs agents d'IA n'est pas nécessairement seulement la compétition des capacités du modèle, mais peut également être la compétition des compétences et des flux de travail.
Le modèle est chargé de « générer des capacités ».
Skill est responsable de :
Quand utiliser, comment utiliser, ce qui est exporté, comment livrer.
11 Comment installer ?
Design Buddy est basé sur le protocole Agent Skills et peut être utilisé dans plusieurs environnements d'agents IA compatibles.
Les recommandations données par le projet README sont :
npx skills add SpaceZephyr/design-buddy
Vous pouvez également installer l'agent qui prend en charge les compétences directement :
帮我安装这个 skill：
https://github.com/SpaceZephyr/design-buddy
Les environnements compatibles répertoriés par le projet README comprennent Claude Code, Codex, Cursor, OpenClaw, Hermes, Gemini CLI, OpenCode, etc.
Si vous n'utilisez pas l'installation automatique, vous pouvez également cloner directement le dépôt :
git clone https://github.com/SpaceZephyr/design-buddy.git
Ensuite, chargez les compétences requises en fonction de votre propre environnement d'agent.
Douze, lorsqu 'il est vraiment utilisé, il peut être très naturel.
Après l'installation, il n'est pas nécessaire d'apprendre des commandes complexes.
Souvent, vous pouvez parler directement à une personne :
给这篇文章生成一张封面图
ou :
把这个系统画成架构图
把这篇文章拆成小红书 6 页图
帮我设计 10 个 Logo 方向
把这份 Markdown 转成 12 页 PPT
把这篇文章排成公众号格式
Vous pouvez même spécifier une compétence spécifique :
用 space-image-studio 做一张小红书封面
Cette façon d'interagir est très conforme aux habitudes d'utilisation de l'agent :
L'utilisateur décrit la cible et l'agent décide quelle capacité invoquer.
Mais ce n'est pas un « remplacement pour les designers ».
C'est en fait la partie la plus positive de ce projet README.
Design Buddy définit clairement ses limites.
Par exemple,
L'IA ne peut pas nécessairement produire des images parfaites à la fois
Le texte, la structure compliquée, la typographie chinoise, les détails des personnages, etc. peuvent encore poser des problèmes.
Les graphiques ne font pas la vérité
Si les données ou la logique entrées sont erronées, l'IA peut tout à fait faire de l'information erronée un très beau graphique.
Alors :
La qualité visuelle ne prouve pas que l'information est correcte.
Le logo n'est pas synonyme d'enregistrement de marque réussie
L'IA peut vous aider à explorer la direction du logo, mais les requêtes approximatives de marques, les conflits de l'industrie et la disponibilité juridique doivent encore être traitées indépendamment.