skills.rest
BWCbewchan
BWCbewchanCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces with intentional typography, color, and motion.

5|2|Updated Dec 14, 2025
Search Tags:#typography#frontend#ui design#web components#motion design#responsive layout
One-click install
npx skills add https://github.com/BWCbewchan/tpsmindx --skill frontend-design-bwcbewchan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/BWCbewchan/tpsmindx/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/BWCbewchan/tpsmindx --skill frontend-design-bwcbewchan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps users create distinctive, production-grade frontend interfaces that look intentional and polished instead of generic or “AI-slap” styled.

Core Features & Use Cases

  • Production-grade UI implementation: Produces working HTML/CSS/JS (or framework) code suitable for real applications.
  • Cohesive visual design direction: Applies a bold, consistent aesthetic with strong typographic, color, motion, and composition choices.
  • User-aligned outcomes: Turns product/page/component requirements into interfaces that fit the purpose, audience, and constraints (e.g., dashboards, landing pages, React/Vue components).

Quick Start

Use the frontend-design skill to design and implement a responsive landing page that matches your chosen aesthetic direction and fully meets your UI requirements.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a web UI that doesn't look like generic AI-generated code?▼

To build web UI that avoids generic aesthetics, generate production-grade frontend interfaces with intentional typography, cohesive color systems, and motion design. This approach ensures functional code with polished, deliberate visual choices rather than standard AI slop.

What's the best way to create responsive web components for a real user-facing product?▼

The best way to create responsive web components is to implement them as production-grade HTML, CSS, or JS code with accessibility-aware logic. This ensures the components are functional, cohesive, and suitable for real user-facing web applications.

How do I design a dashboard with strong typography and motion micro-interactions?▼

Design a dashboard by applying a consistent aesthetic direction with bold typographic choices, defined color systems, and motion micro-interactions. This process turns dashboard requirements into a cohesive, functional interface tailored to your audience.

Can I generate frontend code for React or Vue components using a design skill?▼

Yes, you can generate frontend code for React or Vue components. The skill produces working HTML, CSS, or framework code suitable for real applications, ensuring the components match your chosen aesthetic direction and UI requirements.

Does this approach support building accessible landing pages with cohesive visual design?▼

Yes, building accessible landing pages with cohesive visual design is fully supported. The implementation is accessibility-aware and applies a bold, consistent aesthetic with strong typographic, color, and composition choices to meet your UI requirements.

Related Skills

Explore More Design & Creative Skills→
superpollo02superpollo02

Spacious

Define spacing, typography, color, and accessibility rules for UI design systems.

Community
Intermediate
augustsclaugustscl
2

frontend-design

Generate runnable HTML/CSS/JS or framework code for distinctive frontend interfaces.

Community
Advanced
mngarciamngarcia

top-design

Optimize web design typography, layout, motion, color, and performance.

Community
Advanced
abeldotamabeldotam
13

frontend-design

Create production-grade frontend interfaces from design concepts.

Community
Advanced