Website Design Skills for Claude Code, Codex & AI Agents

These skills help an agent design websites that look intentional rather than generated, from layout and spacing to responsive behavior. They range from opinionated taste guides to full web design workflows and a site-cloning template.

26 skills

Start here

Impeccable — design directions and gallery
Free
Web & UI

Impeccable

Impeccable is an AI frontend design Skill for building and refining interfaces: typography, layout, accessibility, responsive behavior and browser iteration.

108.6KStars6.5KForks
Repository last pushed
The author's side-by-side comparison of an original Instruct website and its reconstructed clone.
Free
Web & UI

AI Website Cloner Template

Rebuild reference websites as editable Next.js pages with an AI coding agent. Inspect responsive layouts, assets and interactions, then compare the result with the source.

39.1KStars5.8KForks
Repository last pushed

Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one smooth-scroll engine, optional Three.js shaders, honest icon and logo sourcing, photo avatars, accessibility, and performance safeguards. Use when a user asks for an Awwwards-quality, premium, cinematic, interactive, high-concept, or motion-led website, or explicitly requests this visual and motion system.

  • Web design
  • creative development
7.5KStars861Forks
Repository last pushed

Practical UI engineering workflows from Emil Kowalski, including mobile web and edge-case testing.

  • Web design
57KStars3.3KForks
Repository last pushed

Explore Website Design skills

22 skills
Oil UI — Gallery highlights: an English learning app, a music year in review, hardware and component library websites, a project management tool, a ride-hailing app, a voice assistant, a checkout flow, and a film camera
Free
Web & UI

Oil UI

Explore and refine interface design through visual directions, same-screen style comparisons, screenshot review, and runnable UI deliverables.

3.2KStars182Forks
Repository last pushed

Accessibility Expert

Brian (slb2248)

Use a WCAG 2.1-oriented checklist for semantic HTML, keyboard access, contrast and accessible form behavior.

  • accessibility
  • Web design
7Stars1Forks
Repository last pushed
Illustrative Claude Academy recommendation linking to the official Claude Code learning resource.
Free
Web & UI

Frontend Design

Build distinctive web interfaces with content-informed typography, composition and visual direction.

193.4KStars22.8KForks
Repository last pushed

Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.

  • typography
  • Web design
2.7KStars266Forks
Repository last pushed
Taste Skill homepage with its frontend framework introduction, installation command and website examples.
Free
Web & UI

Taste Skill

Art direction for AI-built websites and app screens, with real imagery, separate page and app workflows, and browser inspection. The main entry is design-taste-frontend.

113.9KStars7.7KForks
Repository last pushed
Auteur Web Experiences — official illustration from the upstream README
Free
Web & UI

Auteur Web Experiences

Design and build marketing pages, cinematic scroll experiences, and multi-screen products through a staged brief, asset, and implementation workflow.

1KStars20Forks
Repository last pushed
Agent Skills cover with Spec, Plan, Build, Test, Review, Simplify and Ship workflow labels.
Free
Web & UI

Frontend UI Engineering

Build responsive UI components with project design systems, accessible interactions and complete application states.

116.3KStars12.2KForks
Repository last pushed

Build responsive interfaces with container queries, fluid typography and adaptive layouts.

  • responsive-design
42.5KStars4.5KForks
Repository last pushed
Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
Free
Web & UI

Better Layout

Review grouping, alignment, reading order and responsive layouts.

12.1KStars468Forks
Repository last pushed
Scroll Craft — AI Automation Society, a dark editorial community landing
Free
Web & UI

Scroll Craft

Plan and build scroll-driven landing pages with a defined visitor journey, dimensional hero sections, and a distinctive interaction direction.

5KStars693Forks
Repository last pushed

UI UX Kit

Muhammad Arham Athar

Route UI work by product surface, define a visual concept, implement reusable tokens and states, and document the result in DESIGN_SYSTEM.md.

  • ui-design
  • ux-design
  • design-systems
3Stars1Forks
Repository last pushed
Exploded technical illustration of a hard disk drive, with its cover, head assembly, platters, enclosure and circuit board.
Free
Web & UI

Explain Interface

Explain how a website, visual effect or animation works from a URL or screenshot.

12.1KStars468Forks
Repository last pushed
Interface example before applying antislop
Free
Web & UI

Anti Slop — Responsive Layouts

Adapt grids, overflow, wrapping and tap targets across mobile and desktop layouts.

9KStars616Forks
Repository last pushed
Author-provided banner showing five game scenes. Its 74-skill label reflects an earlier edition; the reviewed catalog contains 76 specialized skills plus a router.
Free
Other utilities

Roblox Responsive UI

Build editable Roblox interfaces with responsive layouts, safe insets, cross-device input, motion, and lifecycle cleanup.

8.8KStars894Forks
Repository last pushed
Superdesign Skill — Superdesign skill demo
Pricing not specified
Web & UI

Superdesign Skill

Design and redesign interfaces, presentations, and graphics on the Superdesign canvas, then continue toward implementation from the selected design.

980Stars77Forks
Repository last pushed
Design DNA — example
Free
Web & UI

Design DNA

Extract and apply a design's tokens, qualitative style, and visual effects when defining a design direction or rebuilding an interface.

2.1KStars115Forks
Repository last pushed
Author-provided banner showing five game scenes. Its 74-skill label reflects an earlier edition; the reviewed catalog contains 76 specialized skills plus a router.
Free
Other utilities

Godot Responsive UI Controls

Lay out HUDs and menus with Control anchors, containers, themes, signal handlers, and keyboard or gamepad focus.

8.8KStars894Forks
Repository last pushed
Official Hallmark cover: black headline on a pale grid above three overlapping website examples.
Free
Web & UI

Hallmark Web Design

Build, redesign or audit websites with a clear visual direction, 48 themes or custom styling, and local UI checks for Claude Code, Codex, Cursor and OpenCode.

53.7KStars2.9KForks
Repository last pushed

Huashu Design

alchaincyf

Create high-fidelity HTML prototypes, presentations, animations and visualizations with explicit design-direction review.

  • web-design
  • prototyping
29.3KStars3.1KForks
Repository last pushed

Create visual HTML articles, interfaces, images, motion videos and narrated web presentations, or retrieve local knowledge.

  • web-design
  • visualization
15KStars1.7KForks
Repository last pushed

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations.

  • web-design
  • ui-design
15KStars1.7KForks
Repository last pushed

Turn source material into an offline, single-file HTML visual article.

  • web-design
  • articles
15KStars1.7KForks
Repository last pushed

Related topics

Related guides

How to choose Website Design skills

Use a taste or design-direction skill when output looks generic, a responsive-design skill when layouts break on phones, and the cloner template when you need to match an existing site.

  • Make an AI-built website look less AI-built
  • Fix a layout that breaks on mobile screens
  • Rebuild a reference site's structure as a starting point