Astro Knots · The Lossless Group

Build an awesome content-driven website.

Battle-tested patterns for best-in-class websites. Your agent can follow them, and so can you, whether you've shipped a hundred sites or this is your first.

Build one with your agent See the sites View on GitHub →

↑ try the mode toggle, watch everything pivot.

Why rent your website from a platform?

Wix, Squarespace, Weebly and Webflow keep your site on their terms. If you're happy to build with AI, you can own the whole thing instead.

No need to reinvent the wheel. Developers: the rigor is built in from day one. Beginners: get creative and get going, knowing you're doing it right.

Out of the box

Builds fast, then cleans up after itself: quick drafts become tidy, reusable code.
Respects your modes, theme, brand kit and design system.
Ready for search engines, AI answers and good-looking link previews, with share images made to order.
The best way to keep content in Markdown, and it plays nicely with Obsidian.

21 Astro sites built this way
3 Modes: light, dark, vibrant
1 Published package: LFM →
1 MCP server for any agent →
1 Plugin for Claude Code & Codex →

Build one yourself

Tie your own knot, with your agent.

The patterns behind these sites, packaged for Claude Code and Codex: skills your agent loads when it needs them, and a check that catches React habits the moment they're written. Paste one prompt and your agent sets itself up, then asks what you're building.

Copy this prompt into your agent

setup prompt

Set me up with Astro Knots, so you can help me build a website that follows The Lossless Group's patterns: Astro with Svelte, Lossless Flavored Markdown, tests, three color modes, and share images and SEO done right.

Step 1. Install the Astro Knots plugin (its skills, plus a check that runs on every edit). Use whichever applies:
- Claude Code: run  claude plugin marketplace add lossless-group/astro-knots-mcp  and then  claude plugin install astro-knots@astro-knots-mcp  then tell me to restart the session.
- Codex: run  codex plugin marketplace add lossless-group/astro-knots-mcp  then tell me to open /plugins and install Astro Knots, then open /hooks and trust its hook (Codex skips plugin hooks until they're trusted).

Step 2. Load the start-an-astro-knot skill and follow it. Ask me what the site is for first. If the skill doesn't show up yet, tell me to start a new session and say "Use Astro Knots: get started".

Works in the Claude Code CLI, the Codex CLI and the ChatGPT desktop app (not Codex's IDE extension). Along the way it'll suggest an Ideogram key, so your agent can keep making images that match your site.

Or install it yourself

Claude Code

claude plugin marketplace add lossless-group/astro-knots-mcp
claude plugin install astro-knots@astro-knots-mcp

Codex

codex plugin marketplace add lossless-group/astro-knots-mcp
/plugins   → install Astro Knots
/hooks     → trust its hook

Codex runs a plugin's hooks only once you've trusted them in /hooks.

What your agent follows

Astro, with Svelte only where it needs to be interactive
No React, no JSX habits: checked on every edit
Markdown through Lossless Flavored Markdown
Tests first, with Vitest
Light, dark and vibrant modes from two-tier tokens
Share images that fit iMessage, WhatsApp and the feeds
Rapid creativity, followed up by strong refactors
Design system and component library, maintained
Inspired by, but not locked into, shadcn/ui
Pairs with context-v.dev for memory and context layers

astro-knots-mcp on GitHub →

Redesign a site as three real directions.

Our systems keep getting better. A redesign now arrives as three complete, genuinely different designs — working code, two-tier theming, themed image assets, one consistent stack — generated in parallel against a single shared content layer, so a stakeholder can compare them like-for-like. One to three prompts; a fifteen-to-thirty minute loop produces three to five variants.

How it works →

three spikes · nine variants · all three modes each

The contract

Two tiers. Three modes. One toggle.

Every astro-knots site declares --color__name raw values at the top of theme.css, then composes --color-bg / --color-accent semantic tokens from them — re-bound per data-mode. Tailwind v4 generates utilities from the kebab-case tier only. Toggle the mode in the header and watch these swatches pivot live.

--color-bg bg

--color-bg-elevated bg-elevated

--color-text text

--color-text-soft text-soft

--color-accent accent

--color-accent-warm accent-warm

--color-thread thread

--color-accent-hot accent-hot

Reference: context-v/blueprints/Maintain-Themes-Mode-Across-CSS-Tailwind.md

Honest notes

What worked. What didn't.

We tried to be a monorepo. We aren't. Here's what actually held up against the friction of a small team.

What survived.

Co-located development. Each site visible alongside its siblings so patterns can be compared. Submodules so each site stays its own repo and ships independently. A shared context-v/ that travels with the workspace.

What got promoted.

Lossless Flavored Markdown. The one piece that was identical across every site — remark/rehype — earned its way out of pattern-land into a real published package. Everything else stayed copy-and-adapt.

What didn't work.

Treating @knots/* as importable dependencies. Style-free shared components. "Copy when you remember" — we usually didn't. Every site's design diverged enough that generic UI components were a tax, not a gift.

Where it's going.

Selective sharing where it's justified, copy-and-adapt where it isn't. The two-tier token system + three-mode contract are the closest thing to a non-negotiable convention. You can toggle them in the header right now.

Latest from the workspace

Recent ship notes

The most recent threads pulled. Each links back to the spec or blueprint that asked for it.

All ship notes →

Read the thinking.

Specs, blueprints, prompts, reminders — the working notes that underwrite the code, kept in each site's context-v/ and rolled up here.

Browse notes Changelog →