Your references become your website’s style

Install the skill

Clone the repository and link the skill to Claude Code. $T is the my-site folder inside your home folder: put references in my-site/refs. S and T only apply in the terminal where you created them; in a new terminal, run the third line again. Run these lines in the folder where you want to store the toolkit (the ln -s command uses the current folder).

git clone https://github.com/inematds/site-inspirado
mkdir -p ~/.claude/skills && ln -sfn "$PWD/site-inspirado/skill/site-inspirado" ~/.claude/skills/site-inspirado
S=~/.claude/skills/site-inspirado; T=~/my-site; mkdir -p $T/refs
cd $S/scripts && npm install && npx playwright install --with-deps chromium && cd -  # gate browser

Gather your references

Use 2 to 5 images in $T/refs/: things you already have (an invitation, logo, or shop photo) and inspiration (on Pinterest, search for “bakery website” or “watercolor wedding website”). An image showing what you DON’T want can help too.

Let AI ask questions first

Open Claude Code in your website folder (so the brief, style, and page all stay in $T) and use the prompt that changes the result. Questions for each type of website are in referencias/perguntas.md; answers go into $T/BRIEF.md, along with the type: negocio (the site exists to prompt an action, such as ordering or booking) or visual (an event or portfolio site, where more motion can work).

Steps 4, 5, and 7, the cp command in step 6, and step 8 are terminal commands: open a second terminal (leave Claude Code in the first) and run the S=…; T=… line from step 1 there first.

# in the terminal
cd $T && claude

# inside Claude Code (type this; it is not a terminal command)
/site-inspirado "I want a website for my bakery. Before generating anything, ask me everything you need to know and research what this type of website usually includes."

Measure the style

The script measures the reference palette and suggests background, text, and accent colors using calculated contrast. The style prompt describes technique, lighting, and colors in English: ask Claude Code to write it based on your references. The number followed by “:1” is the text-to-background contrast ratio (below 4.5:1 is hard to read).

python3 $S/scripts/estilo.py $T/refs $T/estilo.json --prompt "honest food photography, warm window light, dark walnut, terracotta"
# estilo.json: 12 colors · background #110a04 · ink #ebdbce (14.55:1) · accent #b07042

Generate images in the same style

Write $T/plano.json (one line per image: nome, subject prompt, largura, altura). Each image uses the first 2 references (in alphabetical order: give the most important ones names like 1-invitation.jpg) and the first generated image as a model (the “anchor”), so the series looks consistent. At the end, you get folha.jpg, a contact sheet with all images side by side: review it and redo anything that looks out of place. You don’t need to write the JSON by hand: ask Claude Code to “write plano.json from the BRIEF,” or copy pilotos/padaria/plano.json and replace the text. Each image takes about 1 minute and uses your Codex subscription quota.

# plano.json: [{"nome": "hero", "prompt": "bread cooling on the table", "largura": 1536, "altura": 1024}, ...]
python3 $S/scripts/imagens.py $T/plano.json $T/estilo.json $T/img --refs $T/refs
python3 $S/scripts/imagens.py $T/plano.json $T/estilo.json $T/img --refs $T/refs --so croissant  # regenerate one

Build the page with motion

Ask Claude Code: “build the page using the BRIEF, style, and images.” It designs a page for the subject and marks the main button (the CTA, the action you want visitors to take) with data-cta. Transitions come from movimento.js, using attributes: data-revela makes a block appear when it enters the screen, data-parallax makes an image move more slowly than the page scrolls, data-intro creates a short opening, data-conta counts a number, and data-contagem shows the days until a date. All motion stops when the system requests “reduce motion.” Copy movimento.js into your website folder before running the gate:

<section data-revela="cortina"> … sobe | surge | lado | zoom | cortina
<img data-parallax="0.12">  <b data-conta="36">  <div data-intro="900">
<a data-cta href="#encomendar">Encomendar</a>
<script src="movimento.js"></script>
cp $S/runtime/movimento.js $T/

Pass the gate

It opens the page at 1440×900 and 390×844, with and without “reduce motion.” Use the --tipo specified in the BRIEF (negocio or visual). If the result is FAIL, the list explains why: paste it into Claude Code and ask for a fix. Publish only when it says PASSA.

node $S/scripts/portao.js $T/index.html --tipo negocio --fotos ~/fotos-portao
# portão visual × conversão — meu-site (negocio)
#   desktop          CTA na 1ª tela: sim · CTAs: 3 · peso 0.22 MB · erros 0
#   celular          CTA na 1ª tela: sim · CTAs: 3 · peso 0.55 MB · erros 0
#   desktop+reduzir  … · celular+reduzir  …
# PASSA

Publish

$T is already a complete static website. Push it to GitHub and enable GitHub Pages, GitHub’s free web hosting (or use Vercel or your client’s hosting). Replace YOUR_USERNAME with your GitHub username. The site will be available at https://YOUR_USERNAME.github.io/my-site/ a few minutes later.

# don't publish client data or drafts:
printf 'BRIEF.md\nrefs/\nfotos/\nimg/.codex/\nimg/folha.jpg\n' > $T/.gitignore
git config --global user.name "Your Name"; git config --global user.email "you@email.com"  # first time only
cd $T && git init -b main && git add -A && git commit -m "site"
gh repo create my-site --public --source=. --push
gh api -X POST repos/YOUR_USERNAME/my-site/pages -f "source[branch]=main" -f "source[path]=/"