DEV Community: Ash

I Build A Simple Prompt Automation Web Tool

Ash — Sun, 27 Sep 2026 16:43:47 +0000

Get it down here 👇:-
(https://asifaazad.gumroad.com/l/xegjs)

I use AI tools almost every day, and I noticed something surprisingly annoying: I kept typing the same prompts again and again.

Sometimes I had to send the same type of instruction with a different topic, input, or piece of text. The prompt itself wasn't difficult. The repetitive part was.

So instead of continuing to copy and paste prompts manually, I decided to build a small web tool to automate the process.

The Idea

The idea behind my tool is simple:

Create a prompt once, save the structure, and reuse it whenever needed.

Instead of repeatedly typing something like:

«"Write an article about [TOPIC] in a practical and beginner-friendly style..."»

I can create a reusable prompt template and provide the changing information separately.

For example:

Write a detailed article about {{topic}}.

The article should be beginner-friendly,
practical, and easy to understand.

Now "{{topic}}" can be replaced automatically.

That small change makes repetitive prompting much easier.

What the Tool Does

The web tool is designed around reusable prompt templates.

You can create a prompt containing variables, enter the values you want to use, and generate the final prompt without manually rewriting everything.

This is especially useful when the structure of a prompt stays the same but the input changes.

For example, a content creator could have:

Create a blog post about {{topic}}
for {{audience}}
using a {{tone}} tone.

Then they can quickly generate different versions by changing the variables.

Why I Built It

I wasn't trying to build another complicated AI platform.

I wanted to solve a much smaller problem:

How can I make repetitive prompting faster?
`
That's something I think is overlooked when building productivity tools. You don't always need a huge feature set. Sometimes removing five repetitive steps from a workflow is already valuable.

Building the Interface

I wanted the interface to stay simple because the tool itself is supposed to save time.

The main experience revolves around creating and working with prompts rather than navigating through a complicated dashboard.

I also focused on making it responsive so it can be used from both desktop and mobile devices.

What I Learned

The most interesting part of building this project wasn't actually the UI.

It was thinking about how people use prompts as reusable pieces of automation.

A prompt doesn't necessarily have to be something you write once and forget.

It can be treated more like a template:

Template + Variables = Reusable Workflow

Once I started thinking about prompts this way, a lot of possible use cases became obvious.

*Where It Could Go Next
*
There are several features I could add in the future, such as:

- Saving prompt collections
- Prompt history
- Favorite templates
- More advanced variables
- Import/export
- Categories and tags
- Preset templates for common workflows
- Sharing prompts through links
- Running multiple variations automatically

For now, I'm keeping the project focused on its core purpose: reducing repetitive prompt writing.

Final Thoughts

This project started from a very simple frustration: typing the same instructions repeatedly.

Building a small tool around that problem made me realize how many AI workflows are still surprisingly manual.

I'm interested in tools that sit between AI and automation—not necessarily replacing the AI itself, but making the process of using it faster and more convenient.

That's essentially what I wanted to experiment with here.

A simple prompt template can become a reusable workflow, and sometimes a small automation can save much more time than expected.

That's the idea behind the prompt automation web tool I built.

The Witch House - Helloween Theme Landing Page

Ash — Thu, 30 Oct 2025 11:41:16 +0000

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

🪄 What I Built

I created a spooky and magical Halloween-themed landing page project —
“The Witch's House.” the project is built entirely with pure Html, Css and JavaScript— no frameworks, just creativity, gradients, and powerful styling! 🎃. It brings together the mysterious world of witches, glowing potions, and fortune cards into a visually rich, interactive experience. With vibrant helloween colors, interactive hover effect, smooth transitions & animation, and responsiveness.

Demo

https://codepen.io/Asifa-Azad/pen/azdaLwb

✨ Highlights & Features**

🧙‍♀️ 1. Magical Halloween Aesthetic

**
The whole design is based on dark, mystical tones — deep purples, witchy greens, and glowing yellows — giving it that perfect Halloween-night feel.
The background, shadows, and gradients together create a realistic “witch house” vibe.

🧪 2. Potion Store Section**

Every potion card is carefully styled with hover lift effects, subtle shadows, and animated floating SVG icons — making them look alive with energy.
Each card glows differently — like it’s pulsing with magical ingredients.

🔮 3. Fortune Card Flip**

The fortune-telling card is fully 3D and flips smoothly with CSS transform and perspective — revealing hidden fortunes with a magical animation.
The transition between the front and back of the card feels like opening a secret spellbook.

💫 4. Smooth Animations & Transitions**

The project uses CSS keyframe animations for glowing lights, floating effects, and gentle motion.
Cards shimmer and breathe with life — just enough to make the interface feel enchanted but not overwhelming.

🕸️ 5. Stylish Typography**

Two best fonts power the theme:

Griffy – for main titles, giving them a gothic, enchanted aura.

Metal Mania – for text and details, adding that medieval fantasy touch.
Together, they perfectly balance the creepy and the magical.

🧛‍♀️ 6. Responsive & Accessible**

The layout adjusts beautifully for all screen sizes — from mobile witches 🧹 to desktop wizards 🧙‍♂️ — ensuring a smooth and readable design everywhere.
Media queries handle font scaling, spacing, and layout transitions perfectly.

🪞 7. Interactive Navigation

The side navigation smoothly slides in with a blurred background and glowing buttons, using pure CSS transitions.
Each link has a hover scale effect, glowing softly like it’s enchanted.

🌙 8. Pure CSS Magic**

No images (except the background), no JS — just CSS gradients, shadows, transforms, and creativity.
Everything — from card flips to glowing potions — is achieved with the magic of styling alone.

Note: This project includes AI-generated visuals (Freepik AI). Used under Freepik license terms.

Creepy Helloween Party Invitation card - Helloween Css Art

Ash — Wed, 29 Oct 2025 04:50:14 +0000

This is a submission for Frontend Challenge - Halloween Edition, CSS Art

What I Built

A creative, well-designed helloween theme css art," An Creepy Helloween Party Invitation Card". This project is built with pure css. The project showcase vibrant helloween colors, interactive hover effect, smooth transitions & animation, cool border radius art, and responsiveness for various devices.

Demo

**
https://codepen.io/Asifa-Azad/pen/pvgaxXW

🌟 Features

• Helloween Colors - Helloween theme colors ( scary blackish blue for background ),( creepy zombie green color for card ),( bloody red color for fonts ).

• Creepy Fonts - Use of spooky, creepy Helloween theme fonts.
i. Nosifer for heading - Gives scary, blood dripping effect.
ii. Metal Mania for paragraphs - Gives chills, medival magic book effects.

• Scary Faced Art - Scary fearful face made using css border and border radius properties.

• Open Book Card Effect And Smooth Transform Style - Smooth Card opening, and 3D transform rotation on hover.

• Magic Glow Animation - Magical glowing animation around the card for giving helloween magic vibes.

• Text Glowing - Bloody red text glows when the card is opened.

• Responsiveness - Fits prefect according to the size of different devices with the of css media query, making fear accessible to all.