Frontend DesignSkill

Added to Onei Jul 22, 2026

Summary

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

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.

Install

Related Skills

Skill: Theme Factory

by Anthropic

Style any artifact with a cohesive theme — 10 preset color/font themes, or generate a new one on the fly for slides, docs, reports, and pages.

Design & Creative

Skill: Brand Guidelines

by Anthropic

Apply official brand colors and typography to any artifact that benefits from a consistent, on-brand look and feel.

Design & Creative

Skill: Canvas Design

by Anthropic

Create beautiful static visual art as PNG and PDF using real design philosophy — posters, artwork, and layouts.

Design & Creative

Skill: MCP Apps Tool and Widget Generator

by Microsoft

Microsoft's official plugin that generates codeful MCP tools — a self-contained JS runtime plus JSON Schema metadata — and single-file HTML widgets to visualise their results.

Development

Browse all skills →