manalkaff/opendesign

run-opendesign

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.

لغة النص الأصلي: الإنجليزية

setup-opendesign

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.

لغة النص الأصلي: الإنجليزية

opendesign

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.

لغة النص الأصلي: الإنجليزية

create-design-system

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/<name>/ so opendesign can auto-discover it in future sessions.

لغة النص الأصلي: الإنجليزية

frontend-design

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.

لغة النص الأصلي: الإنجليزية

handoff-to-claude-code

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.

لغة النص الأصلي: الإنجليزية

interactive-prototype

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.

لغة النص الأصلي: الإنجليزية

make-a-deck

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.

لغة النص الأصلي: الإنجليزية

wireframe

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.

لغة النص الأصلي: الإنجليزية

make-tweakable

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.

لغة النص الأصلي: الإنجليزية