nazmussayad/skills/ui-design
Claude Code and agent skill by nazmussayad/skills
- community
Checking that the SKILL.md file is still in the repository.
UI design and review for web interfaces. Use when creating, styling, redesigning, or critiquing websites, product UI, and components.
Install
npx vskill@latest install nazmussayad/skills/ui-designSKILL.md
Product
Start from product truth. Preserve its actual capabilities, content, behavior, and brand. A design that depends on invented features or claims is solving for a different product.
Audience
The audience decides what deserves attention. Prioritize what users need to notice, compare, understand, or do rather than what makes the interface look impressive. Repeated work rewards speed and stable placement; occasional moments can carry more explanation or expression.
Principles
Respect the scope. Local work inherits the existing system. A redesign can change the visual language without changing the product's purpose or behavior.
Let the interface's job shape its hierarchy. Product UI favors clarity and repeated use. Marketing makes the offer, proof, and primary action obvious.
Choose one direction across type, color, spacing, shape, layout, and interaction. Spend boldness in one place. Every element should improve comprehension, navigation, feedback, or brand expression.
Use spacing, type, and composition before adding containers or decoration. Use icons when they make an action or idea recognizable at a glance, improve scanning, or communicate meaning in limited space. Keep their style consistent.
Design the relevant states and content extremes at narrow and wide widths. Use motion only when it clarifies feedback, state, space, or cause and effect. Keep frequent interactions nearly instant and respect reduced-motion preferences.
Avoid AI design slop
Do not place pills, badges, icons, or eyebrow labels above headings or titles.
Do not repeat the same or similar design patterns over and over. Do not add low-quality stuff just to add variety.
Do not reuse the same landing-page composition across pages, especially repeated centered sections or one-sided layouts that leave the other side empty. Do not create variety by right-aligning English text.
Do not wrap every section or content item in a card, or nest cards inside cards.
Do not leave side-by-side columns or cards with visibly unbalanced heights or large empty areas beneath one side.
Do not use large explanatory text blocks when a small diagram would communicate the same information more clearly.
Do not number sections, headings, cards, or content items by default or use numbers as decoration. Use numbering only when it serves a clear purpose for the user.
Do not fill sections with repeated "Learn more" buttons or buttons that merely jump to another section.
Do not fabricate product interfaces or substitute simulated screens for the actual product UI.
Do not create, draw, or hand-code brand logos from scratch instead of using the real logo from an official source or a library.
Security
- Security scanPassed, 90 of 100Pattern checks on the skill's files.
- Model reviewPassed
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryCheckingskills/ui-design/SKILL.md
Popularity
- 7-day trend score
- 5
Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/nazmussayad/skills/ui-design)