claudecodex

design-styles

67 named visual styles to build in: brutalism, glassmorphism, editorial, retro, shadcn and more.

5 on GitHubby siddu1004v3.20.0MITupdated 4 days agoskills
/

Plugin design-styles from marketplace sfp in siddu1004/SFP. Commands read from the repo's manifest — 4 days ago.

What it installs

Skills (67)

  • agentic

    Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.

  • ant

    Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.

  • artistic

    High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.

  • basic

    Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.

  • bento

    Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.

  • bold

    Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.

  • brutalism

    Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.

  • cafe

    Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.

  • claude

    A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.

  • claymorphism

    Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.

  • clean

    Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.

  • codex

    A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone cards.

  • colorful

    Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.

  • contemporary

    Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.

  • corporate

    Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.

  • cosmic

    Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.

  • creative

    Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.

  • dithered

    Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.

  • doodle

    Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.

  • dramatic

    High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.

  • editorial

    Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.

  • enterprise

    Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.

  • expressive

    Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

  • fantasy

    Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

  • fiction

    A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes

  • flat

    Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.

  • friendly

    Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.

  • futuristic

    Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.

  • geometric

    Geometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way.

  • glassmorphism

    Frosted glass effect and translucent UI elements with blurred translucent layers, subtle borders, and depth for modern UI elegance. Use when designing translucent UI elements, frosted glass components, or glassmorphism styling.

  • gradient

    Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.

  • immersive

    An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green)

  • levels

    Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.

  • lingo

    Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.

  • material

    Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.

  • matrix

    A cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elements

  • minimal

    Stripped-back design emphasizing whitespace, clean typography, and restrained color for maximum clarity and focus.

  • modern

    Contemporary editorial style with serif typography, minimal palettes, and clean layouts for polished digital products.

  • mono

    Monospace-driven, matrix-inspired design with high-contrast elements, compact density, and a hacker-chic aesthetic.

  • neobrutalism

    Modern take on brutalism with bold borders, vivid accent colors, and raw, high-contrast layouts on warm surfaces.

  • neon

    Electric neon glow effects with high-contrast color pairings for bold, attention-grabbing interfaces.

  • neumorphism

    Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.

  • pacman

    Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.

  • paper

    Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.

  • perspective

    Spatial depth design with isometric views, vanishing points, and layered elements that guide attention through 3D-like realism.

  • power

    High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.

  • premium

    Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.

  • professional

    Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.

  • pulse

    Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.

  • refined

    Carefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.

  • retro

    Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.

  • riso

    A playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every section

  • roku

    App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.

  • sega

    A playful, arcade-inspired interface for games — built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blocks

  • shadcn

    Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.

  • sketch

    A friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.

  • skeumorphism

    Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.

  • sleek

    Modern minimalist aesthetic with clean lines, intentional color palette, subtle interactions, and consistent spacing.

  • spacious

    Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.

  • square

    Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.

  • stitch

    Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.

  • storytelling

    Narrative-driven design using visuals, copy, and interaction to guide users through engaging, emotionally resonant journeys.

  • style-impeccable

    A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.

  • terracotta

    A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.

  • tetris

    Classic block-game inspired design with playful colors, bold display fonts, and compact, high-energy layouts.

  • vibrant

    Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.

  • vintage

    1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

View source on GitHub npmjs.com

More from siddu1004/SFP

All 26 plugins →

business-ops

claudecodex

Billing, finance, investors, market research, leads, contracts, email, tickets, internal comms and a chief-of-staff ops check.

200 skills

5

science-hardware

claudecodex

Math proof and olympiad work, Blender, and M5Stack and Cardputer hardware.

123 skills

5

agents

claudecodex

Agent-driven work: autonomous loops, orchestration, councils, dev teams, planning and feature pipelines.

107 skills

5

agent-dev

claudecodex

Building for agents: skills, plugins, hooks, MCP servers, harnesses, token budgets, context compression and Cowork plugin tools.

104 skills

5

frontend

claudecodex

UI design and components, motion, accessibility, UX research and critique, React, Vue, Next.js, Angular, Vite. Includes Impeccable, the Taste skills, Emil Kowalski's animation skills, the Vercel web interface guidelines, and 3D and shader effects: React Three Fiber, liquid glass, ShaderGradient and Liquid Logo.

88 skills

5

ai-gateway

claudecodex

Driving an OmniRoute AI gateway: routing, providers, budgets, caching, compression, MCP and A2A.

45 skills

5

Similar plugins

Matt Pocock's agent skills for real engineering (grilling, spec/ticket flows, TDD, code review, domain modelling and more).

39 skills

mattpocock/skills 323,108

superpowers

claudecodex

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

15 skills · hooks

obra/superpowers 316,836

nextjs

claude

Official Next.js skills: adopt and optimize Cache Components, adopt Partial Prefetching, and verify runtime behavior against a running dev server.

6 skills

vercel/next.js 143,495

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

5 skills + 35 modes + Material Passport pipeline. Includes v3.6.7 cross-model audit gate and v3.6.8 generator-evaluator contract.

5 skills · 16 commands · 4 agents · hooks

Imbad0202/academic-research-skills 56,698

obsidian

claude

Claude Skills for Obsidian

6 skills

kepano/obsidian-skills 51,587

Maintain design-styles?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins26 plugins