Create Amazing Website

Cijela tvoja stranica, od početka do kraja, jednom naredbom.

Skill s kojim radimo u studiju. Kažeš agentu kakvu stranicu želiš i on je vodi kroz devetnaest koraka: struktura, brend, dizajn, kod i objavljena stranica. Sve sprema u projekt, pa sutra nastavlja točno odakle je stao.

Instaliraj ga s GitHuba Kako se instalira

U ChatGPT-u ili Codexu zalijepi ovo:

Tvoj agent

› Instaliraj ovaj skill: https://github.com/themariscalproject/themariscal-create-amazing-website-skill

SlužbeniSlužbeni skill studija The Mariscal · 19 koraka · verzija 1.0.0 · licencija MIT

Prije instalacije pročitaj vodič.

Ako ti je ovo prva stranica s agentom, kreni odavde. Čita se u pregledniku, bez računa, i pripremi te za rad sa skillom.

Čitaj besplatni vodič Svi vodiči

Devetnaest koraka, četiri dionice.

Od koraka 0 do koraka 18. Svaki ostavlja spremljene datoteke, verzije i odluke, i ništa ne ide dalje bez tvog odobrenja.

Priprema i definicija

Okruženje spremno i stranica jasna prije nego što se išta nacrta.

0
Priprema okruženja
Provjeri alate i pristupe, kaže što nedostaje i pita prije nego što išta instalira.
1
Definicija stranice i baza znanja
Koncept, publika i funkcije; postavi bilježnicu projekta, plan i popis zadataka.

Struktura

Koje stranice postoje, kako se povezuju i kako izgledaju na mobitelu.

2
Proučavanje strukture stranica
Pročita tvoje snimke zaslona ili reference i zapiše sekcije, redoslijed i sadržaj.
3
Mapa stranice i navigacija
Rute, izbornici i veze među stranicama; označi rupe prije wireframeova.
4
Prilagodljivi wireframeovi
Povezane HTML/CSS stranice za mobitel, tablet i računalo. Prvo struktura, stil kasnije.
5
Pregled i odobrenje strukture
Primijeni tvoje ispravke i zapiše točnu verziju koju prihvaćaš kao temelj.

Brend i dizajn

Reference, identitet, vizualni smjer i cijeli prototip.

6
Istraživanje vizualnih smjerova
Tipografija, razmaci, boje, površine i slike iz svake reference.
7
Istraživanje brenda
S tobom odluči čuva li se identitet, prilagođava ili stvara, i što je zaštićeno.
8
Istraživanje koncepata brenda
Predloži i usporedi koncepte, doradi ih po tvom mišljenju i zapiše tvoj izbor.
9
Završni materijali brenda
Simbol, logotip, kombinacije i pozadine, s pravilima korištenja i popisom datoteka.
10
Usporedba smjerova dizajna
Svaka referenca primijenjena na istu stranicu, jedna uz drugu, da izabereš.
11
Dorada odabranog dizajna
Jača tipografija, kompozicija i mobitel, verzija za verzijom dok ne kažeš da.
12
Cijeli prototip
Vizualni sustav na svim stranicama, sa smislenom animacijom koja radi i uz smanjeno kretanje.
13
Pregled cijelog prototipa
Ispravke u novim verzijama do točnog prihvaćanja: konačna predaja.

Produkcija i objava

Pravi kod, uglađena početna, pull request i stranica uživo.

14
Stranica u produkciji
Next.js, React, TypeScript i Tailwind u tvom repozitoriju, sa sadržajem u Markdownu.
15
Redizajn početne
Samo početna: jača kompozicija, uglađen mobitel i usklađena animacija, dok je ne prihvatiš.
16
Dizajn na cijeloj stranici
Kad zatražiš, prihvaćeni smjer dolazi na svaku stranicu, a da nijedna ne izgubi svoju svrhu.
17
Pregled završnog pull requesta
Objavi granu i otvori PR; spaja se tek nakon ljudskog odobrenja.
18
Objava i prihvaćanje stranice
Objavi uz tvoje dopuštenje, provjeri pravu stranicu i zapiše URL i verziju.

Kako se instalira

Živi u javnom GitHub repozitoriju, otvorenog koda. Izaberi svog agenta: svaki put instalira istu mapu.

themariscalproject/themariscal-create-amazing-website-skill

U ChatGPT-u ili Codexu, samo zatraži
Zalijepi ovu rečenicu s poveznicom na repozitorij. Instalacijski alat za skillove povuče ga s GitHuba i pripremi za rad.
Tvoj agent
```
› Instaliraj ovaj skill: https://github.com/themariscalproject/themariscal-create-amazing-website-skill
```
U Codexu ga pozoveš s $themariscal-create-amazing-website.
U Claude Codeu, kao plugin
Preporučeni put: kasnije se ažurira jednom naredbom. Upiši ova dva retka u Claude Code.
Claude Code
```
› /plugin marketplace add themariscalproject/themariscal-create-amazing-website-skill
› /plugin install themariscal-create-amazing-website@themariscal
```
Ponovno pokreni Claude Code, otvori mapu svoje stranice i upiši /themariscal-create-amazing-website, ili ga zatraži svojim riječima.
Ili ga kloniraj i instaliraj sam
Kloniraj repozitorij i pokreni instalacijski program. --claude ga stavi u skillove Claude Codea, --codex u Codexove, --project samo u jedan projekt.
Terminal
```
$ git clone https://github.com/themariscalproject/themariscal-create-amazing-website-skill.git
$ cd themariscal-create-amazing-website-skill
$ ./install.sh --claude
```
Instalacijski program ne koristi internet, ne traži sudo i nikad ne mijenja postojeću instalaciju, osim ako mu daš --update.
U bilo kojem drugom agentu
Preko skills CLI-ja, ili kopiraj mapu skills/themariscal-create-amazing-website/ tamo gdje tvoj agent traži skillove.
Terminal
```
$ npx skills add themariscalproject/themariscal-create-amazing-website-skill
```

Jedan ulaz

Ne moraš pamtiti koji korak slijedi. Prvi put kreće od pripreme okruženja; kad se vratiš, pročita što je spremio i nastavi od nedovršenog koraka i radnje.

Za početak

Tvoj agent

› Start a new website with themariscal-create-amazing-website.

Za nastavak, sutra ili u novoj sesiji

Tvoj agent

› Resume my website with themariscal-create-amazing-website.

Što ti ostaje

Baza znanja projekta sa zahtjevima, odlukama i spremljenim napretkom.
Reference strukture, wireframeovi, usporedbe dizajna i svaka pregledana verzija.
Završne datoteke brenda i dokumentiran vizualni sustav.
Cijeli prilagodljivi prototip i zaseban produkcijski kod.
Sadržaj u Markdownu, usklađen s aplikacijom.
Dokazi provjera, odobrenja, povijest izdanja i URL stranice.

Odluke ostaju tvoje

Stane kad god mu treba nešto od tebe i pamti što si odlučio: ne pita dvaput dok se ništa ne promijeni. Uspješan build ili tihi razgovor nikad se ne računaju kao da.

Koja verzija ostaje
Što se instalira
Kad dizajn ide na cijelu stranicu
Ljudski pregled PR-a
Dopuštenje za objavu

Martín Silva Molina, osnivač studija The Mariscal

Stiže tečaj s Martínom

Martín priprema tečaj s ovim skillom: cijela web stranica od početka do kraja, onako kako to radi studio. Bit će u Akademiji The Mariscal.

Otvori Akademiju

Prvi put radiš s agentom? Besplatni vodič vodi te korak po korak.«Build a stunning website with ChatGPT»Idi na vodič Natrag u knjižnicu

Create Amazing Website

Prije instalacije pročitaj vodič.

Devetnaest koraka, četiri dionice.

Priprema okruženja

Definicija stranice i baza znanja

Proučavanje strukture stranica

Mapa stranice i navigacija

Prilagodljivi wireframeovi

Pregled i odobrenje strukture

Istraživanje vizualnih smjerova

Istraživanje brenda

Istraživanje koncepata brenda

Završni materijali brenda

Usporedba smjerova dizajna

Dorada odabranog dizajna

Cijeli prototip

Pregled cijelog prototipa

Stranica u produkciji

Redizajn početne

Dizajn na cijeloj stranici

Pregled završnog pull requesta

Objava i prihvaćanje stranice

Kako se instalira

U ChatGPT-u ili Codexu, samo zatraži

U Claude Codeu, kao plugin

Ili ga kloniraj i instaliraj sam

U bilo kojem drugom agentu

Jedan ulaz

Što ti ostaje

Odluke ostaju tvoje

Stiže tečaj s Martínom