frontend-design

Guides creation of distinctive, non-templated visual design for web UI builds.

3|Updated Aug 18, 2026
One-click install
npx skills add https://github.com/Aditya81018/Apple-Internship --skill frontend-design-aditya81018
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Aditya81018/Apple-Internship/tree/main/website/.agents/skills/frontend-design
Command: npx skills add https://github.com/Aditya81018/Apple-Internship --skill frontend-design-aditya81018

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces tend to converge on the same templated looks—generic palettes, default typography, and decorative structure—regardless of the subject. This Skill provides a disciplined design process that produces intentional, subject-specific visual direction for new UI builds or redesigns. ## Core Features & Use Cases - Design Planning Framework: Brainstorm a compact token system covering color (4-6 named hex values), typography (display, body, utility faces), layout concepts with ASCII wireframes, and a single signature element. - Anti-Default Critique: Reviews the plan against known AI design clichés (cream/serif/terracotta, dark/acid accent, broadsheet layouts) and revises anything that reads as a generic default before coding. - Copywriting Guidance: Applies the same intentionality to interface copy—active voice, user-side naming, consistent action labels, and purposeful error and empty states. - Use Case: When asked to build a landing page for a bakery or a dashboard for a SaaS product, use this Skill to first establish a distinctive design direction grounded in the subject's world, then implement it with deliberate typography, motion, and restraint. ## Quick Start Design a landing page for my product with a distinctive visual identity that avoids generic AI-looking templates.

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 design look less generic?

Ground every choice in the subject's own world—its materials, artifacts, and vernacular—rather than reaching for default palettes and fonts. Plan a compact token system first, then critique it against common AI design clichés before writing any code.

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

Define color as 4-6 named hex values, choose display and body typefaces deliberately, sketch layout concepts with ASCII wireframes, and pick one signature element. Review the plan for generic choices, revise, then build exactly from the revised plan.

How should typography be handled in web UI design?

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 type treatment itself becomes memorable.

When should animation be used in web design?

Use motion only where it serves the subject: a page-load sequence, scroll-triggered reveal, or hover micro-interactions. One orchestrated moment lands harder than scattered effects, and excess animation often makes a design feel AI-generated.

What are the limitations of prompt-based design guidance?

Guidance cannot replace visual verification, so results depend on the builder's execution and critique discipline. Where possible, take screenshots during the build to evaluate the actual rendered output rather than trusting the plan alone.