Design & Web skills
These skills help anyone on the team plan, build, and pressure-test great-looking work — on-brand landing pages, polished slide decks, PDP and email design reviews, and an accessibility audit — so what we ship looks like Melinda Maria and actually works for the people using it. Click any skill for its full guide with 20 Melinda Maria examples.
design-briefDesign BriefCowork & Chat
Helps you write a clear, complete creative brief before any design work starts — so the designer (human or Claude) knows the goal, the audience, the constraints, and what “done” looks like, and you don’t burn rounds guessing.
e.g. "Write a design brief for our summer Lariat-collection landing page — goal is email signups and shop-now clicks, audience is our IG followers, must feature the three hero styles from Shopify, and it has to feel ‘everyday luxury’ in MM colors."
design-flowDesign FlowCowork & Chat
Walks you through the full design workflow end to end — from brief, to concept directions, to a built draft, to review and revisions — so a non-designer always knows the next step instead of staring at a blank page.
e.g. "Run the whole design flow for our fall charms campaign — start with the brief, show me three concept directions for the landing page, build the one I pick, then take it through review before #marketing touches it."
design-reviewDesign ReviewCowork & Chat
Gives a structured, plain-English critique of a design you already have — a page, an email, a tile, a slide — covering layout, hierarchy, color, type, and whether it’s on brand, with specific, prioritized fixes rather than vague “make it pop.”
e.g. "Review this draft of our Lariat landing page — here’s the screenshot — tell me if the hierarchy guides the eye to the shop-now button, whether it’s on brand, and the top five fixes ranked by impact."
design-auditorDesign AuditorCowork & Chat
A deep, beginner-friendly design audit that checks a design against 19 rules across both Figma files and code (HTML/CSS/React/Vue/Tailwind) — covering accessibility, color contrast, spacing, states, forms, motion, and even dark patterns — and explains every finding in plain language.
e.g. "Audit our live Lariat collection page on melindamaria.com against all 19 rules — especially color contrast, accessibility, and mobile responsiveness — and give me a scored report plus before/after fixes I can hand to the developer."
design-tokensDesign TokensCowork & Chat
Turns Melinda Maria’s brand decisions — colors, fonts, spacing, sizes — into reusable “design tokens,” the single source of truth a website or app pulls from so everything stays consistent and is easy to re-theme.
e.g. "Build a Melinda Maria design-token set from our brand guide — lavender, deep plum, hot pink, IvyMode and SemplicitaPro, and our spacing scale — and give me the CSS variables to use across the onboarding hub."
web-design-guidelinesWeb Design GuidelinesCowork & Chat
Reviews the actual code behind a web page against Vercel’s Web Interface Guidelines — a respected industry checklist for accessibility and UX — and returns precise, line-by-line findings so a page meets modern best practices.
e.g. "Review the HTML and CSS of our onboarding-hub landing page against the Web Interface Guidelines and give me the findings as file:line items, prioritizing accessibility and keyboard navigation."
frontend-designFrontend DesignCowork & Chat
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.
e.g. "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."
information-architectureInformation ArchitectureCowork & Chat
Organizes content and navigation so people can find things fast — it plans the structure, page hierarchy, menus, and labels for a site or section before anyone designs a single screen.
e.g. "Plan the information architecture for a revamped melindamaria.com — how to organize collections (Lariats, huggies, charms, stacking rings, tennis necklaces), guides, and the about/gift sections — with a sitemap and clear nav labels."
revealjsReveal.js PresentationsCowork & Chat
Creates polished, professional HTML slide decks with reveal.js — themes, multi-column layouts, code highlighting, animations, and speaker notes — that open right in a browser with no software to install and no build step.
e.g. "Build a brand-pitch deck for a potential NuORDER wholesale partner — who Melinda Maria is, our bestselling collections, and why retailers love us — in MM colors with a clean ‘everyday luxury’ theme and speaker notes for each slide."
