Popular Frontend Prompts

Use Codex to modify the front-end of your current project's index.html using the provided image as a reference.

Use Codex to redesign the front-end of your existing website, focusing on maintaining all functionalities while enhancing aesthetics using modern design principles.

Astro.js Prompts

Transforms any idea into a clean, premium, Apple-inspired UI system with real design discipline and production-ready structure. It avoids “AI-vibe coded” outputs by enforcing di...

This prompt detects inconsistencies and design debt to stabilize and scale UI systems. ⚡ Pro Tip: Run this before scaling frontend team → prevents exponential chaos. Performs a ...

This prompt transforms a UI concept into a fully structured, implementation-ready design handoff optimized for both frontend developers and AI coding agents. It bridges the trad...

Reverse-engineers any UI to reveal why it converts (or fails) using behavioral and UX analysis. Pro Tip: Run this on top SaaS landing pages weekly → your UX intuition compounds ...

Architect reusable UI component libraries and design systems with atomic design, Storybook, and accessibility compliance.

SEO content strategist and technical SEO consultant specializing in keyword research, on-page/off-page optimization, content strategy, and SERP performance.

Audit and optimize SEO (technical + on-page) and produce a prioritized remediation roadmap.

Build responsive, accessible, and performant web interfaces using React, Vue, Angular, and modern CSS.

Audit web applications for WCAG compliance, screen reader support, keyboard navigation, and ARIA correctness.

Runs a performance-focused analysis of the built site and produces actionable optimization recommendations. This isn't just "run Lighthouse" it interprets the results, prioriti...

Systematically checks a built design against its intended specification across browsers, devices, and edge cases. This is the designer's QA not functional testing, but visual fi...

Generates a design handoff document that serves as direct implementation instructions for AI coding agents. Unlike traditional handoff notes that describe how a design "should f...

Tistory Poster 스킨 기반 블로그의 UI/UX를 프로페셔널 수준으로 개선하는 구조화된 프롬프트. inpa.tistory.com 레퍼런스 기반.

Transform your forms into visual masterpieces. This prompt turns AI into a senior developer to create forms in Next.js, React, and TypeScript. It includes micro-interactions, Fr...

Generate a comprehensive, actionable development plan to enhance the existing web application.

Generate a comprehensive, actionable development plan for building a responsive web application.

HTWind widget creator system prompt

Enterprise-grade Spring Boot specialist prompt designed for senior-level architecture. Incorporates SOLID principles, layered design, REST best practices, JPA/Hibernate persiste...

A prompt designed to help debug Single Page Applications (SPA) such as Angular, React, and Vite projects, especially when facing blank pages, deployment issues, or production errors.

Act as an elite frontend development specialist with deep expertise in modern JavaScript frameworks, responsive design, and user interface implementation. Your role encompasses ...

White-box/gray-box web app pentest prompt for AI code editors (Cursor, Windsurf, Antigravity). AI performs full source code security review on open project—no URL needed. Analy...

Guide users in building a desktop application using Electron with a focus on frontend development best practices.

Create a responsive and technologically advanced website for Sporsmaç, a sports startup focused on basketball infrastructure leagues, using React Native.

Act as a professional designer and photographer to analyze and harmonize the color scheme of an application for aesthetic consistency.

Design an application architecture and conversion strategy using persuasion engineering and limbic system-focused principles to maximize user conversion rates. This prompt guide...

This Agent skill helps you check your apps before submitting to the App Store to go through the process of submitting an app easier and receive less warnings/denials. Recommend...

Develop an integrated Clash of Clans tool using Next.js and React, featuring formation copying, strategy teaching, and community discussion.

This prompt is designed for an elite frontend development specialist. It outlines responsibilities and skills required for building high-performance, responsive, and accessible ...

Develop a modern sidebar dashboard interface using HTML, CSS, and JavaScript, focusing on user experience and responsive design.

Develop a Telegram Mini App for internal use by company employees to track shift times and view shift schedules seamlessly integrated with Telegram.

Generate backend and frontend code in .NET and Angular for optimizing manufacturing workflows using OR-Tools.

Act as a specialized front-end developer with expertise in Next.js, focusing on building dynamic and efficient web applications.

Create a flexible web template with customizable frontend and backend for different company brands, allowing visual and feature adjustments.

Develop the front-end for Xiaomi's self-service management system using modern web technologies.

This prompt assists users in creating a comprehensive STYLE_GUIDE.md for their projects. It covers essential sections such as color palette, typography, spacing, and more, ensur...