Restyle HTML with DesignMD

Use DesignMD to restyle an AI-generated HTML page while preserving its content.

Introduction

30 Second Summary

A short website brief can become a full page in minutes. The first result often carries the generator's default look instead of your chosen style.

In this project, you will use HTML Anything through an authenticated Gemini CLI session to generate a baseline Trailbook page. You will preserve Trailbook's content while DesignMD supplies a new visual system through a copied DESIGN.md.

What You'll Build

You will open the original Trailbook page beside its redesigned version to show the same hiking plan wearing a completely different visual system.

By the end of this project, you'll have:

  • A live Trailbook landing page that turns the Cedar Loop brief into a complete hiking planner.
  • A standalone baseline that opens from a single .html file for an easy before-and-after comparison.
  • A DesignMD-driven redesign that keeps Trailbook's message intact while visibly changing its visual language.
  • Secret Mission: Apply a second DESIGN.md to the same baseline to prove that design context controls the visual language.

Are there any prerequisites?

Bring a Mac with internet access plus a personal Google account. The project includes setup for every local developer tool.

Before We Start

This checkpoint locks in Trailbook's transformation before you touch any tools. You are separating the page's content from the visual system that controls its appearance.

What Stays and What Changes?

The exported Trailbook HTML carries the page's wording, facts, semantic sections, links, and interactions.

The supplied DESIGN.md controls its colors, typography, spacing, radii, shadows, motion, and component treatment.

Install HTML Anything on Your Mac

HTML Anything runs on your Mac through a local development toolchain.

Apple Terminal gives you one place to prepare that toolchain. Git downloads the project source.

Node.js runs the local app. pnpm installs its repository packages.

In this step, get ready to:
  • Confirm that Git is available in Apple Terminal.
  • Activate Node.js 20 through nvm 0.40.7.
  • Prepare HTML Anything for local generation with Gemini CLI.
Verify Git in Apple Terminal

Git clones the HTML Anything repository onto your Mac. A version check confirms whether macOS already has the required command-line tools.

  • Use macOS search to find Apple Terminal.
  • Launch Apple Terminal from the search results.
  • Verify Git by running this command:
git --version

What does this command check?

This command asks Git to report its installed version. Any Git version output confirms that the command is available in Apple Terminal.

✔️ Git reports a version

Your Mac can use Git to download the HTML Anything repository.

ⓧ Git is unavailable

macOS provides Git through Apple Command Line Tools. The installer opens a macOS dialog for you to complete.

  • Start the Apple Command Line Tools installer by running:
xcode-select --install

What does this command do?

This command asks macOS to install Apple Command Line Tools. That package makes Git available in Apple Terminal.

  • Complete the installation through the macOS dialog.
  • Close Apple Terminal after the installation finishes.
  • Use macOS search to find Apple Terminal again.
  • Launch Apple Terminal from the search results.
  • Verify Git again by running:
git --version

What confirms the installation?

A Git version now confirms that Apple Command Line Tools finished installing.

Git still unavailable?

Make sure the macOS installation dialog finished before reopening Apple Terminal.

If the check still fails, restart your Mac so the new command-line tools load into a fresh session.

Help me troubleshoot Git on my Mac.

Install Node.js 20 with nvm

HTML Anything expects Node.js 20. nvm keeps that runtime separate from any other Node.js version on your Mac.

The first check can report a version or show that Node.js is unavailable. Choose the tab that matches your result.

  • Check your current Node.js version by running:
node -v

What does this check tell you?

The result shows whether Node.js is already available. It also reveals whether the installed major version matches 20.

✔️ I see v20.x

Your current Node.js version already matches the repository requirement. You will still install nvm 0.40.7 so this project has a repeatable runtime setup.

  • Install nvm 0.40.7 and activate Node.js 20 by running:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash
source ~/.zshrc
nvm install 20
nvm use 20
node -v

How does this prepare Node.js?

  • The download command installs nvm 0.40.7.
  • The source ~/.zshrc command loads nvm into the current zsh session.
  • The nvm commands install Node.js 20.
  • The final check confirms that Node.js 20 is active.

ⓧ I see an older version

Your Mac has Node.js installed. The installed major version does not match the repository requirement.

  • Install nvm 0.40.7 and switch this Terminal session to Node.js 20 by running:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash
source ~/.zshrc
nvm install 20
nvm use 20
node -v

How does nvm fix the version?

  • nvm 0.40.7 manages the Node.js versions available to your shell.
  • The install command downloads Node.js 20.
  • The use command activates Node.js 20 for the current Terminal session.
  • The final check should now begin with v20.

ⓧ Command not found

Node.js is not available in your current Terminal session. nvm installs the required runtime without changing macOS system tools.

  • Install nvm 0.40.7 and activate Node.js 20 by running:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash
source ~/.zshrc
nvm install 20
nvm use 20
node -v

What does this setup install?

  • The first command installs nvm 0.40.7.
  • The second command loads nvm through ~/.zshrc.
  • The next commands install Node.js 20.
  • The final check confirms that the new runtime is active.

You should now see a version beginning with v20. That result confirms the required Node.js runtime is active.

nvm or Node.js unavailable?

If nvm is unavailable after installation, reload your zsh configuration with the same source command shown in your selected tab.

If Node.js still reports an older version, rerun the nvm use command from your selected tab.

Help me fix my Node.js setup.

Prepare HTML Anything for launch

The repository pins pnpm 10.33.2 in its package configuration. Corepack reads that pin so the correct package manager handles the install.

Gemini CLI 0.59.0 supplies the coding agent that HTML Anything connects to. Authentication belongs in the next step.

  • Return to your Mac home folder by running:
cd ~

Why start from your home folder?

The home-folder location places the cloned repository at ~/html-anything. This gives the project a predictable path for later commands.

  • Clone HTML Anything and enter its repository by running:
git clone https://github.com/nexu-io/html-anything
cd html-anything

What do these commands create?

Git downloads the canonical HTML Anything repository into ~/html-anything.

The directory command moves your Terminal session into that repository.

You should see Git finish downloading the repository. Your Terminal prompt should now identify the html-anything folder.

  • Enable Corepack and check the repository-pinned pnpm version by running:
corepack enable
pnpm --version

How does Corepack choose pnpm?

Corepack creates the package-manager shims used by Node.js. It reads the nearest package configuration to select pnpm 10.33.2 for this repository.

✔️ I see version 10.33.2

The repository is using its pinned pnpm version. You can install its dependencies.

  • Install the HTML Anything dependencies by running:
pnpm install

What does this install?

pnpm reads the repository package files and downloads the dependencies required by HTML Anything.

ⓧ I see an older version

An older pnpm command is taking precedence. Enabling Corepack again inside ~/html-anything lets the repository pin control the version.

  • Reactivate Corepack and install the dependencies with the pinned pnpm version by running:
corepack enable
pnpm --version
pnpm install

What should these commands prove?

The version check should report 10.33.2 before pnpm installs the repository dependencies.

ⓧ Command not found

The pnpm shim is not available yet. Corepack can create it from the Node.js 20 installation.

  • Enable the pnpm shim and install the repository dependencies by running:
corepack enable
pnpm --version
pnpm install

What does this recover?

Corepack makes pnpm available. The repository pin selects version 10.33.2 before dependency installation begins.

The dependency progress should finish without an installation error. That result leaves ~/html-anything ready to run in the next step.

Dependency installation failing?

Confirm that your Terminal prompt identifies the html-anything repository before retrying the install.

Confirm that the pnpm check reports 10.33.2.

Help me troubleshoot pnpm install.

  • Install Gemini CLI 0.59.0 globally by running:
npm install -g @google/gemini-cli@0.59.0

Why install Gemini CLI globally?

The global installation makes the gemini command available outside one project folder. The version pin keeps this project on Gemini CLI 0.59.0.

  • Check the installed Gemini CLI version by running:
gemini --version

What does this check confirm?

This command reports the installed Gemini CLI version without starting authentication. The expected version is 0.59.0.

✔️ I see version 0.59.0

Gemini CLI is installed at the pinned version. It remains unauthenticated until the next step.

ⓧ I see an older version

A different Gemini CLI release is installed globally. Reinstalling the pinned package replaces it with version 0.59.0.

  • Reinstall Gemini CLI at the pinned version and verify it by running:
npm install -g @google/gemini-cli@0.59.0
gemini --version

What should change?

The global package is replaced with Gemini CLI 0.59.0.

ⓧ Command not found

The Gemini CLI binary is not available to your current Terminal session. Reinstalling the global package gives npm another chance to place the command.

  • Reinstall Gemini CLI and check the command by running:
npm install -g @google/gemini-cli@0.59.0
gemini --version

What should this restore?

The installation adds the gemini binary globally. The version check should report 0.59.0.

Gemini CLI still unavailable?

Close Apple Terminal after the global install finishes. Launch a fresh Apple Terminal session so it reloads the command path.

Help me find the Gemini CLI command.

Before you run the final check, which four version results do you expect your Terminal to report?

  • Verify the complete local toolchain by running:
git --version
node -v
pnpm --version
gemini --version

What does the final check cover?

  • The Git check confirms that source control is available.
  • The Node.js check confirms that the active runtime is v20.x.
  • The pnpm check confirms that the repository pin selected 10.33.2.
  • The Gemini CLI check confirms that version 0.59.0 is installed.

You should see a Git version followed by Node.js v20.x. The final two results should be 10.33.2 and 0.59.0.

✔️ Awesome, I've got everything!

That is the setup complete. Your Mac now has the local toolchain required to run HTML Anything.

ⓧ I'd like to double check the full code

Run these checks from inside ~/html-anything to compare your environment with the required end state.

git --version
node -v
pnpm --version
gemini --version

Required setup state

  • Git is installed and verified.
  • nvm 0.40.7 is installed. It is loaded through ~/.zshrc.
  • Node.js 20 is active.
  • Corepack is enabled. pnpm 10.33.2 is available.
  • Gemini CLI 0.59.0 is installed globally. It is not authenticated yet.
  • The ~/html-anything repository is cloned. Its dependencies are installed with pnpm 10.33.2.

Your local HTML Anything toolchain is ready. Next up, you will authenticate Gemini CLI and launch the browser editor.

Launch HTML Anything and Connect Gemini CLI

Your Mac now has the local toolchain from the previous step. The remaining gap is a signed-in coding agent that HTML Anything can use.

Gemini CLI handles generation requests from the local editor. You will authenticate it before starting HTML Anything in Safari.

In this step, get ready to:
  • Authenticate Gemini CLI with your personal Google account.
  • Start HTML Anything's local development server.
  • Select Gemini CLI in the browser editor.
Authenticate Gemini CLI

Gemini CLI needs a personal Google account before HTML Anything can send it generation requests. The account step is brief: Google handles it in the browser.

  • Start Gemini CLI's authentication flow by running this command:
gemini

What does this command do?

The gemini command starts an interactive Gemini CLI session. This session provides the Google sign-in path before the local agent accepts requests.

  • Select Sign in with Google in Gemini CLI.
  • Complete the browser flow with your personal Google account.
  • Return to Apple Terminal after the browser confirms authentication.
  • Exit Gemini CLI after authentication succeeds.

That account connection is complete. Gemini CLI is now authenticated for the editor.

Authentication not completing?

  • Keep the Apple Terminal session open while completing the browser sign-in.
  • Restart gemini if the browser flow closes before confirming authentication.
  • Ask for help with Gemini CLI authentication.
Start HTML Anything locally

The local development server turns the cloned repository into a browser app at http://localhost:3000. The process stays active in Apple Terminal while you use the editor.

  • Start the HTML Anything development server by running this command from ~/html-anything:
pnpm -F @html-anything/next dev

What does this command do?

  • pnpm uses the dependencies installed for the repository.
  • -F @html-anything/next targets the web editor workspace.
  • dev starts the local development server.

You should see startup output in Apple Terminal. The terminal remains occupied while the server runs.

  • Keep the Apple Terminal process running while you use the browser editor.

Server not starting?

  • Confirm the current directory is ~/html-anything.
  • Retry the server command shown above after correcting the directory.
  • Ask for help with starting the HTML Anything server.

Before you load the editor, do you think HTML Anything can detect the authenticated Gemini CLI? Keep your prediction in mind.

  • Press Cmd+Space to open your search bar.
  • Type Safari into the search bar.
  • Press Enter to open Safari.
  • Enter http://localhost:3000 in Safari's address bar.
  • Press Enter to load HTML Anything.
  • Select Gemini CLI in the agent selector.
  • Enter the editor from the agent setup screen.
  • Confirm prototype-web appears in the template options.

HTML Anything should show Gemini CLI as the selected installed agent. You should also see prototype-web among the template options.

That's the local connection working. Your editor can now send generation requests through the selected Gemini CLI agent.

Editor not ready?

  • Confirm the Apple Terminal tab still shows the running server process.
  • Refresh Safari after the server finishes starting.
  • Return to the authentication substep if HTML Anything does not list Gemini CLI.
  • Ask for help with connecting Gemini CLI to HTML Anything.

Your authenticated editor is ready. Next, you will use prototype-web to generate the Trailbook baseline.

Generate the Baseline HTML Page

Your local HTML Anything editor is now connected to Gemini CLI. You can use that connection to turn a plain-language brief into a complete page.

A baseline captures the page before any DesignMD context is added. It gives you a fixed visual reference for every redesign that follows.

In this step, get ready to:
  • Enter the Trailbook content brief.
  • Generate a baseline page.
  • Export the result as a self-contained HTML file.
Describe the Trailbook page

The brief acts as a content contract. It fixes the page sections plus the hiking facts while leaving the visual decisions to the generator.

  • Switch back to the HTML Anything editor in Safari from earlier.
  • Confirm prototype-web is selected in the template control.
  • Select the Text editor.
  • Paste this brief into the Text editor:
Create a single-page website for Trailbook, a simple hiking planner.
Include a navigation bar, hero, today's route summary, four-item packing checklist, trail notes, and a final call to action.
Use only the facts in this brief: Cedar Loop is 7.2 km, starts at North Gate, takes about 2 hours, and has a creek crossing and one exposed viewpoint.

How does this brief shape the page?

  • The opening sentence defines Trailbook as a hiking planner.
  • The second sentence sets the required page sections.
  • The final sentence locks the Trailbook facts. That makes later comparisons reliable.
Generate the baseline page

This first generation lets HTML Anything choose the page's visual system from the brief alone. Those choices become the baseline you compare against later.

Before you generate the page, which parts of the brief do you expect to recognize first?

  • Press Command+Enter to generate the page.
  • Watch the Preview tab while HTML Anything streams the page.

The first generation can take a moment while Gemini CLI builds the document. The changing Preview shows that the request is still moving.

What should I see?

  • A navigation bar frames the page.
  • A hero introduces Trailbook.
  • Today's route summary identifies Cedar Loop.
  • The route distance is 7.2 km.
  • The route starts at North Gate.
  • The route takes about 2 hours.
  • The packing checklist contains four items.
  • The trail notes mention a creek crossing.
  • The trail notes mention one exposed viewpoint.
  • A final call to action closes the page.
  • Inspect the baseline colors.
  • Inspect the baseline typography.
  • Inspect the baseline spacing.
  • Inspect the baseline cards.
  • Inspect the baseline buttons.
  • Inspect the baseline motion during scrolling.

These visual choices form your comparison point. The redesign can only feel meaningful when you know what changed.

You now have a concrete reference page with every required Trailbook section plus every supplied route fact.

Is the Preview incomplete?

  • Confirm the full brief remains in the Text editor.
  • Confirm Gemini CLI remains selected as the agent.
  • Return to Apple Terminal from earlier to confirm the HTML Anything server is still running.
  • Press Command+Enter again after correcting the missing detail.

Help me diagnose an incomplete HTML Anything generation.

Export the baseline HTML

A self-contained HTML file keeps the page in one portable document. Saving the baseline gives the later restyle task a fixed source.

  • Open the Export / Copy menu.
  • Choose .html single file.

Safari downloads a timestamped .html file containing the baseline page.

  • Press Cmd+Space to open the macOS search bar.
  • Type Finder and press Enter to open it.
  • Select the newly downloaded .html file in Finder.
  • Press Return to edit the filename.
  • Replace the timestamped name with trailbook-baseline.html.
  • Press Return to save the filename.

Before you open the export, do you expect its layout plus its interactions to match the Preview?

  • Drag trailbook-baseline.html from Finder into the Safari window from earlier.
  • Compare the locally opened page with the Preview from earlier.

You should see the same Trailbook page in Safari. Its layout should match the Preview.

The route facts plus the four-item checklist should remain unchanged. The page interactions should behave as they did inside HTML Anything.

Does the exported page look different?

  • Confirm the filename ends with .html.
  • Return to the Export / Copy menu in HTML Anything.
  • Choose .html single file again to download a fresh copy.

Help me troubleshoot my exported Trailbook HTML file.

Your Trailbook baseline is generated plus saved as a self-contained page. Next, you'll test what happens when you ask the existing task to adopt a supplied design system.

Test an In-Place Restyle

Your baseline Trailbook page gives you a fixed reference for every visual choice HTML Anything made. The next question is whether new design instructions can replace that visual language inside the same task.

A DesignMD system packages its visual rules inside a DESIGN.md. You will use one to request a complete restyle of the existing task.

In this step, get ready to:
  • Copy the complete raw DESIGN.md from DesignMD.
  • Prepare the existing Trailbook task for an in-place restyle.
  • Test the result against the baseline visual language.
Copy the DesignMD system

The full raw design system contains the palette rules plus the guidance for typography and spacing. Copying the complete document gives HTML Anything the full visual context.

  • Open https://www.designmd.co/d/claude in a new Safari tab.
  • Copy the full raw DESIGN.md shown on the page.
  • Return to the existing Trailbook task in the HTML Anything tab.
  • Place your cursor before the original Trailbook brief.
  • Paste the copied DESIGN.md at the top of the editor.

Keep the prompt layers separate

The prompt order is a little fiddly because every piece shares one editor. Keep the DESIGN.md at the top while leaving the original Trailbook brief at the bottom.

The restyle instruction goes between those two layers. This order makes the design system available before HTML Anything reads the request.

Add the restyle instruction

The DESIGN.md describes the new visual identity. A separate instruction defines which parts of Trailbook must stay unchanged during the test.

  • Insert the restyle request between the pasted DESIGN.md and the original brief by pasting this text:
Restyle the existing Trailbook output with this DESIGN.md. Preserve every fact, section, link, and interaction, but replace the visual system with the supplied colors, typography, spacing, radii, shadows, motion, and component guidance.

What does this instruction control?

  • The preservation clause protects every Trailbook fact and section.
  • The visual clause requests new colors and typography.
  • The remaining guidance requests new spacing and component treatment.
  • Confirm that the editor shows the DESIGN.md first.
  • Confirm that the restyle instruction sits in the middle.
  • Confirm that the original Trailbook brief remains at the bottom.

Your existing task now contains the design system followed by the transformation request. The original content brief still anchors the page's facts.

Prompt order look wrong?

Move the full DESIGN.md above the restyle instruction if any part landed below it. Keep the original Trailbook brief as the final section.

Use Help me restore the three-part prompt order.

Run the in-place test

This run keeps the original task while changing its design context. That controlled setup lets you test how HTML Anything handles a visual transformation after HTML already exists.

Before you generate, do you expect every new visual rule to replace the baseline styling?

  • Generate the page again by pressing Command+Enter.

You will see the page stream into the Preview again. Much of the baseline visual language remains in place despite the new design instructions.

  • Select the Log tab.

You will see the run identified as a diff edit. This confirms that HTML Anything treated your request as an edit to the existing output.

  • Return to the Preview tab.
  • Compare the current page with the baseline visual language you inspected earlier.

You should find that many fonts, colors, layout choices, components, and animations still resemble the baseline. This is the intended shortfall in the in-place test.

Why did the old design survive?

  • The existing task retains its previous state through baseHtml and baseContent.
  • HTML Anything sends that state through editFromHtml and editFromContent when the task changes.
  • This activates diff-edit mode for the next conversion.
  • Diff-edit mode preserves the prior fonts, colors, layout, grid, component structure, and animations.

You have caught the exact constraint this test was designed to expose. The new design context reached the task while the established visual identity largely survived.

Run not marked as a diff edit?

Confirm that you changed the original Trailbook task. A task created through New task follows a different generation path.

If generation does not start, confirm that the HTML Anything server from earlier is still running. Use Help me diagnose this in-place restyle run.

Your exported baseline remains intact for the next experiment. Next, you will move the same content into a fresh task so HTML Anything can process the redesign through full generation.

Restyle the HTML in a Fresh Task

The Log marked your previous run as a diff edit. The Preview kept much of the baseline visual language.

A fresh HTML Anything task has no prior base HTML to preserve. That lets the copied DESIGN.md drive a full redesign of the exported baseline.

In this step, get ready to:
  • Create a fresh redesign task from the copied design system and baseline file.
  • Verify that the content stays consistent while the visual system changes.
  • Export the redesign as a self-contained HTML file.
Create a fresh redesign task

Full generation begins when a task has no earlier base content. The first DESIGN.md can then act as the visual source of truth for the attached baseline.

Why does a fresh task work?

Same-task conversion sends the prior page back as edit context. That path preserves the existing visual choices.

A fresh first conversion leaves out that diff-edit context. The normal full-generation path can rebuild the visual layer from the supplied design system.

The raw DESIGN.md is long, so selecting only its complete contents can feel fiddly. Take your time selecting from its first line through its final line.

  • Return to the existing Trailbook task from the previous step.
  • Select the complete raw DESIGN.md at the top of the task.
  • Copy the selected design text.
  • Click New task in HTML Anything.
  • Select prototype-web in the template selector.
  • Paste the copied DESIGN.md at the top of the Text editor.
  • Add the full-restyle instruction beneath the design system by pasting this text:
Restyle the attached HTML using the DESIGN.md above. Preserve all wording, links, semantic sections, and interactions. Replace the visual layer with the supplied colors, typography, spacing, radii, shadows, motion, and component guidance. Return one complete self-contained HTML document.

What protects the redesign?

  • The preservation instruction keeps the baseline wording and behavior in place.
  • The visual-layer instruction assigns colors and typography to the DESIGN.md.
  • The same instruction also assigns spacing and component treatment to the DESIGN.md.
  • The final sentence requires an exportable document with everything inside one HTML file.
  • Attach trailbook-baseline.html with the file attachment control beside the Text editor.
  • Confirm that the complete raw DESIGN.md appears first.
  • Confirm that the full-restyle instruction appears below the design system.
  • Confirm that the source from trailbook-baseline.html appears last.

Before you generate, do you expect this fresh task to preserve the old visual language or rebuild it? Hold that answer in mind.

  • Generate the redesign by pressing Command+Enter.

You should see the complete Trailbook page stream into the Preview with a visibly different visual system.

That reset has done its job. The DESIGN.md now controls the page's visual language.

✔️ Awesome, my fresh task is ready

Your new task contains the design system first. The restyle instruction and attached baseline follow it.

ⓧ I'd like to double check the full prompt

  • Check that the full raw DESIGN.md from the earlier task is at the top.
  • Check that the full-restyle instruction appears immediately below it.
  • Check that the complete source from trailbook-baseline.html appears after the instruction.
  • Check that prototype-web is the selected template.

Still seeing the baseline styling?

Confirm that you generated from the new task. Reusing the earlier Trailbook task invokes the diff-edit path again.

Check that the full DESIGN.md appears before the restyle instruction. Check that the baseline source appears after the instruction.

Help me diagnose why my fresh HTML Anything task still resembles the baseline.

Compare content and visual changes

A successful redesign passes two checks. The content remains consistent while the visual system changes across the whole page.

Before you compare the tasks, which details do you expect to remain identical? Hold your prediction in mind.

  • Use the HTML Anything task list to alternate between the baseline Trailbook task and the fresh redesign.
  • Compare the wording across both versions.
  • Check that Cedar Loop remains 7.2 km. Confirm that it begins at North Gate. Confirm that it takes about 2 hours. Confirm that it includes a creek crossing and one exposed viewpoint.
  • Check that both versions contain navigation and a hero. Confirm that both versions contain today's route summary and a four-item packing checklist. Confirm that both versions contain trail notes and a final call to action.
  • Test every link in the redesigned page.
  • Test every interaction in the redesigned page.

What does content parity prove?

Matching facts and sections show that the baseline HTML still controls what the page communicates. Matching links and interactions show that the redesign preserved its behavior.

  • Return to the fresh redesign task.
  • Click the Source tab.
  • Inspect the source for one complete HTML document.
  • Check the source for the Trailbook wording and semantic sections from the baseline.
  • Click the Preview tab.
  • Compare the redesigned palette with the baseline palette.
  • Compare the redesigned typography with the baseline typography.
  • Compare the redesigned spacing and radii with the baseline treatment.
  • Compare the redesigned shadows and motion with the baseline treatment.

You should find the same Trailbook message and behavior in both versions. The fresh Preview should adopt the first DESIGN.md across its visual treatment.

Export and verify the redesign

The final export turns the fresh Preview into a standalone artifact. Renaming it gives you a stable file for the next comparison.

  • Click Export / Copy in the fresh redesign task.
  • Choose .html single file.
  • Click the Downloads button near the top-right corner of Safari.
  • Click the locate control beside the downloaded filename to reveal it in Finder.
  • Select the downloaded HTML file in Finder.
  • Press Return to make its filename editable.
  • Type trailbook-redesign-1.html as the new filename.
  • Press Return to save the new filename.

Before you open the export, do you expect it to match the fresh Preview without relying on the editor? Hold that answer in mind.

  • Double-click trailbook-redesign-1.html in Finder to open it in Safari.

You should see the redesigned Trailbook page with the preserved wording and facts. Its links and interactions should still work inside the self-contained file.

Export missing or incomplete?

Return to the fresh task and confirm that generation finished before exporting. An incomplete Preview can produce an incomplete download.

If the file opens as plain text, confirm that its name ends with .html.

Help me troubleshoot my self-contained Trailbook HTML export.

You now have a standalone redesign that keeps Trailbook's content and behavior while replacing its visual system. This is the repeatable design-context workflow you set out to prove.

Secret mission

Swap in a Second DESIGN.md

Apply a customized second DESIGN.md to the same Trailbook baseline. Then compare both redesigns to prove that design context controls the visual language while the content stays fixed.

Clean Up Your Resources

Clean Up Your Resources

Choose whether to keep your local project, pause the development server, or remove the project files. No paid cloud resource was created.

These local resources have no ongoing infrastructure cost.

Resources you used:

  • Local HTML Anything development server running from ~/html-anything.
  • Cloned repository at ~/html-anything.
  • Baseline export named trailbook-baseline.html.
  • First redesign export named trailbook-redesign-1.html.
  • Second redesign export named trailbook-redesign-2.html.

Keep everything running

No deletion is needed. Choose this if you want to continue comparing the three Trailbook designs.

  • Stop the development server when you finish by pressing Control+C in the Terminal window from earlier.
  • Keep the repository at ~/html-anything.
  • Keep trailbook-baseline.html for future redesign experiments.
  • Keep trailbook-redesign-1.html as your first design-system result.
  • Keep trailbook-redesign-2.html as your customized design-system result.

Your shell prompt returns after the server stops. All project files remain available for future experiments.

Pause - I'll come back to this later

Shut down the local server to free up memory. Keep the repository and exported pages ready for your return.

  • Stop the development server by pressing Control+C in the Terminal window from earlier.

Your shell prompt returns when the server has stopped.

  • Leave all local project files in place.
  • Switch back to the Apple Terminal window from earlier when you are ready to continue.
  • Restart the HTML Anything server by running:
pnpm -F @html-anything/next dev

What Does This Command Do?

The command asks pnpm to start the @html-anything/next workspace. The local editor returns at the same address.

  • Return to Safari.
  • Refresh http://localhost:3000.

You should see HTML Anything with your saved comparison tasks available again.

Server Not Back Yet?

Check that you used the same Terminal window where you stopped the server.

Help me restart the HTML Anything development server from ~/html-anything.

Delete - I don't want to use this again

Remove all local project resources to start fresh.

Before You Delete

Deleting these files is permanent once you empty Trash.

Your personal Google account stays in place. Your installed developer tools stay in place too.

  • Stop the development server by pressing Control+C in the Terminal window from earlier.

Your shell prompt returns when the server process has stopped.

  • Move ~/html-anything to Trash in Finder.
  • Move trailbook-baseline.html to Trash in Finder.
  • Move trailbook-redesign-1.html to Trash in Finder.
  • Move trailbook-redesign-2.html to Trash in Finder.
  • Empty Trash in Finder.

A Finder search gives you a final check that the local artifacts are gone.

  • Search across your Mac in Finder for html-anything.
  • Search across your Mac in Finder for trailbook-.

You should find no matching repository folder. You should find no exported Trailbook files.

Nice Work!

Nice Work!

Mission accomplished! Your Trailbook baseline now has two self-contained redesigns. You used HTML Anything with DesignMD to replace the visual language while preserving every fact, section, link, and interaction.

You've learned how to:

  • Set up a local agent workflow with an authenticated Gemini CLI session. You also launched HTML Anything locally for browser-based generation.
  • Created a baseline comparison by generating and exporting trailbook-baseline.html. You observed how a same-task diff edit preserves the original visual language.
  • Performed a full visual redesign in a fresh task using a copied DESIGN.md. The result preserved Trailbook's content and behavior while changing its palette, typography, spacing, radii, shadows, motion, and component treatment.
  • Secret Mission: applied a customized second DESIGN.md to the same trailbook-baseline.html. You compared both redesigns and identified at least three visual differences controlled by their design systems.

Ready to quiz yourself?