skills.rest
memoirlabs
memoirlabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Create production-grade frontend interfaces with intentional visual design direction.

6|Updated Mar 26, 2026
Search Tags:#typography#frontend#ui design#web components#motion design#production code#responsive css
One-click install
npx skills add https://github.com/memoirlabs/mog --skill frontend-design-memoirlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/memoirlabs/mog/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/memoirlabs/mog --skill frontend-design-memoirlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create distinctive, production-grade frontend interfaces that feel genuinely designed rather than generic or “AI slop,” improving visual quality, usability, and coherence for real products.

Core Features & Use Cases

  • Bold, intentional design direction: Establishes a clear aesthetic concept (minimal, maximalist, retro-futuristic, editorial, brutalist, luxury, and more) and executes it with precision.
  • Production-grade UI implementation: Produces working frontend code (HTML/CSS/JS or frameworks like React/Vue) that prioritizes functionality alongside visual refinement.
  • Refined aesthetics guardrails: Enforces strong choices for typography, color/theming, motion, spatial composition, and visual details, while explicitly avoiding common cookie-cutter patterns (e.g., overused fonts and purple-on-white gradients).

Quick Start

Use the frontend-design skill to build a landing page for a new product with a bold, cohesive visual identity and production-ready, responsive UI code.

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 frontend UI that avoids generic AI styling?▼

Avoid generic AI styling in frontend UI by committing to a specific visual direction like brutalist or editorial, and enforcing cohesive typography, palette, motion, and composition guardrails in your production code.

What is the best way to create a landing page with a cohesive visual identity?▼

The best way to create a landing page with a cohesive visual identity is to establish an intentional aesthetic concept first, then generate working, responsive HTML/CSS/JS or framework code that applies those design choices precisely.

Can I use this approach to style existing web components?▼

Yes, you can apply this approach to style and beautify existing web components or pages. It refines current interfaces by applying strong choices for typography, color theming, and motion design while avoiding common cookie-cutter patterns.

Does this frontend design method work with React and Vue frameworks?▼

Yes, this frontend design method works with React and Vue. It produces working frontend code in HTML/CSS/JS or popular frameworks, prioritizing both responsive functionality and visual refinement across your application.

Why does my generated web UI look like generic AI slop?▼

Web UI looks like generic AI slop when it relies on overused fonts and purple-on-white gradients. To fix this, enforce refined aesthetics guardrails that dictate intentional typography, motion, and texture choices in your production code.

Related Skills

Explore More Design & Creative Skills→
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

architecte-contenu

Generate sitemap.md, content-strategy.md, and Markdown wireframes from a project brief.

Community
Intermediate
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
algusaemalgusaem

frontend-design

Craft production-grade frontend interfaces with cohesive typography, color, motion, and accessibility.

Community
Advanced
yeeehaoooyeeehaooo

frontend-design

Create production-ready frontend interfaces with cohesive typography and color systems.

Community
Basic