Plugin Claude Code
Open-source, skills-based version of Claude Design (claude.ai/design) for Claude Code. HTML pages, slide decks, interactive prototypes, UI kits, and brand systems.
Plugin Claude Code
Open-source, skills-based version of Claude Design (claude.ai/design) for Claude Code. HTML pages, slide decks, interactive prototypes, UI kits, and brand systems — with taste, context-matching, and anti-slop discipline.
Instructions file CodexOpenCode
Instructions for manalkaff/opendesign, covering agent instructions for this repository, repo layout, rules when editing skills, rules when editing the plugin config and style.
Instructions file
Instructions for manalkaff/opendesign, a project described as: claude.ai/design open-sourced!
Instructions file Gemini CLI
Instructions for manalkaff/opendesign, a project described as: claude.ai/design open-sourced!
Skill Claude CodeCodex
Use when the user asks to produce a reusable design system or UI kit from an existing brand, codebase, or product. Writes to ./opendesign/design-systems/ / so opendesign can auto-discover it in future sessions.
Skill Claude CodeCodex
Use when designing without an existing brand system. Pushes for a committed, distinctive aesthetic rather than generic defaults — extreme directions, bold typography, decisive color commitment.
Skill Claude CodeCodex
Use when the user asks to hand a finished design off to a developer or a coding agent for implementation in a real codebase. Produces a self-sufficient handoff folder with a spec README, zipped for download.
Skill Claude CodeCodex
Use when the user asks for a working, clickable prototype — something that behaves like a real app rather than a static mockup. React + useState/useEffect, realistic fake data, working state transitions.
Skill Claude CodeCodex
Use when the user asks for a slide presentation. Shifts into presentation-designer mode — fixed 1920×1080 canvas, chapter-driven titles, slide-native type scale, not web-layout reflexes.
Skill Claude CodeCodex
Use when the user wants in-design controls for toggling variants, swapping colors, editing copy, or flipping feature flags directly inside a design artifact. Adds a Tweaks panel and host handshake.
Skill Claude CodeCodex
Use when starting any design task — HTML pages, slide decks, interactive prototypes, UI kits, brand systems. Establishes the base designer role, workflow, and taste rules, and routes to specialist skills for the artifact type.
Skill Claude CodeCodex
Use after any OpenDesign build to serve ./opendesign/ over HTTP and give the user a clickable preview link. Handles duplicate server prevention and python/node runtime detection.
Skill Claude CodeCodex
Use when ./opendesign/index.html does not exist in the current project. Initialises the OpenDesign output folder structure, copies the viewer, and writes an empty manifest.
Skill Claude CodeCodex
Use when the user wants to explore the design space quickly — many rough ideas, not one polished direction. Low-fi, handwritten-font sketches; 3–5 structurally distinct options per idea, not recolors.