How to build a WordPress design system with GPT 6 Astra
2286 次观看 · 2026-10-26
UI 设计
⭐ Giveaway: Our 100% FREE plugin makes any site 3X faster - https://airlift.net/?utm_source=youtube&utm_medium=social
In this video, I use GPT-6 Astra to create a reusable, Gutenberg-editable WordPress design system, then test it by building different websites with GPT-5.6 Luna.
Assets: https://drive.google.com/drive/folders/1qvnnKKA9Mycwdz9yp-Q5GouaUbBF5XyR?usp=sharing
00:00 Intro
01:32 Where a Reusable Design System Starts
02:18 Setting Up the WordPress Project
05:24 Separating the System From the Brand
06:53 Defining Colours and Semantic Tokens
09:25 Creating the Typography System
10:44 Building a Consistent Spacing Scale
11:37 Building the WordPress Block Theme
13:13 Creating Components With Gutenberg Blocks
14:51 Building Reusable WordPress Patterns
16:03 Documenting the Rules for Other AI Models
17:18 Switching From Astra to GPT-5.6 Luna
17:58 Building the SaaS Website
19:03 Testing an Editorial Design
19:44 Testing Gutenberg Editability
#WordPress #gpt6 #webdesign
In this video, I use GPT-6 Astra to create a reusable, Gutenberg-editable WordPress design system, then test it by building different websites with GPT-5.6 Luna.
Assets: https://drive.google.com/drive/folders/1qvnnKKA9Mycwdz9yp-Q5GouaUbBF5XyR?usp=sharing
00:00 Intro
01:32 Where a Reusable Design System Starts
02:18 Setting Up the WordPress Project
05:24 Separating the System From the Brand
06:53 Defining Colours and Semantic Tokens
09:25 Creating the Typography System
10:44 Building a Consistent Spacing Scale
11:37 Building the WordPress Block Theme
13:13 Creating Components With Gutenberg Blocks
14:51 Building Reusable WordPress Patterns
16:03 Documenting the Rules for Other AI Models
17:18 Switching From Astra to GPT-5.6 Luna
17:58 Building the SaaS Website
19:03 Testing an Editorial Design
19:44 Testing Gutenberg Editability
#WordPress #gpt6 #webdesign