English
Workflow collection · 2026-10-15

Design & Frontend MCP Servers and Skills

Move from design context to implementation, browser inspection, content workflows, and motion. Start with an established tool such as Figma or Playwright, then explore the newly listed Firefox, Contentful, DatoCMS, Payload and Scenario guides.

22 guides · 12 MCP / 10 Skills

A curated workflow collection, rather than a ranking. It combines established directory entries with recent official additions, grouping tools by the job they help you do.

Choose your starting point

Your taskStart hereHow to choose
Understand a design or gather visual assetsBrowse design context and assetsChoose the source your team already uses, such as Figma, Webflow, Icons8, Lucid or Whimsical.
Inspect the implementation in a real browserBrowse browser testing and debuggingChoose the browser or test platform you need, then review its local-browser or hosted-service setup.
Build framework, content, or motion featuresBrowse the relevant Skills groupAdd workflow guidance for your application stack. Use the linked author instructions to distinguish skills-only installation from plugins with MCP access.

Design context and assets

Bring the original design source, visual references, or diagrams into the implementation workflow.

MCPBatch 2026-10-15

Webflow MCP

Connect AI clients to Webflow’s Data API for site and CMS workflows using the official hosted MCP server or a local token-based server.

webflow/mcp-serverDescription source checked 2026-10-14
Read directory guide →Author source ↗
MCPBatch 2026-10-15

Whimsical MCP

Build editable Whimsical flowcharts, wireframes and docs, or search and update existing workspace content through the official hosted server.

WhimsicalCode/mcp-server-guideDescription source checked 2026-10-14
Read directory guide →Author source ↗

Browser testing and debugging

Inspect pages, reproduce interactions, and investigate failures using the browser environment your project needs.

Frontend frameworks and documentation

Use framework guidance and documentation while building and reviewing application code.

MCPBatch 2026-10-14

Svelte MCP

Fetch current Svelte documentation, inspect generated components, and create runnable playground links with the official Svelte MCP server.

sveltejs/ai-toolsDescription source checked 2026-10-14
Read directory guide →Author source ↗

Content-driven applications

Connect content workflows to application code, previews, schemas, and migrations.

SkillBatch 2026-10-16

DatoCMS Skills

Build DatoCMS integrations with guidance for content modeling, GraphQL, Structured Text, migrations, frontend previews, and dashboard plugins.

datocms/agent-skillsDescription source checked 2026-10-15
Read directory guide →Author source ↗

Motion and creative assets

Explore author guidance for animation, video compositions, and consistent visual assets.

Questions about this collection

Where should a design-to-code workflow start?

Start from the design source your team already uses. Follow its MCP guide for access, use framework skills while implementing the application, and choose a browser tool to inspect the result.

Why include both Contentful MCP and Contentful Skills?

They are separate projects with different roles. The MCP guide covers the connection; the Skills guide covers development workflows such as API selection, previews, migrations, and custom apps.

Do I need all these tools?

Choose the entries for your current workflow and stack. The groups are independent starting points, and the search and type controls can narrow the collection.

Keep exploring

Explore the fourth batch: 29 official cloud, payment, security, and monitoring additions →

See all 25 additions in the third batch → · Full directory →