Guides & tutorials

Learn to design with AI, the practical way.

No theory dumps. These are the exact workflows we use on client work — prompt strategies, design systems, template recipes and deployment.

01 · Design systems

Design systems with AI: from brand chaos to one Markdown file

How a single DESIGN.md spec keeps every AI-generated screen on-brand — the pattern behind 73 open-source brand specs and the extension that extracts one from any site.

8 min read · beginner friendly 02 · Deployment

How to deploy a static template to Cloudflare Pages (free)

From zip to live domain in 10 minutes: create the project, upload, attach your domain. Includes the DNS gotchas that trip everyone.

6 min read · step by step 03 · Tooling

Claude Design, reverse-engineered: the 340-line taste recipe

What the leaked system prompt tells us about identity, taste, flow and tooling — and how open alternatives (Huashu, Open Design) recreate it.

10 min read · intermediate 04 · Pipeline

MotionSites.ai is a prompt library, not a builder — the real toolchain

Our teardown of the AI dynamic-site stack: MotionSites, img2threejs, Framer Motion, Magic UI, and our recommended pipeline for moving sites.

9 min read · intermediate 05 · Craft

Stop AI slop before it ships: a design-rule checklist

Gradient overload, fake dashboard stats, icon soup — the telltale patterns, plus the anti-slop rule packs agents can load.

7 min read · everyone 06 · Templates

Making a template yours: rebrand in 20 minutes

Swap colors, fonts and content in any of our templates using CSS variables and a few search-and-replaces — no design background needed.

5 min read · beginner friendly

Workshops

Prefer a live walkthrough?

Our half-day AI design workshop covers everything above hands-on, with your team's real project. See the Services page.