frontend-design

Translate design briefs into frontend interfaces and components.

Updated Apr 14, 2026

Search Tags:#typography #design #ui #frontend #aesthetics #motion

Ready to run

npx skills add https://github.com/dotruru/claudemd --skill frontend-design-dotruru

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/dotruru/claudemd/tree/main/skills/frontend-design
Command: npx skills add https://github.com/dotruru/claudemd --skill frontend-design-dotruru

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams create distinctive, production-grade frontend interfaces with intentional aesthetics and robust implementation, avoiding generic AI visuals.

Core Features & Use Cases

Bold aesthetic direction and cohesive visual system including typography, color, motion, and layout.
Production-grade code generation for HTML/CSS/JS, React, Vue, or other frameworks, delivering reusable components and pages.
Use Case: design a dashboard UI with responsive cards, charts, and navigation that maintains a unique identity.

Quick Start

Design and implement a distinctive frontend UI for a dashboard with bold typography and a dark theme, matching a given spec.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I generate production-ready frontend UI from a design brief?▼

To generate production-ready frontend UI from a design brief, this skill translates specifications into cohesive interfaces and reusable components. It handles typography, color, layout, motion, and accessibility constraints while supporting HTML/CSS/JS, React, or Vue frameworks.

Can I build a dashboard UI with React that avoids generic AI visuals?▼

You can build a dashboard UI with React that avoids generic AI visuals by applying bold aesthetic directions. This skill generates responsive cards, charts, and navigation components while maintaining a unique visual identity and intentional design system.

Does this frontend design tool support Vue and HTML/CSS/JS frameworks?▼

This frontend design tool supports Vue, HTML/CSS/JS, and React frameworks. It translates design briefs into production-grade code, delivering pages and reusable components with robust implementation that match your intended aesthetic direction and performance constraints.

What is the best way to ensure visual consistency and accessibility in frontend components?▼

The best way to ensure visual consistency and accessibility in frontend components is to apply a cohesive visual system. This skill handles typography, color, motion, and layout constraints to guarantee deliverables match your aesthetic direction and accessibility requirements.

How does motion design integrate into frontend web app development?▼

Motion design integrates into frontend web app development through cohesive visual system application. This skill translates your design brief into production-ready interfaces, applying intentional motion constraints alongside typography and layout to ensure distinctive web apps.

What are the limitations when generating landing pages with this frontend design approach?▼

Limitations when generating landing pages involve framework and performance constraints. While this frontend design approach translates briefs into distinctive, robust interfaces, deliverables are bound by your specified framework options like HTML/CSS/JS, React, or Vue, and required visual consistency.