ThesisDesign with Chat GPT and Codex: The Designer's Guide teaches a practical interfaces + open design move: This designer-focused guide shows how to use ChatGPT 5.5 to generate design inspiration, iterate layouts, and condense desktop screens to mobile in seconds, then hand the resulting mockups to Codex to build interactive prototypes—connecting Mobin via MCP and porting Figma/Claude Code skills into Codex along the way.
The goal is not to remember the video. The goal is to extract the operating principle, tie it to timestamped evidence, test how far the claim transfers, and make something reusable.
1:08ChatGPT as inspiration
“generating images that we can use to inform our design inspiration. Let's run a small prompt then to showcase this functionality. Uh please build me don't forget your please. Uh a image mockup of a uh light mode...”
ChatGPT 5.5 generates design mockups (e.g. a Coinbase-style light-mode crypto dashboard) in about 90 seconds—far faster than Claude Design or Claude Code—and accepts plain-English edits like 'move asset allocation to the first row' in ~30 seconds, making it a fast first-draft and iteration tool despite minor layout bleed in the output. Prompt ChatGPT to generate a dashboard mockup for an app you know, then issue one plain-English layout edit and time how fast it returns the revised version.
12:05Why Codex over Claude
“QuickBooks example. What I'm going to have Codeex do is build this and run it locally. Build the design based on the screenshots uh or based on the design uh attached uh run it locally. Ensure it is...”
Codex ships with the ChatGPT subscription at no extra cost and, per the presenter's experiment, recreated a given design change in 4 minutes and 17K tokens versus Claude Code's 12 minutes and 38K tokens—so it builds interactive prototypes more efficiently, but works best when fed an existing design rather than asked to invent one from scratch. Take a ChatGPT-generated mockup screenshot, give it to Codex with 'build this and run it locally, as close to existing styling as possible,' and compare the result against Codex building the same thing with no reference.
19:47Connect Mobin and skills
“videos on building design systems and token libraries. Links for those videos are in the video description. Um, so you might be wondering now is okay, if I can connect Claude code to Figma, can I bring in...”
Via Mobin's MCP settings you copy two commands into Codex to connect its entire app-screen library, letting you dialogue for inspiration (e.g. dark-mode finance designs) and rebuild a chosen screen; you can also port non-Figma skills like the audit-design-system skill by downloading its skill.md and dragging it into Codex's create-skill area. Connect Mobin to Codex through MCP and ask it to find inspiration for a specific app type, then download one skill.md (such as an audit-design-system skill) and add it to Codex to confirm the skill becomes callable.
01Intent
Start with this video's job: This designer-focused guide shows how to use ChatGPT 5.5 to generate design inspiration, iterate layouts, and condense desktop screens to mobile in seconds, then hand the resulting mockups to Codex to build interactive prototypes—connecting Mobin via MCP and porting Figma/Claude Code skills into Codex along the way. Treat "Intent" as the outcome you are trying to make visible, not a topic label. Anchor it to 1:08, where the video says: “generating images that we can use to inform our design inspiration. Let's run a small prompt then to showcase this functionality. Uh please build me don't forget your please. Uh a image mockup of a uh light mode...”
02Canvas
Use "Canvas" to locate the part of the interfaces + open design workflow the video is demonstrating. Ask what changes in your real setup if this claim is true. Anchor it to 12:05, where the video says: “QuickBooks example. What I'm going to have Codeex do is build this and run it locally. Build the design based on the screenshots uh or based on the design uh attached uh run it locally. Ensure it is...”
03Artifact
Turn "Artifact" into the reusable artifact for this lesson: A UI critique sheet for judging whether an AI interface improves control. This is where watching becomes something you can inspect and reuse.
04Preview
Use "Preview" as the application surface. Decide whether the idea touches a browser flow, a local file, a model choice, a source document, a UI, or a review step.
05Feedback
Use "Feedback" to prove the lesson. The evidence should connect back to the video title, transcript anchors, and a concrete output, not a generic best-practice claim.
06Iteration
Use "Iteration" to carry the idea forward: save the prompt, checklist, diagram, or operating rule that would make the next agent run better.
ExampleSource-backed work packet
Convert the video into a scoped task that includes the transcript claim, target workflow, acceptance criteria, and proof. The output should be a ui critique sheet for judging whether an ai interface improves control..
ExampleClaim vs. demo brief
Separate what the speaker claims, what the demo actually proves, and what still needs outside verification before you adopt the workflow.
ExampleTeach-back module
Transform the lesson into a definition, a mechanism diagram, one misconception, one practice exercise, and a check-for-understanding question.
Do not learn it wrong- Treating the title as the lesson without checking what the transcript actually says.
- Letting the prompt drift into generic advice that could apply to any video in the playlist.
- Copying the tool setup without identifying the operating principle that transfers to your own stack.
- Skipping the artifact, which means the learning never becomes operational or inspectable.