frontend-design

Generate production-grade frontend interfaces with bold aesthetic direction and refined visual details.

Updated Jan 6, 2026
One-click install
npx skills add https://github.com/figuedmundo/mamirri-app --skill frontend-design-figuedmundo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/figuedmundo/mamirri-app/tree/main/.opencode/skill/frontend-design
Command: npx skills add https://github.com/figuedmundo/mamirri-app --skill frontend-design-figuedmundo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating visually distinctive and production-ready frontend interfaces that move beyond generic AI aesthetics, ensuring a memorable and polished user experience.

Core Features & Use Cases

  • Aesthetic Direction: Guides the selection of bold, intentional design themes (e.g., brutalist, art deco, maximalist).
  • Production-Grade Code: Generates functional HTML/CSS/JS, React, or Vue code.
  • Detailed Refinement: Focuses on typography, color, motion, spatial composition, and visual details.
  • Use Case: Design a unique landing page for a new artisanal coffee brand, emphasizing a "luxury/refined" aesthetic with custom typography and subtle animations.

Quick Start

Design a landing page for a new artisanal coffee brand with a luxury/refined aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate React UI components that don't look like generic AI designs?

To generate React UI components avoiding generic AI designs, define a bold aesthetic direction like brutalist or art deco first. This approach ensures visually striking, production-grade frontend interfaces by meticulously refining typography, color, and motion details.

What is the best way to create a production-grade landing page with a unique aesthetic?

Creating a production-grade landing page with a unique aesthetic involves committing to a specific design theme like maximalist or luxury. This process generates functional HTML, CSS, or React code while focusing on spatial composition and visual details for a memorable experience.

Can I use this to generate frontend web components with custom CSS and motion?

Yes, you can generate frontend web components with custom CSS and motion. The process focuses on detailed refinement of typography, color, and animations to craft distinctive, production-ready user experiences that avoid generic visual outputs.

Does this approach work for building Vue interfaces as well as React?

Yes, this approach works for building Vue interfaces as well as React. It generates functional, production-grade code in either framework by applying a bold aesthetic direction and refining visual details to ensure high design quality.

Why do my generated frontend interfaces lack visual distinction and polish?

Generated frontend interfaces often lack visual distinction because they default to generic AI aesthetics. Solving this requires committing to an intentional design theme and meticulously refining spatial composition, typography, and color to produce memorable experiences.

When should I use a brutalist or art deco aesthetic for my web components?

Use a brutalist or art deco aesthetic for web components when you need a visually striking and memorable user experience. These bold aesthetic directions guide the generation of production-grade code by intentionally refining typography and spatial composition.