# Design.dev

> Tools, guides, and resources for modern front-end development. Zero-dependency CSS and JavaScript tools, comprehensive reference guides, free SVG icons, and AI coding configuration generators.

## Tools

Interactive, zero-dependency CSS and JavaScript tools with real-time preview and copy-paste ready code.

- [All Tools](https://design.dev/tools/): Browse all 30+ free CSS and dev tools
- [Code Screenshot Generator](https://design.dev/tools/code-screenshot-generator/): Turn code into a beautiful screenshot image with syntax highlighting, themes, and PNG export — 100% client-side, code never uploaded
- [CSS Clamp Generator](https://design.dev/tools/clamp-generator/): Generate fluid font-size with CSS clamp() between two viewport widths
- [Color Contrast Checker](https://design.dev/tools/color-contrast-checker/): Check color contrast ratios for WCAG 2.2 and APCA accessibility compliance
- [CSS Grid Area Mapper](https://design.dev/tools/grid-area-mapper/): Visually design CSS Grid layouts by dragging areas, outputs grid-template-areas code
- [Box Shadow Generator](https://design.dev/tools/box-shadow-generator/): Create multi-layer CSS box-shadow effects with real-time preview
- [Text Shadow Generator](https://design.dev/tools/text-shadow-generator/): Create multi-layer CSS text-shadow effects with presets for 3D, neon glow, and letterpress
- [Gradient Mixer](https://design.dev/tools/gradient-mixer/): Create CSS gradients with visual controls, linear and radial gradients, and modern color-mix() syntax
- [Flexbox Playground](https://design.dev/tools/flexbox-playground/): Learn and experiment with CSS Flexbox properties with interactive visual editor
- [CSS Transform Playground](https://design.dev/tools/css-transform-playground/): Visualize and experiment with CSS transforms including rotate, scale, skew, translate, and 3D perspective
- [Cubic Bezier Studio](https://design.dev/tools/cubic-bezier-studio/): Design custom CSS timing functions with a visual cubic-bezier editor
- [OKLCH Color Converter](https://design.dev/tools/oklch-color-converter/): Convert colors between HEX, RGB, HSL, HWB, OKLCH, and LAB with accessible palette generation
- [CSS Filter Effects](https://design.dev/tools/css-filter-effects/): Create and combine CSS filter effects — blur, brightness, contrast, and more
- [Backdrop Filter Playground](https://design.dev/tools/backdrop-filter-playground/): Create frosted glass and glassmorphism effects with CSS backdrop-filter
- [Hover Effect Generator](https://design.dev/tools/hover-effect-generator/): Create CSS hover effects — transform, scale, glow, and animate elements on hover
- [Clip-Path Shapes](https://design.dev/tools/clip-path-shapes/): Create custom CSS clip-path shapes — circles, polygons, and custom paths
- [Border Radius Playground](https://design.dev/tools/border-radius-playground/): Create CSS border-radius effects with individual corner controls
- [Neumorphism Generator](https://design.dev/tools/neumorphism/): Create soft UI neumorphism effects with box-shadow and border-radius controls
- [Liquid Glass CSS Generator](https://design.dev/tools/liquid-glass-generator/): Build modern, premium liquid glass with backdrop-filter, specular highlights, edge lensing, and copy-paste CSS, Tailwind, or CSS variables
- [CSS Loaders](https://design.dev/tools/css-loaders/): Create customizable CSS loading animations and spinners in multiple styles
- [CSS Tooltips](https://design.dev/tools/css-tooltips/): Create CSS tooltips with customizable positions, colors, and animations
- [CSS Background Generator](https://design.dev/tools/css-background-generator/): Generate pure CSS background patterns — dots, grids, stripes, checkerboard without images
- [Metallic Text Generator](https://design.dev/tools/metallic-effect-generator/): Create metallic text effects with CSS gradients — gold, silver, chrome
- [Subgrid Visualizer](https://design.dev/tools/subgrid-visualizer/): Visualize CSS subgrid inheritance and how child grids align with parent tracks
- [Z-Index Visualizer](https://design.dev/tools/z-index-visualizer/): Paste HTML/CSS to visualize stacking contexts and debug z-index issues with 3D layer views
- [Specificity Calculator](https://design.dev/tools/specificity-calculator/): Calculate and compare CSS selector specificity values with visual breakdown
- [nth-child Selector Generator](https://design.dev/tools/nth-child-selector/): Build :nth-child(), :nth-of-type(), :not() selectors visually without mental math
- [Aspect Ratio Calculator](https://design.dev/tools/aspect-ratio-calculator/): Calculate aspect ratios, scale dimensions, and generate CSS aspect-ratio property code
- [PX to REM Converter](https://design.dev/tools/px-to-rem-converter/): Batch convert pixel values to REM units with CSS variable generation and common scale presets
- [Custom Cursor Generator](https://design.dev/tools/custom-cursor-generator/): Create custom CSS cursors with image upload, hotspot positioning, and fallback options
- [Feature Detection](https://design.dev/tools/feature-detection/): Check browser support for modern CSS and JavaScript features in real-time
- [Favicon Generator](https://design.dev/tools/icon-favicon-builder/): Convert SVG icons to PNG favicons in multiple sizes, client-side
- [Image Optimizer](https://design.dev/tools/image-optimizer/): Resize, compress, and convert images to WebP or JPEG client-side with instant preview

## Guides

Comprehensive reference guides for modern web development with visual examples and copy-paste ready code.

- [All Guides](https://design.dev/guides/): Browse all web development guides

### CSS Layout

- [CSS Grid Guide](https://design.dev/guides/css-grid/): Complete CSS Grid reference with layouts and patterns
- [Flexbox Guide](https://design.dev/guides/flexbox/): Complete Flexbox reference with container and item properties, alignment, ordering, and patterns
- [CSS Centering Guide](https://design.dev/guides/css-centering/): Centering elements with Flexbox, Grid, absolute positioning, and margin auto
- [CSS Container Queries](https://design.dev/guides/css-container-queries/): Component-based responsive design with @container, container types, and query units (cqw, cqh)
- [Media Queries Guide](https://design.dev/guides/media-queries/): Complete media queries reference with breakpoints, features, range syntax, and responsive patterns

### CSS Visual

- [CSS Gradients](https://design.dev/guides/css-gradients/): Linear, radial, and conic gradients, repeating patterns, gradient text, borders, and layering
- [CSS Transforms](https://design.dev/guides/css-transforms/): 2D and 3D transform functions — translate, rotate, scale, skew, and perspective
- [CSS Transitions](https://design.dev/guides/css-transitions/): Transition properties, timing functions, delays, and performance best practices
- [CSS Animations](https://design.dev/guides/css-animations/): Keyframes, timing functions, and animation properties
- [Scroll-Driven Animations](https://design.dev/guides/scroll-timeline/): scroll-timeline, animation-timeline, scroll(), and view() for parallax and scroll-triggered effects
- [Dark Mode CSS](https://design.dev/guides/dark-mode-css/): System preferences, CSS Variables, theme toggling, color strategies, and accessibility

### CSS Reference

- [CSS Selectors](https://design.dev/guides/css-selectors/): Complete selector reference including modern :has(), :is(), :where(), and :not()
- [CSS Functions](https://design.dev/guides/css-functions/): clamp(), min(), max(), calc(), color-mix(), and more
- [CSS Variables](https://design.dev/guides/css-variables/): Custom Properties, theming, and JavaScript manipulation
- [CSS Cascade Layers](https://design.dev/guides/css-cascade-layers/): @layer rule for controlling specificity and organizing CSS

### Design

- [Color Theory](https://design.dev/guides/color-theory/): Color schemes, psychology, accessibility, CSS color formats, and palette creation
- [Web Typography](https://design.dev/guides/typography-web-design/): Font selection, type scales, hierarchy, spacing, web fonts, variable fonts, and responsive typography
- [Design Systems & Tokens](https://design.dev/guides/design-systems/): Token categories, naming conventions, implementation strategies, and best practices
- [Web Performance](https://design.dev/guides/web-performance-optimization/): Core Web Vitals, loading strategies, asset optimization, and monitoring tools

### HTML

- [HTML Entities](https://design.dev/guides/html-entities/): Symbols, arrows, math operators, currency, accented characters — copy-paste ready entity codes
- [HTML Accessibility & ARIA](https://design.dev/guides/html-accessibility/): Accessible HTML patterns with ARIA roles, states, and properties
- [HTML Media Elements](https://design.dev/guides/html-media-elements/): Video, audio, picture, source, responsive images, lazy loading, and accessibility

### JavaScript

- [JS Array Methods](https://design.dev/guides/javascript-array-methods/): map, filter, reduce, and array operations with examples
- [JS Promises & Async/Await](https://design.dev/guides/javascript-promises-async/): Asynchronous programming with Promises, async/await, error handling, and practical patterns
- [JS Modules](https://design.dev/guides/javascript-modules/): ES modules — named and default exports, re-exports, barrel files, dynamic import(), and import.meta

### TypeScript

- [TypeScript Basics](https://design.dev/guides/typescript-basics/): Annotations, inference, unions, narrowing, type vs interface, literals, and strict compiler options
- [TypeScript Generics](https://design.dev/guides/typescript-generics/): Type parameters, extends constraints, defaults, and API typing patterns
- [TypeScript Utility Types](https://design.dev/guides/typescript-utility-types/): Partial, Required, Readonly, Pick, Omit, Record, ReturnType, Parameters, and practical recipes

### Developer Tools

- [Console Commands](https://design.dev/guides/console-commands/): Browser console debugging methods, performance monitoring, and advanced techniques
- [Git Commands](https://design.dev/guides/git-commands/): Essential Git workflow commands — branch, commit, merge, rebase, and more
- [Cursor & VS Code Shortcuts](https://design.dev/guides/cursor-shortcuts/): Keyboard shortcuts for VS Code and Cursor IDE including AI commands

### AI Coding Configuration

- [Launch a Website with AI](https://design.dev/guides/launch-website-with-ai/): Beginner walkthrough for building a static site with Claude or Cursor and auto-deploying from GitHub to Netlify or DigitalOcean App Platform
- [Context Engineering](https://design.dev/guides/context-engineering/): Complete guide to configuring AGENTS.md, CLAUDE.md, Cursor rules, Copilot instructions, and more
- [Cursor Rules](https://design.dev/guides/cursor-rules/): Modern .cursor/rules/ system with .mdc files — rule types, activation modes, and frontmatter
- [Claude Skills](https://design.dev/guides/claude-skills/): Creating SKILL.md files for AI agents in Cursor IDE
- [Copilot Instructions](https://design.dev/guides/copilot-instructions/): GitHub Copilot custom instructions — repository-wide, path-specific, and agent instructions
- [Gemini Gems](https://design.dev/guides/gemini-gems/): Google Gemini Gems and GEMINI.md configuration for custom AI experts
- [Windsurf Rules](https://design.dev/guides/windsurf-rules/): Windsurf Rules for Cascade AI — global rules, workspace rules, and memories
- [OpenClaw Security](https://design.dev/guides/openclaw-security/): Security guide for OpenClaw, Moltbot, and Clawdbot AI agent configuration

## AI Prompt Library

Copy-paste prompts for production-ready UI components. Paste into any AI assistant.

- [Real-Time Data Chart](https://design.dev/ai/prompts/realtime-data-chart/): Streaming metrics chart built on the Canvas API with zero dependencies
- [Skeleton Loading Screen](https://design.dev/ai/prompts/skeleton-loading-screen/): CSS-only animated loading placeholders with shimmer gradient animation
- [Toast Notification Stack](https://design.dev/ai/prompts/toast-notification-stack/): Stacked toast notifications with auto-dismiss, progress bars, and smooth animations
- [Command Palette](https://design.dev/ai/prompts/command-palette/): Cmd+K command menu with search, grouped results, and keyboard navigation

## Universal AI Standards

Open spec generators that produce files read by every coding agent and LLM.

- [DESIGN.md Generator](https://design.dev/ai/design-md-generator/): Visual editor for the open DESIGN.md spec — tokenized design system AI agents can read and apply consistently. Live preview, WCAG contrast linting, Tailwind/DTCG export.
- [AGENTS.md Generator](https://design.dev/ai/agents-md-generator/): Generate the universal AGENTS.md file read by Codex, Cursor, Sourcegraph Amp, Aider, Jules, and other coding agents
- [llms.txt Generator & Validator](https://design.dev/ai/llms-txt-generator/): Build a spec-compliant llms.txt file for your site with sitemap.xml import and live spec validation
- [MCP Server Config Generator](https://design.dev/ai/mcp-config-generator/): Build Model Context Protocol configs for Cursor, Claude Desktop, VS Code, and Windsurf — curated server library and safe secrets handling
- [ARD Catalog Generator](https://design.dev/ai/ard-catalog-generator/): Generate a valid Agentic Resource Discovery ai-catalog.json manifest so agents and registries can discover your MCP servers, A2A agents, Skills, APIs, nested catalogs, and registries

## AI Generators (Vendor-Specific)

Interactive generators that produce configuration files for individual AI coding assistants.

- [All AI Generators](https://design.dev/ai/): Browse all AI rules generators
- [Cursor Rules Generator](https://design.dev/ai/cursor-rules-generator/): Generate Cursor rules in .mdc format for AI-assisted development
- [SKILL.md Generator](https://design.dev/ai/skills-generator/): Generate SKILL.md files for universal AI agent skills
- [CLAUDE.md Generator](https://design.dev/ai/claude-md-generator/): Generate CLAUDE.md project memory files for Claude Code — build commands, code style, architecture, @file imports
- [Copilot Instructions Generator](https://design.dev/ai/copilot-instructions-generator/): Generate custom GitHub Copilot instructions
- [GEMINI.md Generator](https://design.dev/ai/gemini-md-generator/): Generate GEMINI.md project memory files for Gemini CLI — build commands, code style, architecture, @file imports
- [Windsurf Rules Generator](https://design.dev/ai/windsurf-rules-generator/): Generate Windsurf rules for Cascade AI
- [Cline Rules Generator](https://design.dev/ai/cline-rules-generator/): Generate rule files for Cline's .clinerules/ directory with YAML frontmatter and path globs

## Free Icons

- [Free SVG Icons](https://design.dev/free-icons/): Browse, customize colors, and download free SVG icons for developers

## Other

- [Sponsor](https://design.dev/sponsor/): Sponsorship opportunities reaching 13,000+ developers
- [Privacy Policy](https://design.dev/privacy/)
- [Terms of Service](https://design.dev/terms/)