Plain HTML and CSSNo librariesTemplates included

Website & Landing Page Design, HTML Pro Max

Pages built by AI fail in the same three ways every time: they look like a template, everything on them shouts equally loud, and the words are placeholder words. This skill blocks all three by making the agent write the copy before it draws anything, and by generating the entire colour system from one brand colour instead of picking each shade by hand.

New to AI Agents? In short: an AI assistant given permission to do work on your machine, instead of only answering inside a chat box. 2-minute read ↓

What this product does

This is an AI Agent skill: one procedure file, four reference files the agent opens only when it needs them, and two templates you paste in and run. You hand over the work in plain language, the agent follows seven steps and stops for your approval at the points that matter.

The seven steps

1. Diagnose. The agent asks five questions before drawing a single line: who is reading, what the one action is, what can actually be proven
2. Pick the page's job. Ad landing page, product page, company site or documentation. Each has a different mandatory frame
3. Generate the design system from one brand colour, then stop for your approval
4. Words first, pictures after. All the content comes out as a list, with no HTML yet, then stops for your approval
5. Build. Semantic HTML, one CSS file, every colour from a variable, mobile first
6. Check itself with numbers. It runs the whole list, every item has to be measurable, "looks fine" is not accepted
7. Hand over with a list of the places that still need real evidence

Four reference files

Design system. The formula for deriving a whole colour scale from one base colour, the type scale, the spacing scale, and a set of CSS variables you paste in and run
Vietnamese type. The part no foreign design guide has: Vietnamese stacks two levels of diacritics so it needs its own line height, a font list with full Vietnamese coverage, and how to self-host the fonts instead of calling Google's servers
Layout. Each section of a page with what it has to accomplish and how it usually fails
Self-check list. Six groups, each item with a command you can run in the browser to verify it

Two templates

nen.css, a complete CSS foundation: variables, dark mode, buttons, cards, tables, a no-JavaScript FAQ, and print styles
trang-ban-hang.html, a nine-section sales page frame where every section carries a comment saying what its job is

🔍 The templates were run through their own check list. That run caught two contrast errors in Autoera's own base CSS, and both were fixed before this went on sale. The fix is written into the reference file so you can see why it was done that way.

⚠️ The skill files and their documentation are written in Vietnamese. Your AI Agent reads them without trouble and you can brief it in English, but if you want to read the reference files yourself you will be reading Vietnamese.