frontend-design

Guide UI design teams through a structured visual identity process.

2|Updated Jan 7, 2026
One-click install
npx skills add https://github.com/Lostovayne/Complete-Cursor-Clone-Next16 --skill frontend-design-lostovayne
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Lostovayne/Complete-Cursor-Clone-Next16/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Lostovayne/Complete-Cursor-Clone-Next16 --skill frontend-design-lostovayne

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Grounded design direction is often skipped, leading to templated, generic interfaces. This Skill guides teams to establish a distinctive visual identity for user interfaces, aligning hue, typography, spacing, and motion with the brand brief.

Core Features & Use Cases

  • Grounded design process that starts from a concrete subject, audience, and page job, ensuring a unique design thesis.
  • Process-oriented guidance: brainstorm, explore, plan, critique, build, and critique again to ensure alignment with brief.
  • Practical decision framework for typography, color, layout, and motion to avoid templated defaults in real projects.

Quick Start

Begin by clarifying the brief, write a one-sentence design thesis, then outline a bold visual plan and validate it against the brief.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I establish a distinctive visual identity for a UI design?▼

To establish a distinctive visual identity for UI design, start by clarifying the brief and writing a one-sentence design thesis. This ensures your visual plan aligns typography, color, and layout with the specific brand voice.

Why does my UI design look templated and generic?▼

Your UI design looks templated when grounded design direction is skipped. You can avoid generic interfaces by applying a structured process of brainstorming, exploring, planning, and critiquing to align visuals with the brand brief.

What is the best way to plan typography and color for a product interface?▼

The best way to plan typography and color for a product interface is using a decision framework that aligns hue and spacing with your brand brief. Outline a bold visual plan and validate it through a structured critique process.

Can I use this UI design process for marketing sites and dashboards?▼

Yes, you can use this UI design process for marketing sites and dashboards. The guidance applies to any product interface where a unique brand voice is required, ensuring your layout and motion decisions match the audience.

How do I start building a design system without defaulting to templates?▼

Start building a design system without templates by clarifying a concrete subject and audience. Write a design thesis, outline a bold visual plan, then follow the build and critique process to validate your typography and color choices.

When should I not use a structured UI design process?▼

You should not skip a structured UI design process when a unique brand voice is required for your interface. Avoid templated defaults by consistently applying the brainstorm, plan, build, and critique cycle to your visual identity.