In today's fast-paced world of AI-assisted development, I set out to build a personal blog from scratch in as little time as possible. Using a combination of tools like Grok, Figma Make, GitHub Copilot, and Azure, I managed to get a basic site up and running quickly. While it's not fully functional yet, this experiment shows how AI can accelerate the process dramatically. Here's a step-by-step breakdown of how I did it.
Here is the result of the site: https://www.paulriviera.com (Basically just this same post and placeholder content)
Step 1: Planning with Grok (15 Minutes)
I kicked things off by chatting with Grok to outline my basic requirements. We discussed the tools I'd use, the minimalistic style I wanted (clean, simple, and focused on readability), and the overall structure of the blog. This conversation helped me refine my ideas and generate a solid starting prompt for my conversation with Figma Make.
The Grok session was quick—about 15 minutes—and resulted in a tailored prompt I could feed directly into Figma Make without having to use a starting design or assets in Figma.
Step 2: Designing and Generating with Figma Make (2 Hours)
I may get a better result using assets or an existing Figma design to build off of but I have not tried that yet.
With the prompt from Grok in hand, I jumped into Figma Make to create the initial blog page. It generated a basic layout based on my description, and from there, I iterated through simple conversations to add more pages and tweak the designs.
This phase was surprisingly efficient. In just two hours, I went from a blank slate to a solid, exportable prototype. Figma Make allowed me to push the output directly to GitHub. I could edit the code in Figma if I needed to but mainly I like this tool because I can be very specific on the elements I ask Figma to change/create as opposed to other Vibe coding tools I have used.
Step 3: Refining and Deploying with GitHub Copilot (20 Minutes + Setup)
Once the repo was on GitHub, I cloned it locally and started making improvements using GitHub Copilot in VS Code, with Claude Haiku 4.5 in Agent Mode for additional assistance. Here's what I tackled:
- Install packages: Ensured all dependencies were set up.
- Test the build and run in dev mode: Everything worked perfectly out of the gate.
- Add Prettier for formatting: To keep the code clean and consistent.
- Convert mock articles to Markdown: Moved them from TypeScript files to Markdown for easier content management and future additions.
- Add/Update .gitignore: The Figma output didn't include one, so I fixed that to avoid committing unnecessary files.
- Add missing Azure configuration: Prepared for static web app deployment.
- Connect the repository to Azure: Used a pre-written script for this.
- Set up GitHub Actions: Configured a workflow to deploy the Vite-based app to Azure Static Web Apps (created via the Azure Portal to save time).
- Deploy to Azure: Pushed the changes and watched it go live.
This hands-on coding and deployment phase took about 20 minutes, plus a quick 2 minutes to provision the Static Web App in Azure. The site deployed successfully, though many features are still broken (e.g., contact page and external links are broken).
Running Clock and Next Steps
Total time so far:
- 15 minutes with Grok
- 2 hours with Figma Make
- 2 minutes provisioning in Azure
- 20 minutes with GitHub Copilot and Claude
That's under 3 hours for a deployed (albeit basic) blog!
The site isn't production-ready—it's more of a skeleton. However, while the site is broken, it will remain live in the free tier of Azure Static Web Apps while things are added. My next moves include:
- Creating a GitHub Project board.
- Generating detailed issues using Grok and/or GitHub Copilot.
- Assigning tasks to the GitHub Copilot Agent for simpler ones, or handling complex ones myself.
Final Thoughts
This was an experiment in speed-building with my current AI toolkit, and it proved how far these tools have come. While it'll take more time to make it a fully functional blog, getting to a deployed state so quickly was satisfying. While this workflow requires a lot of refinement I do like the direction and I am excited for how it can improve my development.
Top comments (0)