A collection of 7 skills for designing and building frontend UI — landing pages, design systems, faithful cloning, mockup implementation, QA against a source, product research, and flow audits.
Compatible with Claude Code and OpenAI Codex.
| Skill | Description |
|---|---|
design-lead-gen-landing-page |
Use when designing and building a marketing/lead-gen landing page from scratch in code for a real brand. Covers picking an aesthetic direction, sourcing real content/assets, lead-gen funnel structure, visual craft pitfalls, and verification. |
extract-design-system-from-website |
Use when reverse-engineering a design system doc from an already-built, live website, as opposed to designing one from scratch. |
clone-live-site-as-prototype |
Use when asked to clone or faithfully recreate an existing live site/app as a runnable local frontend — not to redesign or make something "like" it. |
implement-mockup-image-as-code |
Use when a specific image, screenshot, mockup, or Figma frame is the exact chosen visual target and the job is faithful, responsive implementation. |
qa-build-against-source-design |
Use as a blocking gate before handing off coded UI that has a source visual target — a live reference site, screenshot, mockup, or design-system doc. |
audit-product-flow-screenshots |
Use when asked to audit, review, critique, or evaluate a multi-step product experience (onboarding, checkout, settings, signup funnel) rather than a single screen. |
research-user-pain-points |
Use when asked to research real user pain, UX friction, onboarding problems, or current complaints for a named product — before auditing or redesigning it. |
claude plugin add m8ig/design-skills
git clone https://github.com/m8ig/design-skills /tmp/design-skills
cp -r /tmp/design-skills/skills/* ~/.codex/skills//design-lead-gen-landing-page
/qa-build-against-source-design
/clone-live-site-as-prototype
$design-lead-gen-landing-page
$qa-build-against-source-design
Skills also activate automatically when your task matches the skill description.