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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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).
