--- title: How To Use Claude Design To Build Beautiful Sites With... description: A workflow walkthrough for using Claude Design (built on Anthropic's Opus 5 model) to design websites, covering a five-stage process: creating a design.md... canonical: https://daily.dev/posts/how-to-use-claude-design-to-build-beautiful-sites-with-opus-5-ecsiwqmqy twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How To Use Claude Design To Build Beautiful Sites With Opus 5 | daily.dev og:description: A workflow walkthrough for using Claude Design (built on Anthropic's Opus 5 model) to design websites, covering a five-stage process: creating a design.md... og:url: https://daily.dev/posts/how-to-use-claude-design-to-build-beautiful-sites-with-opus-5-ecsiwqmqy og:image: https://api.daily.dev/og/posts/ECSiwqmQY.png og:image:alt: How To Use Claude Design To Build Beautiful Sites With Opus 5 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How To Use Claude Design To Build Beautiful Sites With Opus 5 **[AI LABS](https://daily.dev/sources/ailabs-393)** · 18 min read · 1 upvotes · 0 comments ## Summary A workflow walkthrough for using Claude Design (built on Anthropic's Opus 5 model) to design websites, covering a five-stage process: creating a design.md brand file, building a design system, making wireframes, generating full designs with animations, and handing off to Claude Code for development. The video also covers connecting the resulting app to Supabase for backend/database functionality via an MCP-based agent skill, and promotes the creator's paid community for access to their internal skill bundle. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is a design.md file used for when building with Claude Design? A design.md file is a format started by Google that stores a brand's design details such as fonts, colors, and style choices, which an AI coding agent reads before generating anything so every screen stays on-brand. Feeding Claude Design a pre-made design.md prevents it from falling back to generic Opus-model default colors and styles, keeping multi-page sites visually consistent. _Teams standardizing AI-generated site design can compare design.md workflows and tooling discussed by developers on daily.dev._ ### How do Claude Design and Claude Code work together to build a full website? Claude Design exports finished designs directly into Claude Code through the Claude Design MCP, which lets the two tools exchange design system metadata, project files, and animations bidirectionally. Claude Code reads the design system first, then rebuilds each element, after which a deep review compares the generated code against the design.md to catch issues like responsiveness problems on mobile or tablet screens. _Developers wiring design tools into coding agents can follow related MCP integration patterns shared on daily.dev._ ### Why use Supabase as the backend for an app built with Claude Code? Supabase is used because it is one of the most popular backend providers for managing users and data, and it integrates easily with AI coding agents like Claude Code through a dedicated agent skill bundle. That skill includes a Supabase usage guide and a best-practices skill for performance optimization, and connecting via its MCP lets the agent handle database setup, access rules, and testing directly. _Developers choosing a backend for AI-agent-built apps can weigh Supabase against alternatives using comparisons on daily.dev._ --- Tags: [#ai-agents](https://daily.dev/tags/ai-agents), [#claude-code](https://daily.dev/tags/claude-code), [#design-systems](https://daily.dev/tags/design-systems), [#supabase](https://daily.dev/tags/supabase) [View this post on daily.dev](https://daily.dev/posts/how-to-use-claude-design-to-build-beautiful-sites-with-opus-5-ecsiwqmqy) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How To Use Claude Design To Build Beautiful Sites With Opus 5","url":"https://daily.dev/posts/how-to-use-claude-design-to-build-beautiful-sites-with-opus-5-ecsiwqmqy","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-use-claude-design-to-build-beautiful-sites-with-opus-5-ecsiwqmqy"},"datePublished":"2026-08-12T14:59:59.021Z","dateModified":"2026-09-13T20:20:56.670Z","description":"A workflow walkthrough for using Claude Design (built on Anthropic's Opus 5 model) to design websites, covering a five-stage process: creating a design.md...","image":"https://i.ytimg.com/vi/bBlY5YOsKN8/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/bBlY5YOsKN8/sddefault.jpg","isAccessibleForFree":true,"articleSection":"AI LABS","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"AI LABS","logo":"https://media.daily.dev/image/upload/s--UJNjhNyP--/f_auto,q_auto/v1769283201/logos/ailabs-393","url":"https://daily.dev/sources/ailabs-393"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-to-use-claude-design-to-build-beautiful-sites-with-opus-5-ecsiwqmqy","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ai-agents,claude-code,design-systems,supabase","timeRequired":"PT18M","video":{"@type":"VideoObject","name":"How To Use Claude Design To Build Beautiful Sites With Opus 5","description":"A workflow walkthrough for using Claude Design (built on Anthropic's Opus 5 model) to design websites, covering a five-stage process: creating a design.md...","thumbnailUrl":"https://i.ytimg.com/vi/bBlY5YOsKN8/sddefault.jpg","uploadDate":"2026-08-12T14:59:59.021Z","duration":"PT18M","url":"https://api.daily.dev/r/ECSiwqmQY","embedUrl":"https://www.youtube.com/embed/bBlY5YOsKN8"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"AI LABS","item":"https://daily.dev/sources/ailabs-393"},{"@type":"ListItem","position":3,"name":"How To Use Claude Design To Build Beautiful Sites With Opus 5"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-to-use-claude-design-to-build-beautiful-sites-with-opus-5-ecsiwqmqy#faq","mainEntity":[{"@type":"Question","name":"What is a design.md file used for when building with Claude Design?","acceptedAnswer":{"@type":"Answer","text":"A design.md file is a format started by Google that stores a brand's design details such as fonts, colors, and style choices, which an AI coding agent reads before generating anything so every screen stays on-brand. Feeding Claude Design a pre-made design.md prevents it from falling back to generic Opus-model default colors and styles, keeping multi-page sites visually consistent. Teams standardizing AI-generated site design can compare design.md workflows and tooling discussed by developers on daily.dev."}},{"@type":"Question","name":"How do Claude Design and Claude Code work together to build a full website?","acceptedAnswer":{"@type":"Answer","text":"Claude Design exports finished designs directly into Claude Code through the Claude Design MCP, which lets the two tools exchange design system metadata, project files, and animations bidirectionally. Claude Code reads the design system first, then rebuilds each element, after which a deep review compares the generated code against the design.md to catch issues like responsiveness problems on mobile or tablet screens. Developers wiring design tools into coding agents can follow related MCP integration patterns shared on daily.dev."}},{"@type":"Question","name":"Why use Supabase as the backend for an app built with Claude Code?","acceptedAnswer":{"@type":"Answer","text":"Supabase is used because it is one of the most popular backend providers for managing users and data, and it integrates easily with AI coding agents like Claude Code through a dedicated agent skill bundle. That skill includes a Supabase usage guide and a best-practices skill for performance optimization, and connecting via its MCP lets the agent handle database setup, access rules, and testing directly. Developers choosing a backend for AI-agent-built apps can weigh Supabase against alternatives using comparisons on daily.dev."}}]} ```