skills.rest
harnessprotocol
harnessprotocolOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generate frontend interfaces using typography, OKLCH color, layout, motion, and UX writing rules.

9|2|Updated Mar 7, 2026
Search Tags:#typography#ux writing#frontend design#ui layout#motion design#color tokens
One-click install
npx skills add https://github.com/harnessprotocol/harness-kit --skill frontend-design-harnessprotocol
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/harnessprotocol/harness-kit/tree/main/plugins/frontend-design/skills/frontend-design
Command: npx skills add https://github.com/harnessprotocol/harness-kit --skill frontend-design-harnessprotocol

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you generate production-grade frontend interfaces that look intentionally designed rather than generic AI-generated “slop.”

Core Features & Use Cases

  • Design-context driven output: Ensures Claude gathers audience, use cases, and brand tone before producing UI code.
  • Bold aesthetic guardrails: Forces a specific, memorable design direction across typography, color, layout, motion, interaction, and UX writing.
  • AI Slop Test compliance: Includes an explicit checklist that catches common AI UI fingerprints before “shipping.”
  • Practical UI implementation: Produces working HTML/CSS/UX guidance aligned to the specified rules (e.g., OKLCH color, accessible focus states, reduced-motion support).

Quick Start

Ask for a web page or app UI and include your audience and brand tone so Claude can apply the full set of frontend design rules.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate frontend UI layouts that don't look like generic AI slop?▼

You can generate distinctive frontend UI by applying strict rules for typography, OKLCH color, layout spacing, motion, and interaction states, then running the output through a pre-shipping AI slop checklist to catch generic patterns and accessibility regressions.

What design context do I need to provide before generating web components and pages?▼

Before generating web components and pages, you must provide the audience, use cases, and brand tone so the design context gathering process can apply the correct typography, color tokens, and UX writing rules to the UI layout.

Can I use OKLCH color tokens and accessible focus states in my generated UI?▼

Yes, the generated UI implementation uses OKLCH color tokens, accessible focus states, and reduced-motion support to ensure production-grade HTML and CSS that meets accessibility standards for your web components and applications.

What is the best way to ensure my AI-generated UI has accessible interaction states and motion design?▼

The best way to ensure accessible interaction states and motion design is to apply mandatory rules for accessible focus states and reduced-motion support, then verify the output against a checklist that prevents common accessibility regressions before shipping.

Does this frontend design approach work for full applications or just individual web components?▼

This frontend design approach works for web components, individual pages, and full applications where HTML, CSS, UI layout, and design system decisions must be made, applying consistent typography and UX writing rules across all scopes.

Why does my AI-generated UI lack a distinctive aesthetic direction in its typography and layout?▼

Your UI lacks a distinctive aesthetic because it is missing bold design guardrails that force a specific, memorable direction across typography, OKLCH color, layout spacing, motion, and UX writing, resulting in generic AI slop.

Related Skills

Explore More Design & Creative Skills→
riabtsevriabtsev

frontend-design

Generate frontend UI code from audience, use cases, and brand tone.

Community
Advanced
samjhechtsamjhecht
4

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

Community
Advanced
ellowenellowen

interface-design

Design cohesive user interfaces for dashboards, admin panels, and apps.

Community
Advanced
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic