frontend-design

Align typography, color, and layout to a subject and audience.

13|3|Updated Mar 2, 2026
One-click install
npx skills add https://github.com/misty-step/harness-kit --skill frontend-design-misty-step
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/misty-step/harness-kit/tree/main/skills/.external/anthropic-frontend-design
Command: npx skills add https://github.com/misty-step/harness-kit --skill frontend-design-misty-step

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This design guidance helps design leads produce a distinctive, non-templated visual identity by iterating on palette, typography, and layout to match the brief and subject matter.

Core Features & Use Cases

  • Deliberate palette and typography choices that give a brand's UI a unique voice.
  • Layout and structure guidance that reflect the subject, audience, and product goals.
  • Process from brainstorming to critique, ensuring a signature design direction.

Quick Start

Begin by drafting a concise design plan that translates the brief into a unique visual direction for typography, color, and layout.

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 templated defaults?

To create a distinctive UI design, align typography, color palette, and layout choices directly with your subject matter and target audience, establishing a clear signature element rather than relying on standard templates.

What is the design process for building a non-templated visual identity?

The design process involves iterating on palette, typography, and layout from initial brainstorming through critique, ensuring the visual identity matches the brief and produces focused work-in-progress planning artifacts.

How do I choose the right typography and color palette for a product redesign?

Choose typography and color palettes by deliberately matching them to the product goals and audience, giving the brand's UI a unique voice that reflects the specific subject matter of the redesign.

Can I use this approach to establish a design system with a signature element?

Yes, you can establish a design system with a clear signature element by defining a focused design vision that translates the initial brief into a unique visual direction for layout and structure.

When do I need to outline concrete steps for UI layout and structure guidance?

You need to outline concrete steps for UI layout and structure guidance when branding a new product or redesigning an app interface, ensuring the layout reflects the audience and product goals.

What are the limitations of using a signature design direction for a brand's UI?

A signature design direction requires deliberate alignment of typography, color, and layout to match the brief, meaning it demands continuous iteration from brainstorming to critique to avoid falling back into templated defaults.