The Best Design,
Ready for
Claude Code
310 motion pieces, components and templates for sites, apps and internal tools. Copy the prompt and your agent rebuilds it in your project.
Claude Code310 motion pieces, components and templates for sites, apps and internal tools. Copy the prompt and your agent rebuilds it in your project.
OKLCH.fyiConvert, generate and explore OKLCH colors to build palettes with even lightness across hues.oklch.fyi
Easing GraphsA visual collection of easing curves with their graphs and values, to pick the right curve instead of guessing a cubic-bezier.easing.dev
ImpeccableOne agent skill, 20 commands and a list of anti-patterns that steer Cursor or Claude Code toward polished frontend design.impeccable.style
Design system checklistAn open-source checklist to plan, build and grow a design system, from tokens to documentation.designsystemchecklist.com
rams design reviewAutomated design reviews for AI-generated code that catch accessibility issues and visual bugs in React, Vue and Svelte.rams.ai
UI SkillsA set of agent skills to polish interfaces built by coding agents: spacing, type, motion and states.ui-skills.com
shadowLabA playground for layered box shadows on web and React Native, with the code ready to copy.shadowlab.mocarski.design
Taste SkillOpen-source skill files that give your coding agent design taste and stop it from producing generic-looking interfaces.tasteskill.dev
Emil Kowalski's agent skillsAgent skills from a design engineer at Linear, teaching your coding agent his rules for animation and interface polish.github.com
AgentationClick on your running page, leave visual notes and hand them to your coding agent as precise feedback with element context.agentation.com
Jakub Krehel's agent skillsA set of agent skills that push your coding agent toward better animations, typography and layout details.github.com
UI CameraTurns screenshots of your interface into studio-quality product photos and videos right in the browser, for launches and landing pages.ui.camera
Design tokens generatorPaste brand colors or a Figma or Tokens Studio export and get semantic, production-ready design tokens for your codebase.design.dev
Corner RadiiCalculates the right inner radius for nested rounded corners from padding and outer radius, so cards inside cards stop looking off.corner-radii.xyz
GRADIENTOOLA gradient generator with endless random variations you can tweak and export as CSS, handy for backgrounds and hero art.gradientool.com
Huetone accessible palettesA tool to build color palettes in a perceptual color space with APCA and WCAG contrast shown for every swatch, then export them as tokens.huetone.ardov.me
Atmos color palettesA palette generator built for UI designers: color wheel, shade scales and contrast checks, with exports to Figma tokens and CSS variables.atmos.style
Utopia fluid type and spaceCalculators that turn a small-screen and a large-screen type and space scale into CSS clamp() values, so sizes grow smoothly without breakpoints.utopia.fyi
OKLCH Color PickerA color picker and converter for OKLCH with live lightness, chroma and hue graphs and P3 gamut checks: the quickest way to build palettes that stay even across hues.oklch.com