Frontend Design

designuitypographyfrontendaesthetics

Summary

Guidance for distinctive, intentional UI design — aesthetic direction, typography, and choices that avoid looking like templated defaults.

Features

Set a clear aesthetic direction
Typographic hierarchy and pairing
Avoid generic, templated defaults
Cohesive color and spacing choices
Applies to new and existing UIs

Install This Skill

Add this skill to your favorite AI agent in a few steps.

Any AI agent

This skill is plain instructions — it works with any assistant that accepts custom instructions or system prompts.

Copy the skill content with the button below.
Paste it into your agent's instruction file or system prompt (for example AGENTS.md, .cursorrules, or a custom instructions field).
Ask the agent to apply the skill whenever the task matches.

Claude Code & Claude apps

Claude loads skills automatically from its skills directory.

Claude Code

Create a skill folder — personal: ~/.claude/skills/frontend-design/, or per-project: .claude/skills/frontend-design/
Save the skill content as SKILL.md inside that folder.
Claude Code picks it up automatically and invokes it when relevant.

mkdir -p ~/.claude/skills/frontend-design

Claude.ai / Claude Desktop

Enable Skills under Settings → Capabilities, then upload the skill (a folder or zip containing SKILL.md).

One-prompt install

Paste this prompt into any agent with web access and it will install the skill for you.

Install the "Frontend Design" skill from Onei AI. Fetch https://onei.ai/skills/frontend-design, extract the full skill content from the page, and save it where you load skills from (for Claude Code: .claude/skills/frontend-design/SKILL.md). From now on, apply this skill whenever it is relevant to my request.

Skill Content

Markdown Content

Copy this content and use it with your preferred AI agent

# Frontend Design

Use this skill when building new UI or reshaping existing UI and you want it to look intentional.

## What it helps with
- Choosing an aesthetic direction instead of defaulting to a framework's look
- Typography: hierarchy, pairing, rhythm
- Color, spacing, and detail decisions that read as considered
- Steering away from the "generic template" feel

## Principle
Distinctiveness comes from a small number of deliberate, consistent choices — not from decoration.

Description

A skill offering guidance for distinctive, intentional visual design when building a new interface or reshaping an existing one. It helps with aesthetic direction, typography, and the many small decisions that separate a considered UI from a templated default.