MCP App StoreMCP App Store
from open-design62,284
Generates design-first images for website sections, deeply analyzes them, then implements responsive frontend that closely matches the visual references.
This skill enforces an image-first workflow for high-fidelity website design and implementation. It generates clear, section-level design images, performs deep visual analysis (typography, spacing, colors, component rhythm), and uses those references to implement responsive frontend code. The goal is faithful, implementation-friendly translations of art-directed visuals rather than generic template outputs.
Use this skill when visual quality matters: hero sections, landing pages, marketing sites, editorial pages, product pages, and redesigns where readable, extractable design references are required before coding. It's ideal for workflows where images can be generated and used as the primary source of truth.
Best suited for agents with image-generation and frontend-implementation capabilities (Codex, Claude Code, Cursor, Copilot-style coding agents, and other image-aware design agents).
A lengthy design-to-code prompting skill for Codex that instructs an AI to generate website section images first, deeply analyze them, then implement frontend to match. The SKILL.md is extremely detailed with 38 sections covering image-first workflow rules, anti-slop guidelines, and extraction discipline. No scripts bundled — purely a prompting/instruction skill. No security concerns beyond the upstream reference in frontmatter. Well-written but narrowly targeted at Codex image-generation workflows and extremely verbose.
Pure instruction/prompting skill with no executable code. Security is clean — no credentials, no network calls, no destructive commands. The 'od.upstream' field references an external repo but that's just attribution. Quality is good — the instructions are detailed and coherent — but there's significant repetition (anti-slop rules stated 3+ times, image-first rule repeated throughout). Architecture is mediocre: frontmatter is present and valid, but there are no scripts, no references/ directory, no output contracts, and the body is a monolithic 38-section prompt that would benefit from progressive disclosure or splitting into references/. Usefulness is limited: this only helps in Codex or similar image-gen environments for website design tasks; the audience is narrow and the skill is essentially a very long system prompt rather than an actionable tool.
Clerk Vue Patterns
Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.
Colorize (Strategic UI Color)
Introduce purposeful color into monochromatic or dull interfaces to improve hierarchy, meaning, and emotional warmth while preserving accessibility.
React Development Expert
Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.
ClearShot — Screenshot UI Analysis
Structured UI screenshot analysis using a 5×5 spatial grid, full element inventory, and design system extraction. Escalates to full implementation blueprint whe
Colorize — Strategic UI Color Introduction
Introduce purposeful color to monochromatic interfaces to improve hierarchy, meaning, and visual engagement while preserving accessibility.
DAUB UI
A drop-in CSS+JS component library with 70+ carefully designed components and 20 theme families for fast, consistent UI building.
Framer Plugin Development Guide
Expert reference for building, debugging, and publishing Framer plugins: scaffolding, modes, ManagedCollection APIs, build tooling, and marketplace rules.
Makepad Event/Action
Event and action handling patterns for Makepad widgets — guides handling Mouse/Touch/Keyboard events, Hit detection, action emission and parent capture.
