Frontend Design
Distinctive front-end UI design that looks beautiful AND is verifiably correct — design first, accessibility and performance checks run alongside.
SKILL.md in the open agentskills.io standard — works directly in Claude, ChatGPT/Codex, Cursor, Copilot & more.
Frontend Design is an AI skill for front-end UI design that doesn't look AI-generated: it builds distinctive, production-ready interfaces, checked for accessibility (WCAG), contrast, focus, layout shift and performance.
What this skill does
- Opens with a short query (wishes/no-gos/references) or states transparent defaults
- Picks a deliberate, distinctive design direction and justifies it (anti-AI-slop)
- Generates design tokens (color, type, spacing, radius) as CSS variables or Tailwind config
- Builds production-ready, semantic code incl. mandatory mobile navigation and footer
- Uses motion, subtle parallax and glass cards deliberately (legibility + fallback)
- Continuously checks against WCAG 2.2 / MDN / web.dev and fixes violations
- Runs screenshot-QA across breakpoints on whole pages and reports back
Description
Frontend Design is a skill for front-end UI design — it builds distinctive, production-ready interfaces instead of generic AI slop, and continuously checks web accessibility, color contrast, keyboard focus, layout shift (CLS) and performance. A design engineer in one skill: it picks a deliberate, distinctive design direction instead of the generic AI look (no Inter/Roboto defaults, no purple-gradient clichés, no card-in-card), produces reusable design tokens and production-ready code in your stack (HTML/CSS+Tailwind by default, React/Vue/Svelte on request) — while checking against the primary standards (WCAG 2.2, MDN, web.dev): a11y, focus, keyboard, contrast, layout stability (CLS), motion and performance, including fixes. On top of that, a real production process: a light start query, deliberate motion, subtle parallax and glass cards with hard legibility rules, mandatory mobile navigation and footer, layout-safe typography for long words — and screenshot-QA across breakpoints (no horizontal overflow, no text collisions) as a hard acceptance gate. Beautiful, correct and designed like a finished product.
Examples
What it does not do
- No generic “AI slop” (unless explicitly wanted as branding)
- No invented logos/images/brands — placeholders with dimensions instead of fake assets
- No backend, no real data wiring
- No measured performance numbers (use Web Vitals for that)
Compatibility & tech
- Tested (internal)
- 3 scenarios
- Recommended runtime
- Claude Opus or Sonnet
- Modes
- Create · Self-audit & fix · Screenshot-QA (multiple breakpoints)
- Inputs
- Brief/description · existing UI code · screenshot/reference
- Output format
- Design direction + tokens + code (HTML/CSS/Tailwind, React/Vue/Svelte) + self-check report
- Subcategory
- UI & Design
- License
- Proprietär
Security profile
Runs entirely on your machine with your own AI — no external runtime, no running costs.
Only instructions, templates and references — no executable scripts.
Works offline with what you provide — does not call external services on its own.
What you get
- frontend-design-1.3.0/4 files
- .claude-plugin/marketplace.json
plugins/frontend-design/skills/frontend-design/4 files
- SKILL.md
- manifest.json
references/2 files
- frontend-design-guidelines.md
- frontend-design-production-rules.md
- .agents/skills/frontend-design/→ universal — same content (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
- LICENSE.txt
Installation
Also works as a chat prompt
No AI tool? Paste it into Claude, ChatGPT or Gemini and use the method right away.
This skill ships no scripts, so the prompt carries its full method.
Installing is the full version — it triggers automatically, runs its scripts and loads references as needed. As a chat prompt you drive the method by hand.
Unlock to copy the ready-to-paste prompt — then in “My Skills”.
Reviews
No reviews yet – be the first.
Note
Best with context: target framework (React/Vue/Svelte or HTML/CSS/Tailwind), brand/tone and any existing design system or tokens; without these the skill asks briefly. The built-in self-check covers contrast, focus, layout shift and performance, but does not replace a full website audit — for that → Web Vitals or Website Doctor.
Changelog
- v1.3.001.07.2026Production process, not just a surface: a light start query (wishes/no-gos/references), deliberate motion, subtle parallax and glass cards with hard legibility rules, mandatory mobile navigation + footer, layout-safe typography (long words actively tested) and screenshot-QA across breakpoints as a hard acceptance gate. New: background images become clean, clearly-labeled placeholders — a real image only when the runtime can generate one (e.g. ChatGPT or a CLI with image generation); simple SVG/CSS graphics are drawn directly. New reference frontend-design-production-rules.md.
- v1.2.022.06.2026Platform-native output: now actively uses your platform's native formatting — tables, checklists, code blocks and clickable/button options, with a numbered fallback on non-interactive platforms. Plus internal metadata that prepares the upcoming agent builder.
- v1.1.018.06.2026Guidelines deepened: forms (autocomplete/type/inputmode, labels, no paste-blocking), touch & target size (WCAG 2.2 SC 2.5.8, touch-action, overscroll-behavior), dark mode (color-scheme), hydration/SSR, typographic polish, navigation/state — all grounded in primary sources, written in our own words.
- v1.0.018.06.2026First release per AUTHORING v2: design-led creation with continuous quality checks (WCAG 2.2/MDN/web.dev), anti-AI-slop discipline, design tokens, stack-adaptive (Tailwind default); references rubric + internal evals; realistic input/answer examples.
Frequently asked questions
What does Frontend Design do?
Frontend Design is an AI skill for front-end UI design that doesn't look AI-generated: it builds distinctive, production-ready interfaces, checked for accessibility (WCAG), contrast, focus, layout shift and performance.
How do I build a UI that doesn't look AI-generated?
Frontend Design builds distinctive, production-ready interfaces instead of generic AI slop, so your frontend gets a look of its own instead of the cookie-cutter AI-website-builder feel. Design comes first, with no compromise on how it looks.
How do I make sure my website is accessible (WCAG)?
Frontend Design continuously checks web accessibility, color contrast and keyboard focus against WCAG 2.2 while it designs. You get an interface that is provably correct, not just nice to look at.
How do I avoid layout shift (CLS) and slow load times in the frontend?
Frontend Design watches layout shift (CLS) and front-end performance while it builds, so the result is stable and fast from the start instead of being patched up afterwards.
How do I get a working mobile navigation and a finished footer?
Frontend Design plans a mobile navigation and a footer for whole pages automatically — a real menu button, keyboard operable, plus a footer that stands on its own — and verifies both with screenshot-QA across breakpoints. The page feels finished on phones instead of cut off.
Does Frontend Design create background images and graphics?
Simple graphics (SVG/CSS patterns, icons, gradients) are built straight into the layout. Photographic background images become a clean, clearly-labeled placeholder at fixed dimensions (no fake stock, no layout shift) — a real image is generated only if your runtime can do it, for example ChatGPT or a CLI with image generation.
Which AI tools does Frontend Design work with?
Claude (Projects/Code) · ChatGPT (Custom GPT/Canvas) · Cursor · GitHub Copilot · Gemini CLI · Windsurf · Cline · any LLM
How do I use Frontend Design?
Frontend Design is a SKILL.md in the open agentskills.io standard: install it with one command (npx) or download it and add it to your AI tool — Claude (Projects), ChatGPT (Custom GPT), Cursor, Copilot, Gemini CLI and more. No code needed.