CoverLab, albüm kapağı, poster, sosyal medya görseli ve duvar kağıdı hazırlamak için tarayıcıda çalışan küçük bir tasarım stüdyosu. Prompt editörü sol panel, tuval ve sağ panel olarak kuruyor; şablon sistemi, düzenlenebilir yazılar, şekiller, arka plan stüdyosu, katmanlar, renk paleti üretici, "Magic Remix" ve dışa aktarma gibi bölümleri ayrı ayrı anlatıyor.
Uygulamanın tamamı tek bir HTML dosyasında duruyor. Prompt İngilizce.
Build a complete premium browser-based creative design application called **CoverLab**. CoverLab is a lightweight visual design studio that lets users create beautiful album covers, posters, social media graphics and wallpapers directly inside the browser. It should feel like a small combination of Canva, Figma and a modern generative design tool. The application must be visually impressive enough to look like a real venture-backed creative software startup. ## TECHNICAL REQUIREMENTS Everything MUST exist inside **ONE single `index.html` file**. Use: - HTML - CSS - Vanilla JavaScript - Canvas API if useful - SVG if useful Do NOT use: - Backend - Database - Authentication - API keys - AI APIs - npm - Frameworks - Build tools - Multiple files It must work by simply double-clicking `index.html`. Do not rely on external images being available. Use CSS gradients, generated shapes, text, SVG and built-in graphical elements so the app remains functional offline. All important buttons must actually work. ## CORE EXPERIENCE When the application opens, show a beautiful landing/workspace screen titled: **CoverLab** **Create something impossible to ignore.** The user should be able to choose: - Album Cover - Poster - Instagram Post - Story - Wallpaper Selecting one should update the canvas aspect ratio. ## MAIN EDITOR Create a professional design editor layout. ### Left Sidebar Tools: - Templates - Text - Shapes - Background - Effects - Layers ### Center Large design canvas. ### Right Sidebar Properties for the currently selected element. ### Top Toolbar Include: - Undo - Redo - Zoom - Randomize - Export - New Project The interface should look like professional creative software rather than a basic drawing application. ## TEMPLATE SYSTEM Include at least 12 visually distinct built-in templates. Examples: - Cyberpunk album - Minimal fashion - Brutalist poster - Retro sunset - Futuristic chrome - Dark techno - Dreamy gradient - Y2K - Luxury editorial - Gaming - Experimental typography - Vaporwave Each template should consist entirely of locally generated: - Text - Gradients - Shapes - Patterns - Graphic elements Clicking a template should instantly transform the canvas. Show template thumbnails in the sidebar. ## EDITABLE TEXT Users should be able to add text. Default example: **AFTER HOURS** Allow: - Editing text - Font size - Font weight - Letter spacing - Alignment - Rotation - Opacity - Text color Provide several font-style presets using safe browser fonts. Users should be able to drag text around the canvas. ## SHAPES Allow adding: - Rectangle - Circle - Line - Star - Ring Objects should be: - Draggable - Selectable - Resizable - Rotatable where practical - Deletable Clicking an object should expose its properties. ## BACKGROUND STUDIO Create a powerful background generator. Include categories: ### Gradient Two-color gradients with angle controls. ### Mesh Generate layered radial gradients. ### Aurora Create glowing atmospheric backgrounds. ### Sunset Create warm cinematic gradients. ### Noise Add a subtle grain/noise overlay. ### Dark Premium dark backgrounds. Provide color pickers. Include a large: **Generate New Look** button. Every click should generate a new aesthetically pleasing background using JavaScript. ## MAGIC REMIX This is one of the application's main features. Add a prominent button: **✨ Magic Remix** When pressed, randomly but intelligently modify: - Colors - Background - Typography scale - Object positions - Decorative shapes - Gradient direction The result should always remain aesthetically pleasing. Animate the transition between designs. Display a temporary message: **New visual direction generated** This simulates a powerful creative-generation tool without requiring any AI API. ## STYLE PRESETS Add buttons: - Minimal - Cyberpunk - Retro - Luxury - Brutalist - Dreamy - Y2K Clicking a style should intelligently alter the design. For example: Cyberpunk: dark background, neon glow, large typography. Luxury: black/cream palette, elegant thin typography. Brutalist: huge type, hard borders, asymmetric layout. ## LAYERS PANEL Display all elements as layers. Example: AFTER HOURS Subtitle Circle Gradient Orb Background Users should be able to: - Select layers - Hide/show layers - Delete layers - Move layers forward/backward ## COLOR PALETTE GENERATOR Add a small color palette area. Generate five harmonious colors. Clicking: **New Palette** should generate another palette. Clicking one color should apply it to the currently selected object. ## RANDOM DESIGN CHALLENGE Include a fun feature: **🎲 Surprise Me** Clicking it generates a completely new poster concept from scratch. Randomize: - Theme - Main title - Small subtitle - Layout - Palette - Decorative elements Example generated title combinations: VOID / 2049 MIDNIGHT SIGNAL NEON DREAMS LOST FREQUENCY PARALLEL ZERO GRAVITY DIGITAL LOVE Make each generated design feel intentional rather than purely random. ## EXPORT Implement a functional: **Export PNG** button. Export the created artwork as a PNG using Canvas/SVG/browser functionality. The exported image should NOT contain the editor UI. Also add: **Copy Design** if feasible. ## HISTORY Implement working: - Undo - Redo for major design actions. ## POLISH Add: - Smooth drag interactions - Hover animations - Selection borders - Resize handles - Smooth panel animations - Keyboard Delete support - Escape to deselect - Ctrl/Cmd+Z undo - Ctrl/Cmd+Shift+Z redo - Tooltips - Beautiful empty states ## VISUAL STYLE The application itself should have: - Dark professional editor UI - Floating glass panels - Subtle borders - Premium typography - Minimal clutter - Smooth transitions - Modern creative-tool aesthetic The artwork displayed inside the canvas should be bold and colorful so it contrasts with the editor. ## FIRST LAUNCH Do NOT open with an empty canvas. Immediately show a stunning prebuilt poster design titled: **MIDNIGHT SIGNAL** **TOKYO — 2087** with an impressive gradient/background composition. The user should immediately understand the application's value. ## FINAL REQUIREMENT Do not give an explanation or tutorial. Generate the COMPLETE application. Everything must be included inside ONE self-contained `index.html`. Make CoverLab feel like a surprisingly powerful mini creative studio built from a single HTML file.
Sitedeki CoverLab bu promptla yapıldı, dosyasını oradan indirebilirsin.
Yorumlar
Yorum Yap