Design and improve UI/UX for the application. Use when asked to design interfaces, improve visual design, fix styling issues, ensure consistency, or enhance user experience. Applies design best practices for colors, typography, spacing, and interactions.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Design and improve UI/UX for the application. Use when asked to design interfaces, improve visual design, fix styling issues, ensure consistency, or enhance user experience. Applies design best practices for colors, typography, spacing, and interactions.
allowed-tools
Read, Grep, Glob, Edit, Write
Designer Skill
Create and maintain exceptional UI/UX for the personal_assistant (Cimplur) project, ensuring visual consistency, accessibility, and delightful user experiences.
Design System Reference
The full style guide lives at docs/FRONTEND_STYLE_GUIDE.md. Always read that file before making design decisions. Key highlights below for quick reference.
Brand Primary Color: #56c596
All primary UI elements (buttons, links, active states, logo) use this color. It is applied via Bootstrap's $primary Sass variable override.
Token
Hex
Usage
--fyli-primary
#56c596
Primary actions, links, logo
--fyli-primary-hover
#45a67e
Hover/active states
--fyli-primary-light
#e8f7f0
Tinted backgrounds
--fyli-primary-dark
#3b8a69
High-emphasis text
Semantic Colors (Bootstrap defaults)
Role
Hex
Success
#198754
Danger
#dc3545
Warning
#ffc107
Info
#0dcaf0
Rules
No hardcoded hex colors in components — use Bootstrap classes or var(--fyli-*).
Bootstrap first — prefer utility classes over custom CSS.
Scoped styles only in components.
main.css is the only global stylesheet besides framework imports.
Always consult docs/FRONTEND_STYLE_GUIDE.md for the full palette, typography, spacing, component patterns, and accessibility requirements.
UX Best Practices
Visual Hierarchy
Size - Larger elements draw more attention
Color - Use primary color for key actions, muted for secondary
Contrast - High contrast for important elements
Spacing - Group related items, separate distinct sections
Position - Top-left reads first (F-pattern)
Call-to-Action (CTA) Design
Primary CTA: Use btn btn-primary (renders in #56c596).
