My CRAZY AI Design Workflow: MAKE 10X Better Designs with this AI Coding Workflow! (+ Free APIs)

Key Concepts

• AI-assisted design
• Figma mockups for AI coding
• Gradient generation
• Image animation with V2
• AI code generation (Kilo Code, R Code, Klein)
• Shad CN integration
• Landing page design
• Asset management for AI coders

1. Introduction

The video focuses on creating high-quality, visually appealing designs using AI, specifically addressing the common issue of AI-generated designs appearing generic. It builds upon a previous video about Shad CN and provides a workflow for creating "lifelike" designs with AI.

2. The Problem with AI-Generated Designs

AI-generated designs often lack the nuances and details that make a design visually appealing, even with advanced AI models. This is attributed to the AI's inability to handle complex assets and a lack of clear design direction.

3. The Proposed Workflow: Figma Mockup First

The core solution is to create a detailed design mockup in Figma before using an AI coder. This mockup serves as a visual guide and provides the AI with the necessary assets and context to generate a more accurate and visually pleasing result.

4. Step-by-Step Process

4.1. Basic Design in Figma

• Purpose: To create a visual guide for the AI coder.
• Tool: Figma is recommended for its ease of use and design capabilities.
• Inspiration: Use Dribbble or other design resources to gather inspiration.
• Elements: The example design includes a hero section, a mid-section, and a footer.
• Time Investment: The example design took approximately 10 minutes to create.
• Export: Export the Figma design as a JPG file.

4.2. Gradient Generation

• Purpose: To create visually appealing backgrounds.
• Tool: Google's Image FX (free) or Midjourney (paid) are suggested.
• Prompting: Use detailed prompts to generate specific gradient styles.
• Integration: Import the generated gradient into the Figma design.

4.3. Asset Preparation

• Purpose: To provide the AI coder with the necessary visual elements.
• Location: Place assets in the "public" folder of the Next.js project.

4.4. Image Animation with V2

• Purpose: To add dynamic elements to the design.
• Tool: V2 AI Studio (free) is used to animate the background image.
• Process: Upload the image to V2 and request a subtle animation.
• Format: Convert the animated image to WebM format for optimal performance.

4.5. Task File Creation

• Purpose: To provide specific instructions to the AI coder.
• Content: The task file includes:
  • Instruction to redesign the attached image (Figma mockup).
  • File names of the assets to be used.
  • Instruction to initialize and utilize Shad CN components.
  • Allowance for slight design modifications.

4.6. AI Code Generation

• Tool: Kilo Code is used as the AI coder. It's described as a superset of Klein and R Code.
• Process: Upload the Figma mockup and the task file to the AI coder.
• Output: The AI coder generates the code for the landing page based on the provided inputs.
• Refinement: The generated code can be further refined with additional instructions.

5. AI Coders: Kilo Code, R Code, Klein

• Kilo Code: Described as a superset of Klein and R Code, merging the best features of both. It offers $20 of free credits for using models like Sonnet and GPT-4.1. Users can also set up their own API key.
• R Code & Klein: Mentioned as alternative AI coding tools.

6. Shad CN Integration

The video emphasizes the importance of integrating Shad CN into the AI-generated code. Shad CN is a collection of pre-built, customizable UI components that can enhance the visual appeal and functionality of the design.

7. Alternatives to AI Coders

Tools like Lovable, V0, or Bolt are mentioned as alternatives for replicating designs and potentially saving money through subscriptions.

8. Key Argument: Design First, Code Second

The video strongly advocates for a "design-first" approach. Creating a detailed mockup before using an AI coder is presented as a more efficient and cost-effective method for achieving desired design outcomes. The speaker argues that starting without a design leads to excessive token consumption and less predictable results.

9. Notable Quotes

• "Generally when you build something with AI it looks pretty basic and simple no matter how good the model is because we are missing the basics of how to make a good design."
• "I will always recommend you to have a mockup to define what you want and that will always get you the best option."

10. Technical Terms

• Figma: A collaborative web application for interface design.
• Next.js: A React framework for building web applications.
• Shad CN: A collection of reusable UI components for React.
• V2: An AI tool for image animation.
• WebM: An open, royalty-free video format.
• Kilo Code/R Code/Klein: AI code generation tools.
• Tokens: Units of consumption for AI models.

11. Synthesis/Conclusion

The video provides a practical workflow for creating visually appealing designs using AI. The key takeaway is the importance of creating a detailed Figma mockup before using an AI coder. This "design-first" approach allows for greater control over the final output, reduces token consumption, and ultimately leads to more satisfying results. The video also highlights the usefulness of tools like V2 for animation and Shad CN for UI components, as well as various AI coding platforms like Kilo Code, R Code, and Klein.