skills.rest
manu14357
manu14357COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/manu14357/skills --skill frontend-design-manu14357
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
tcytantcytan
1

team-frontend

Transform frontend requirements into design tokens, component specs, and UI code.

Community
Advanced
Hollis36Hollis36
1

frontend-design

Design and implement production-grade frontend interfaces with CSS variables.

Community
Advanced
tomasbassotomasbasso

frontend-design

Translates design briefs into production-grade frontend interfaces and components.

Community
Advanced
saschadudkin-sketchsaschadudkin-sketch

storybook-design-system

Automate creation and validation of Storybook stories and design-system components.

Community
Intermediate