frontend-design
Create distinctive, production-grade web interfaces with high design quality. Use for components, pages, dashboards, and full applications that need to stand out from generic AI aesthetics.
Best use case
frontend-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create distinctive, production-grade web interfaces with high design quality. Use for components, pages, dashboards, and full applications that need to stand out from generic AI aesthetics.
Teams using frontend-design should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-design/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-design Compares
| Feature / Agent | frontend-design | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create distinctive, production-grade web interfaces with high design quality. Use for components, pages, dashboards, and full applications that need to stand out from generic AI aesthetics.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Frontend Design
## Overview
This skill enables creation of distinctive, production-grade web interfaces that prioritize high design quality and avoid generic aesthetics. It applies to components, pages, dashboards, and full applications.
## When to Use
- Building custom UI components that need visual distinction
- Creating landing pages or marketing sites
- Designing dashboards and data visualization interfaces
- Full web applications requiring cohesive design systems
- Any interface that must avoid "generic AI" aesthetics
## Quick Start
1. **Establish design direction** before coding (purpose, tone, constraints)
2. **Select distinctive typography** (avoid Inter, Roboto, Arial defaults)
3. **Create intentional color palette** with clear primary/accent roles
4. **Add purposeful motion** for micro-interactions
5. **Break visual monotony** with asymmetry and grid variations
```css
/* Quick distinctive setup */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
:root {
--primary: #1a1a2e;
--accent: #e94560;
--text: #eaeaea;
}
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--primary);
color: var(--text);
}
```
## Related Skills
- [theme-factory](../theme-factory/SKILL.md) - Pre-built color/font themes
- [web-artifacts-builder](../../builders/web-artifacts-builder/SKILL.md) - Self-contained HTML apps
- [canvas-design](../canvas-design/SKILL.md) - Visual art generation
---
## Version History
- **2.0.0** (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections
- **1.0.0** (2024-10-15): Initial release with typography, color, motion, spatial design patterns, component examples, Tailwind/React integration
## Sub-Skills
- [Before Coding: Design Direction](before-coding-design-direction/SKILL.md)
- [Typography (+3)](typography/SKILL.md)
- [Generic AI Aesthetics (+1)](generic-ai-aesthetics/SKILL.md)
- [Implementation Philosophy](implementation-philosophy/SKILL.md)
- [Cards with Character (+1)](cards-with-character/SKILL.md)
- [Tailwind CSS (Custom Config) (+1)](tailwind-css-custom-config/SKILL.md)
- [Execution Checklist](execution-checklist/SKILL.md)
- [Common Issues](common-issues/SKILL.md)
- [Metrics](metrics/SKILL.md)
- [Philosophy](philosophy/SKILL.md)Related Skills
itinerary-design
Use when constructing a day-by-day itinerary inside a trip plan. Encodes base-count rules, jet-lag handling, transit-day discipline, slack budgeting, and the "last day = travel only" rule. Invoked by the trip-planner skill.
mooring-design
Design and analyze mooring systems including CALM and SALM buoys, catenary moorings, and spread mooring configurations. Covers mooring line design, safety factors, environmental loading, and compliance with DNV, API, and ABS standards.
touchdesigner-mcp
Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.
popular-web-designs
54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.
design-md
Author/validate/export Google's DESIGN.md token spec files.
Codex-design
Design one-off HTML artifacts (landing, deck, prototype).
canvas-design
Create original visual art in PNG and PDF formats using design philosophy principles. Express aesthetic movements visually with minimal text. Use for creating museum-quality visual artifacts, design manifestos, and artistic compositions.
scientific-problem-selection-key-design-principles
Sub-skill of scientific-problem-selection: Key Design Principles.
clinical-trial-protocol-waypoint-based-design
Sub-skill of clinical-trial-protocol: Waypoint-Based Design (+2).
clinical-trial-protocol-study-design-recommendations
Sub-skill of clinical-trial-protocol: Study Design Recommendations.
airflow-1-dag-design-principles
Sub-skill of airflow: 1. DAG Design Principles (+3).
viv-analysis-design-code-references
Sub-skill of viv-analysis: Design Code References.