From an empty prompt to Gradient Studio, built with Claude.
I never manage to get nice gradients in Figma, or a page that really looks good with them. So I asked Claude to build the tool I was missing.Prompt 1 ↓
The first version blended flat, soft circles. I asked for shapes with direction: stretched, curved, cropped by the frame, with quiet dark areas.Prompt 2 ↓
A dark palette, like the dark theme of my site, with violet (#9890fd) as the accent, so everything feels aligned.
We gathered references, gave each gradient a name, and left ten ready to use: edit them, export them, duplicate them, rename them, or delete the ones you don't like.
Built in the language of my site, with Vercel as reference: sober, dark, out of the gradient's way.
GitHub, Actions and Pages.
Sizes and formats: PNG, JPG, WebP and WebM video.
The plan was desktop only. Then: why not make wallpapers for your phone straight from the app? The interface stays on desktop, and the gradients go wherever you need them.
On top of the export options, a button to copy the gradient directly to Figma.
Two prompts, in order. Don't copy my design: everything in [brackets] is yours to decide. Run Prompt 1, look at what you get, then use Prompt 2 to refine it.
Generates a working gradient editor from scratch: canvas, points, motion, export.
Build a working browser app for designers called “Gradient Studio” using React, TypeScript, Vite, and WebGL2. Do not create a landing page or dashboard mockup. Open directly into the editor, and make every visible control functional. ## Core experience Users can generate, customize, animate, and export atmospheric mesh gradients. On every fresh visit: - Generate a new seed, palette, point arrangement, and subtle animation - Immediately show an export-ready gradient - Save the previous result to local Recent history - Provide a small “Restore previous” action The interface stays consistent. Only the gradient composition changes. ## Interface Create a minimal, professional design tool: - Full viewport with 20px outer padding - Large gradient canvas on the left - Compact 320px settings panel on the right - Canvas occupies roughly 82% of the screen - Dark neutral interface with thin borders and almost no shadows - Geist or Inter typography - One orange-red accent used only for selection and Export Colors: - Page: #050505 - Panels: #111111 - Inputs: #1A1A1A - Text: #F2F2F2 - Secondary text: rgba(255,255,255,0.52) - Borders: rgba(255,255,255,0.08) - Accent: #FF4B20 Avoid glassmorphism, AI glow, gradient buttons, decorative blobs, excessive cards, oversized pills, marketing copy, sparkles, badges, and bounce animations. The gradient should provide all visual expression. Include a compact toolbar with: - Undo and Redo - New Gradient - Play or Pause - Canvas format - Edit Points - Recent Keep one large Export button at the bottom of the right panel. ## Gradient renderer Use a WebGL2 fullscreen shader with a Canvas fallback. Support 2–8 color points. Each point has: - Color - X and Y position - Radius - Softness - Influence - Lock color - Lock position Blend colors smoothly using distance-based influence and linear RGB interpolation. Use one deterministic renderer for preview and export so downloaded files match the canvas. ## Gradient quality Generated gradients should feel atmospheric, deep, asymmetric, soft, and editorial. Create several curated composition recipes, such as: - Dark Bloom - Aurora - Duotone Haze - Heat Field - Electric Fog - Soft Editorial Each result should use 3–5 colors with: - One dominant tone - One contrasting accent - Supporting colors - Different field sizes - Asymmetric positions - Some color centers outside the canvas - 20–40% dark or quiet negative space when appropriate - Subtle grain and dither Avoid rainbow palettes, symmetry, evenly spaced points, identical circular blobs, muddy centers, excessive saturation, and basic-looking CSS gradients. ## Canvas editing Allow users to: - Drag points directly on the canvas - Click a point to select it - Double-click empty space to add a point - Delete the selected point - Change its color - Duplicate it - Lock its color or position Never allow fewer than two or more than eight points. Keep point handles visually minimal. Show guides only for the selected point. Add keyboard shortcuts: - R: New gradient - Space: Play or pause - H: Toggle point handles - Delete: Remove selected point - Command or Control + Z: Undo Dragging must remain smooth without rerendering the entire React interface on every movement. ## Settings panel Use four simple text tabs: ### Colors - Color swatches and HEX inputs - Add, duplicate, and delete colors - Paste multiple HEX values - Randomize colors - Preserve supplied colors ### Shape - Position - Radius - Softness - Influence - Global scale - Warp amount - Blend softness ### Motion Include: - Still - Drift - Orbit - Breathe - Flow - Tide Controls: - Loop duration - Intensity - Direction - Smoothness - Warp speed All animations must loop seamlessly using periodic sine and cosine movement. Default motion should be slow and subtle, without bounce or chaotic movement. ### Finish - Grain - Dither - Saturation - Contrast - Brightness - Vignette - Soft blur ## Randomization Provide separate actions for: - Randomize Colors - Randomize Composition - Randomize Motion - New Gradient Randomization must respect locked properties. Use seeded, curated generation—not unrestricted random values. The same seed and settings must reproduce the same result. Save a history state before every randomization. ## Canvas formats Include: - 1440 × 900 - 1920 × 1080 - 1080 × 1080 - 1080 × 1350 - 1080 × 1920 - Custom Fit the chosen format inside the editor without changing its actual export dimensions. ## Export Support static export as: - PNG - WebP - JPG - Custom dimensions - 1×, 2×, and 4× scale - True rendering up to 4K Do not export a resized screenshot of the preview. Also support seamless WebM export at 1920 × 1080 with: - 30 or 60 FPS - 3, 5, or 10-second duration - Progress and Cancel controls Only show export formats that work in the current browser. ## Persistence and performance Use localStorage for: - Current project - Undo and Redo - At least ten recent gradients - Restore previous No accounts, database, or cloud storage are needed. Pause rendering when the tab is hidden or animation is stopped. Respect reduced-motion settings and provide a fallback when WebGL2 is unavailable. Prioritize desktop. On smaller screens, move the settings panel into a drawer. ## Completion requirements Before finishing, verify that: - Every visible control works - New gradients look art-directed, not randomly generated - Locks are respected - Undo and Redo work - Animation loops seamlessly - Exported files match the preview - Previous work can be restored - The application has no console errors - The interface feels like a professional creative tool First present a short implementation plan, then build and test the complete app. Do not stop after producing a visual mockup.
Fixes the workspace sizing and upgrades the renderer so gradients have direction, curves and quiet space.
Refine the existing application without rebuilding or redesigning the working interface. Focus only on two problems: workspace sizing and gradient quality. Do not add new product features during this task. ## 1. Fix the workspace sizing The large canvas panel on the left and the settings panel on the right must have exactly the same visible height. Create one shared workspace row beneath the top navigation: - Use CSS Grid with `minmax(0, 1fr) 320px` - Stretch both columns to the full available height - Use `height: calc(100dvh - actual header height - vertical page padding)` - Apply `min-height: 0` to the grid and both children - Keep the Export button inside the right panel - Align the top and bottom edges of both panels precisely - Prevent either panel from extending the page vertically - The browser page itself should not scroll on desktop The gradient artboard is currently rendered too small inside a much larger canvas area. Make the artboard use the maximum available space inside the left panel: - Preserve the selected export aspect ratio - Use approximately 24px internal padding - Calculate scale using the available width and height - Use the larger possible fitted size - Remove arbitrary `max-width`, fixed preview scaling, or transforms that keep it small - Recalculate its fitted size whenever the panel or browser resizes The artboard should nearly fill the available canvas area while remaining completely visible. Keep the grid background and editing handles, but do not leave excessive empty space around the artwork. ## 2. Upgrade the gradient renderer The current renderer produces a flat, soft blend between circular color points. Changing palettes alone will not solve this. Upgrade the shader so it can create directional ribbons, curved transitions, stretched light fields, dark voids, and asymmetric flowing forms. Keep all current draggable color points and controls working. ### Replace simple circular blending Use anisotropic fields instead of only circular distance fields. Each point should support: - X and Y position - Radius - Horizontal stretch - Vertical stretch - Rotation - Influence - Softness Calculate distance inside each point’s rotated elliptical coordinate system. This should allow colors to form long directional fields rather than uniform circles. ### Add deterministic domain warping Before calculating color influence, distort the canvas coordinates using a smooth deterministic flow field. Use layered periodic sine and cosine functions or seamless curl-style noise. Add global shader parameters for: - Warp amount - Warp scale - Warp direction - Curvature - Swirl - Flow rotation The distortion must create broad curved forms rather than noisy liquid turbulence. Keep it deterministic: the same seed and settings must always reproduce the same result. ### Create stronger composition structures Every generated gradient should combine: - One large dominant color field - One curved or diagonal transition - One smaller contrasting accent - One dark or visually quiet region - Two or three subtle supporting fields Allow important fields to begin outside the canvas so the visible composition feels cropped and intentional. Do not simply place every color point inside the frame. Use different field scales and rotations. Avoid equal circles, even spacing, centered compositions, and uniform coverage. ### Improve the generation recipes Make each recipe control geometry and distortion—not only palette colors. #### Dark Bloom - Deep near-black base - One concentrated luminous bloom - Large dark negative space - Soft curved light entering from an edge #### Aurora - Two or three stretched flowing ribbons - Strong diagonal or curved direction - Broad atmospheric transitions - Dark depth behind the ribbons #### Duotone Haze - Two dominant colors - One broad dividing curve - Soft overlap - One quiet neutral area #### Heat Field - Warm light rising or sweeping across the frame - One pronounced curved edge - Dark cooler support color - Strong but controlled contrast #### Electric Fog - Saturated accent diffused through a dark environment - Off-canvas light source - Elongated color fields - Deep shadow areas #### Soft Editorial - Restrained palette - Large-scale forms - Gentle asymmetry - Generous negative space - Minimal saturation ## Shape controls Extend the existing Shape tab with: - Stretch X - Stretch Y - Rotation - Curvature - Swirl - Warp amount - Warp scale Keep the panel compact. Place the less common controls inside one collapsed “Advanced shape” section. All changes must update in real time. ## Random-generation rules When generating a new gradient: - Use 3–5 colors - Choose one dominant field - Choose one contrasting accent - Place at least one important field partially outside the canvas - Randomize stretch and rotation - Choose a clear directional flow - Preserve 20–40% quiet or dark space when appropriate - Vary warp carefully within curated ranges - Produce a recognizable form, not only a color blend Reject and regenerate results that are: - Almost flat - Symmetrical - Visually muddy - Evenly filled - Made from obvious circular blobs - Missing a dominant form - Missing contrast or visual direction ## Motion Apply motion to the warped geometry, not only to point positions. Animate the warp phase and point movement very slowly using periodic functions. Motion must: - Remain subtle - Preserve the main composition - Loop seamlessly - Avoid shaking, rapid morphing, or liquid-jelly movement ## Validation After implementing the changes: 1. Confirm the left canvas panel and right settings panel have identical heights. 2. Confirm the gradient artboard occupies the maximum available canvas space. 3. Test several canvas aspect ratios. 4. Generate at least 20 different seeds. 5. Confirm the results contain visibly different curved, stretched, directional forms. 6. Confirm outputs no longer look like simple radial gradients. 7. Drag every point and verify the warped composition updates smoothly. 8. Confirm the same seed still reproduces the same result. 9. Confirm exported images match the editor. 10. Fix all console and rendering errors. Preserve the existing minimal interface and all currently working functionality.