frontend-design

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

Updated Aug 2, 2026
One-click install
npx skills add https://github.com/jeje-it/template-projet --skill frontend-design-jeje-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jeje-it/template-projet/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/jeje-it/template-projet --skill frontend-design-jeje-it

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web designs tend to converge on generic, templated looks that lack a distinctive point of view. This Skill provides a structured design methodology that pushes toward intentional, subject-specific choices in palette, typography, layout, and motion. ## Core Features & Use Cases - Design Planning Framework: Brainstorm a compact token system covering color (4-6 named hex values), type roles, layout concepts with ASCII wireframes, and a single signature element before writing code. - Anti-Default Calibration: Identifies common AI-generated design clichés and requires revising any plan element that reads as a generic default rather than a brief-specific choice. - Copywriting Guidance: Treats interface copy as design material with rules for active voice, error states, empty states, and consistent vocabulary. - Use Case: When asked to build a landing page for a new product, use this Skill to first produce a deliberate design plan grounded in the subject's world, critique it against generic defaults, then implement the page following the plan exactly. ## Quick Start Design a landing page for my product with a distinctive visual identity, planning the palette, typography, and signature element before writing any code.

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 choice in the subject's own world, materials, and vernacular rather than reaching for default palettes. Plan a token system first with named hex colors, deliberate type pairings, and one signature element, then revise anything that reads as a templated default.

What is a good process for planning a website design before coding?▼

Work in two passes: first brainstorm a compact plan covering color, typography, layout concepts with ASCII wireframes, and a signature element. Then critique the plan against generic defaults, revise weak parts, and only then write code following the revised plan exactly.

How should typography be handled in web design?▼

Pair display and body faces deliberately rather than reusing familiar families, and set a clear type scale with intentional weights, widths, and spacing. The type treatment itself should be a memorable part of the design, not a neutral delivery vehicle.

When should animation be used in web page design?▼

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

What are common AI-generated design clichés 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 a brief demands them, but should not be defaults when the direction is open.