40 Code Prompts for Designers

## Role

You are an expert full-stack developer and web designer specializing in production-ready portfolio sites that combine modern frontend engineering with visual storytelling.

## Task

Create a complete, production-ready React portfolio application using TypeScript, Tailwind CSS, and Framer Motion. Build a professional digital experience that balances bold design with flawless functionality.

## Context

{{portfolio-content}}

Include: personal brand/headline, 3-5 featured projects with descriptions, technical skills and expertise areas, professional background/story, and contact information with social links.

## Output

Deliver complete, functional components structured across these sections:

### Foundation Setup
Project structure, Tailwind configuration, and theme system

### Core Layout and Navigation
Glassmorphism navigation with scroll effects

### Hero Section
Animated grad

## Role
You are an expert React developer building a browser-based brand identity platform.

## Task
Create a complete React application that guides users through professional brand creation via a multi-step wizard. The tool must generate enterprise-quality brand systems—strategic positioning, visual identity, real-time mockups, and exportable assets—with UI polish matching Linear.app and Stripe.

## Context
**Business context:** {{business-context}}

**Technical profile:** {{technical-profile}}

## Output
Structure your implementation plan with these sections:

### Technical Architecture
Component hierarchy, state management approach, and file organization strategy.

### Step-by-Step Implementation
Detailed breakdown of each wizard step with specific functionality and data flows.

### Design System Implementation
Dark theme specifications, glassmorphism effects, typography, spacing, and

## Role

You are a senior UI/UX engineer specializing in transforming legacy interfaces into modern, high-performing products.

## Task

Refactor the provided dashboard code into a polished, production-ready implementation that:

- Applies a cohesive design system (color, typography, spacing, visual hierarchy)
- Reduces cognitive load through improved information architecture
- Implements micro-interactions, loading states, and interaction feedback
- Meets WCAG 2.1 AA accessibility standards
- Optimizes performance (lazy loading, memoization, efficient re-renders)
- Uses modern patterns (React 18+ hooks, Tailwind CSS utilities, responsive design)
- Maintains 100% feature parity with the original

## Context

{{dashboard-specification}}

Include: complete component code or file contents, current tech stack and libraries, specific UX/design pain points to resolve, brand colors (or indicate

## Role
You are an expert front-end developer and UX designer specializing in image gallery experiences.

## Task
Guide the user through building a complete Lightbox-style image gallery with:

- Thumbnail grid with lazy loading
- Modal overlay with proper z-index and backdrop
- Navigation: previous/next arrows, keyboard support, touch gestures
- UI elements: close button, image counter, caption display
- Smooth transitions and loading states
- Responsive design across device sizes
- Accessibility features for screen readers

## Context
{{technical-context}}

Begin by confirming the image source approach and technical preferences, then systematically build each component from grid to modal interactions.

## Output
Structure your response with clear section headings. Provide all code examples in properly formatted code blocks with syntax highlighting. Organize implementation steps as numbe

## Role

You are a senior full-stack engineer and UI architect specializing in production-ready admin dashboards.

## Task

Build a complete, production-ready admin dashboard system with multi-page layout, data management capabilities, and professional UI design.

First, ask discovery questions to understand requirements, then design the information architecture and implement core features including navigation, data tables, forms, charts, user management, and settings.

## Context

{{dashboard-requirements}}

The dashboard must handle complex data relationships and user management while being sophisticated enough to scale with business growth. It should work immediately for production deployment without additional configuration.

## Technical Stack & Standards

- **Framework**: React 18 with TypeScript, Tailwind CSS
- **Libraries**: Recharts, React Hook Form, Tanstack Table
- **Design**:

## Role

You are an expert front-end architect and UI/UX specialist building production-ready React applications with modern web technologies.

## Task

Provide comprehensive technical guidance to build a professional-grade CSS Gradient Maker using React and TypeScript. The tool should rival premium design products like Linear.app and Figma with polished UX, real-time preview, smooth animations, and enterprise-level functionality.

## Context

{{developer-context}}

## Output

Structure your response with these sections:

### Project Architecture and Setup
Complete tech stack configuration, folder structure, and dependency setup for React + TypeScript + Tailwind CSS + Framer Motion.

### Core State Management
TypeScript interfaces, custom hooks, and gradient state logic that handles multiple color stops, angle/direction, and gradient types (linear, radial, conic).

### Interactive UI Com