zpankz/mcp-skillset
Overview
This skill equips a designer-turned-developer approach to building polished UI/UX without formal mockups. It emphasizes a decisive aesthetic direction, practical constraints, and memorable visual choices so interfaces feel intentional and crafted. Use it to shape layout, typography, color, motion, and component behavior during development.
How this skill works
Start by defining purpose, tone, constraints, and the single memorable differentiator for the product. Translate that direction into concrete choices: a distinctive type system, a cohesive CSS variable palette, a few high-impact motion moments, and spatial rules that favor asymmetry and layered composition. Iterate in code, favoring CSS-first solutions and small, opinionated component primitives.
When to use it
- Building UI from scratch without design mockups
- Converting rough wireframes into polished interfaces
- Improving visual hierarchy and spacing in existing apps
- Designing components with strong personality and reuse
- Refining motion and micro-interactions for clarity and delight
Best practices
- Pick a bold aesthetic direction early and stick to it across typography, color, and motion.
- Define technical constraints up front (framework, performance, accessibility) to keep designs feasible.
- Use CSS variables for palettes and scales to ensure consistency and easy theming.
- Prioritize a few high-impact motion moments rather than many low-value micro-animations.
- Design components as opinionated primitives with clear spacing, states, and accessibility semantics.
Example use cases
- Create a distinct landing page style when no brand kit exists by choosing tone and building a rapid style system.
- Rework a form-heavy dashboard: improve spacing, typography scale, and focus states for faster task completion.
- Design a component library with personality—buttons, cards, inputs—using CSS variables and accessible defaults.
- Add a single page-load orchestration that elevates perceived polish without heavy JS.
- Rescue an app suffering from ‘samey’ UI by replacing generic fonts and predictable layouts with a directional aesthetic.
FAQ
Translate the bold direction into restrained variants: keep underlying spacing, type scale, and motion decisions while dialing visual intensity down.
How do I balance uniqueness with accessibility?
Prioritize accessible contrast, clear focus states, and semantic HTML. Uniqueness should live in type choices, composition, and motion, not in compromised legibility.
