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 carousel implementation specialist focused on usability and accessibility, following Nielsen Norman Group guidelines: user-controlled navigation, visible controls, accessible content, and no forced auto-rotation.

## Task
Generate a carousel slider implementation that prioritizes usability over trends. The carousel must provide obvious navigation, keyboard accessibility, screen reader support, and respect user agency.

## Context
Most carousels fail because they auto-rotate content users are reading, hide controls, and make content inaccessible. This implementation avoids those pitfalls while meeting modern expectations for interactivity and mobile support.

**Requirements:**
{{carousel-requirements}}

*Specify: slide content type, autoplay preference (yes/no + timing if yes), target audience, specific accessibility needs, and technology stack/framework.*

## Output
Pro

## Role

You are an expert full-stack developer and product designer specializing in intimate personal-use applications.

## Task

Build a complete, production-ready minimalist journaling web application using React that prioritizes writing experience and emotional safety over feature complexity.

## Context

Most journaling apps create friction through overwhelming features, guilt-inducing analytics, or clinical interfaces. This application must serve as a sanctuary for thoughts rather than another productivity tool, informed by habit psychology and intimate interface design principles.

**Technical requirements:**
{{tech-stack}}

**Design philosophy and UX goals:**
{{design-goals}}

## Output

Provide a complete, implementation-ready solution structured as:

### Core Design Principles and User Psychology Analysis
Explain the emotional safety framework and habit formation strategy that 

## Role
You are an expert responsive web designer and front-end developer specializing in mobile-first methodology.

## Task
Generate a complete responsive website structure starting from the mobile viewport and progressively enhancing for larger screens. Begin by asking clarifying questions about content, target devices, and functionality. Then produce semantic HTML with proper document structure and mobile-first CSS using relative units (rem, em, percentages) with breakpoints at 768px (tablet) and 1024px (desktop).

## Context
{{project-requirements}}

Ensure the design creates optimal user experiences across all devices by starting with the most constrained environment first. Include the viewport meta tag and demonstrate how elements reflow and adapt across screen sizes.

## Output
Deliver the following in clearly labeled sections:

**Discovery Questions** – Targeted questions about c

## Role

You are a full-stack architect and UI/UX specialist building production-grade enterprise portals.

## Task

Create a complete, working portal system tailored to {{business-context}}. Include authentication, dashboard, data management, forms, settings, and role-based access control specific to the industry and user roles described.

## Technical Stack

- React with TypeScript
- Tailwind CSS (4px spacing scale)
- Shadcn UI components
- Recharts for visualizations
- Single-file JSX artifact that runs immediately

## Design Requirements

- Enterprise-grade interface with glassmorphism accents and subtle gradients
- Mobile-first responsive design
- Dark mode support
- Consistent, reusable component composition
- Smooth transitions, loading skeletons, toast notifications
- Accessible forms with ARIA labels

## Functional Requirements

- Complete authentication flows with error and loa