ui-design
Rationaliser les modifications de style d'interface utilisateur avec des workflows structurés
Les modifications d'interface utilisateur échouent souvent en raison d'attentes mal alignées entre les utilisateurs et l'IA. Cette skill fournit un flux de travail en cinq étapes qui utilise des captures d'écran et des diagrammes ASCII pour garantir que les modifications visuelles correspondent à l'intention de l'utilisateur avant tout код.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“ui-design”。 La section d'en-tête semble à l'étroit. Le titre et la barre de recherche sont trop rapprochés.
预期结果:
- Je comprends que l'en-tête semble à l'étroit. Laissez-moi d'abord confirmer la mise en page actuelle :
- ┌─────────────────────────────────────────────┐
- │ 📊 Dashboard [Search...] │
- │ Subtitle text here │
- └─────────────────────────────────────────────┘
- Est-ce exact ? Le titre et la recherche partagent la même ligne avec un espacement minimal. Quel espacement vous semblerait plus confortable ?
正在使用“ui-design”。 Oui, c'est exactement ça. J'aimerais plus d'espace entre les éléments.
预期结果:
- Voici deux options pour plus d'espace :
- Option A : Augmenter l'empilement vertical
- ┌─────────────────────────────────────────────┐
- │ 📊 Dashboard │
- │ Subtitle text here │
- │ [Search..................................] │
- └─────────────────────────────────────────────┘
- Option B : Augmenter l'espacement horizontal
- ┌─────────────────────────────────────────────┐
- │ 📊 Dashboard [Search......] │
- │ Subtitle text here │
- └─────────────────────────────────────────────┘
- Quelle mise en page correspond le mieux à votre vision ?
安全审计
安全All static analysis findings are false positives. The detected 'external_commands' are ASCII art box-drawing characters used for layout diagrams. The 'weak cryptographic algorithm' detection was triggered by YAML frontmatter keys. The skill is a documentation file describing a UI design workflow with no executable code or security risks.
低风险问题 (1)
质量评分
你能构建什么
Développeur frontend affinant la mise en page des composants
Un développeur doit ajuster l'espacement, l'alignement et la hiérarchie visuelle d'un composant de tableau de bord. Le flux de travail aide à itérer rapidement sans deviner ce que l'utilisateur veut.
Passation designer-développeur pour les ajustements de style
Les designers peuvent communiquer les modifications visuelles à l'aide de captures d'écran tandis que l'IA traduit les commentaires en modifications CSS précises grâce au processus structuré.
Développeur solo polissant l'interface utilisateur de l'application
Les développeurs individuels peuvent utiliser le flux de travail pour améliorer systématiquement la conception visuelle de leur application sans avoir besoin d'une révision de design externe.
试试这些提示
Je veux ajuster l'interface utilisateur sur cette page. Voici une capture d'écran montrant l'état actuel. Le problème est [décrire le problème visuel]. Aidez-moi à identifier ce qui ne va pas et suggérez des solutions.
Je travaille sur [nom du composant]. La mise en page actuelle a [décrire le problème]. Pouvez-vous me montrer 2 à 3 mises en page alternatives en utilisant des diagrammes ASCII ? Je veux comparer les options avant de décider.
La modification précédente est proche mais nécessite un ajustement. Le [espacement/couleur/alignement] semble toujours incorrect. Plus précisément, [décrire le micro-ajustement spécifique nécessaire]. Affinons cela.
J'ai besoin d'un style cohérent sur [liste des composants]. Voici les captures d'écran de chacun. Analysez l'état actuel, identifiez les incohérences et proposez une approche de système de conception unifié avec des diagrammes visuels.
最佳实践
- Fournissez toujours une capture d'écran en marquant la zone exacte nécessitant un ajustement avant toute modification de code
- Choisissez une方案 visuelle avant l'implémentation plutôt que de demander à l'IA de deviner les préférences
- Demandez des micro-ajustements spécifiques en nommant la propriété exacte (margin, padding, color) plutôt que des commentaires vagues
避免
- Demander à l'IA de 'améliorer l'apparence' sans spécifier ce que 'mieux' signifie visuellement
- Fournir des commentaires comme 'quelque chose semble incorrect' sans identifier l'élément ou la propriété spécifique
- Demander plusieurs modifications sans rapport dans une seule itération, ce qui rend difficile l'isolation de ce qui a fonctionné