Agent Plugins Marketplace
← All plugins

web-design-plugin

v1.6.0

End-to-end web design plugin for Codex, from design docs to implementation and visual iteration. Requires design-plugin and media-plugin.

Codex4 Skills1 MCP serverstdio

By Lukas KellersteinLicense: UNLICENSED1 GitHub starsUpdated last week

Directory evidence

Runtimes
Codex
Parsed components
5 skill or MCP entries
Source updated
Sep 14, 2026
Manifest status
Canonical path parsed

The directory validates manifest shape and source location. It does not execute the plugin or provide a security endorsement. Review the indexing methodology →

Install web-design-plugin for Codex

Installs for the current user
codex plugin marketplace add lukaskellerstein/codex-my-marketplace
codex plugin marketplace upgrade codex-my-marketplace
codex plugin add web-design-plugin@codex-my-marketplace

Paste and run these commands in a terminal with Codex. They add and refresh the codex-my-marketplace catalog, then install this plugin.

Compatibility: the page URL and API slug “web-design-plugin” remain stable.

  • Codex: web-design-plugin@agent-plugin-marketplace → web-design-plugin@codex-my-marketplace

The installer fetches third-party code from the source repository shown on this page. This directory validates manifest structure and source location, but does not perform a security audit; review the manifest, components, and source before installing.

Get the source manually
git clone https://github.com/lukaskellerstein/codex-my-marketplace

Clone the source repository, then follow its setup instructions to add the plugin to a compatible client. The plugin root is plugins/web-design-plugin/.

Plugin files

plugins/web-design-plugin/
├── .codex-plugin/plugin.json
├── skills/animation-system/SKILL.md
├── skills/css-architecture/SKILL.md
├── skills/page-architecture/SKILL.md
├── skills/variation/SKILL.md
└── .mcp.json

Included Skills4

animation-systemskills/animation-system/SKILL.md

CSS and GSAP animation patterns for websites — ScrollTrigger, timelines, stagger effects, page transitions, micro-interactions, and performance optimization. Use when implementing animations for web design projects, when the user wants scroll-triggered animations, page load reveals, GSAP integration with React/Vite, animation planning, performance best practices, or when a design document specifies animations for sections.

css-architectureskills/css-architecture/SKILL.md

Project-level CSS architecture for React/Vite websites — Tailwind CSS configuration with design tokens, shadcn/ui theming, CSS custom properties, and responsive strategy. Tailwind-first approach. Use when setting up CSS for a new React/Vite project, mapping a styleguide to Tailwind config, configuring shadcn/ui theme, defining responsive breakpoints, creating global styles, or when a design document needs a CSS architecture section.

page-architectureskills/page-architecture/SKILL.md

Information architecture and content planning for websites — page structure, section definitions, content hierarchy, text content, and mock data strategy. Use when planning what pages a website needs, what sections go on each page, what content fills them, when the user asks "what pages/sections should my website have?", needs mock data for a prototype, or needs text content (headlines, body, CTAs) for sections.

variationskills/variation/SKILL.md

Generate alternative design variations from an existing web design — systematically vary colors, typography, animation intensity, and spacing density while preserving page structure and content. Use when the user wants multiple visual options from a base design, says "generate variations" or "try different styles", wants to compare visual approaches side-by-side, or as a post-workflow option after completing a web design.

MCP servers1

webdesign-playwrightstdio
command
npx
args
@playwright/mcp@latest --headless

Plugin manifests1

plugins/web-design-plugin/.codex-plugin/plugin.json
{
  "name": "web-design-plugin",
  "version": "1.6.0",
  "description": "End-to-end web design plugin for Codex, from design docs to implementation and visual iteration. Requires design-plugin and media-plugin.",
  "author": {
    "name": "Lukas Kellerstein",
    "url": "https://github.com/lukaskellerstein"
  },
  "homepage": "https://github.com/lukaskellerstein/codex-my-marketplace",
  "repository": "https://github.com/lukaskellerstein/codex-my-marketplace",
  "license": "UNLICENSED",
  "keywords": [
    "codex",
    "web-design",
    "react",
    "vite",
    "frontend"
  ],
  "skills": "./skills/",
  "mcpServers": "./.mcp.json",
  "interface": {
    "displayName": "Web Design Plugin",
    "shortDescription": "Design and build websites with an anti-slop workflow.",
    "longDescription": "Packages the Codex web design workflow with design documentation, scaffold generation, parallel page building, and visual fix passes. Install design-plugin and media-plugin alongside it.",
    "developerName": "Lukas Kellerstein",
    "category": "Web Development",
    "capabilities": [
      "Read",
      "Write",
      "Interactive"
    ],
    "defaultPrompt": [
      "Design and build a landing page from this brief.",
      "Generate multiple website directions from this spec.",
      "Create a React and Vite marketing site with strong motion."
    ],
    "brandColor": "#0891B2"
  }
}

For maintainers

If you maintain this plugin, link to this source-backed listing from your README so users can review its manifest and indexed components.

[web-design-plugin on Agent Plugins Marketplace](https://pluginsmp.com/plugins/web-design-plugin)