New Claude Code for Web Designers: Full Course (2.5 Hours, 2027)
2942 次观看 · 2026-11-11
UI 设计
🗃️ Free asset pack for this course (Figma files, images, spec and every prompt): https://wdckit.com/kinton
⚔️ Free 3-week challenge, starts November 17: build a real site for your portfolio with this process.
🌍 Join: https://webdesignerscollective.com/join
In this full course, you design and build a complete website from a client brief, step by step. You read the brief, make a mood board, wireframes and a design system, and design the homepage in Figma. Then Claude Code turns your design into real code, and you put the site online for free with GitHub and Cloudflare.
The project is Kinton Aerospace ✈️, a fictional private jet company: a range map, a cabin plan, a light and dark switch, and a request form made for phones.
Live site: https://kinton.fadel-ae0.workers.dev
Speed test: https://pagespeed.web.dev/analysis/https-kinton-fadel-ae0-workers-dev/0dnrecwqab?form_factor=mobile
⚡ WHERE TO START:
New to web design: start at 0:00
Already know Figma: jump to the design system at 21:45
Only here for Claude Code: jump to the build at 1:50:18 (download the asset pack first)
Claude Code already installed: start at prompt 0, 1:55:14
⏱️ CHAPTERS:
0:00 What you'll learn
3:15 Read the client brief
11:40 Make a mood board
15:48 Wireframes
21:45 Design system: colors
30:51 Light and dark colors, and contrast
41:10 Text, spacing and grids
49:54 Design the homepage
59:03 Header, footer and buttons
1:13:41 The cabin light switch
1:19:03 Spacing and the hero
1:36:15 Night photos and final touches
1:46:39 Hand the design to Claude Code
1:50:18 Session 1: Set up Claude Code
1:56:59 Plan the build
2:02:35 Build and review the homepage
2:07:41 Session 2: The aircraft page
2:10:38 The pages with no design
2:16:12 The request form
2:21:04 Session 3: Big screens
2:24:37 Phone check and polish
2:31:48 Accessibility check
2:36:06 Put the site online
2:38:58 What to do next
🧰 WHAT YOU NEED:
A paid Claude plan for the build. Pro ($20 a month in the US) is enough, you don't need Max: https://claude.ai/upgrade
Use Claude Code's default model. You don't need Fable 5.2 for this build. It came out after I recorded, it uses your limits faster, and on Pro it can use at most half of your weekly limit.
Everything else is free: Figma (free plan), VS Code, GitHub and Cloudflare.
Note: Figma's light and dark modes (30:51) need a paid Figma plan, or Figma's free Education plan if you're a student. On the free plan, make your dark colors as a second set of colors on a copy of your design. The website still gets its light and dark switch, because Claude Code builds both from design-spec.md in the asset pack.
🔗 LINKS FROM THE COURSE:
Kinton brief (opens your own copy to highlight): https://docs.google.com/document/d/16KWYsUySst-oRdBSVbV8Acb4txHRtT0nkzjhG-FNj_k/copy
Figma start file and finished file: sent with the free asset pack, https://wdckit.com/kinton
Figma guide to components: https://help.figma.com/hc/en-us/articles/360038662654
Figma guide to auto layout: https://help.figma.com/hc/en-us/articles/360040451373
Inter font (free): https://fonts.google.com/specimen/Inter
WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
WAVE extension (accessibility check): https://wave.webaim.org/extension/
VS Code (free): https://code.visualstudio.com
GitHub (free account): https://github.com/signup
Cloudflare (free account): https://dash.cloudflare.com/sign-up
🤖 FIGMA CONNECTOR LIMITS (1:47:06):
Figma's connector (its MCP server) has limits that depend on your plan. On the free Starter plan, or with a View or Collab seat, you get up to 20 requests a month. A paid Full or Dev seat gets up to 200 a day (600 on Enterprise).
A build like this needs far more than 20, so in this course Claude Code reads section images and design-spec.md instead. Figma can change these limits: https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
Prompt for the aircraft page, if you have a paid Figma plan and connect Figma to Claude (1:47:52): https://docs.google.com/document/d/1xRb3GqFeAVs5zxQTsvJGtopMvv0cs2UcT7ZbcbUDwoA/edit?usp=sharing
🚀 SPEED CHECK:
The brief asks for the main content to appear in under 2.5 seconds on a 4G connection. PageSpeed Insights, mobile on slow 4G: main content in 1.1 seconds. Performance 99, Accessibility 100, Best Practices 100, SEO 100. Desktop: 100 in all four.
📄AFTER THE COURSE:
Three more briefs are in the asset pack: a cruise line, a new apartment building and a software company. Use the same process on one of them, or build your own version.
Post your site in the free community, I want to see it: https://webdesignerscollective.com/join
Want a follow-up video on an AI system that handles Kinton's flight requests? Tell me in the comments.
Want my help to land your first client? Join the WDC Academy: https://www.wdcdesign.com
$499 a year until December 31. If you don't land your first paying client within 12 months, you get a full refund.
#ClaudeCode #WebDesign #Figma #claude
⚔️ Free 3-week challenge, starts November 17: build a real site for your portfolio with this process.
🌍 Join: https://webdesignerscollective.com/join
In this full course, you design and build a complete website from a client brief, step by step. You read the brief, make a mood board, wireframes and a design system, and design the homepage in Figma. Then Claude Code turns your design into real code, and you put the site online for free with GitHub and Cloudflare.
The project is Kinton Aerospace ✈️, a fictional private jet company: a range map, a cabin plan, a light and dark switch, and a request form made for phones.
Live site: https://kinton.fadel-ae0.workers.dev
Speed test: https://pagespeed.web.dev/analysis/https-kinton-fadel-ae0-workers-dev/0dnrecwqab?form_factor=mobile
⚡ WHERE TO START:
New to web design: start at 0:00
Already know Figma: jump to the design system at 21:45
Only here for Claude Code: jump to the build at 1:50:18 (download the asset pack first)
Claude Code already installed: start at prompt 0, 1:55:14
⏱️ CHAPTERS:
0:00 What you'll learn
3:15 Read the client brief
11:40 Make a mood board
15:48 Wireframes
21:45 Design system: colors
30:51 Light and dark colors, and contrast
41:10 Text, spacing and grids
49:54 Design the homepage
59:03 Header, footer and buttons
1:13:41 The cabin light switch
1:19:03 Spacing and the hero
1:36:15 Night photos and final touches
1:46:39 Hand the design to Claude Code
1:50:18 Session 1: Set up Claude Code
1:56:59 Plan the build
2:02:35 Build and review the homepage
2:07:41 Session 2: The aircraft page
2:10:38 The pages with no design
2:16:12 The request form
2:21:04 Session 3: Big screens
2:24:37 Phone check and polish
2:31:48 Accessibility check
2:36:06 Put the site online
2:38:58 What to do next
🧰 WHAT YOU NEED:
A paid Claude plan for the build. Pro ($20 a month in the US) is enough, you don't need Max: https://claude.ai/upgrade
Use Claude Code's default model. You don't need Fable 5.2 for this build. It came out after I recorded, it uses your limits faster, and on Pro it can use at most half of your weekly limit.
Everything else is free: Figma (free plan), VS Code, GitHub and Cloudflare.
Note: Figma's light and dark modes (30:51) need a paid Figma plan, or Figma's free Education plan if you're a student. On the free plan, make your dark colors as a second set of colors on a copy of your design. The website still gets its light and dark switch, because Claude Code builds both from design-spec.md in the asset pack.
🔗 LINKS FROM THE COURSE:
Kinton brief (opens your own copy to highlight): https://docs.google.com/document/d/16KWYsUySst-oRdBSVbV8Acb4txHRtT0nkzjhG-FNj_k/copy
Figma start file and finished file: sent with the free asset pack, https://wdckit.com/kinton
Figma guide to components: https://help.figma.com/hc/en-us/articles/360038662654
Figma guide to auto layout: https://help.figma.com/hc/en-us/articles/360040451373
Inter font (free): https://fonts.google.com/specimen/Inter
WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
WAVE extension (accessibility check): https://wave.webaim.org/extension/
VS Code (free): https://code.visualstudio.com
GitHub (free account): https://github.com/signup
Cloudflare (free account): https://dash.cloudflare.com/sign-up
🤖 FIGMA CONNECTOR LIMITS (1:47:06):
Figma's connector (its MCP server) has limits that depend on your plan. On the free Starter plan, or with a View or Collab seat, you get up to 20 requests a month. A paid Full or Dev seat gets up to 200 a day (600 on Enterprise).
A build like this needs far more than 20, so in this course Claude Code reads section images and design-spec.md instead. Figma can change these limits: https://developers.figma.com/docs/figma-mcp-server/rate-limits-access/
Prompt for the aircraft page, if you have a paid Figma plan and connect Figma to Claude (1:47:52): https://docs.google.com/document/d/1xRb3GqFeAVs5zxQTsvJGtopMvv0cs2UcT7ZbcbUDwoA/edit?usp=sharing
🚀 SPEED CHECK:
The brief asks for the main content to appear in under 2.5 seconds on a 4G connection. PageSpeed Insights, mobile on slow 4G: main content in 1.1 seconds. Performance 99, Accessibility 100, Best Practices 100, SEO 100. Desktop: 100 in all four.
📄AFTER THE COURSE:
Three more briefs are in the asset pack: a cruise line, a new apartment building and a software company. Use the same process on one of them, or build your own version.
Post your site in the free community, I want to see it: https://webdesignerscollective.com/join
Want a follow-up video on an AI system that handles Kinton's flight requests? Tell me in the comments.
Want my help to land your first client? Join the WDC Academy: https://www.wdcdesign.com
$499 a year until December 31. If you don't land your first paying client within 12 months, you get a full refund.
#ClaudeCode #WebDesign #Figma #claude