design-studio

What problem does it solve?

Plan, create, and verify design artifacts in HTML, CSS, SVG, and JavaScript with a disciplined design-studio workflow. It covers greenfield work, brand-aware design systems, and deck-level design tasks, guiding discovery, context gathering, skeleton delivery, iteration, and final handoff checks. It enforces accessibility, hierarchy, interaction states, polish, and system thinking through progressive references, constraints, and validation.

Core Features & Use Cases

• End-to-end artifact production in HTML/CSS/SVG/JS, with a consistent design posture and delivery checks.
• Progressive disclosure of context via references/ to guide decisions without verbose prompts.
• Structured workflow: discovery, context gathering, skeleton delivery, multi-pass iteration, and formal handoff readiness.
• Brand-aware and greenfield modes, including support for design-system extraction and multi-format design (screens, decks, prototypes, audits).
• Accessibility, hierarchy, interaction states, and polish as integrated verification steps before handoff.

Quick Start

Create a skeleton design artifact, attach relevant references for context, iterate through guided passes, and deliver a polished design artifact ready for handoff.