Copper Coast Ceramics - AI Co-Development
Started: May 2025 · Updated: May 2025
This project documents the development of a “Copper Coast Ceramics” single-page website through iterative collaboration between human direction and multiple Artificial Intelligence systems.
The Four Phases
Phase 1: Asset Creation
AI image generation (GPT-4o) was used to create logo concepts derived from Copper Coast photography. The landscape itself informed the color palette:
#FDFBF5— Cream#586464— Dark teal#7C9393— Mid teal#9EB0B0— Light teal#E9EAE5— Off-white
Product photography was organized and the hero image created via AI integration of the logo into a ceramic photograph.
Phase 2: Initial Website Generation
Gemini AI was tasked with creating a responsive site with About, Gallery, and Contact sections. Tailwind CSS styling was applied via CDN, with a Lightbox gallery implementation based on prior validated code.
Phase 3: Iterative Refinement
The AI-generated code required several rounds of adjustment:
- Hero background path corrections
- Logo sizing adjustments
- Gallery aspect-ratio modifications from square to 16/9
Phase 4: Deployment
Formspree was integrated for contact form handling and the site was hosted on GitHub Pages via Jekyll.
Product Gallery
A selection of ceramic pieces featured on the site:
Technical Stack
- HTML5
- Tailwind CSS
- JavaScript
- Formspree (contact form)
- GitHub Pages
AI Tools Used
- GPT-4o — Logo generation and hero image creation
- Gemini — Code generation and iterative refinement
Links
Reflections
This project demonstrates how AI can accelerate the design and development process when guided by clear human direction. The iterative refinement phase shows that AI-generated code often needs adjustment, but the overall workflow significantly reduced development time.