frontend-design-ui-ux
0This skill helps developers create effective user interfaces and improve user experience. It's aimed at frontend developers looking to enhance their design capabilities.
100Updated 1mo ago
Frontend Development
Quick InstallView Source
$ npx skills add https://github.com/ulpi-io/skills --skill frontend-design-ui-uxOverview
About This Skill
This skill generates specification-driven design handoffs for frontend teams. Rather than producing visual mockups, it documents user flows, component contracts, design tokens, accessibility requirements, and responsive behavior in formats ready for engineering implementation. Use it when designing new features, redesigning existing interfaces, or establishing design-system foundations. The skill guides discovery of user context and product goals, models all interaction states including edge cases, and produces concrete artifacts that engineering agents can build from directly.
How to Use
Install the skill using the provided command.
Use Cases
Designing responsive web applications
Enhancing user experience in mobile apps
Creating visually appealing landing pages
Improving accessibility in design
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/ulpi-io/skills --skill frontend-design-ui-uxAlternative Install (Git Clone)
git clone https://github.com/ulpi-io/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Act as an expert frontend UI/UX designer for [COMPANY], a [INDUSTRY] company. Review the following [DATA] and suggest improvements for the user interface and user experience. Focus on usability, accessibility, visual hierarchy, and modern design principles. Provide specific recommendations with code snippets if applicable.
Example Output
## UI/UX Review for Acme Corp's Dashboard
### Key Findings
- **Visual Hierarchy Issues**: The primary CTA button ("Export Report") is visually weaker than secondary buttons. Recommend increasing its size and contrast.
- **Accessibility Gaps**: Low contrast on error messages (gray text on white background). Should be at least 4.5:1 ratio.
- **Layout Problems**: Cards in the analytics section have inconsistent padding (16px vs 24px). Standardize to 20px.
### Recommended Improvements
#### 1. Button Styling
```css
/* Before */
.cta-button {
background: #f0f0f0;
color: #333;
padding: 8px 16px;
}
/* After */
.cta-button {
background: #0066cc;
color: white;
padding: 12px 24px;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
```
#### 2. Error Message Styling
```css
.error-message {
color: #d32f2f; /* Dark red for better contrast */
background: #ffebee; /* Light red background */
padding: 8px 12px;
border-radius: 4px;
}
```
#### 3. Card Layout Standardization
```css
.analytics-card {
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
```
Would you like me to generate a Figma file with these changes implemented?Apply to these tools
Browse all toolsMindstate Design Labs
AI platform for clinical neurotech development
Design Arena
AI-powered design quality evaluation and benchmarking
Apply Design
Virtual property tours with 3D staging
Casavista Dec AI Room Design
Transform Your Home with AI Room Design – Casavista Dremiai App
X-Design
Transform e-commerce visuals with innovative AI tools
Home-Design.ai
AI-powered home design and planning made easy
Compatible MCP servers
Browse all MCP serversFind the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan