Claude + Skills: the workflow to generate a home look and feel ready for Figma

In 2026, the question is no longer whether web agencies will integrate AI into their design workflow. It is which ones have structured it enough to gain a real advantage in deadlines, delivery quality and their ability to help the client picture the result from the first weeks of the project.

At Noqode, a Webflow agency specialized in Claude AI, we have been using Claude combined with Skills for several months to accelerate the exploratory design phase. This is not a technology demo. It is an operational process that we apply to our client projects, and that we wanted to document here in a concrete way.

In this article, we detail each step of the workflow: how to structure the project brief for Claude, how to configure Skills with a complete design system, why images change the quality of the rendering, and what we actually do with the result. All illustrated with a fictional client case, Vektis Conseil, an independent consulting firm.

What is a Claude Skill and why does it change everything for design

A Skill, in the Claude ecosystem, is a Markdown file that the AI consults as a permanent reference during its generations. Concretely, instead of copying your design tokens into each prompt, you create a brand-client.md file once, containing the entire design system: primary and secondary colors, fonts with their families, sizes and weights, spacing scale in rem and pixels, border-radius values, elevation and shadow rules, basic components and their variants, and above all the rules of use, that is, what you are allowed to combine and what is forbidden.

Claude loads this file and applies it to each generation without you having to repeat it. This is what distinguishes an output consistent with the client's identity from a generic one. And this is what makes the Skills + Project Context combo really usable in agency production, not just as a demo.

The official Skills documentation is available on the Anthropic website. Our tool page dedicated to Claude also details the available models and our concrete use cases in the agency.

The client case: Vektis Conseil

To illustrate this workflow, we built a representative fictional client case of a type of project that we regularly encounter at Noqode. The client is called Vektis Conseil. It is an independent consulting firm founded in 2011, with 17 senior consultants and 2.8 million euros in revenue. Three exclusive areas of intervention: organizational restructuring, operational performance management, and change management on transformation projects.

Its priority target is the executives and managing directors of mid-sized companies in industry, B2B distribution and services. Profiles wary of big firms, looking for a partner who understands the constraints on the ground, who read little and judge quickly. The positioning is clear: not the cheapest, not the biggest, but the most rigorous in its segment.

The existing site dates from 2019, built on WordPress and retouched in 2022. The problems identified during the kick-off are classic but real: overly institutional copy that does not speak to the executive target, no visible social proof in the first seconds, a structure designed as a sales brochure rather than as a conversion tool, and total invisibility on LLMs despite decent organic SEO.

Step 1: structure the project context in Claude

The project context is the founding document of each of our engagements. Before generating anything, we fill in a structured instruction file that Claude will read as a permanent source of truth about the project.

The target

Not a vague marketing persona, but a specific profile with a role, sector, company size, psychological posture, reading behavior and known objections. For Vektis, this means: managing director of an industrial mid-sized company of 150 to 600 people, distrustful of generalist consultants, who skims and judges a site's credibility in less than 10 seconds.

The positioning

What the client is, what they are not, their real differentiators. Generic formulations are avoided to force clear positions that Claude can transcribe into the copy.

The tone of voice is documented with concrete examples

The words the client uses (rigorous, on-the-ground, committed, direct, measurable) and the list of words to ban (innovative, agile, excellence, recognized expertise). This point alone drastically improves the quality of the generated copywriting.

Client results are integrated with their numbers

An industrial mid-sized company of 400 people restructured in 8 months, a B2B distributor with +31% productivity over 18 months. Claude naturally integrates them as social proof in the appropriate sections.

Problems detected during kick-off

They allow Claude to understand what needs to be corrected, not just what needs to be created. A site that lacks social proof will structurally receive more social proof in the generation.

Visual references

These are URLs of sites, in the sector or outside it, that stand out a little. Not for copying, but for framing the level of visual ambition and moving away from generic outputs.

The site's tree structure

With all the pages, their slugs and their goals. This way Claude knows what each page must do before generating any section. This instruction document is 2 to 4 pages long. It is the upstream work of the project manager, built after the client call. Claude does not replace this work.

Step 2: Set up the design Skills

Once the context is set, the Skills are attached. For a homepage design project, three of them are used in parallel.

brand-vektis-conseil.md is the client-specific skill. It contains the entire design system created beforehand: the color palette with exact hexadecimal values, the fonts (families, sizes by hierarchical level, weights, line-heights, letter-spacing), the spacing scale in rem and px, the border-radius values per component, the elevation and shadow rules, the basic component library with their states, and the strict rules of use specifying which combinations are allowed and which are forbidden. This last point is crucial: without rules of use, Claude takes liberties that break the coherence of the system.

frontend-design.md is Anthropic's front-end skill, publicly available on the official GitHub. It frames best practices for semantic HTML structure, accessibility, modern interface patterns, and CSS code quality.

seo-content.md is our internal writing skill, which makes Claude produce content structured for search engines and LLMs, with direct answers at the beginning of each section, controlled semantics, and a snippet-ready format. It is part of our native SEO and AEO approach, which can be integrated into all projects.

Skills are called directly in the prompt with the syntax /skill-name. Claude loads them and applies them to the generation without additional configuration.

How to create a design.md file for Claude

The brand skill is the most structuring file in the workflow. Its quality directly determines the consistency of the outputs. Here is the structure we apply to our projects.

The header sets the context in two lines: client name, nature of the project, expected use of the file. Claude reads this header first.

The colors are documented with their exact hexadecimal values, organized by role: primary, secondary, neutral, status colors (success, error, warning). Rules of use are systematically added: on which background each color is allowed, which combinations are prohibited for contrast or identity reasons.

Typography lists the families used, the sizes by hierarchical level (H1 to H6, body, caption, label), the associated weights, the line heights and the letter-spacing. Fallback rules for the web are also specified.

The spacing section documents the scale used in rem and pixels, with the correspondence between levels (xs, sm, md, lg, xl) and their exact values.

The components describe the basic elements: buttons (primary, secondary, ghost, disabled), cards (with their variants), inputs, badges, tags. For each component: border-radius, padding, interactive states.

The rules of use are the most important part. They specify what Claude is allowed to do and what is explicitly forbidden: no shadow on a dark background, no secondary color as a full-page background, no body text in weight 700, etc. Without these rules, Claude takes creative liberties that break coherence.

A well-built design.md file has between 200 and 400 lines. It is built once per client, starting from the existing Figma design system or created alongside it. Once in place, it can be reused throughout the project without modification.

Step 3: Add mood images

Before launching the generation, we attach 4 Unsplash images selected to match the client's universe. For Vektis Conseil, we chose images that evoke on-the-ground consulting without falling into corporate clichés: industrial workspaces, meetings in real situations, environments that speak to the mid-sized company target.

This detail makes a big difference to the visual quality of the rendering. Claude does not generate abstract placeholders or gray rectangles. It really composes with the images provided, places them in the appropriate sections, and adapts its color and contrast choices accordingly. The result is immediately more grounded and more credible than a generation without visual support.

Step 4: launch the generation with a simple prompt

The final prompt is deliberately short:

Create a first version of the homepage based on the context in the project instructions. Use the attached images and rely on the Frontend-design and Brand-Vektis-Conseil Skills.

All the work is in the preparation, not in the prompt. A 3-page brief + two well-configured Skills + 4 images: Claude has enough material to produce something accurate without needing to detail each section in the message.

The generation takes 5 to 10 minutes. We generally launch two or three variations to compare different angles. The second or third version is often the best, notably because Claude refines its interpretation of the design system between iterations.

Claude vs Lovable vs Bolt: why we use Claude for design

The question comes up often. Lovable and Bolt also generate interfaces from a prompt, they are more accessible, and some present them as direct alternatives. Our choice of Claude for this workflow is not ideological, it is functional.

The deciding factor is control of the design system. Lovable and Bolt generate correct interfaces from scratch, but they do not make it possible to encapsulate a complete client design system and reliably recall it in each generation. Claude's Skills solve exactly that problem. We load brand-client.md once, and each output respects the tokens, rules of use and components defined beforehand. This is non-negotiable in an agency context.

Lovable and Bolt remain relevant for rapid prototypes without brand constraints, or for personal projects where speed takes precedence over consistency. In an agency context with a client who has an existing identity, a precise brief and quality requirements, Claude + Skills is the only tool that makes it possible to capitalize on the upstream work and reliably reinject it into each generation.

What we do with the result

Claude's output is an internal working base, not a client deliverable. We don't send it, we don't show it as is. This point is non-negotiable.

On the other hand, it fulfills a specific function in our workflow: it compresses the blank page phase that precedes the real Figma wireframes. The Noqode design team started from this base to produce two to three client homepage variants, each with a distinct art direction, before moving on to Webflow production.

The gain is measurable. Strategic thinking and positioning are already documented in Claude's brief. The design tokens are already set in the brand Skill. The key sections are already structured in the output. What remains is to refine, elevate, and deliver, without having to start from scratch.

This workflow is part of a wider effort to integrate AI into our agency processes, whether through the native Claude x Webflow connector via MCP, to operate the CMS directly from a conversation, or to generate structured content for AEO.

4 lessons learned after several months of use

1) Context makes 80% of the result

This is the most important lesson. A brilliant prompt on a vague brief produces approximations. A structured 3-page brief with a simple two-line prompt produces accuracy. The time invested in the instruction document always pays off.

2) Skills are a one-time investment with a permanent return

What we used to do by pasting design tokens into each prompt is now captured once and for all. A design system documented in a Skill can be reused in each session without losing consistency.

3) AI accelerates thinking, it does not replace it

The kick-off, the definition of the site tree, the choice of visual references, the construction of the tone of voice, the selection of images: all this remains human. Claude performs better when the strategic work upstream is serious.

4) Iterating fast is a competitive advantage

Generating three look and feel variants in a few minutes, where the same exploration took half a day in Figma, changes the dynamics of validation with the client. You come to meetings with concrete proposals, not intentions.

Frequently asked questions about Claude + Skills for web design

What exactly is a Claude Skill?

A Skill is a Markdown file attached to a Claude project that the AI consults as a permanent reference. It can contain a complete design system, SEO writing rules, an operational process or any other structured framework. Claude applies it to each generation without you having to repeat it in the prompt.

Can we send a homepage generated by Claude directly to a client?

No. The output serves as an internal working base for the exploratory phase. The client version is then produced in Figma by the design team, then integrated into Webflow. The Claude generation shortens the blank page phase, it does not replace design work.

Which Skills should you use to generate a homepage?

At least three: a client-specific brand skill with the complete design system, Anthropic's Frontend-design Skill for code quality and interface patterns, and a writing Skill to frame copywriting. All three combined produce visually and editorially coherent output.

How long does it take to set up this process?

The generation itself takes 1 to 2 minutes. Preparing the project context and creating the brand skill require several hours of work beforehand. It is an investment that pays for itself over the duration of the project and is reused in each work session.

Which version of Claude should you use?

We use Claude Opus 4.7 as the default model on our projects. For complex design and generation tasks that require high fidelity to Skills, Claude Opus 4.7 produces more accurate results.

What is the difference between a Skill and a Project Instruction in Claude?

Project Instructions are permanent text instructions attached to a Claude project, visible and editable directly in the interface. Skills are external Markdown files, more structured and denser, which make it possible to encapsulate complex systems such as a complete design system or a writing process. In practice, we use Project Instructions for the project context (target, positioning, objectives) and Skills for technical frameworks (design system, code rules, SEO guidelines).

Can Claude replace Figma?

No. Claude generates an exploratory base in HTML/CSS that accelerates the visual thinking phase. Figma remains the tool for producing real client deliverables: pixel-perfect precision, interactive components, prototyping, real-time collaboration and developer handoff. The workflow is sequential: Claude compresses the blank page phase, Figma takes over for everything that follows.

Can Claude generate a complete design system?

Yes, with the right Skills and a structured brief, Claude can generate a first version of a design system: color palette, typographic scale, spacing system, basic components and their variants. The result is a solid starting point, not a final deliverable. The generated design system must be reviewed, refined and validated by a designer before being used in production. It serves as a basis for building the project's brand skill.

How do you structure the prompt to get the best results?

The prompt itself should be kept short and simple. All the complexity should be in the project brief and the Skills, not in the prompt. A formulation like “Create a first version of the homepage based on the project instructions and the frontend-design and brand-client skills” is enough. A prompt that is too detailed creates conflicts with the instructions already set in the Skills and degrades the quality of the output.