- Prompt Guidelines
- Design Guidelines
Prompt Guidelines
Design Guidelines
How to make sure your web app has a specific design style
You can include a paragraph at the end of your initial prompt to specify the design style you want. Here are some popular design styles with ready-to-use prompts:
High Contrast (Figma, Gumroad, etc.)
Bold colors, high contrast, thick borders, raw functionality, and intentionally “undesigned” aesthetics with rough edges.
Add this paragraph at the end of your prompt:
Use a Neo-Brutalism style with bold colors, high contrast, thick black borders
(3-4px), and harsh drop shadows. Create an intentionally "undesigned" aesthetic
with raw typography and slightly asymmetrical layouts. Buttons should have thick
borders and strong color contrast. Avoid gradients and subtle shadows in favor
of stark, bold design elements.
Push Through (Tesla, etc.)
Soft, extruded UI elements that appear to push through the surface, using subtle shadows to create a physical, tactile feel.
Add this paragraph at the end of your prompt:
Create a Neumorphic UI with soft, extruded elements that appear to push through
the surface. Use subtle dual shadows (both light and dark) to create a physical,
tactile feel. Elements should use a monochromatic color palette with minimal depth
and no hard borders. Buttons should have a soft pressed effect on interaction.
The background should be a soft light gray (#e0e0e0) or very light color, and UI
elements should appear to be carved from the same material as the background.
Glass (Apple, etc.)
Frosted glass effect with transparency, blur, and subtle borders that create depth and layering.
Add this paragraph at the end of your prompt:
Design with a Glassmorphism style using frosted glass effects with transparency
and backdrop blur. Elements should have subtle light borders (1px) and slight
transparency. Create depth through layering of translucent elements. Use colorful
backgrounds (gradients work well) with frosted glass UI elements on top. Apply
backdrop-blur CSS properties and use RGBA colors with alpha transparency. Aim for
a modern, clean aesthetic with subtle light reflections and shadows. The design
should be unique, beautiful and detailed. The colors should work well together.
Google Style
Google’s design language using grid-based layouts, responsive animations, padding, and depth effects like lighting and shadows.
Add this paragraph at the end of your prompt:
Follow Google's Material Design principles with paper-like cards, bold colors,
and responsive animations. Use elevation shadows to indicate hierarchy and focus.
Implement a consistent grid system with proper spacing and alignment. Buttons
should be flat with hover effects and ripple animations on click. Use Google's
typeface recommendations and follow Material color palette guidelines. Add subtle
transitions between states and responsive micro-interactions.
Pastel & Puffy (Headspace)
Soft, puffy, rounded UI elements that appear like clay, with soft shadows and pastel colors.
Add this paragraph at the end of your prompt:
Design with Claymorphism using soft, puffy UI elements that appear like clay.
Use large border radius (16-20px), soft inner and outer shadows, and pastel colors.
Elements should look soft and squeezable with a playful feel. Implement soft shadows
both inside and outside elements to create dimension. Use gentle pastel colors like
lavender, mint green, and baby blue. Avoid hard edges and sharp contrasts in favor
of soft, rounded corners and gentle color transitions. The design should be unique,
beautiful and detailed. The colors should work well together.