frontend-design

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

2|Updated May 9, 2026
One-click install
npx skills add https://github.com/Manuel-Gartenkrot-Casal/AfterDrive_Intelligence --skill frontend-design-manuel-gartenkrot-casal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Manuel-Gartenkrot-Casal/AfterDrive_Intelligence/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Manuel-Gartenkrot-Casal/AfterDrive_Intelligence --skill frontend-design-manuel-gartenkrot-casal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web designs tend to cluster around a few generic looks—cream backgrounds with serif displays, dark themes with acid accents, or broadsheet layouts—making every page feel templated. This Skill provides a disciplined design process that produces intentional, subject-specific visual identities instead of defaults. ## Core Features & Use Cases - Structured Design Planning: 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 before writing code. - Self-Critique Workflow: Review the plan against the brief to catch generic choices, revise them, then build—followed by post-build critique including screenshots when available. - Copywriting Guidance: Write interface copy with active voice, consistent action naming, and purposeful error and empty states. - Use Case: When asked to build a landing page for a new product, use this Skill to ground the design in the product's own world, pick a deliberate palette and type pairing, and ship one memorable signature element instead of a template look. ## Quick Start Design a landing page for my product using the frontend-design skill, starting with a design plan 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 the design in the subject's own world—its materials, artifacts, and vernacular—rather than reaching for default palettes. Plan a token system with named hex colors, deliberate type pairings, and one signature element, then critique the plan for templated choices before coding.

What is a design token system for web pages?▼

A design token system is a compact plan defining color as 4-6 named hex values, typography across display, body, and utility roles, a layout concept with wireframes, and a signature element. It keeps every CSS decision derived from one coherent plan.

How should I choose typography for a landing page?▼

Pair a characterful display face used with restraint with a complementary body face, adding 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: a page-load sequence, scroll-triggered reveal, hover micro-interactions, or ambient atmosphere. One orchestrated moment lands harder than scattered effects, and excess animation often signals an AI-generated design.

Why do my CSS styles cancel each other out?▼

Conflicting selector specificity causes cancellations, especially between type-based selectors like .section and element-based selectors like .cta competing over paddings and margins. Structure selectors carefully and derive spacing rules from a single layout plan.

What are the limitations of prompt-based design guidance?▼

Guidance alone cannot enforce visual quality; results depend on following the plan-critique-build loop and self-reviewing output, ideally with screenshots. It also cannot supply real brand assets or content, so copy and imagery may need to be invented for the brief.