# Frontend Design

> Create distinctive, production-grade frontend interfaces with strong visual identity and non-generic design patterns.

- Skill: `digitalexplorers/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add digitalexplorers/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/digitalexplorers/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: DigitalExplorers (https://skillmd.com/u/digitalexplorers)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/digitalexplorers/frontend-design

---


## 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