CraftKicks AI is a professional, multimodal sneaker design studio that bridges the gap between digital innovation and traditional shoemaking. Transform your inspiration (images and text) into photorealistic sneaker designs while gaining educational "Craft Insights" from the perspective of a master Italian cobbler.
Experience the full application in your browser
Click the button above to open the interactive CraftKicks AI studio
Features you can explore:
- ✨ Upload inspiration images or describe your design
- 🎨 Generate 4-angle photorealistic sneaker views
- ✏️ Refine designs with natural language commands
- 📚 Learn traditional shoemaking techniques
- 💾 Export high-quality designs
Transform your sneaker ideas into professional designs with AI-powered creativity
Recording.2026-01-24.232830.mp4
- Multimodal Inspiration Pipeline: Upload moodboards, textures, or silhouettes to guide the AI's aesthetic.
- 4-Angle Studio View: Generates high-fidelity photorealistic views (Side, Front, Rear, Top) for a complete design perspective.
- Refinement Studio: Iteratively refine designs using natural language (e.g., "make the sole thicker", "use gold accents").
- Artisan Education: Automatically generates detailed shoemaking specifications, traditional construction methods (Goodyear welt, Blake stitch, etc.), and step-by-step artisan processes.
- User Authentication & Persistence: Built-in profile system to save your designs, inspiration history, and selected themes.
- Export Capabilities: High-quality PNG downloads for all generated design angles.
Photorealistic sneaker designs powered by AI innovation and traditional craftsmanship
Side Profile View Complete lateral perspective with material details |
4-Angle Studio View
|
Each design includes detailed construction specifications and artisan insights
The following diagram illustrates the user interaction flow through the CraftKicks AI application:
This diagram shows how data flows through the CraftKicks AI system:
This diagram shows the React component hierarchy and structure:
graph TD
A[App.tsx] --> B[Header]
A --> C[Main Container]
A --> D[Footer]
C --> E[Upload Section]
C --> F[Design Studio]
C --> G[Craft Insights Panel]
E --> E1[Image Upload]
E --> E2[Text Input]
E --> E3[Generate Button]
F --> F1[4-View Display]
F --> F2[Refinement Controls]
F --> F3[Export Options]
F1 --> F1a[Side View Canvas]
F1 --> F1b[Front View Canvas]
F1 --> F1c[Rear View Canvas]
F1 --> F1d[Top View Canvas]
F2 --> F2a[Natural Language Input]
F2 --> F2b[Preset Modifications]
F2 --> F2c[Apply Changes Button]
F3 --> F3a[Download PNG]
F3 --> F3b[Save to Library]
F3 --> F3c[Share Design]
G --> G1[Construction Methods]
G --> G2[Material Specifications]
G --> G3[Quality Indicators]
G --> G4[Artisan Tips]
style A fill:#ff6b9d
style C fill:#00d4ff
style F fill:#ffd93d
style G fill:#6bcf7f
High-level overview of the system components and their interactions:
graph LR
subgraph Client["Client Layer"]
UI[React Frontend]
State[State Management]
Local[Local Storage]
end
subgraph API["API Layer"]
Vision[Vision API]
Generation[Image Generation API]
Text[Text Generation API]
end
subgraph Services["External Services"]
AI[AI Model Services]
CDN[Content Delivery]
Analytics[Analytics]
end
UI --> State
State --> Local
UI --> Vision
UI --> Generation
UI --> Text
Vision --> AI
Generation --> AI
Text --> AI
UI --> CDN
UI --> Analytics
Local -.->|Persist| UI
AI -.->|Results| Vision
AI -.->|Results| Generation
AI -.->|Results| Text
style Client fill:#e3f2fd
style API fill:#fff3e0
style Services fill:#f3e5f5
style UI fill:#00d4ff
style AI fill:#ff6b9d
- Frontend: React (ES6 Modules) with Tailwind CSS for high-performance, responsive UI.
- AI Core: Advanced multimodal AI for vision analysis, image generation, and technical text generation.
- State Management: React Hooks with local persistence for user sessions and design archives.
- Icons: Lucide React.
- Aesthetics: Premium dark-mode studio interface with high-contrast electric blue and coral accents.
- Node.js 18+ and npm
- Modern web browser (Chrome, Firefox, Safari, Edge)
- API key for AI services (see Configuration section)
# Clone the repository
git clone https://github.com/MasteraSnackin/CraftKicks.git
cd CraftKicks
# Install dependencies
npm install
# Start the development server
npm run dev- Create a
.envfile in the root directory - Add your API configuration:
VITE_API_KEY=your_api_key_here- Upload Inspiration: Start by uploading images or entering text descriptions of your desired sneaker design
- Generate Design: Click "Generate" to create your custom sneaker in 4 photorealistic angles
- Refine: Use natural language commands to iteratively improve your design
- Learn: Read the "Craft Insights" to understand traditional shoemaking techniques
- Export: Download your final designs in high-quality PNG format
CraftKicks AI combines cutting-edge AI technology with respect for traditional craftsmanship. Each generated design includes educational content about:
- Construction Methods: Goodyear welt, Blake stitch, cement construction
- Materials: Leather types, synthetic alternatives, sustainable options
- Quality Indicators: What separates premium footwear from mass production
- Artisan Techniques: Hand-stitching, burnishing, patina application
CraftKicks/
├── src/
│ ├── App.tsx # Main application component
│ ├── index.tsx # Application entry point
│ ├── types.ts # TypeScript type definitions
│ ├── constants.tsx # Application constants
│ └── services/
│ └── gemini.ts # AI service integration
├── index.html # HTML entry point
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite build configuration
└── README.md # This file
npm run buildnpm testnpm run lintContributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by traditional Italian shoemaking craftsmanship
- Built with modern web technologies for optimal performance
- Designed for both sneaker enthusiasts and professional designers
For questions, suggestions, or collaborations:
- GitHub: @MasteraSnackin
- Project Link: https://github.com/MasteraSnackin/CraftKicks
Made with ❤️ for sneaker culture and artisan craftsmanship