Overview
This skill helps generate visually strong, production-ready frontend UI with a clear design direction. It focuses on avoiding generic layouts and creating unique, high-quality user interfaces.
When to Use
- Building landing pages, dashboards, or UI components
- Improving visual design of existing applications
- Creating modern, non-template frontend interfaces
Input
The user provides:
- Type of UI (landing page, dashboard, component, etc.)
- Optional: design preference (minimal, bold, luxury, playful, etc.)
- Optional: framework (HTML/CSS, React, Vue, etc.)
Steps
1. Define Design Direction
- Understand purpose and target users
- Choose a clear aesthetic style (minimal, modern, bold, etc.)
- Decide primary colors and typography
2. Structure Layout
- Define key sections (header, hero, content, footer)
- Maintain clear hierarchy and spacing
3. Apply Styling
- Use consistent color system (CSS variables)
- Apply proper typography hierarchy
- Use CSS Grid/Flexbox for layout
4. Add Interactions
- Include hover effects and transitions
- Add minimal but meaningful animations
5. Ensure Quality
- Make layout responsive
- Keep code clean and reusable
- Follow basic accessibility practices
Output
- Functional UI code (HTML/CSS/JS or React/Vue)
- Clean structure and readable code
- Styled and visually distinct interface
- Responsive layout
Guidelines
- Avoid generic templates and repetitive layouts
- Use intentional spacing and typography
- Match design complexity with use case
- Prioritize usability along with aesthetics
Constraints
- Do not generate plain or unstyled HTML
- Avoid overuse of animations
- Do not include unnecessary or unused code
Examples
Example 1
Input:
Build a SaaS landing page
Expected Output:
- Hero section with CTA
- Feature section
- Clean layout with styling
Example 2
Input:
Create a dashboard UI in React
Expected Output:
- Sidebar navigation
- Content area with cards
- Reusable components
Test Cases
Test 1
Input:
Build a landing page
Check:
- Has structured layout
- Styled UI
- Not generic
Test 2
Input:
Create a component
Check:
- Reusable
- Clean code
- Proper styling
Success Criteria
- UI should look like a real product design
- Code should be clean and maintainable
- Output should be responsive and usable
1---2name: frontend-design3description: Create distinctive, production-grade frontend interfaces with strong visual identity and non-generic design patterns.4---56## Overview7This skill helps generate visually strong, production-ready frontend UI with a clear design direction. It focuses on avoiding generic layouts and creating unique, high-quality user interfaces.89---1011## When to Use12- Building landing pages, dashboards, or UI components 13- Improving visual design of existing applications 14- Creating modern, non-template frontend interfaces 1516---1718## Input19The user provides:20- Type of UI (landing page, dashboard, component, etc.)21- Optional: design preference (minimal, bold, luxury, playful, etc.)22- Optional: framework (HTML/CSS, React, Vue, etc.)2324---2526## Steps2728### 1. Define Design Direction29- Understand purpose and target users 30- Choose a clear aesthetic style (minimal, modern, bold, etc.) 31- Decide primary colors and typography 3233---3435### 2. Structure Layout36- Define key sections (header, hero, content, footer) 37- Maintain clear hierarchy and spacing 3839---4041### 3. Apply Styling42- Use consistent color system (CSS variables) 43- Apply proper typography hierarchy 44- Use CSS Grid/Flexbox for layout 4546---4748### 4. Add Interactions49- Include hover effects and transitions 50- Add minimal but meaningful animations 5152---5354### 5. Ensure Quality55- Make layout responsive 56- Keep code clean and reusable 57- Follow basic accessibility practices 5859---6061## Output62- Functional UI code (HTML/CSS/JS or React/Vue) 63- Clean structure and readable code 64- Styled and visually distinct interface 65- Responsive layout 6667---6869## Guidelines70- Avoid generic templates and repetitive layouts 71- Use intentional spacing and typography 72- Match design complexity with use case 73- Prioritize usability along with aesthetics 7475---7677## Constraints78- Do not generate plain or unstyled HTML 79- Avoid overuse of animations 80- Do not include unnecessary or unused code 8182---8384## Examples8586### Example 187Input:88Build a SaaS landing page8990Expected Output:91- Hero section with CTA 92- Feature section 93- Clean layout with styling 9495---9697### Example 298Input:99Create a dashboard UI in React100101Expected Output:102- Sidebar navigation 103- Content area with cards 104- Reusable components 105106---107108## Test Cases109110### Test 1111Input:112Build a landing page 113Check:114- Has structured layout 115- Styled UI 116- Not generic 117118---119120### Test 2121Input:122Create a component 123Check:124- Reusable 125- Clean code 126- Proper styling 127128---129130## Success Criteria131- UI should look like a real product design 132- Code should be clean and maintainable 133- Output should be responsive and usable
DigitalExplorers