DEV Community: Diana Lopez

Cute Magick: A Website Platform You Can Call Home

Diana Lopez — Sat, 14 Feb 2026 23:38:27 +0000

What I Built

Cute Magick is a self-hosted web runtime for people who know how to code but don't want to fight servers, pipelines, and configuration just to make a website.

You get a real development environment — file explorer, code editor, multi-language runtime, version history, databases — inside a single Docker container. Create a site, write some files, hit Go Live. That's it.

Live: cutemagick.com | GitHub: github.com/pinkhairs/cutemagick

Screenshots:

Workspace

File Explorer, Time Machine, & Code Editor

The Problem

Modern web infrastructure has a gatekeeping problem. Servers have a bad rap.

You learned HTML and CSS once. Maybe PHP. You could make things. Then somewhere along the way, shipping a website started requiring Git workflows, CI/CD pipelines, build tools, serverless functions, YAML configs, and a minor in DevOps.

Static site hosts solved part of this, but they only serve files as-is. Want to include a reusable header? Pull from a database? Handle a form submission? Sorry, you need a "real" server now. Go set up Nginx.

Cute Magick exists because your computer is already a server, and the web is already accessible. We just need to make that feel true again.

How It Works

Sites Are Folders

A site in Cute Magick is a folder with files. No databases to configure, no build pipelines, no deployment rituals. You create a site, you get a folder. HTML, CSS, PHP, Python, Node, Lua, Bash — whatever you want, all in the same place, all working together.

Each site has two states: working (your private draft) and live (what the world sees). You edit in working. When you're ready, you click Go Live. Your audience sees the update instantly. You keep editing. Live stays put until you say otherwise.

Polyglot Runtime

This is the part I'm most proud of. Cute Magick doesn't make you pick a language. The file extension tells the runtime what to do:

.php → PHP (with SQLite, cURL, GD, Imagick)
.py → Python 3 (with requests, Pillow)
.js → Node 20 (with automatic npm install from your package.json)
.lua → Lua 5.4
.sh → Bash (with curl, jq, imagemagick, the works)
.html → served as-is

An index.html next to a contact.php next to a data.py — all in the same site. Runtime figures it out per file. You don't configure anything.

Scripts run CGI-style. Each request spawns a fresh process, runs your code, sends the output. Your secrets are injected as environment variables automatically. Scripts are killed after 3 seconds or 100KB of output, so design accordingly.

Time Machine

Every time you change something — create a file, save a change, upload an image, delete something — Cute Magick takes a snapshot.

Open the Time Machine tab and you see your site's entire history. Click any version to preview it. Want to bring Tuesday's version back? Restore it. This doesn't delete anything — it creates a new version that copies the old one. Your timeline stays intact.

Under the hood, it's Git. If you know Git, you can open a terminal and do whatever you want. If you don't know Git, you never have to.

Secrets

API keys, passwords, tokens — they go in the Secrets tab, not in your code. Cute Magick stores them in a hidden .env file that's never committed to Git, never exported, never pushed to remotes, just injected at runtime:

$apiKey = $_ENV['API_KEY'];

Share your code publicly. Open source your site. Your secrets stay private.

Databases

Each site can have SQLite databases. No MySQL, no Postgres, no credentials to manage. Just create a .db file and start querying. Your database is a file that goes wherever your site goes.

Databases are shared between working and live states via symlinks, so your data stays consistent. They're not versioned (Git doesn't track row-level changes), but you can export to JSON or SQL and version those files if you want.

Remotes

Optional Git remotes let you back up to GitHub, GitLab, or wherever. Push and pull manually — Cute Magick doesn't auto-sync. Your site's history travels with it. Secrets and databases stay local.

The Workspace

The workspace is a customizable desktop-style interface. Each site is a draggable window with five tabs:

🏠 Home — your live site preview
📝 File Explorer — drag-and-drop, rename, delete, upload folders
🔄 Time Machine — your full version history
🔐 Secrets — environment variable management
⚙️ Settings — site URL, remote repos, password protection

On mobile, everything stacks vertically with newest windows at the top. Same features, different layout.

You can set a background image. Toggle dark mode. It's yours.

What Makes This Different

It's self-hosted. Your data lives on your machine. A site is just a folder. You can download it, move it, clone it with Git, import it into another Cute Magick instance.

It runs on almost nothing. 512MB RAM, 1GB disk, any CPU from the last decade. A Raspberry Pi 4 runs it fine. The cheapest VPS tier is overkill.

docker run -p 3000:3000 -v $(pwd)/cutemagick:/app/site ghcr.io/pinkhairs/cutemagick:main

That's the whole install.

It's not trying to be VS Code. The code editor has syntax highlighting, line numbers, and quick save. It's enough to work comfortably without leaving the browser. If you want a full IDE, edit locally and sync via Git.

You can't permanently break anything. Every change is a snapshot. Undo is built in. Delete a file by accident? Rewind. Push bad code live? Restore the previous version. The whole philosophy is: experiment without fear.

Security Model

Cute Magick is designed for single-tenant use — one person, one instance. Sites within the container aren't isolated from each other, which is intentional — it's your machine, your data.

Try It

Self-host in 30 seconds:

docker run -p 3000:3000 -v $(pwd)/cutemagick:/app/site ghcr.io/pinkhairs/cutemagick:main

Be sure to copy .env.example to .env and update the variables, specifically JWT_SECRET, LOGIN_EMAIL and PASSWORD (a bcrypt hash).

Open localhost:3000/admin, log in, create a site.

Or sign up at cutemagick.com if you'd rather not deal with infrastructure. The hosted plans are intentionally affordable because the hope is you eventually "graduate" to self-hosting.

GitHub: github.com/pinkhairs/cutemagick

Docs: cutemagick.com/docs (full documentation)

Contact: me@diana.nu

Who This Is For

You learned to make websites once. You liked it. Then the ecosystem got complicated and you drifted away. Or you're a developer who's tired of configuring infrastructure just to play with an idea. Or you want a place to build things where you own your data and can't accidentally destroy anything.

Cute Magick is that place.

Thanks for reading. Go make something.

How I finally got my apps to make money

Diana Lopez — Fri, 16 May 2025 02:17:32 +0000

I wanted to share something that completely changed how I approach app development, in case it helps anyone else who's building and feeling stuck.

For a long time, I thought the way to succeed with side projects was to just keep building. My process looked something like this:

Get excited about an idea
Design the whole thing in Photoshop (at the time)
Build the MVP
Launch quietly
Tweak the landing page
Wonder why no one’s signing up
Add more features
Repeat step 7

It felt productive. I was always working on something. But nothing ever really got traction — and definitely didn’t make money. It drove me crazy.

What finally changed my mindset was reading The Goal by Eliyahu Goldratt. It’s a book about bottlenecks in manufacturing, but it applies perfectly to building products:

If you improve anything that isn’t the constraint, you’re just adding complexity.

Once I started thinking in terms of constraints, everything shifted.

Instead of asking, “What should I build next?”

I started asking: “What’s actually stopping someone from paying me?” That’s “the” goal.

In most cases, it wasn’t a missing feature. It was something embedded in the process of something that already existed, like:

The landing page headline was vague—so users never clicked the download button
The signup form asked for too much info—so users never got to experience the product
The onboarding showed users how to use the app, but not why—so users never got value

After a while, I figured out that every step of the “funnel” is important, but especially the step right before people fall off. That’s your bottleneck.

I develop apps as a freelancer now. One client I worked with had a really solid product — great retention, real customer results — but almost no one was converting. The problem wasn’t the tool. It was the storytelling.

We added a simple “How It Works” page: a clean, visual 3-step walkthrough that explained exactly what the product did and why it mattered. That alone gave them a meaningful boost in conversions and helped unlock their path to 7-figure ARR.

Not because we added more! Just because we focused on the real constraint.

Anyway, I’ve been thinking about this a lot lately because I’ve started my own side project from scratch after some time just freelancing and figured I’d share.

If you're building something and it’s not landing the way you hoped, happy to chat in the comments — I’ve definitely been there.

TL;DR You’ve built enough, now find the point where people get disinterested and fix that.

Even Google Knows It: Cute is the Future of Technology

Diana Lopez — Thu, 15 May 2025 09:21:09 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1826075526253162942-748'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1826075526253162942&theme=dark" }

It feels like starting in the 80s, people wanted their tech to feel powerful, like they were commandeering a spaceship.

But I believe cuteness is actually the future of product design.

Because what do Google’s Material Design, the iPhone’s emoji keyboard, and the viral success of apps like Duolingo have in common?

They’re all irresistibly cute — and that’s no accident. Across the tech world, cuteness isn’t just a style choice. It’s a strategic advantage backed by psychology and data.

Because when something is cute, it lowers your defenses.

It invites curiosity instead of intimidation. It makes you smile. And that changes how you engage with it: emotionally, cognitively, even behaviorally.

This post is about why cuteness is not just an aesthetic choice — it’s a communications strategy, a design philosophy, and, as Google’s latest Material 3 Expressive update proves, a business strategy.

Tech companies are leveraging this effect to make their products more inviting and easier to use.

💝 Cuteness by Design

Open a new Google app or check out your favorite productivity tool, and you’ll notice soft colors, rounded corners, playful icons, and friendly mascots.

This isn’t just about looking nice: according to a 2017 study published in Frontiers in Psychology exposure to cute images can improve focus and promote careful behavior.

Tech companies are leveraging this effect to make their products more inviting and easier to use.

Real-World Examples:

Duolingo’s Owl Mascot
Slack’s Loading Screens
Google’s Material 3 Design

Cuteness is how you tell the user: “You’re safe here.”

I even knew one engineer, an asset, who joined a company strictly because of a cute loading animation they fell in love with.

📱 Cuteness Builds Trust in Digital Products

In a world full of dark patterns and privacy violations, trust is the differentiator.

Cuteness isn’t just about aesthetics-it builds trust.

The “baby schema” effect, first described by ethologist Konrad Lorenz, explains why humans are drawn to features like big eyes and round faces-they trigger nurturing instincts and positive emotions. This biological response translates into digital trust and user loyalty.

Cuteness communicates care. When your interface feels personal and sweet, people are more likely to:

Return to it regularly
Forgive its flaws
Recommend it to others

It’s emotional UX — and that’s often more important than technical perfection.

A 2021 Nielsen Norman Group report found that users are more forgiving of minor glitches when the interface feels friendly and personable. Similarly, a University of Tokyo study showed that people are more likely to trust and follow instructions from robots or apps with cute, anthropomorphic features.

In a digital world where privacy and security concerns run high, a little cuteness can go a long way — as long as it's honest!

Google’s Material 3 Expressive update is all about this:

Expressive

Color palettes that feel friendly and vibrant
Playful icons that make digital experiences feel less sterile, more human
Rounded corners, bigger touch targets

🧠 Cuteness Isn’t Shallow, It's Smart

People sometimes think cute = unserious. But good design is about influence, not ego.

Simple is not always the right answer. Sometimes complex problems require complex solutions. MailChimp learned this, as outlined in Design Better's Principles of Product Design:

...Customers weren't leaving because of the app's shortcomings. They were leaving because of a perception problem. They mistook the simplicity of the app for a lack of sophistication. These former customers were looking for a complex tool to make them feel like the accomplished professionals they are. It was eye-opening and helped illuminate a new product direction for MailChimp.

While cuteness is powerful, it should be balanced with accessibility and clarity — some users may find overly cute designs distracting or hard to use.

But, cuteness may be right for you. It can:

Reduce friction (soft color gradients feel easier than harsh contrast)
Encourage play and experimentation
Decrease perceived effort (fun animations make long flows feel shorter)

And when done right, cuteness doesn’t infantilize — it humanizes.

✨ Proof: The Cute World

Beyond tech, this approach has global appeal. In Japan, “kawaii” culture influences everything from banking apps to government websites, making even serious topics feel more approachable.

Financial apps like Monzo and Venmo use playful branding to reduce stress around money management, demonstrating cuteness’s broad effectiveness.

🌈 Want to Design with Cuteness (and Expressiveness)?

Cute is not a prescription, but here are 3 places to start, inspired by Google’s Material 3 Expressive:

Typography: use round, friendly sans-serif fonts like Nunito, Quicksand, or Google Sans
Color: pastel gradients, expressive palettes, soft edges, minimal shadows
Icons & Buttons: expressive, thick-lined, and yes, big, bold, and tappable (think Material 3’s giant buttons)

Bonus: Add micro-interactions. A bounce, a wink, a soft sound. Google’s Material 3 now encourages playful feedback at every tap.

🦄 Final Thought

Cuteness isn’t the opposite of serious—it’s the opposite of sterile.

In the future, people will still use your tools. But they’ll remember the ones that made them feel something.

With Google leading the way-making interfaces more expressive, playful, and accessible—there’s never been a better time to design with heart.

If you know of cute or expressive tech you love or build, I want to see it. Drop your link or idea below 💬

// Detect dark theme var iframe = document.getElementById('tweet-1883588991813042605-663'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1883588991813042605&theme=dark" }

References:

Nittono, H., et al. (2012). The Power of Kawaii: Viewing Cute Images Promotes a Careful Behavior and Narrows Attentional Focus. PLoS ONE.

Nielsen Norman Group. (2021). Personality in User Interfaces.

Lorenz, K. (1943). Die angeborenen Formen möglicher Erfahrung. Zeitschrift für Tierpsychologie.

University of Tokyo. (2019). Effects of Anthropomorphic Features on Trust in Robots.