skills.rest
tassiovale
tassiovaleCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Guide UI/UX design with aesthetic direction, typography, and non-templated choices.

13|3|Updated Jun 10, 2026
Search Tags:#typography#UX design#visual identity#UI design#aesthetic direction
One-click install
npx skills add https://github.com/tassiovale/claude-code-kit --skill frontend-design-tassiovale
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tassiovale/claude-code-kit/tree/main/skills/frontend-design
Command: npx skills add https://github.com/tassiovale/claude-code-kit --skill frontend-design-tassiovale

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps solve the problem of creating distinctive, intentional visual designs for new UIs or reimagining existing ones by guiding aesthetic direction, typography, and non-templated choices.

Core Features & Use Cases

  • Aesthetic Direction: Guidance on creating unique visual identities for UIs.
  • Typography: Help with pairing and scaling typography for a distinct look.
  • Non-templated Choices: Encourages making deliberate, opinionated design choices.
  • Use Case: For a project that requires a unique brand identity, this Skill can help create a custom color palette, typography, and layout that stand out.

Quick Start

Use the frontend-design skill to brainstorm a design plan for a new web app, including a unique color palette and typography choices.

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 distinctive UI design that avoids generic templates?▼

Creating a distinctive UI design requires establishing a deliberate aesthetic direction with custom color palettes, intentional typography pairings, and non-templated layout choices that form a unique visual identity.

What is aesthetic direction in UX design?▼

Aesthetic direction in UX design is the process of making deliberate, opinionated visual choices to craft a unique brand identity, ensuring the interface stands apart from generic, templated layouts.

How do I choose and scale typography for a unique visual identity?▼

Choosing typography for a visual identity involves deliberate pairing and scaling to achieve a distinct look, moving beyond default fonts to support the overall aesthetic direction of the UI.

Can I use this approach to redesign an existing web app interface?▼

Yes, this approach can be applied to reimagine existing UIs by providing guidance on creating distinctive, intentional visual designs and updating the typography and aesthetic direction.

What is the best way to brainstorm a design plan for a new web app?▼

The best way to brainstorm a design plan for a new web app is to focus on non-templated choices, defining a unique color palette and typography that align with a deliberate aesthetic direction.

Related Skills

Explore More Design & Creative Skills→
xlsamaxlsama

teach-impeccable

Analyze project files and user answers to write a Design Context section for CLAUDE.md.

Community
Intermediate
firstsun-devfirstsun-dev

frontend-design

Translate design direction into responsive frontend interfaces with HTML/CSS/JS or framework components.

Official
Intermediate
truongnattruongnat

ux-design-pro

Support UX design with user research, information architecture, wireframing, and WCAG accessibility standards.

Community
Advanced
s0613s0613
1

sj-design

Generates three on-brand wireframe HTML design variants from reference URLs or brand design systems.

Community
Advanced