Claude Skills for Web Design

A skill is a folder that packages instructions, scripts and resources for a specific job, with a SKILL.md file at its centre. When a task matches what the skill describes, Claude brings it in on its own.

1. 01

   Download the skill folder from the link (the folder that contains SKILL.md).

2. 02

   Put it in the project's .claude/skills/ directory to use it in one project, or in ~/.claude/skills/ to use it everywhere.

3. 03

   Restart Claude Code. The skill kicks in on its own, or you can call it directly with /skill-name.

• 01View on GitHub

  frontend-design

  Distinctive, intentional visual design

  Anthropic's official skill. Guides aesthetic direction, typography and composition when you build a new interface or reshape an existing one, steering away from choices that read as templated defaults.

  When to use it

  When setting the visual direction of a new interface, before the first draft.

• 02View on GitHub

  design-taste-frontend

  Anti-slop rules for landing pages, portfolios and redesigns

  Reads the brief, infers the right design direction and ships interfaces that don't look templated. Uses real design systems where they fit, audits first on redesigns and runs a strict pre-flight check before delivery.

  When to use it

  When building a landing page, portfolio or marketing site and you want the quality bar set from the start.

• 03View on GitHub

  high-end-visual-design

  Agency-grade visual detail

  Defines the exact fonts, spacing, shadows, card structures and animations that make a site feel expensive, and blocks the common defaults that make AI-made designs look cheap or generic.

  When to use it

  When the layout works but the page still looks ordinary; at the detail and polish stage.

• 04View on GitHub

  minimalist-ui

  Clean, editorial interfaces

  Builds an editorial language from a warm monochrome palette, typographic contrast, flat bento grids and muted pastels. No gradients, no heavy shadows.

  When to use it

  For blogs, docs and personal sites where content and type should lead.

• 05View on GitHub

  industrial-brutalist-ui

  Swiss typography meets terminal aesthetics

  Raw, mechanical interfaces that fuse Swiss print typography with military terminal aesthetics: rigid grids, extreme type-scale contrast, utilitarian colour and analog degradation effects.

  When to use it

  For data-heavy dashboards, portfolios or editorial sites that should feel like declassified blueprints.

• 06View on GitHub

  redesign-existing-projects

  Upgrading an existing site to premium

  Audits the current design, finds generic AI patterns and applies high-end design standards without breaking functionality. Works with any CSS framework or plain CSS.

  When to use it

  When reworking a site or app that already runs, without starting from scratch.

• 07View on GitHub

  theme-factory

  Ready-made or on-the-fly colour and font themes

  Anthropic's official skill. Offers 10 preset colour and font themes for slides, docs, reports and HTML landing pages, and can generate a new theme on the fly.

  When to use it

  When an output needs a consistent palette and font pairing, fast.

• 08View on GitHub

  brand-guidelines

  Anthropic's brand colours and typography

  Anthropic's official skill. Applies Anthropic's official brand colours and typography to any kind of output.

  When to use it

  When an output should carry Anthropic's look and feel.

• 09View on GitHub

  design-dna

  Turning a reference design into a readable profile

  Extracts a design's DNA from images, screenshots or URLs across three dimensions: design system (tokens), style (qualitative feel) and visual effects (Canvas, WebGL, 3D, particles, scroll effects). The result is a JSON profile that new designs can be generated from.

  When to use it

  When you want to decode a site you admire and carry its language consistently into your own project.

• 10View on GitHub

  imagegen-frontend-web

  A separate design reference image for every section

  Generates premium, conversion-aware website design references. The rule is strict: one separate horizontal image per section, so an 8-section landing page gets 8 images. It enforces composition variety, varied hero scales and one consistent palette across all images.

  When to use it

  When you want to see the page visually, section by section, before writing code.

• 11View on GitHub

  image-to-code

  Design image first, then matching code

  For visually important web work, it first generates the design images itself, analyses them in depth, then builds the site to match them as closely as possible. Written for Codex.

  When to use it

  When you want both the design and the build in one image-to-code flow.

• 12View on GitHub

  scroll-craft

  Immersive, scroll-driven landing pages

  Turns scroll into the timeline: video scrubs frame by frame under the wheel, sections pin and advance, headlines assemble line by line and the page ground shifts colour as you travel. It interviews you about the brand first, picks a different skeleton and signature move for each page, and verifies the result by screenshotting its own scroll.

  When to use it

  When a site should feel like an experience rather than a document; for product and brand showcases.

• 13View on GitHub

  algorithmic-art

  Generative art with p5.js

  Anthropic's official skill. Creates algorithmic art in p5.js with seeded randomness and interactive parameters: flow fields, particle systems, generative patterns. It makes original work rather than copying existing artists.

  When to use it

  When you need a code-generated visual for a hero background, a loading screen or a brand texture.

• 14View on GitHub

  motion-studio

  Motion graphics and promo films rendered from code

  Builds a short film in code, either as pure motion graphics or as a motion layer on a generated take. Each film gets its own style guide, a shot list on the beat grid, kinetic type on springs, a synthesised score and sound design, and a critique loop over every rendered frame. Pairs with reel-taste.

  When to use it

  When you need a hero video, a product launch film or a short promo for social media.

• 15View on GitHub

  brandkit

  Brand guideline boards and logo systems

  Generates high-end brand guideline boards, logo systems, identity decks and visual-world presentations. Tuned for minimalist, cinematic, editorial, dark-tech and luxury brand worlds among others, with an emphasis on symbolic meaning and sparse typography in logo concepts.

  When to use it

  When you want to pin down a brand's identity visually before designing the site.

• 16View on GitHub

  canvas-design

  Static visuals as PNG and PDF

  Anthropic's official skill. Starts from a design philosophy to produce posters, art pieces and other static designs as PNG and PDF, using a bundled library of openly licensed fonts.

  When to use it

  When you need a single static piece such as a cover image, an OG image or a poster.

• 17View on GitHub

  webapp-testing

  Testing a local site with Playwright

  Anthropic's official skill. Opens, drives and tests local web apps with Playwright: verifies frontend behaviour, debugs UI issues, captures screenshots and reads browser logs.

  When to use it

  When checking that a change really looks and works right in the browser.

• 18View on GitHub

  find-docs

  Up-to-date library documentation

  Fetches current documentation and code examples for any programming library or framework through Context7, including setup questions, migration guides and version-specific docs.

  When to use it

  When you need to be sure of an API in a library such as Next.js, Tailwind or framer-motion, and the model's knowledge may be out of date.

• 19View on GitHub

  full-output-enforcement

  Complete, untruncated code output

  Overrides the model's default truncation habits: enforces complete code, bans placeholder patterns and splits output cleanly when it hits a token limit.

  When to use it

  When a long component or page has to be written out in full, in one go.