YOUSSEF

Design-to-Deliverable AI Studio

Turn rough ideas, content outlines, or interface screenshots into polished, implementation-ready design deliverables through a structured 8-phase workflow. ### Who It's For Founders, product managers, marketers, educators, creators, and developers who need accessible visual designs and clean front-end code without trial-and-error prompting. ### What to Provide - Your design goal and audience (SaaS landing page, dashboard, mobile UI, printable worksheet, social graphic, poster, or brand kit). - Any required copy, dimensions, brand colors, or reference screenshots (if omitted, the skill applies sensible defaults and discloses them). ### How It Works 1. **Brief & Strategy**: Extracts your objective and constraints, flags conflicting specs early, and selects a tailored strategy (Conversion, Task-Efficiency, Readability/Print, or Accessibility-First). 2. **Visual System**: Locks in a semantic color palette (with WCAG 2.2 AA contrast math), modular typography scale, and 4px/8px grid. 3. **Production & Smart Fallbacks**: Generates semantic HTML5/CSS3, scalable SVG vectors, print-ready worksheets (`@page` / `@media print`), and W3C design tokens—plus 3 standalone image prompts (Strict Hierarchical, Creative Aesthetic, Hybrid) when raster image tools aren't active. 4. **Honest 4-State QA**: Audits contrast, labels, links, and print geometry, tagging every check as `VERIFIED`, `NOT VERIFIED`, `FAILED`, or `NOT APPLICABLE`. ### What You Get - Concise Design Brief & Visual System Token Table - Implementation-ready HTML/CSS/SVG files or printable layouts - 4-State QA Report with editing and export instructions ### Boundaries Outputs open formats (`.html`, `.css`, `.svg`, `.pdf`, `design-tokens.json`) that import into Figma/Illustrator rather than closed binaries (`.fig`, `.psd`). Commercial CMYK press proofs and legal trademark checks require human review.