SkillsDesign & Web › Frontend Design
frontend-design

Frontend Design

Designs and builds the front end of a real web page or interface — the part people see and click — producing clean, responsive, on-brand HTML/CSS (and components) from a description, a brief, or a reference.

Cowork & Chat
How to use it
Describe the page or interface you want, point to references, and give it our brand rules, and it builds the visible layout: hero, sections, buttons, forms, cards — responsive on phone and desktop, with sensible structure and styling. Feed it a Design Brief or Design Tokens and it’ll honor them; hand the result to Web Design Guidelines or Design Auditor to pressure-test it. This is how the onboarding hub’s pages get built — great for landing pages, microsites, and UI mockups you can actually open in a browser.
How to invoke / keep it on
Say “design and build this landing page,” “build me the front end for…,” or “turn this brief into a real page.” Give it our tokens/brand guide up front so it builds on brand from the start.
20 powerful examples for Melinda Maria
Copy, tweak, make them yours. Just describe the task — Claude loads the skill automatically.
01"Design and build a responsive landing page for the summer Lariat collection in MM’s ‘everyday luxury’ style — hero with the three bestselling styles, an email-signup section, and a shop-now CTA — using our brand colors and fonts."
02"Build the front end for a ‘gift guide’ microsite section with filterable product cards, on brand and mobile-friendly, then hand it to Design Auditor to check accessibility before we ship."
03"Turn this design brief for our Pavé Huggies launch page into real HTML and CSS — responsive, using our design tokens — and show me a version I can open in the browser."
04"Create an on-brand interactive product-comparison block (demi-fine vs. fine jewelry) for the blog — clean layout, MM colors, works on phone — that #marketing can reuse on future pages."
05"Build a holiday gift-finder quiz front end — a few playful questions that lead to a recommended collection — responsive and in MM lavender and hot pink, ready to wire up later."
06"Design and build an on-brand ‘new arrivals’ landing section with a hero, a product grid, and a sticky shop-the-collection bar, using our design tokens so it stays consistent with the rest of the site."
07"Create a responsive countdown-sale hero for Black Friday in MM colors — bold headline, the offer, one CTA, and a tasteful timer — with reduced-motion support built in."
08"Build the front end for a refreshed ‘About Melinda Maria’ page — story sections, founder quote, and imagery placeholders — premium and mobile-friendly in our brand fonts."
09"Turn our wholesale brief into a clean B2B landing page for NuORDER buyers — value props, line-sheet preview, and an apply-to-wholesale form — on brand but a touch more buttoned-up."
10"Design and build a reusable on-brand email-style HTML block for product launches that #marketing can drop into Klaviyo — hero, product row, and CTA, all inline-safe and mobile-first."
11"Create an interactive ‘build your stack’ UI mockup for stacking rings — pick a few rings and see them combined — in MM colors, responsive, that I can open in a browser."
12"Build a polished product card component (image, name, price, quick-add) on brand and responsive, using our tokens, so we can reuse it across collection pages and the gift guide."
13"Design and build a homepage hero plus featured-collections row for a seasonal takeover — everyday-luxury feel, our palette, mobile-friendly — that coordinates with an announcement bar."
14"Turn this brief into a creator-collab landing page launched via ShopMy — co-branded header, the creator’s hero styles, and an affiliate shop CTA — balancing their look with ours."
15"Build an on-brand FAQ/help-center page front end with collapsible sections grouped by topic, responsive and accessible, then hand it to Web Design Guidelines to check the code."
16"Create a sticky, accessible site-wide announcement bar component in MM colors with a dismiss control, ready to pair with a sale pop-up, and show me how it behaves on mobile."
17"Design and build a responsive ‘tennis necklace’ category landing page — editorial hero, the styles, and a layering-tips section — on brand and built on our design tokens."
18"Build a clean, on-brand UI mockup of a redesigned PDP — gallery, title, price, variant picker, add-to-cart, and trust badges — responsive and ready for a design review."
19"Turn last quarter’s wins into an on-brand interactive one-page ‘year in review’ microsite with animated counters in MM colors that the team can share internally."
20"Design and build a responsive, on-brand collection landing page with a filterable product grid and a sticky filter bar — everyday-luxury feel in our palette — that I can open in the browser and reuse for any collection."
← Back to Design & Web
Powered by our people. Amplified by AI. Ready-to-run playbooks for every team.