How to Build a Branded Slide Deck with Claude Code and Awesome Design MD in Under 10 Minutes

You Can Build a Slide Deck That Looks Like Apple Made It — in Under 10 Minutes

Most slide decks take an hour to build and still look mediocre. You pick a theme, wrestle with font sizes, try to make the colors feel intentional, and end up with something that looks like a default template with a few tweaks. The result quietly undermines whatever you’re presenting.

Here’s the specific thing this post is about: you type Using the Apple design system, create a five slide deck explaining AI agent into Claude Code, and it outputs an animated HTML file you can screen-share directly from a browser. No PowerPoint. No Keynote. No exporting. The whole process takes under 10 minutes, and the output looks like it came from a design team.

This is possible because of a GitHub repo called Awesome Design MD — 71,000 stars, 57 brand markdown files, each one encoding the complete visual system behind a real brand. Apple, Notion, Airbnb, Stripe, Uber, Anthropic/Claude, and 51 others. The repo hit 71,000 stars within weeks of launch, which tells you something about how many people have been waiting for exactly this.

The rest of this post is a step-by-step walkthrough: install the repo in Claude Code, pick a design system, build a slide deck, and customize it for your brand.

---

What You Actually Get at the End

Before the steps, it’s worth being concrete about the output.

When Claude Code runs the slide deck prompt, it generates an HTML file. Open it in any browser and you get animated slides with transitions — the kind of thing that looks like it took a designer a day to build. You screen-share it directly from the browser tab during a Zoom call or webinar. No conversion step, no “export to PDF and lose all the animations,” no compatibility issues.

The Apple design system in particular produces a premium feel: clean typography, generous white space, subtle animations, the visual weight that makes people assume the content is worth paying attention to. That’s not an accident — it’s the actual visual logic Apple uses, encoded in a markdown file and fed to Claude as context.

This also means the output is yours. It’s a plain HTML file sitting on your machine. You can edit it, host it, version-control it, or hand it to someone else. Nothing is locked inside a SaaS platform.

---

What You Need Before Starting

Claude Code. Either the desktop app or the CLI. If you haven’t used it before, the Claude Code source code leak post covers a lot of the practical behavior you’ll want to understand. You’ll need an Anthropic account with API access.

A working directory. Claude Code operates on files in a project folder. Create a folder for this — something like design-projects/ — and open Claude Code pointed at it.

The Awesome Design MD repo URL. You’ll paste it into Claude Code in step one. The repo is at https://github.com/awesome-design-md/awesome-design-md. You don’t need to clone it yourself.

A topic for your slide deck. The walkthrough uses “AI agents” as the example topic, but the process works for anything. Pick something you actually need to present.

That’s it. No npm. No config files. No dependencies to install.

---

Building the Slide Deck: Step by Step

Step 1: Install the design systems

Open Claude Code in your project directory and send this exact prompt:

Install the awesome design MD GitHub repo for me and recommend how I can use it

Claude grabs all 57 files and copies them to your workspace in about 30 seconds. You’ll see it pulling down the markdown files one by one.

Now you have: 57 brand design system files sitting in your project directory as plain markdown. Each file is a complete description of one brand’s visual system — colors, typography, spacing, the overall feel. Claude can read any of them as context whenever you build something.

The reason this works without any installation ceremony is that these are just text files. There’s no package to install, no configuration to touch, nothing that can break. Claude reads the markdown describing what Apple’s design looks like and uses it as a blueprint. This is the same mechanism that makes Google Stitch’s design.md file work with Claude Code — structured markdown that an AI agent can read as design intent.

Step 2: Preview the design systems visually

Before you commit to a design system, you want to see them, not just read their names.

Ask Claude:

Open the Apple, Notion, and Uber design systems as HTML previews so I can compare them

Claude will generate simple HTML previews showing each system’s colors, typography, and spacing. This takes about a minute.

Now you have: A visual comparison of three design systems in your browser. This is the right way to make the decision — you’re choosing based on what you actually see, not based on what sounds right.

Here’s the quick map for slide decks specifically:

• Apple — premium, clean, lots of white space. Best for client presentations, high-ticket offers, anything where you need to look credible before anyone reads a word.
• Notion — minimal, educational, breathing room between elements. Best for course content, tutorials, community pages.
• Stripe — serious, business-facing, high credibility. Best for pitch decks and anything going to a professional audience.
• Uber — pure black and white, geometric, maximum contrast. Best for video graphics and on-screen explainers where low contrast will kill readability.
• Anthropic/Claude — warm, slightly parchment-like, thoughtful. Different from the typical tech aesthetic in a way that’s hard to describe until you see it.

For this walkthrough, we’re using Apple.

Step 3: Generate the slide deck

Send this prompt:

Using the Apple design system, create a five slide deck explaining AI agent

Claude reads the Apple design system markdown file, understands the visual rules — the typography scale, the color palette, the spacing logic, the overall aesthetic — and generates an HTML file with five slides, animations, and transitions.

Open the output file in your browser.

Now you have: A five-slide animated deck in Apple’s visual style, running in your browser. The animations are built into the HTML — no JavaScript library to install, no external dependencies. You can screen-share this tab directly in any video call.

The output will typically include a title slide, three content slides, and a closing slide. The structure Claude chooses is reasonable but you’ll almost certainly want to adjust the content. That’s fine — the design is the hard part, and Claude handled it.

Step 4: Iterate on the content

The first output is a starting point. You’ll want to refine it.

Some useful follow-up prompts:

Add a slide between slide 2 and 3 that shows a comparison table of AI agents vs traditional automation

Make the typography on slide 1 larger and add a subtitle

Change the animations to be slower and more subtle

Claude edits the HTML file directly. Each iteration takes a few seconds. You’re not fighting a GUI — you’re just describing what you want.

Now you have: A slide deck that’s actually tailored to your content, not just the default output.

Step 5: Customize for your brand

Here’s the important caveat: Notion’s colors belong to Notion. Apple’s typography is Apple’s. You can use these systems to learn from and build on, but anything you publish publicly should use your own brand identity.

The good news is that adapting a design system to your brand is one prompt:

I love the Apple design system structure, but I want my brand colors: dark navy background, gold accent, white text. Adapt this and save it as my_brand_design.md

Claude rewrites the entire design system file with your specifications. The structure, spacing logic, and typography approach stay intact. The visual identity becomes yours.

Now you have: A custom design system file — my_brand_design.md — that you can reference in any future project. Every slide deck, landing page, or school page you build from here on follows the same visual rules automatically.

This is the actual unlock. It’s not the single slide deck you built today. It’s that you now have a system that makes everything you create look like it came from the same brand.

---

Where Things Go Wrong

Claude doesn’t find the design system files. This usually means the files weren’t installed in the directory Claude Code is currently working in. Check that you ran the install prompt from the right directory, and that the markdown files are actually there. You can ask Claude: List the design system files available in this project to verify.

The HTML output doesn’t open correctly. Some browsers handle locally-opened HTML files differently. If animations aren’t running, try opening the file in Chrome or Firefox rather than Safari. If you’re seeing a blank page, check the browser console for errors — it’s usually a path issue with a font or asset reference.

The slides look generic despite using the design system. This happens when your prompt is too vague. “Create a slide deck about AI” gives Claude less to work with than “Create a five slide deck explaining AI agents, covering: what they are, how they differ from chatbots, three real-world use cases, and a summary.” More specificity in your content prompt produces better output.

The animations are too aggressive. Apple’s design system tends toward subtle, but Claude’s interpretation can sometimes be more dramatic. Just ask: Make the slide transitions more subtle — a simple fade instead of the current animation. Claude edits the CSS directly.

The file is hard to edit manually. The generated HTML is readable but dense. If you want to make significant structural changes, it’s easier to ask Claude to make them than to edit the HTML by hand. Treat the file as Claude’s output, not your source — describe what you want changed and let Claude update it.

---

Where to Take This Further

The slide deck is one output. The same workflow produces landing pages, school community welcome pages, and video graphics. The prompt structure is identical: load the design file, describe what to build, let Claude run.

For landing pages: Using the Apple design system, build a single page landing page for my offer. For educational content: Using the Notion design system, design the welcome page structure for my school community about [topic]. For video graphics where contrast matters: use Uber’s design system, which is built around pure black and white and reads clearly at any size on any background.

If you’re building agents that need to present or explain themselves — and a lot of AI agent workflows eventually need some kind of output layer — it’s worth knowing that platforms like MindStudio handle the orchestration side: 200+ models, 1,000+ integrations, and a visual builder for chaining agents and workflows. The design layer and the agent layer are separate problems, and it’s useful to have good tools for both.

The broader pattern here is that design systems as plain markdown are a genuinely different interface for design tooling. Most design tools require you to learn an interface. Most templates require you to customize inside a platform. A markdown file just sits in your project and Claude reads it as context. That’s a low-friction way to get consistent visual output across everything you build.

For teams thinking about how this scales — if you’re building full-stack applications from structured specs rather than just presentation layers — Remy takes a similar “structured text as source of truth” approach: you write an annotated markdown spec, and it compiles into a complete TypeScript backend, database, auth, and deployment. The abstraction level is different, but the underlying idea is the same: precise structured text as the thing you actually maintain.

The Awesome Design MD repo also pairs naturally with Claude Code for content marketing workflows — once you have a design system file in your project, you can reference it in any content generation skill, and everything that comes out of that skill automatically follows the same visual rules.

One thing worth doing before your next presentation: run the install prompt, spend five minutes comparing the Apple and Notion previews side by side, and pick the one that actually fits what you’re building. The difference between a slide deck that looks designed and one that looks default is usually just having made that choice deliberately.