From opendesign
Generates distinctive frontend designs with extreme aesthetics like brutalist or maximalist, bold typography, committed color palettes, CSS motion, and asymmetric layouts when no brand system exists.
npx claudepluginhub manalkaff/opendesign --plugin opendesignThis skill uses the workspace's default tool permissions.
Loaded when designing without an existing brand system. Push for a committed, distinctive aesthetic. Generic defaults are a failure state.
Creates distinctive visual identities for new UIs like landing pages, marketing sites, prototypes, or greenfield frontend projects without design systems. Builds on frontend-design with unique typography, color palettes, and memorable elements.
Generates refined, unique frontend UI designs avoiding generic AI patterns, with guidelines for typography pairings, custom color palettes, asymmetric layouts, and targeted animations. For landing pages, dashboards, components.
Provides bold aesthetic guidance for web design decisions on typography, color, motion, spatial composition, and visual style to avoid generic aesthetics.
Share bugs, ideas, or general feedback.
Loaded when designing without an existing brand system. Push for a committed, distinctive aesthetic. Generic defaults are a failure state.
Write all output files to ./opendesign/mockups/<task-slug>/. Derive the slug from the page or feature name (e.g. landing-page, pricing-redesign).
Before touching HTML, answer three questions in your plan:
Pick an extreme direction and execute it with precision: brutalist, maximalist, editorial, retro-futuristic, organic, industrial, anti-design, swiss-modernist, zine-punk. Indecisive middles read as stock templates.
Pair a distinctive display face with a refined body face. Avoid Inter, Roboto, Arial, and generic system stacks. Candidates: editorial serifs (Fraunces, GT Sectra, Tiempos), geometric display (Space Grotesk, PP Neue Montreal, Söhne Breit), mono accents (JetBrains Mono, IBM Plex Mono), quirky unicase and variable fonts where the direction supports it. Set a real type scale with intentional ratios; do not rely on default browser sizes.
Commit to a cohesive palette. Dominant colors with one or two sharp accents outperform timid even distribution. Use oklch for accents so chroma and lightness stay consistent across hues. Restrict neutrals to chroma ≤ 0.02.
One or two high-impact motion moments beat a dozen scattered micro-interactions. Favor CSS-only animation: transforms, transitions, @keyframes, scroll-timeline where it is supported. Reserve JS for motion that depends on state.
Break the grid deliberately: asymmetry, overlap, diagonal baselines, oversized type against tight columns, generous negative space — or controlled, dense information surfaces if the aesthetic demands it. Either direction beats an evenly padded three-column grid.
Default to atmosphere: gradient meshes, film grain, noise, layered transparencies, dramatic shadows, tinted halftones, subtle paper textures. Flat white on flat black is a choice, not a default — use it only when the direction demands it.
Never converge on the same choices across different projects or variation runs. Rotate axes: aesthetic direction, dominant hue family, typographic register, motion philosophy, compositional strategy. Two designs in a row should not feel like siblings unless the user asked for continuity.
Maximalist direction → elaborate implementation: layered textures, dense type, rich motion, intricate detail. Minimalist direction → restrained implementation: fewer elements, tighter type scale, longer transitions, more white. Do not half-commit. A restrained layout executed with maximalist intent reads as unfinished; a maximalist layout executed with minimalist intent reads as confused.