FreeChatGPTNo coding needed

How to build a stunning website with ChatGPTUsing The Mariscal skill: from an idea to a live website, without writing a line of code

By Martín Silva Molina 14 chapters 51 min

A complete, free guide to building a professional website with ChatGPT and the themariscal-create-amazing-website skill: structure, wireframes, design, brand, prototype, Next.js, GitHub and Vercel. Step by step, using a real sneaker store as the example.

Start reading

The whole guide, figures included, to print or read offline. You'll need to sign in (it's free).

Martín at his desk at night: a finished sneaker store on the screen, and on the desk an open notebook with the same site sketched in pencil, a cup of coffee and a cactus. Through the window, the city and its lit-up cathedral.

What you'll walk away with

Why "make me a stunning website" doesn't work, and what to do instead
How to install a skill in ChatGPT and give it a memory with Obsidian so it never forgets
How to pull the structure out of any website with a screenshot and turn it into wireframes
How to build a design file (design.md) from references you like
How to create a brand from scratch, pick between proposals and ask for changes
How to go from an HTML prototype to a professional Next.js project
How to publish on Vercel with GitHub: branches, pull requests and merges, explained painlessly
How to edit your site's copy from Obsidian and ask for animations with a screenshot

What you'll need

ChatGPT (the desktop app, latest version) on a plan that supports projects
A GitHub account and the GitHub Desktop app (free)
Obsidian installed (free)
A Vercel account (free) to publish
Two or three hours and an idea for a website, however small

The chapters

Three open cardboard boxes on a table, each holding a tool: a GitHub octocat, a glowing purple obsidian crystal and a chat bubble with a star. In front, an empty folder; through the window, the sea and the old town.

Part one

Before you start

What you're going to build, why ChatGPT on its own isn't enough, and the three accounts you'll need.

Martín climbs a stone staircase through the stars toward a glowing screen with the published store. The steps hold what got him there: a pencil, the sketches, a color palette, building blocks and a rocket.

Part two

The skill, step by step

The skill's nineteen steps, in the order you'll actually go through them: from the idea to a live website.

A hand writes in a notebook, and a thread of purple light runs from the page to the website on the screen, changing the headline. Beside it, a printed screenshot with the headline circled in red and an arrow.

Part three

Afterwards

Editing copy without touching code, asking for changes with a screenshot, and every word that came up along the way.

The skill

This guide goes with The Mariscal's skill. It's free and open source.

themariscal-create-amazing-website

How to install it

Instalá esta skill: https://github.com/themariscalproject/themariscal-create-amazing-website-skill

View on GitHub

How you read it

Pencil in hand
Sign in (free) and highlight in five colors or stick post-its on the page. They're saved on every device.
Wherever you are
Made for your phone first. Pick up right where you left off.
On paper too
Download it as a PDF with every figure, or print it. You just need to sign in.

Who wrote it

Martín Silva Molina has been building software for over ten years and teaches AI in person at The Mariscal Academy. The guides come straight from what we do every day at The Mariscal: websites, apps and skills so anyone can build with AI.

Questions

Do I need to know how to code?

No. There's no code written anywhere in this guide. You describe, look, approve and ask for changes; the skill and ChatGPT do the rest.

Does it work with an AI other than ChatGPT?

The skill also runs in Claude Code. This guide follows the video, which was recorded with ChatGPT, but the steps are identical.

How much does it cost?

The guide and the skill are free. GitHub, Obsidian and Vercel all have free plans that are plenty. The only thing you pay for is your ChatGPT plan.

Can I use it to redesign a site I already have?

Yes. In the structure step, instead of screenshots of other sites you give it screenshots of your own.

What if I close ChatGPT halfway through?

Nothing happens. The skill saves every step in Obsidian and GitHub. You come back, say "let's continue" and it picks up where it left off.