Retour à la bibliothèque de prompts
Bibliothèque de promptsPrompt d'image

Planche de système de style UI

Créez une planche de système de style UI multipage avec grille 8px, tokens de couleur, échelle typographique, états de composants et exemples de mise en page alignés.

Design systemKit UITypographie
Aperçu

Prompt d'image

Modèle recommandé

Seedream 5.0 Lite

Format de sortie

Modèle de prompt d'image

Aperçu

Prompt d'image

Aperçu de planche de système de style UI montrant des tokens de couleur, une échelle typographique, des états de composants et des exemples de mise en page responsive.

Aperçu pour planche de système de style UI, axé sur la cohérence du système, l'alignement sur grille, les tokens modifiables et des exemples UI prêts pour le produit.

Prompt complet

Planche de système de style UI

Planche de système de style UI multipage avec grille 8px, tokens de couleur, échelle typographique, composants et mises en page responsives.

Modèle recommandé: Seedream 5.0 LiteFormat de sortie: Modèle de prompt d'image
Prompt complet
Prompt d'image
Créez une planche de système de style UI multipage soignée pour [PRODUCT_OR_BRAND]. Présentez le système comme un ensemble cohérent de pages de design sur une toile d'aperçu nette. Utilisez une grille d'espacement stricte de 8px, des marges cohérentes, un alignement précis et une hiérarchie claire sur chaque page. Incluez un panneau de tokens de couleur avec des nuanciers primaires, secondaires, neutres, sémantiques et d'arrière-plan ; une échelle typographique avec styles de titres, corps, légendes et chiffres ; une fiche de composants avec boutons, champs, cartes, navigation, badges et états vides ; ainsi que deux exemples de mise en page responsive montrant les proportions desktop et mobile. Gardez le système visuellement cohérent, modifiable et adapté à un produit SaaS, un outil de création, une marque e-commerce ou un tableau de bord interne. Utilisez du texte fictif réaliste uniquement lorsque nécessaire, et gardez les libellés assez courts pour rester lisibles. Évitez les vrais logos, les systèmes de design copiés, les noms de marque non fournis par l'utilisateur, la typographie déformée, l'espacement incohérent, les ombres mal assorties, l'encombrement décoratif, le contraste inaccessible et les exemples de composants qui cassent la grille.

Notes d'utilisation

Remplacez le type de produit, le ton de marque, la direction de palette, la liste de composants, les exemples de mise en page et les exigences d'accessibilité avant de lancer.

FAQ du prompt

Avant d'utiliser ce prompt

Vérifications rapides sur les entrées, l'adéquation du modèle et la façon d'adapter le modèle de prompt sans affaiblir le résultat.

Que dois-je personnaliser en premier ?

Définissez le type de produit, le ton de marque, la palette de base, la personnalité typographique, le périmètre de composants et si les exemples doivent avoir une orientation marketing ou tableau de bord.

Ce prompt peut-il créer un système de design utilisable ?

Il crée une planche visuelle de système de style pour l'exploration et la présentation. Vérifiez l'espacement, le contraste, la typographie et le comportement des composants avant de le convertir en tokens UI de production.

Que dois-je vérifier avant de publier l'image ?

Vérifiez que les libellés sont lisibles, que les nuanciers de couleur sont distincts, que la hiérarchie typographique est claire, que les composants partagent la même logique d'espacement et qu'aucun vrai système de marque n'a été copié.

Plus de prompts dans ce mode