This ChatGPT + Codex Workflow Changed How I Design Websites — Transcript

Full transcript

1. 0:00These three websites started as simple
2. 0:03references. This one is a portfolio
3. 0:05site. This one is an e-commerce website,
4. 0:08and this one is a product landing page.
5. 0:10And I built all three in one day using
6. 0:14this new workflow with chat GPT, Codex,
7. 0:17and this web design skill. Now, these
8. 0:20aren't just rough mock-ups that look
9. 0:22decent in one screenshot. They're fully
10. 0:24responsive. They work across different
11. 0:27screen sizes, and I can even convert
12. 0:29them into working WordPress themes. I'm
13. 0:32not spending hours staring at a design,
14. 0:34trying to figure out the layout from
15. 0:36scratch. I use chat GPT to break the
16. 0:39design down properly. Then I use Codex
17. 0:43to build the first version fast, and
18. 0:46then I spend my time on the part that
19. 0:49actually makes a website look good. The
20. 0:51layout, the spacing, the typography, the
21. 0:54images, and the polish. So, in this
22. 0:57video, I'm going to show you my exact
23. 0:59process step-by-step. I'll show you how
24. 1:02I pick a strong reference, how I use
25. 1:05chat GPT to describe the design, how I
26. 1:08use Codex to generate the first version,
27. 1:11how I refine the visuals so the site
28. 1:13feels clean and premium, how I make it
29. 1:15responsive, and how I turn that same
30. 1:18website into a live WordPress theme. All
31. 1:21right, let's start with the setup. The
32. 1:24first thing I did was install Codex on
33. 1:26my computer. OpenAI gives you a few ways
34. 1:29to use Codex now. You can use it in the
35. 1:32app, in the CLI, inside your IDE, or on
36. 1:36the web. For this workflow, I wanted it
37. 1:38to run locally because I like having all
38. 1:40my project files, testing things
39. 1:42quickly, and making changes without
40. 1:44jumping all over the place. So, I
41. 1:47downloaded Codex, opened it up, and
42. 1:50signed in with my chat GPT account. Once
43. 1:52I was in, that's when things got really
44. 1:54interesting for me. I got access to
45. 1:57skills. And if you haven't used skills
46. 1:59yet, I mean, what are you even doing?
47. 2:02You need to try it out. And this is the
48. 2:04easiest way to think about them. A skill
49. 2:07is basically a reusable set of
50. 2:09instructions that teaches Codex how you
51. 2:12want it to work. So, instead of
52. 2:14repeating the same things again and
53. 2:16again, like using better spacing,
54. 2:18keeping the layout clean, make the
55. 2:20hierarchy stronger, make it responsive,
56. 2:23don't make it look generic, keep the
57. 2:25code organized,
58. 2:26I can bake all of that into a skill once
59. 2:31and let Codex start from a much better
60. 2:33place every time. That's a huge deal
61. 2:36because raw AI can generate a website,
62. 2:39but a good skill changes the quality of
63. 2:42the website it generates. So, I added
64. 2:44web design skill first. I wanted Codex
65. 2:47to think more like a front-end designer,
66. 2:50not just like a code generator. So, I
67. 2:53opened the skills area, added the skill,
68. 2:56pasted in the instructions, saved it,
69. 2:59and now Codex had that design context
70. 3:02ready to use. And it didn't stop there.
71. 3:04I also added a few extra design rules
72. 3:07around responsiveness, a cleaner
73. 3:09front-end structure, and keeping the UI
74. 3:11polished instead of flat and generic.
75. 3:14This part was honestly so much fun
76. 3:16because the first time you see Codex
77. 3:19working with a proper skill, you can
78. 3:21immediately feel the difference. It felt
79. 3:24less like prompting a machine and more
80. 3:27like onboarding a junior design
81. 3:29developer who suddenly understood my
82. 3:32taste.
83. 3:33All right, now that the setup is ready,
84. 3:35the next step is picking a strong
85. 3:37reference.
86. 3:38For that, I usually go to a place like
87. 3:41Dribbble and look for designs that
88. 3:43already have a strong visual identity.
89. 3:46I'm not just picking something flashy
90. 3:48because it has gradients and nice
91. 3:50images. I'm looking for structure.
92. 3:52I want a strong hero section, good
93. 3:55typography, clean spacing, a layout that
94. 3:58flows properly, and sections that
95. 4:00actually make sense when you turn them
96. 4:02into a real website. Because if the
97. 4:05reference is weak, the result will
98. 4:07usually feel weak, too. So, once I find
99. 4:10a design I like, I bring that reference
100. 4:12into chat GPT, and this is the first
101. 4:15half of the workflow. Then I can ask
102. 4:17chat GPT to describe the design in
103. 4:19detail.
104. 4:21I want it to break down the layout, the
105. 4:23section order, the navigation, the font
106. 4:25style, the colors, the spacing, the
107. 4:27image treatment, the cards, the button,
108. 4:30and the overall feel of the design.
109. 4:33Basically, I'm using chat GPT as a
110. 4:35design analyst. Instead of me manually
111. 4:38staring at the reference and trying to
112. 4:40decode every little detail, chat GPT
113. 4:43gives me a clear written breakdown of
114. 4:46what's actually happening on the page.
115. 4:49And that written breakdown becomes the
116. 4:51brief I give to Codex.
117. 4:53This is such a better way to work
118. 4:55because if I send Codex a vague prompt,
119. 4:58I get a vague result. But if I give it a
120. 5:01detailed design description plus the web
121. 5:04design skill, the first version comes
122. 5:06out much closer to what I actually want.
123. 5:09So, now I take that description, move
124. 5:12into Codex, and ask it to build the
125. 5:14first version of the website. Within a
126. 5:16few minutes, I already have a working
127. 5:18first draft. The hero is there. The
128. 5:21navigation is there. The sections are in
129. 5:23place. The page structure is already
130. 5:26working. And this changes everything
131. 5:29about how I work because I'm no longer
132. 5:31spending the first few hours just
133. 5:34building the skeleton of the site. That
134. 5:36part gets compressed massively. I can
135. 5:38get to something real very quickly,
136. 5:41which means I can spend more time on the
137. 5:42part that actually matters, refinement.
138. 5:45Because the first version is not the
139. 5:47final version. The first version is
140. 5:50where the real design work begins. So,
141. 5:53once Codex gives me that first draft, I
142. 5:56start refining everything that affects
143. 5:58how the website feels. I look at the
144. 6:00layout first. Is the hero too cramped?
145. 6:04Do the sections need more breathing
146. 6:05room? Are the cards too close together?
147. 6:07Is the content width too wide? Does the
148. 6:10page actually feel balanced? Then I move
149. 6:14to typography. And this part matters so
150. 6:16much. A website can be technically
151. 6:18correct and still feel average if the
152. 6:21text hierarchy is weak. So, I can ask
153. 6:24Codex to adjust the heading sizes, the
154. 6:27body text, the line height, the spacing
155. 6:30between text blocks, and the contrast
156. 6:33between different elements until the
157. 6:34page starts to feel more confident. Then
158. 6:38I can get it to fix the images and do a
159. 6:40final visual polish.
160. 6:42I replace placeholder images with the
161. 6:45right ones. I adjust shadows, borders,
162. 6:47and spacing. I make sure the sections
163. 6:49feel consistent. I tighten anything that
164. 6:53feels loose and soften anything that
165. 6:55feels too harsh. And this is exactly why
166. 6:59the skill matters so much because Codex
167. 7:02already starts from a better place. My
168. 7:05refinement time goes into making the
169. 7:07design look genuinely good instead of
170. 7:10wasting time fixing basic layout
171. 7:12problems. Once the desktop version looks
172. 7:14good, the next step is responsiveness.
173. 7:17Now I can ask Codex to make the site
174. 7:19work properly across different screen
175. 7:21sizes.
176. 7:22Then I test it on desktop, tablet, and
177. 7:24mobile, and check what still needs work.
178. 7:27I look at how the layout stacks. I check
179. 7:30if the text is still readable. I check
180. 7:32if the spacing feels clean. I check if
181. 7:34the buttons are easy to tap. And I make
182. 7:37sure the images still work when the
183. 7:38screen gets smaller. If something feels
184. 7:41off, I keep refining it because a
185. 7:43website doesn't feel premium if the
186. 7:46mobile version feels broken. Once the
187. 7:49front-end looks good and everything is
188. 7:50working properly, I can take that same
189. 7:53website and ask Codex to convert it into
190. 7:56a WordPress theme in just a few minutes.
191. 7:59So, I can give Codex a prompt to turn
192. 8:01the HTML, CSS, and JavaScript into a
193. 8:03proper WordPress theme while keeping the
194. 8:06exact same UI. And I'll also leave all
195. 8:09the prompts I've been using in the
196. 8:11pinned comment and description down
197. 8:12below.
198. 8:13It restructures the files, creates the
199. 8:16theme folder, organizes the assets, and
200. 8:18gives me something I can actually
201. 8:20install inside WordPress. Then I can go
202. 8:23into WordPress, upload the theme,
203. 8:25activate it, and now the same design is
204. 8:28live as a real WordPress site. Now, it's
205. 8:32not just a mock-up. It's a working
206. 8:34theme. And once I've done that for one
207. 8:37design, I can repeat the exact same
208. 8:38system again for the other two. And
209. 8:41that's why this workflow has changed how
210. 8:44I design websites. Not because it
211. 8:46removes the need for design thinking. It
212. 8:49actually makes my design thinking more
213. 8:51useful. I spend less time doing
214. 8:54repetitive setup work. I get a stronger
215. 8:57first version faster. I can test more
216. 9:00ideas in less time. And I can focus more
217. 9:03on taste, direction, and polish, which
218. 9:06is the part I actually enjoy the most.
219. 9:08So, if you build websites for clients,
220. 9:11for your own business, or for WordPress
221. 9:13projects, this is such a fun workflow to
222. 9:15try.
223. 9:16>> [snorts]
224. 9:16>> Because once you get Codex set up
225. 9:18properly, and once you start using
226. 9:20skills the right way, the whole process
227. 9:23just feels lighter, faster, and way more
228. 9:25creative. And if you want to learn how
229. 9:28to optimize these websites and push them
230. 9:30towards a 90+ page speed score, then
231. 9:33click here and watch this video next.