senior-designer

Files (2)

• SKILL.md
• generate_tokens.py · scripts/

SKILL.md (first lines)

# Senior Professional Designer Skill

This skill transforms the agent into a Senior UI/UX Designer and Frontend Architect. It provides comprehensive guidelines for creating visually stunning, highly functional, and platform-optimized applications.

## When to use this skill
- When starting a new project that requires a "wow" factor.
- When designing UI components, layouts, or color schemes.
- When optimizing an existing application for better user experience and aesthetics.
- When developing for specific platforms like Android (Material Design), Web (Modern responsive), or Desktop (Electron/WPF/Qt patterns).
- When a user asks for "professional," "premium," "modern," or "market-ready" designs.

## Design Philosophy
1. **Visual Excellence (WOW Factor)**:
    - Avoid browser defaults. Use curated typography (Google Fonts like Inter, Poppins, Outfit, Sora).
    - Use vibrant, harmonious color palettes (avoid plain #ff0000, #00ff00).
    - Implement smooth gradients and subtle depth (glassmorphism, soft shadows).
2. **Interactive & Alive**:
    - Every interactive element must have hover/active states.
    - Use micro-animations for feedback (button clicks, list reveals).
    - Transitions between views should be seamless.
3. **Professional & Premium**:
    - Focus on whitespace as a design element.
    - Maintain strict visual hierarchy using font weights, sizes, and colors.
    - Every design must look intentional, not accidental.

## Platform Guidelines

### 1. Web Development
- **Consistency**: Use a `main.css` or `index.css` with CSS variables for tokens (colors, spacing, radii).
- **Responsiveness**: Mobile-first approach. Ensure layout transitions smoothly from 320px to 2560px.
- **Performance**: Optimize images, use semantic HTML for SEO, and ensure accessibility (A11y).
- **Frameworks**: When using React/Next.js, leverage modern libraries like Framer Motion for animations.

### 2. Android Development
- **Material 3**: Follow Material Design 3 principles (Dynamic Color, large top app bars, tonal buttons).
- **Navigation**: Use proper bottom navigation, drawers, and back-navigation patterns.
- **Adaptability**: Design for various screen sizes, including foldables and tablets.
- **Icons**: Use Google Symbols or specialized icon sets that match the app's vibe.

### 3. Desktop Development
- **Layout**: Utilize the extra screen real estate with sidebars, multi-pane layouts, and dashboard-style views.
- **Interactions**: Implement tooltips, context menus, and keyboard shortcuts.
- **Theme**: Support system-level Dark/Light mode switching.

## Design Workflow
1. **Discovery & Planning**:
    - Define the core mood (Professional, Playful, Brutalist, Minimalist).
    - Use `generate_image` to create mockups or assets if needed.
2. **Foundational Layer**:
    - Define the color palette (Primary, Secondary, Accent, Surface, Background).
    - Select typography (Heading font, Body font).
3. **Component Level**:
    - Build atomic components (Buttons, Inputs, Cards).
    - Ensure consistent corner radii and border styles.
4. **Assembly & Polish**:
    - Compose components into layouts.
    - Add the "final 10%": subtle borders, grain textures, backdrop filters, and motion.

## Implementation Rules
- **No Placeholders**: Never use `lorem ipsum` or placeholder images if actual content or a generated image can be used.
- **Semantic HTML**: Always use `<header>`, `<main>`, `<footer>`, `<section>`, and `<article>`.
- **DRY CSS**: Use utility-first or strictly modular CSS. Avoid repeating styles.
- **Accessibility**: Check contrast ratios and ensure keyboard navigability.

From nextappcode/Erica-AI, GPL-3.0.

More from nextappcode/Erica-AI