frontend-design

Translate product briefs into coherent frontend visual systems with palette, typography, and layout.

Updated Jun 15, 2026
One-click install
npx skills add https://github.com/giovi1998/SitoPreventivo --skill frontend-design-giovi1998
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/giovi1998/SitoPreventivo/tree/main/.agents/skills/.agents/skills/frontend-design
Command: npx skills add https://github.com/giovi1998/SitoPreventivo --skill frontend-design-giovi1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you turn vague product requirements into a clear, distinctive front-end design direction instead of a generic template, so the interface feels intentional and tailored to the subject.

Core Features & Use Cases

  • Visual identity planning: Choose a palette, typography pair, layout structure, and signature element that fit the product's context.
  • Page and screen direction: Shape landing pages, dashboards, onboarding flows, marketing pages, and redesigns with a coherent aesthetic.
  • Practical design critique: Refine drafts by checking whether the work feels specific, legible, responsive, and accessible rather than decorative.
  • Use case: A founder needs a fresh landing page for a niche SaaS product, and this Skill helps define the hero concept, type system, spacing, and motion approach before implementation.

Quick Start

Ask this Skill to design a distinctive front-end concept for your page and include the audience, content goals, and brand constraints.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a distinctive frontend design direction from a vague product brief?

Distinctive frontend design replaces generic templates by translating product requirements into a coherent visual system with deliberate choices for palette, typography, hierarchy, layout, motion, and responsive accessibility.

What is visual identity planning for a frontend UI?

Visual identity planning for a frontend UI involves choosing a palette, typography pair, layout structure, and a signature element that fit the product's context to ensure the interface feels intentional and tailored.

How do I design a landing page UI with a clear aesthetic point of view?

Designing a landing page UI with a clear aesthetic requires shaping the page with a coherent visual system, defining the hero concept, type system, spacing, and motion approach before implementation begins.

Can I use this approach to redesign dashboards and onboarding flows?

Yes, you can apply this frontend design approach to shape dashboards, onboarding flows, marketing pages, and redesigns by establishing a coherent aesthetic and visual identity across all product screens.

How do I critique a frontend design draft for accessibility and legibility?

To critique a frontend design draft, refine the work by checking whether the interface feels specific, legible, responsive, and accessible rather than merely decorative, ensuring the visual hierarchy remains usable.

What do I need to start defining a visual identity for a SaaS landing page?

To start defining a visual identity for a SaaS landing page, provide the audience, content goals, and brand constraints so the design direction can be tailored to those specific product requirements.