Créateur de prompts d’interface
Construisez une direction visuelle avec une typographie en direct, une couleur, un espacement et des contrôles de rayon. Copier une UI précise prompt ou télécharger le CSS variables.
Réglez les détails. Voyez-les vivre.
Aperçu de l'interface
PRÉVUEFaites place à
quelque chose de nouveau.
Un atelier de céramique pratique. Bonne compagnie, un peu d'argile, et un samedi plus lent.
Séance de studio
2 heures · 8 places
Aperçu illustré. Votre constructeur implémente l'interface finale.
Votre direction de conception
UI design direction
Typography
Use Inter. Body text: 16px with 1.5 line height. Use a clear heading hierarchy and readable line lengths.
Palette
Background: #faf8f5. Text: #292521. Accent: #c65324. Text on accent: #000000. Check contrast for all final text and interactive states.
Layout and surfaces
Use 24px as the main panel padding and section gap, with a 4px spacing base. Corner radius: 12px. Surface shadow: 0 2px 12px rgb(0 0 0 / 0.06). Keep borders subtle and reuse existing components.
Responsive behavior
Stack panels on narrow screens. Keep controls within the viewport and interactive targets at least 44px. Preserve content order and visible keyboard focus. Respect reduced motion.
Implementation
Apply this direction to the requested screen using the project's existing architecture. Include relevant loading, empty, error, and success states. Do not add unrelated features.
Le texte exporté reste en anglais ; vos saisies sont conservées telles quelles.
Pas d'inscription. Pas de crédits d'IA. Cet outil assemble votre sortie dans votre navigateur.
D'une idée à quelque chose d'utile.
- 01
Commencez par un préréglage, puis ajustez les détails.
- 02
Vérifiez vos choix sur l'aperçu de l'interface en direct.
- 03
Copier le dossier de conception ou télécharger votre CSS variables.
Un peu de contexte.
Transformer les préférences visuelles en une remise pratique pour Lovable, Bolt, v0, ou votre agent de codage. L'aperçu et prompt utilisez les mêmes paramètres, de sorte que votre espacement, type et couleurs choisis restent cohérents. Cet outil assemble les instructions de vos choix; il n'analyse pas ou ne génère pas de conceptions avec l'IA.
Bonnes questions.
Puis-je utiliser la prompt dans un constructeur d'applications ?
Oui. La sortie décrit les propriétés de l'interface standard et fonctionne comme direction de conception pour Lovable, Bolt, v0, et les assistants de codage. Votre constructeur décide toujours comment les mettre en œuvre.
Ce qui est inclus dans le CSS télécharger ?
Un petit ensemble de CSS propriétés personnalisées pour votre couleur d'accent, fond, texte, police, espacement, rayon et ombre. Cartez-les sur vos jetons de conception existants avant de les utiliser dans un projet.
L'aperçu vérifie-t-il l'accessibilité?
L'outil rapporte le contraste entre votre accent et son texte bouton. Il s'agit d'une vérification de couleur étroite, pas d'un audit d'accessibilité complet. Testez également l'interface finale avec le clavier et la technologie d'assistance.