Prompts from the video "AI Gave You Coding. Now It Gives You Design."
| Step | Prompt | Tool | What It Does |
|---|---|---|---|
| 1 | Create Mockups | ChatGPT, Gemini | Generate themed mockup images from your app screenshot |
| 2 | Redesign from Mockup | Claude Code, Cursor, etc. | Apply the visual style to your actual code |
| 3 | Create Design System | Claude Code, Cursor, etc. | Lock in your design with concept + system docs |
- Take a screenshot of your app (or the part you want to redesign)
- Prompt 1 → Paste into ChatGPT with the mockup prompt → Get a themed image
- Prompt 2 → Bring that image to your AI coder → Apply the style to your app
- Prompt 3 → Once you like it, generate the design system → Never drift back to generic
Interactive reference for design vocabulary (contrast, hierarchy, spacing, color, depth):
- Video: AI Gave You Coding. Now It Gives You Design.
- Channel: Metal Sole