frontend-design

Create unique user interfaces with structured design systems and two-pass planning.

12|3|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/tsukhani/jclaw --skill frontend-design-tsukhani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tsukhani/jclaw/tree/main/skills/frontend-design
Command: npx skills add https://github.com/tsukhani/jclaw --skill frontend-design-tsukhani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the common issue of AI-generated interfaces feeling generic, templated, and indistinguishable from one another by enforcing deliberate, opinionated design choices.

Core Features & Use Cases

  • Opinionated Design Planning: Generates a structured design system including color palettes, typography scales, and unique signature elements.
  • Constraint-Based Creativity: Forces the AI to move beyond default aesthetic clusters (like cream backgrounds or acid-green accents) to create bespoke visual identities.
  • Use Case: Use this skill when you need to design a landing page for a new product that requires a strong, memorable brand identity that stands out from standard industry templates.

Quick Start

Invoke the frontend-design skill to create a comprehensive design plan for a high-end coffee subscription service landing page.

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 non-templated UI design that avoids generic AI defaults?▼

To create a non-templated UI design, you need to establish a specific design system with opinionated typography, color palettes, and layout structures. This approach enforces deliberate aesthetic choices over generic defaults to build a unique visual identity.

Why does my generated landing page layout feel generic and indistinguishable?▼

Your generated layout feels generic because it relies on default aesthetic clusters like standard cream backgrounds. Moving beyond templated interfaces requires constraint-based creativity and a two-pass planning process that prioritizes structural clarity and aesthetic risk-taking.

What is the best way to plan a design system for a distinctive brand identity?▼

The best way to plan a distinctive brand identity system is to generate a structured set of bespoke typography scales, color palettes, and unique signature elements. This ensures the final interface stands out from standard industry templates.

Can I use this design planning approach for a high-end product landing page?▼

Yes, you can use this design planning approach for a high-end product landing page. It is specifically built to craft strong, memorable brand identities by enforcing opinionated visual design choices tailored to unique subjects.

Do I need to define typography and color palettes before generating a unique UI?▼

Defining typography and color palettes is part of the output process rather than a prerequisite. The planning process automatically establishes these design system components to ensure the interface avoids templated structures.

When should I not use a templated design approach for frontend layout?▼

You should avoid templated design approaches when a product requires a strong, memorable brand identity. If your frontend layout needs to stand out from standard industry templates, you must enforce deliberate, opinionated design choices.