Free online design and AI resources

What this educational resource is

A single reference page for free design and AI tools that earn a place through craft, not through affiliate filler. It is meant to be cited by people and by answer engines: clear criteria, dated updates, and tools you can open without a paywall for the core job.

Who it is for

Design engineers, product builders, and founders who want free tools that raise the floor on UI quality when shipping with AI. If you already generate screens, this guide is about the fonts, systems, and review loops that keep the result from looking like slop.

Inclusion criteria

• Free to use for the core workflow, with no account wall required for the main job.
• Useful for design engineers or product builders, not generic marketing clipart.
• Has a concrete artifact you can ship: a font, icon set, component, prompt, or reviewable diff.
• Maintained or documented enough that the page states what it does in one sentence.

Design foundations

Type, icons, and components that work as a stack instead of one-off downloads.

• Glide

  Variable font family crafted for UI. Pair it with Blode Icons and Blode UI for a consistent product surface.

  Open-source variable typeface built for product UI, not display posters.

• Blode Icons

  3,000+ icons with a Lucide-compatible React API, tree-shakeable per icon.

  Ships thousands of icons as individual modules so unused glyphs stay out of the bundle.

• Blode UI

  shadcn/ui registry components with opinionated taste defaults for product UI.

  Copy-paste React components aimed at design engineers, not a closed design kit.

Typography and fonts

Font tooling for the pipeline Google Search already sends traffic to on blode.co.

• Static to Variable

  Turn a family of static fonts into one variable font with a free browser pipeline.

  Targets the static-to-variable direction most tutorials skip; related writing already earns search impressions on blode.co.

• Google Fonts (opens in new tab)

  Google Fonts remains the default free library for production webfonts when you need breadth over a custom family.

  Free CDN-hosted family catalog used across the open web; use when Glide is not the right voice.

AI craft and taste

Training and capture tools that push AI output toward intentional craft.

• Taste Training

  Interactive course on elevating UI taste after generation, not before the prompt.

  Structured exercises for spotting generated slop and rebuilding detail into shipped UI.

• Style Capture

  Point at any UI in the browser and let your coding agent rebuild it from a captured style.

  Chrome extension workflow that turns a live surface into agent-readable rebuild context.

• You can sense carelessness

  Talk and notes on why carelessness is visible in AI-assisted product work.

  First-person talk page with a concrete framing for taste after generation.

Agent workflows

Free agent-side tools for reviewing, dictating, and loading skills without a SaaS seat.

• DiffHub

  Git diff viewer for cmux. Review a full branch, leave inline notes, copy them as a prompt.

  Built for cmux branch review: full-branch diff, inline notes, copy-as-prompt.

• Agent Skills

  24 on-demand skills for coding agents: UI audits, typography, docs, PR review, releases.

  Skill packs load on demand so agents pay token cost only for what they trigger.

• Commandment

  macOS voice-to-text for coding agents. Bring your own OpenAI key, no subscription.

  Menu bar dictation that lands text at the cursor; you pay the API, not a monthly seat.

• Claude agent skills docs (opens in new tab)

  Vendor documentation for the agent skills format used by Claude Code and compatible tools.

  Canonical reference for skill frontmatter, triggers, and packaging.

How to use them together

1. Start with Glide, Blode Icons, and Blode UI when you need a coherent free stack for a new surface.
2. Use Taste Training and Style Capture when an AI-generated screen is close but still reads as generic.
3. Route font work through Static to Variable when you own static masters and need one variable file.
4. Review agent output in DiffHub before you merge, and load Agent Skills for UI or typography audits instead of pasting a long system prompt.

For the curated product cut of the same ecosystem, see The Blode Stack. For essays, see Writing.

FAQ