frontend-design

Translate user briefs into frontend design specifications and implementation guidance.

16|1|Updated Apr 20, 2026

Search Tags:#typography #design #ui #accessibility #frontend #responsive #design-system

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Design helps teams translate ambiguous briefs into production-grade, visually distinctive interfaces, ensuring a cohesive design language and avoiding generic AI aesthetics.

Core Features & Use Cases

One clear design direction and token-driven system to ensure consistency across pages (typography, color, spacing, motion).
Step-by-step guidance to plan layout, responsive patterns, and implementation notes for React, Vue, Svelte, or vanilla HTML/CSS/JS.
Real-world examples and templates for landing pages, dashboards, forms, and components to accelerate delivery.

Quick Start

Provide a brief project brief and I will generate a production-ready frontend design specification and starter code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I translate a project brief into a production-grade frontend design system?▼

You can generate frontend design specifications by providing a project brief, which produces a token-driven design system covering typography, color, spacing, and motion alongside implementation notes and runnable code examples.

Does this frontend design approach work with React, Vue, and Svelte?▼

Yes, this frontend design approach supports React, Vue, Svelte, and vanilla HTML/CSS/JS by providing step-by-step layout plans and implementation guidance tailored to each framework's conventions.

What is a token-driven design system for frontend development?▼

A token-driven design system standardizes typography, color, spacing, and motion variables to ensure visual consistency across landing pages and dashboards, preventing generic AI aesthetics and maintaining a cohesive design language.

How do I ensure my frontend UI is responsive and accessible?▼

You ensure responsive and accessible frontend UI by applying generated design specifications that validate accessibility standards and performance metrics while providing responsive layout patterns and implementation notes for your components.

Can I get starter code for landing pages and dashboards?▼

Yes, the frontend design process delivers real-world examples and runnable starter code templates for landing pages, dashboards, forms, and components to accelerate project delivery.