
- Article Canvas / Card: #FFFFFF
- Brand Orange: #FB991C
- Heading Navy: #022539
- Peach Icon Surface: #F6D7A8
Blog Detail Page UI Design
Clear advice. Warm details. Built for reading.
- Best for
- Long-form buying guides and practical technology advice
Copy-paste battle-tested design prompts to force Codex, Claude, and v0 to generate high-end, intentional interfaces
A little design direction
Same brief. Two very different results.
The familiar default.
A point of view. In every detail.
Glassmorphism preview selected.
How it works
Browse the curated design systems. Each has a distinct personality, use case, and set of rules.
Each style includes a ready-to-paste skill prompt with exact colors, typography, spacing, and component rules.
Drop it into ChatGPT, Claude, Cursor, v0, or any AI tool. Ask it to apply the guidelines to your UI.
Instead of generic defaults, your AI output now follows a specific design direction — with personality and purpose.
Find Your Style
Not sure where to start? Pick what you're building and jump straight to styles that fit.
Clean, conversion-focused, built to look credible from day one.
Let the work speak — minimal chrome, maximum clarity.
Product-first layouts that build trust and drive checkout.
Editorial weight that makes readers take you seriously.
Data-dense interfaces that stay legible under pressure.
Design Systems
Each comes with a full design brief — palette, typography rules, spacing guidelines, and a ready-to-paste skill prompt.

Clear advice. Warm details. Built for reading.

Bold. Precise. Money made simple.

Calm. Human. Built on Trust.

One hero. One product. All conviction.

The screen is a lens. Scroll is the director.

Motion that works. Interaction that feels alive.

Engineered light. Polished to perfection.

Frosted glass. Morning light. Depth without weight.

Form follows function. Grid is law. Color is structure.

Zero color. Maximum craft. Nothing to hide behind.

Command-line aesthetic. Zero decoration. Pure signal.

Every word earns its place. Every pixel does a job.

Fresh. Local. Built to make you hungry.

Three columns. One purpose. Always in context.

Dark. Minimal. Built to get hired.

Inflated. Playful. Physically satisfying.

Honest. Direct. Built by one person who means it.

Looks hand-drawn. Feels alive.

Precise. Technical. Drawn to spec.

Colorful data. Clear hierarchy. Built to be lived in.

Dark. Structured. Built for finding answers fast.

Editorial. Subscriber-first. Built to convert readers into fans.

Bold. Loud. Systematic. Usable.

Timed. Scored. Beautifully purple.

Authority. Ink. Editorial weight.

Community-driven. Votable. Built to surface the best.

Handcrafted energy. Indie soul. Surprisingly converts.

Warm. Conversion-focused. Product-first.

Trust-building. Clean. Conversion-optimized.
Style explorer
Switch between 29 live demos, check desktop and mobile layouts, and open the design prompt when you find your direction.
Try a direction
Color Palettes
See the exact color systems behind each style. Copy a color or take the complete palette as CSS.
Clear advice. Warm details. Built for reading.
Calm. Human. Built on Trust.
UI Layout Patterns
Explore visual layout guides, learn when each pattern works, and adapt the structure to your content.
01Layout pattern
Divides the page into a wide main content area and a narrower sidebar, creating clear information hierarchy with a primary reading path and supporting context.
02Layout pattern
Pairs two equally weighted panels to compare choices or connect a primary task with a complementary message or visual.
03Layout pattern
Uses deliberate imbalance — unequal columns, overlapping elements, and offset grids — to create tension and visual energy that symmetric layouts cannot achieve.
Around the web
Find UI Design Prompts in the maker community.
FAQ
A few useful answers before you choose a style and start building.
Still have a question?
Email the creator