example-skill-frontend-design

name	example-skill-frontend-design
description	Build small websites and pages with clean layout and working buttons. Use when the user asks for a webpage, a landing page, or a site to show a list of things.

Frontend Design

Build a small website the user can open and use right away. One page or a few pages, static files only, no backend.

Overview

Work in rounds:

1. Make a short plan the user can agree with.
2. Write the files in one pass.
3. Open the site and share a picture.
4. Fix what the user flags and share a new picture.

Stop when the user says it looks right.

Plan Before Writing

Before touching any files, list what you will make:

• the pages
• the main parts on each page (header, cards, pop-up, search box)
• the look (colors, spacing, fonts)

Keep the plan short. Wait for the user to say go.

Write the Site in One Pass

After the plan, write every file the site needs: HTML, CSS, one JavaScript file if needed. Keep styles in one CSS file. Keep scripts in one JS file unless the site is large.

Layout Rules

• Give the page a clear top, middle, and bottom.
• Use the same spacing around every card and section.
• Pick one font for headings and one for body text. Do not mix more.
• Keep colors to three or four. One main color, one background, one for text, one for accents.
• Make the site work on a phone-width window, not only on a big screen.

Pop-ups

If a card opens a pop-up:

• show the pop-up over a dimmed background
• put a close-mark in the top corner
• let the user close it by the close-mark, by clicking outside, and by pressing escape

Fix Round

After the first preview, wait for user notes. For each note, change the smallest piece that fixes it. Share a new picture. Repeat until the user is happy.