←Back/Design/Claude/Claude
IntermediateDesign

Generate a Living HTML Design System with AI for UI Consistency

Extract the real colors, type, spacing, and components from your repositories into a portable HTML design system. Reuse the file as visual context for new interfaces and component variations.

Generate a Living HTML Design System with AI for UI Consistency

Source episode · 25:10

How I AI: Thariq Shihipar on Replacing Markdown with HTML for AI-Powered Development

with Claire Vo

Thariq shows an HTML design system with colors, typography, spacing, radii, and components that he can pass into a new project as compressed visual context.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • One or more repositories that contain the current product UI
  • Claude Code or Claude Design with access to those repositories
  • A browser for reviewing the generated file

What you’ll make

A portable design_system.html file that renders the product tokens and core components, plus instructions for using it as context in future work.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

5 steps

Step01

Extract Your Application's Design DNA

Give Claude access to the repositories that contain your current interface. Ask it to inspect tokens, CSS, component code, and usage examples. If the marketing site and product app differ, state which source controls typography, components, and other layers.

Example prompt
Analyze these repositories and extract the implemented design system. Identify colors, typography, spacing, radii, breakpoints, and core components. Cite the source file for each finding. If the repositories conflict, list the conflict and ask which source should win.

[Repository paths or links]
Step02

Generate the design_system.html Artifact

Turn the analysis into one HTML file that renders the tokens and real component examples. Include common states, sizes, and responsive behavior. Keep source file references visible so reviewers can trace each example back to production code.

Example prompt
Create a self-contained design_system.html from the approved analysis. Render the color, typography, spacing, radius, and breakpoint tokens. Show the core components in their common sizes and states, including hover, focus, disabled, loading, and error where applicable. Add the relevant source file path beside each section.
Step03

Use the Design System as Context for New Work

Commit the HTML file to the repository and include it whenever Claude designs a new feature. Ask the model to use the rendered examples and source references, then compare its output with an existing product screen before accepting the new direction.

Example prompt
Use design_system.html as the visual and implementation reference for this feature. Reuse its tokens and component patterns. If the requested design conflicts with the file, identify the conflict before generating code.
Step04

Explore Component Variations

Add controls for the properties your team often debates, such as spacing, border radius, density, or component variants. Keep the default values tied to the extracted tokens and display the changed values beside the preview.

Example prompt
Add a component playground to design_system.html. Let me change spacing, radius, density, and supported variants with simple controls. Start from the real token values, show the current values, and include a reset button for every example.
Step05

Share with Non-Technical Stakeholders

Host the file at a stable internal URL or share it directly. Give product, design, and marketing teams a component gallery they can use for realistic screenshots and mockups. Regenerate the file when the underlying tokens or components change.

What good looks like

  • Colors, typography, spacing, and radii trace back to the source code.
  • Core components render in common states and sizes.
  • The file opens locally and can be passed into a new project without a build step.
  • A new component generated with the file matches the existing product closely enough for review.

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The repositories contain conflicting tokens or component styles
Tell Claude which repository is authoritative for each layer, such as product components versus marketing typography. Have it list unresolved conflicts instead of silently choosing.
The file shows only ideal component states
Ask for hover, focus, disabled, loading, error, and responsive examples for the components that use those states in the source code.
New output looks similar but does not use the real implementation rules
Add source file paths beside each token and component example. Give Claude the design system file together with the relevant production components when generating new work.

Keep building

Related workflows

Create an Automated Workout Tracker with a Simple Claude Voice Note
beginnerPersonalClaude

Create an Automated Workout Tracker with a Simple Claude Voice Note

Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.

Open
How to Rebuild Your Gmail Inbox Inside Claude to Manage Email
advancedOperationsClaude

How to Rebuild Your Gmail Inbox Inside Claude to Manage Email

Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.

Open
Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'
intermediateSalesClaude

Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'

Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready