skills.rest
MADTeacher
MADTeacherCOMMUNITY
Explore all skills by this author →
GitHub

design-studio

Plan, create, and verify HTML, CSS, SVG, and JavaScript design artifacts.

Updated Apr 26, 2026
Search Tags:#workflow#design#html#css#prototype#ux
One-click install
npx skills add https://github.com/MADTeacher/skills --skill design-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-studio
Source: https://github.com/MADTeacher/skills/tree/main/design-studio
Command: npx skills add https://github.com/MADTeacher/skills --skill design-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about design-studio

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan and build HTML CSS design prototypes with a structured workflow?▼

Build HTML, CSS, SVG, and JavaScript design prototypes using a structured workflow that covers discovery, skeleton delivery, multi-pass iteration, and formal handoff checks to ensure polished artifacts.

What is the best way to create accessible HTML CSS designs from scratch?▼

Create accessible HTML and CSS designs from scratch by enforcing accessibility, hierarchy, and interaction states through progressive references and validation steps before final handoff.

How do I extract and apply a brand-aware design system in HTML and CSS?▼

Extract and apply a brand-aware design system in HTML and CSS by gathering context, delivering skeleton screens, and iterating through guided passes that maintain brand consistency and system thinking.

Can I generate design audits and prototypes using HTML CSS and JavaScript?▼

Generate design audits, screens, and prototypes using HTML, CSS, and JavaScript with a design-studio workflow that verifies polish, interaction states, and accessibility readiness before delivery.

How do I verify accessibility and interaction states before handing off design artifacts?▼

Verify accessibility and interaction states before handoff by running integrated validation checks that enforce hierarchy, polish, and system thinking across your HTML, CSS, SVG, and JavaScript artifacts.

Does this design workflow support greenfield projects and new design systems?▼

This design workflow supports greenfield projects and new design systems by guiding context gathering, skeleton delivery, and multi-pass iteration to produce verified, handoff-ready artifacts.

Related Skills

Explore More Design & Creative Skills→
SL-A-SHSL-A-SH

teach-impeccable

Scan repository files and write a Design Context to impeccable.md.

Community
Intermediate
AaronZhou-THUAaronZhou-THU

design

Create HTML/CSS/JS mocks, style guides, and design documentation for web interfaces.

Community
Advanced
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate
naopensedoit2-designnaopensedoit2-design

mockup-sandbox

Render live web UI component previews in canvas iframes via Vite.

Community
Advanced