getdesign

Qu'est-ce que getdesign ?

getdesign extrait un design system d'un site web public. Il ouvre le site dans un vrai navigateur, lit le CSS du site et capture la page rendue, puis écrit ses couleurs, sa typographie, ses espacements et ses composants dans un fichier design.md fondé sur le CSS réel du site. Le résultat peut être lu comme un guide de style ou transmis à un agent de codage comme contexte lors de la création d'une interface.

L'outil est disponible sous cinq formes qui partagent un même cœur d'agent, plus une Skill qui s'exécute dans un agent de codage. Il est actuellement en bêta, et les exécutions hébergées reposent sur vos propres clés de fournisseur plutôt que sur une clé API getdesign.

Comment utiliser getdesign ?

Tableau de bord web

Connectez-vous au tableau de bord, enregistrez vos clés Daytona et OpenAI dans Compte, puis collez l'URL d'un site web public dans Agent pour générer un design.md. Vous pouvez aussi explorer des exemples mis en cache sans exécuter de fournisseurs.

API

GET /v1/design sur api.getdesign.app renvoie du Markdown ou du JSON. L'authentification bearer WorkOS et les clés de fournisseur sont requises.

CLI

Exécutez bunx @getdesign/cli sur Bun avec vos clés Daytona et OpenAI. Il écrit design.md dans un fichier local.

SDK

Installez @getdesign/sdk avec bun add @getdesign/sdk pour exécuter l'agent en cours de processus sur Bun, avec des résultats typés et des événements de progression, en utilisant vos clés de fournisseur.

Skill

Ajoutez le SKILL.md portable avec skills add MohtashamMurshid/getdesign. Elle s'exécute dans Claude Code, Codex ou Cursor, en utilisant les propres outils de l'agent.

Fonctionnalités principales de getdesign

Extraction du design system

getdesign lit les tokens CSS d'un site public, capture la page dans un navigateur et produit un document de design couvrant les couleurs, la typographie, les espacements et les composants.

Sortie design.md

Les résultats sont livrés sous forme de document Markdown décrivant le design system du site web. Les exécutions visuelles incluent aussi des captures d'écran.

Formes d'accès multiples

Le web, l'API, la CLI et le SDK TypeScript accèdent au même cœur d'agent ; la Skill s'exécute dans votre propre agent de codage. La CLI et le SDK s'exécutent localement sur Bun, tandis que l'API HTTP prend en charge les exécutions hébergées.

Exécutions privées avec publication facultative

Les exécutions du tableau de bord restent privées jusqu'à ce que vous les publiiez. La publication crée un lien que chacun peut utiliser pour consulter et télécharger le document de design et les captures d'écran ; vous pouvez rendre une exécution à nouveau privée pour fermer les accès futurs, bien que les copies déjà téléchargées restent chez leurs destinataires.

Cas d'usage de getdesign

Produire un guide de style à partir d'un site en ligne

Générez un document de design lisible à partir d'un site web public qui décrit ses couleurs, sa typographie, ses espacements et ses composants.

Fournir un contexte de design à un agent de codage

Transmettez le design.md généré et ses captures d'écran à un agent de codage, ou installez la Skill pour que l'agent extraie le contexte de design avec ses propres outils.

Exécuter l'extraction dans un flux local ou hébergé

Utilisez la CLI ou le SDK TypeScript pour des exécutions locales sur Bun, ou l'API HTTP pour des exécutions hébergées renvoyant du Markdown ou du JSON.

Partager un document de design

Publiez une exécution du tableau de bord pour créer un lien que d'autres peuvent utiliser pour consulter et télécharger le document de design et les captures d'écran.

Questions fréquentes sur getdesign

Qu'est-ce qu'un fichier design.md ?

Un design.md est un document Markdown décrivant le design system d'un site web. Vous pouvez le lire comme un guide de style ou le donner à un agent de codage comme contexte lors de la création d'une interface. Les exécutions visuelles incluent aussi des captures d'écran.

Comment extraire les couleurs et les polices d'un site web ?

Enregistrez vos clés Daytona et OpenAI dans Compte, puis collez l'URL d'un site web public dans Agent. getdesign lit les tokens CSS, capture la page dans un navigateur et génère un document de design que vous pouvez télécharger. Vous pouvez aussi explorer des exemples mis en cache sans exécuter de fournisseurs.

Puis-je utiliser getdesign avec un agent de codage ?

Oui. Donnez à votre agent de codage le design.md généré et ses captures d'écran, ou installez la Skill getdesign pour extraire le contexte de design à l'aide des propres outils de l'agent. La CLI et le SDK TypeScript s'exécutent aussi localement sur Bun, et l'API HTTP prend en charge les exécutions hébergées.

Y a-t-il une authentification ou un niveau payant ?

Le tableau de bord utilise la connexion WorkOS. Les exécutions hébergées nécessitent vos propres clés Daytona et OpenAI ; il n'y a pas de clé API getdesign en V1. La V1 n'a pas de facturation des exécutions getdesign. Vous payez Daytona pour la capture dans le navigateur et OpenAI pour l'usage du modèle.

Mes exécutions de design sont-elles publiques ?

Vos exécutions du tableau de bord sont privées jusqu'à ce que vous les publiiez. La publication crée un lien que chacun peut utiliser pour consulter et télécharger le document de design et les captures d'écran. Vous pouvez rendre une exécution à nouveau privée pour fermer les accès futurs ; les copies déjà téléchargées restent chez leurs destinataires.