frontend-design

Generate production-grade HTML/CSS/JS, React, or Vue frontend interfaces with cohesive design.

Updated Mar 18, 2026

Search Tags:#typography #design #ui #frontend #react #css #aesthetics

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle to translate vague ideas into production-ready, visually distinctive interfaces, leading to inconsistent experiences and delays.

Core Features & Use Cases

Produce production-grade HTML/CSS/JS, React, or Vue components with cohesive design language.
Define typography, color systems, motion, and accessibility to deliver polished UI.
Use cases include dashboards, landing pages, design systems, UI kits, and component libraries.

Quick Start

Describe a detailed frontend brief (component, page, or UI concept) and I will generate production-grade front-end code and design guidance.

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-grade React components with a cohesive design language?▼

To generate production-grade React components with a cohesive design language, provide a detailed frontend brief describing your UI concept. The system outputs ready-to-use, framework-specific scaffolds that adhere to typography, color, and accessibility constraints.

What is the best way to build responsive dashboards using HTML, CSS, and Vue?▼

The best way to build responsive dashboards using HTML, CSS, and Vue is to define your dashboard requirements in a brief. You receive ready-to-use code or framework-specific scaffolds that support responsive behavior and polished UI aesthetics.

Can I use this to create a design system and UI kit from scratch?▼

Yes, you can create a design system and UI kit from scratch by detailing your component requirements. It delivers cohesive design guidance and production-grade frontend interfaces defining typography, color systems, and motion constraints.

Does the generated frontend code support accessibility and motion constraints?▼

Yes, the generated frontend code supports accessibility and motion constraints. It designs and implements production-grade interfaces that explicitly adhere to typography, color, motion, and branding constraints while supporting responsive behavior.

How do I translate vague UI ideas into ready-to-use frontend code?▼

To translate vague UI ideas into ready-to-use frontend code, describe your detailed frontend brief including the component, page, or UI concept. The system generates production-grade front-end code and design guidance resolving inconsistencies.