frontend-ui-ux

Convert vague design briefs into production-ready HTML/CSS/JS components.

1|Updated Jan 23, 2026
One-click install
npx skills add https://github.com/ztdevelops/claude-code-skills --skill frontend-ui-ux-ztdevelops
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/ztdevelops/claude-code-skills/tree/main/public/frontend-ui-ux
Command: npx skills add https://github.com/ztdevelops/claude-code-skills --skill frontend-ui-ux-ztdevelops

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts vague or missing design guidance into polished, production-ready user interfaces that feel intentional, cohesive, and emotionally engaging, reducing the back-and-forth between designers and developers when mockups are absent.

Core Features & Use Cases

  • Design-first implementation: Translate a short brief or existing patterns into visually striking UI components and pages.
  • Aesthetic systems: Establish typography, color variables, spacing, and motion patterns that scale across a codebase.
  • Polish & accessibility: Add refined visual details, performant CSS animations, and accessibility best practices to make interfaces memorable and usable.
  • Use Case: Turn a product manager's text description or an exploratory sketch into a pixel-refined landing section, interactive component, or themeable design system fragment.

Quick Start

Use the frontend-ui-ux skill to convert a short product brief into a production-ready, accessible landing component with typography, color variables, and motion.

Frequently Asked Questions about frontend-ui-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build frontend UI components when design mockups are missing?

Build frontend UI components without mockups by translating short product briefs into production-ready HTML/CSS/JS or framework code. This approach establishes aesthetic systems like typography, color variables, and motion patterns to ensure the interface feels intentional and cohesive.

Can I generate a complete design system from a text description?

Generate a themeable design system fragment from a text description by converting the brief into scalable CSS variable color systems, spacing rules, and typography. This yields a cohesive visual foundation directly in your frontend codebase without needing visual mockups.

What is the best way to add accessibility and motion to a landing page?

Add accessibility and motion to a landing page by implementing refined visual details, performant CSS animations, and accessibility best practices during component development. This ensures the final UI is both memorable and usable for all users.

Does this approach work for polishing existing product interfaces?

Polishing existing product interfaces works by applying design-first implementation to add refined visual details and emotionally engaging motion patterns. It reduces designer-developer back-and-forth by making interfaces feel intentional directly in code.

Do I need existing design assets to implement frontend UI/UX?

You do not need existing design assets to implement frontend UI/UX. The process converts vague or missing design guidance into polished user interfaces, relying on short briefs or exploratory sketches rather than complete mockups.