frontend-design

Guides creation of distinctive, non-templated visual designs for web UI projects.

Updated Aug 24, 2026
One-click install
npx skills add https://github.com/Mantis-Technology/mantis-laravel --skill frontend-design-mantis-technology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Mantis-Technology/mantis-laravel/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Mantis-Technology/mantis-laravel --skill frontend-design-mantis-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web designs tend to converge on the same templated looks—generic palettes, default typography, and formulaic layouts. This Skill provides a structured design methodology that pushes every UI toward a deliberate, subject-specific visual identity instead of interchangeable defaults. ## Core Features & Use Cases - Design Planning Framework: Brainstorm a compact token system covering color (4-6 named hex values), typography (display, body, and utility faces), layout concepts with ASCII wireframes, and a single signature element. - Self-Critique Process: Review plans against the brief to detect generic defaults, revise them, and critique the built result before delivery. - Copywriting Guidance: Write interface copy with active voice, consistent vocabulary, and purposeful error and empty states. - Use Case: When asked to build a landing page for a new product, use this Skill to first define a distinctive palette, type pairing, and signature element grounded in the product's subject matter, then build the page following that plan. ## Quick Start Design a landing page for my product with a distinctive visual identity that avoids generic AI-generated design patterns.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I make AI-generated web designs look less generic?▼

Ground every design choice in the subject's own world—its materials, vocabulary, and artifacts—rather than reaching for default palettes. Define a compact token system with named hex colors, deliberate type pairings, and one signature element before writing any code.

What is a good process for planning a website's visual design?▼

Work in two passes: first brainstorm a design plan covering color, typography, layout, and a signature element, then critique that plan against the brief to remove generic choices. Only start coding after confirming the plan is specific to this brief.

How do I choose typography for a web design project?▼

Pair a characterful display face used with restraint with a complementary body face, plus a utility face for captions or data if needed. Set a clear type scale with intentional weights, widths, and spacing so the typography itself becomes memorable.

When should I use animation in web design?▼

Use animation only where it serves the subject, such as a page-load sequence, scroll-triggered reveal, or hover micro-interactions. One orchestrated moment usually lands better than scattered effects, and excess animation can make a design feel AI-generated.

What are common AI-generated design patterns to avoid?▼

Three overused looks are warm cream backgrounds with serif display type and terracotta accents, near-black backgrounds with acid-green accents, and broadsheet layouts with hairline rules. These are legitimate when the brief asks for them, but should not be defaults.