Workflow shared by @itsdesignare.

Build With Figma + Claude in 1 Hour: A Complete AI Web Design Workflow

A fast website build should not mean skipping the thinking. The strongest AI-assisted design sessions still begin with strategy, continue through a coherent system, and end with a real quality check. This carousel from @itsdesignare lays out a practical sequence of prompts for using Claude alongside Figma, Figma Make, v0, or Framer.

The idea is simple: treat AI as a set of specialized teammates rather than one giant “make me a website” button. Each prompt owns a different part of the process, and each output becomes useful input for the next step.

1. Start with a site strategy architect

Before opening a canvas, ask Claude to define the sitemap, user journeys, page goals, SEO structure, and the one metric each page owns. The prompt also asks what not to build in version one. That constraint is valuable: a smaller, intentional scope gives Figma a clear brief instead of a pile of disconnected screens.

2. Turn the brand into design tokens

Next, generate a paste-ready token system. Give Claude the brand and three personality adjectives, then request colors, dark-mode pairs, an eight-level type scale, spacing on a 4px base, radii, shadows, and core component states. Asking for JSON tokens and CSS variables makes the result much easier to carry into a design system or prototype.

Do not accept the first output blindly. Check contrast, type hierarchy, and whether the “personality” actually fits the audience before turning these tokens into components.

3. Write copy that earns the scroll

Design tools are much more useful when the content is real. The Copy Engine prompt defines the voice, reader, and single desired action, then requests a concise hero, proof-led value blocks, direct objection handling, and social-proof slots. This prevents the classic placeholder-copy problem where the layout looks good but collapses when actual words arrive.

4. Map interaction logic before prototyping

For forms, search, pricing toggles, and dashboards, ask for every state: default, loading, error, empty, and success. The prompt also covers triggers, data in and out, failure messaging, and edge cases. This is where an AI workflow becomes more than visual generation: it gives designers enough behavior detail to prototype something people can actually use.

5. Translate the spec into tool-ready prompts

Once the strategy, tokens, copy, and interaction rules exist, convert them into five sequenced prompts for Figma Make, v0, or Framer. Each prompt should name the finished outcome, carry the brand context, describe exact sections and interactions, specify mobile behavior, and stay under 120 words. Sequencing matters because each prompt can refine the last instead of restarting from scratch.

6. Add motion with real values

Motion becomes easier to implement when it is described in measurable terms: stagger, duration, easing, movement distance, and trigger. Ask for load-in choreography, scroll reveals, hover and press feedback, and transitions. The prompt explicitly flags effects that could hurt performance on mid-range phones, a useful reminder that “more animation” is not the same as better UX.

7. Plan responsive behavior

Instead of hoping desktop layouts shrink gracefully, define behavior at 390px, 768px, and 1440px. For each section, specify grid-to-stack changes, type scaling, image crops or swaps, navigation changes, and what gets hidden or reordered. This gives both the designer and the implementation tool a concrete responsive contract.

8. Design the backend blueprint

The workflow does not stop at the interface. Ask for related data models, API routes and payloads, authentication permissions, real-time behavior, caching, and offline or failure states. Planning these dependencies early reduces the risk of building a beautiful front end around data structures that cannot support forms, search, accounts, or dynamic content.

9. Finish with a ruthless launch audit

Before launch, give the full spec or URL to a QA-focused prompt. Have it check Core Web Vitals, WCAG 2.2 AA, SEO structure, security basics, browser support, touch targets, and analytics events tied to real goals. Require a final SHIP or HOLD verdict and, if the result is HOLD, the three blockers only. A decisive audit is more useful than a long list of vague suggestions.

The one-hour workflow in practice

The real speed advantage comes from the handoffs: strategy informs tokens, tokens and copy inform the interface, interaction logic informs the prototype, and the backend blueprint keeps the build grounded. Claude can accelerate each stage, but you still own the decisions, validation, and taste.

Use the prompts as a starting framework, replace every bracketed placeholder with specific product context, and review each output before passing it forward. That is how an AI-assisted build becomes coherent instead of merely fast.

Original carousel by @itsdesignare. View the original post on Instagram.

Related on NewForm

• Build With Figma + Claude in 1 Hour: A Free Workflow
• How to Build a Design System in Claude Design: 7 Steps
• Claude Opus 5.5 Tops the Epoch AI Index: What Designers and Builders Should Actually Do