Paketas 3 iš 4
Dizaino ir HTML/CSS promptai
31 promptas, su kuriais AI parašo tvarkingą, greitą ir mobiliajam pritaikytą kodą — o ne sunkų puslapį su penkiomis bibliotekomis.
Kur AI klysta rašydamas kodą
Paprašius „sukurk svetainę statybų įmonei“, dažniausiai gaunate: gražiai atrodantį puslapį, kuris naudoja dvi išorines bibliotekas, sveria kelis megabaitus, netvarkingai atrodo telefone ir kurio kodą sunku suprasti po savaitės.
Priežastis paprasta: modelis nežino jūsų apribojimų. Šio paketo promptai juos nurodo iš karto — mobile-first, semantinės žymos, CSS kintamieji, jokių bibliotekų be reikalo, vienas stiliaus failas.
Svarbiausias principas: vienas šablonas
Nedarykite visų puslapių iš karto. Padarykite vieną, patvirtinkite jį, ir tik tada prašykite likusių pagal patvirtintą šabloną. Taip visa svetainė atrodys vientisai — tai vienas dažniausiai pamirštamų dalykų savarankiškuose projektuose.
Trumpai
- Kaina29 € (be PVM)
- FormataiPDF, Markdown, tekstas
- PristatymasEl. paštu tą pačią dieną
- Atnaujinimai12 mėn. nemokamai
Turinys
Kas yra pakete
- Dizaino krypties nustatymas pagal jums patinkančias svetaines
- Spalvų paletės generavimas su kontrasto patikra
- Šriftų poros parinkimas (nemokamos licencijos)
- CSS kintamųjų sistema — visos spalvos vienoje vietoje
- Semantinio HTML karkaso generavimas
- Mobile-first CSS su breakpoint'ais
- Antraštės ir mobilaus meniu kodas
- Kortelių, mygtukų ir formų komponentai
- Kontaktų formos HTML su apsauga nuo šlamšto
- Poraštės su rekvizitais generavimas
- Puslapio šablono kartojimas kitiems puslapiams
- Nuotraukų įterpimas su srcset (greičiui)
- Prieinamumo (kontrastas, alt, focus) patikra
- Kodo išvalymas: kas nereikalinga ir ką galima išmesti
Pažiūrėkite, kaip atrodo
Pavyzdžiai iš paketo
HTML/CSS karkaso užsakymas
Naudokite TIK po to, kai turite patvirtintą struktūrą ir tekstus.
Sukurk vieno puslapio HTML ir CSS pagal šiuos reikalavimus. TURINYS: [ĮKLIJUOKITE PATVIRTINTĄ PUSLAPIO TEKSTĄ] TECHNINIAI REIKALAVIMAI (privalomi): 1. Vienas HTML failas + vienas atskiras CSS failas. Jokių kitų failų. 2. JOKIŲ išorinių bibliotekų: be Bootstrap, be Tailwind CDN, be jQuery, be ikonų paketų. Ikonos — inline SVG. 3. Mobile-first: pirmiausia rašyk stilius telefonui, tada @media (min-width: ...). 4. Semantinės žymos: header, nav, main, section, article, footer. 5. Visos spalvos ir tarpai — CSS kintamieji :root sekcijoje. 6. Šriftas — system font stack arba vienas Google Fonts šriftas, ne daugiau. 7. Kontrastas turi atitikti WCAG AA (bent 4.5:1 tekstui). 8. Kiekvienas paveikslėlis su alt atributu; dekoratyviniai — aria-hidden. 9. Telefono numeris — <a href="tel:...">, el. paštas — <a href="mailto:...">. 10. Jokių animacijų, kurios trukdo skaityti. STILIUS: [APRAŠYKITE: pvz. „šviesus fonas, viena akcentinė spalva, daug oro, apvalinti kampai 12px, jokių šešėlių"] Pateik pilną kodą, paruoštą kopijuoti. Po kodo trumpai paaiškink, ką kur keisti, jei norėsiu pakeisti spalvas.
Šablono kartojimas kitiems puslapiams
Šis promptas užtikrina, kad visi puslapiai atrodys vienodai.
Štai mano patvirtintas puslapio šablonas: [ĮKLIJUOKITE HTML] [ĮKLIJUOKITE CSS] Dabar sukurk puslapį „[PUSLAPIO PAVADINIMAS]" su šiuo turiniu: [ĮKLIJUOKITE TEKSTĄ] Griežtos taisyklės: 1. Naudok TIKSLIAI tas pačias CSS klases. NEKURK naujų, nebent be jų neįmanoma. 2. Jei reikia naujos klasės — surašyk ją atskirai sąrašo pabaigoje, kad galėčiau pridėti į bendrą CSS failą. 3. Antraštė ir poraštė — identiškos šablonui, tik aktyvi meniu nuoroda kita. 4. Pakeisk: <title>, meta description, canonical, H1. 5. Nuorodų keliai turi būti teisingi šio puslapio vietai kataloge. Pateik tik HTML. CSS papildymus — atskirai, jei jų reikia.
Tai — pavyzdžiai iš šio paketo. Likusieji sudėlioti nuosekliai: kiekvieno promptą naudojate su ankstesnio rezultatu.
Pirmiausia išbandykite nemokamai
Aštuoni pilni promptai iš skirtingų paketų — be registracijos ir be el. pašto.
Nemokami promptaiNesate tikri, ar jums tinka?
Parašykite, ką kuriate — pasakysime, ar promptai jums padės, ar geriau imti konsultaciją.