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.