Exactly how to make use of Claude Design in 5 stages: a Claude Layout tutorial that constructs a real application. Beginning with a design.md, turn it right into a Claude Layout system, wireframe, prototype, animate, after that hand it to Claude Code so your Claude Code style ships as a working product.
Attempt Supabase Agent Skills at https://supabase.plug.dev/uitxwjz and supercharge your AI coding workflow.
Neighborhood with All Resources: https://ailabspro.io/?v=bBlY5YOsKN8
Design.md Planner Skill: https://github.com/ailabs-393/design-md-planner
The Roundup, our day-to-day newsletter covering the AI tales that matter. Join currently: https://www.theroundup.so/
Your visuals are the initial thing a customer courts, and a great layout does not come out of one punctual. This is just how to use Claude Design to develop applications finish to end, in five phases.
What Claude Design is
– It started as a research study sneak peek along with Opus 4.7. It’s basic enough for non technical people, and it does sites, slides, animations, papers and wireframes.
– It’s on the web site and the app, so how to use Claude Design in Claude Desktop is: set up, log in, open up the sidebar, click Design.
– You select the version and the initiative degree, which is how tough it assumes before it moves. Myth is the most limited yet capable, Opus is best for layout and burns the most tokens, Haiku is cheap but requires more refining. We run Opus 4.8 on medium.
– It takes your MCPs and skills, and imports a task from GitHub or your device.
Phase 1: the design.md
– design.md is a style Google started that holds your brand’s design. Your coding representative reads it before it writes anything, so every display appears on brand name rather than guessed at.
– Claude Design can build a style system on its very own, yet left alone the models fall back to the exact same colours and styles, which is why AI built sites look similar. Hand it a design.md and it constructs the system from your file instead.
– We made a Claude Design ability for this, run in Claude Code, Anthropic’s AI coding device in your terminal. It interviews you, plans the visual identity, writes the design.md, confirms it versus Google’s standards, and brings anti slop referrals so the common AI tells do not enter.
– Colours from Coolors. The file is easy for a version to check out however difficult to image, so imagine it in something like designmd.space as opposed to testing inside Claude Design, where every round sets you back symbols.
– Don’t intend to compose one? getdesign.md checklists prominent brand names as design.md documents to begin with.
Stage 2: wireframes
Choose the style system, choose wireframe, state exactly how lots of screens and variations. Constructing the actual site first indicates a long wait and a complete redo if it’s incorrect. Utilize the remark attribute, which sends the precise element with your prompt so Claude knows what you indicate, and team comments so it solutions them in one pass.
Stage 3: the prototype
Pick a variation by its code number and tell it to transform those displays right into the complete layout, maintaining the wireframe’s power structure, layout and spacing. Anticipate to take care of switch colours, ask for appearances because it appears sparse, use little edits on the canvas rather than prompting, and do with a gloss pass.
Stage 4: animations
Scroll into sight, text appear, refined, absolutely nothing springy. It’s the component people skip, and it’s what maintains somebody on the site.
Phase 5: handoff, which is how to make use of Claude Design in Claude Code
Export directly into Claude Code over the Claude Design MCP, and it works both means. It reviews the metadata, after that the design system, then every component, and develops it in your job with the animations intact. After that request for a deep evaluation versus the design.md. Ours captured responsiveness issues, the app not suitable different screen sizes, which is the typical one because Claude Design builds for the exact thing it was asked for.
The backend
Style isn’t an app till genuine data steps through it, so we made use of Supabase, which handles your customers, your information and the logic behind the scenes. Connect the CLI or the MCP, validate in the internet browser, and the agent develops the backend against your schema and locks down what shouldn’t be public.
0:00 Intro
0:48 What Claude Design Is
3:09 Stage 1
8:40 Stage 2
9:22 Stage 3
10:59 Stage 4
13:03 Stage 5
14:34 Database
So if you obtained below looking how to use Claude for UI design, exactly how to make use of Claude Design for apps, or Claude Design 3.0, there’s no variation number to chase after, just this procedure. Very same solution as just how to make use of Claude for anything actual: determine the point first, then let it develop. Claude Design is on the short list of best AI devices right currently, and the skill over is part of the bigger design system we utilize inside, which remains in AI Labs Pro with the various other resources from our video clips.
Hashtags:
#ai #claude #claudeCode #claudeDesign #claudeAi #claudeCowork #vibeCoding #aiTools