design▌

Build robust, scalable design systems that ensure visual consistency and exceptional user experiences.

These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.

Ensure that ideas become designs, designs are reviewed, and only validated designs reach implementation.

Category: provider

A structured approach to designing large-scale distributed systems. Apply these principles when architecting new services, reviewing system designs, estimating capacity, or preparing for system design discussions.

Production-grade HTML/CSS built with BEM, semantic tokens, mobile-first responsive design, and optional dark mode. \n \n Enforces BEM naming conventions, CSS custom properties for all design values, and semantic HTML structure to ensure maintainability and consistency \n Mobile-first workflow: design for 375px, enhance upward with four breakpoints (640px, 768px, 1024px, 1440px); includes hamburger navigation and 44x44px touch targets \n Optional three-state dark mode via JavaScript class toggle

Foundational design principles for creating products that are intuitive, discoverable, and understandable. The "bible of UX" — applicable to physical products, software, and any human-designed system.

Framework for tackling software complexity by modeling code around the business domain. Based on a fundamental truth: the greatest risk in software is not technical failure -- it is building a model that does not reflect how the business actually works.

Design UI pages in Subframe with AI-generated variations, then implement with code. \n \n Create new pages or redesign existing UI with multiple design variations to explore options before committing to code \n Use design_page for new designs and edit_page for targeted changes to existing Subframe pages \n Generates production-ready React/Tailwind code that matches your design system; refine visually in the Subframe editor before implementation \n Update project theme globally with edit_theme to

Structured dialogue tool for collaboratively designing features, APIs, and architecture through phased information gathering and validation. \n \n Guides through six phases: context discovery, requirements gathering, approach exploration, design presentation, documentation, and execution handoff \n Uses batched multi-question prompts to efficiently collect requirements across core goals, technical layers, quality attributes, integrations, and dependencies \n Generates 2-3 design approach options