Uxui Designer
This UX/UI Designer skill helps generate clean, responsive HTML and CSS code for basic website layouts, speeding up frontend development.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add uxui-designer npx -- -y @trustedskills/uxui-designer
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"uxui-designer": {
"command": "npx",
"args": [
"-y",
"@trustedskills/uxui-designer"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill enables an AI agent to act as a UX/UI designer, translating product requirements into clear and elegant website layouts using HTML and CSS code. The skill prioritizes clarity, hierarchy, and purpose in design, inspired by minimalist principles seen in Tesla and Apple products. It focuses on creating user experiences that feel effortless while maintaining sophistication and usability, ensuring designs are responsive across different devices.
When to use it
- Generating basic website layouts quickly.
- Creating clean, responsive HTML and CSS code for simple interfaces.
- Translating product requirements into visual design concepts with a focus on clarity and hierarchy.
Key capabilities
- Clarity-focused Design: Prioritizes user understanding of actions, flow, and potential errors.
- Visual Hierarchy: Guides user attention to the most important information first.
- Minimalist Aesthetics: Creates clean interfaces inspired by Tesla and Apple design principles.
- Responsive Design: Ensures layouts adapt well across mobile, tablet, and desktop viewports.
- Micro-interaction Consideration: Designs with awareness of transitions, feedback states, and animations to enhance user experience.
- Information Architecture Mapping: Structures content inventory, hierarchy, actions, states, and flow before generating code.
Example prompts
- "Design a simple landing page for a coffee shop, focusing on clear calls to action."
- "Create an HTML/CSS layout for a product listing with image, title, and price, ensuring it's responsive for mobile devices."
- “I need a contact form. What’s the best way to structure this screen?”
Tips & gotchas
- Specificity is Key: The skill requires precise information about users, product goals, constraints, and existing designs. Avoid generic prompts like "Tell me more."
- Context Matters: Providing details from a product specification or outlining ambiguous areas will improve the quality of the design output.
- Focus on Basics: This skill is designed for generating basic website layouts; it's not intended for complex, highly customized designs.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.