Claude skillsfor prototyping & design-to-code

The 7 skills and connectors we'd install first, in order. Hand-picked from designers tools reviewed on SkillHub.

Task

Prototyping & design-to-code

7 picks · install in this order

Web Artifacts BuilderSkill
Build complex HTML artifacts with React and Tailwind.
Magic MCP (21st.dev)Connects to Magic
AI-driven UI component generation with a modern React/Tailwind component library.
Taste SkillSkill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated.
Reference Design ContractSkill
Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff.
Impeccable Design PolishSkill
Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.
Design To Code CheckSkill
Compares a component or screen's design spec with its code and logs each gap as a build error or spec gap.
Design SprintSkill
Use when asked to "run a design sprint", "5-day sprint", "prototype in a week", "test ideas before building", or "Jake Knapp sprint". Helps teams go from problem to tested prototype in five days.

02Workflow recipes

Go from blank slide to a polished, on-brand deck without leaving Claude. Five tools, one chain.

Take a single Figma frame and ship the full asset kit a launch needs — copy, code, social, the lot.

Go from a stack of interview notes to a short deck stakeholders actually read, with the evidence attached.

We're actively curating this list. If your skill or MCP server belongs here, submit it and we'll review within a few days.