How to AI — Design

Plugin howtoai-design from marketplace howtoai in rubenhassid1/howtoai-skills. Commands read from the repo's manifest — 12 days ago.

Skills (12)

• banners

  Designs banner and cover graphics — LinkedIn banners, X headers, YouTube channel art, event covers, OG images — as pixel-exact HTML at each surface's real dimensions and safe zones. brand: How to AI by Ruben Hassid protocol: howtoai-v1 source: nextlevelbuilder/ui-ux-pro-max-skill (banner-design) sou

• brand-kit

  Builds a brand identity system — color roles, type pairing, logo direction, reusable brand tokens other skills consume. Use for "brand kit", "brand identity", "my brand colors", "brand guidelines", or "make my stuff look consistent". brand: How to AI by Ruben Hassid protocol: howtoai-v1 source: Leon

• design-critique

  Reviews a design — screenshot, URL, Figma export, or built UI — with a severity-ordered verdict on visual quality, usability, and accessibility in one pass. Use for "critique my design", "design review", "is this accessible", "roast my landing page". brand: How to AI by Ruben Hassid protocol: howtoa

• design-styles

  Picks a named visual style and executes it faithfully — brutalist, neobrutalist, minimalist, soft, glassmorphic, luxury, playful, and more. Use when asked to "make it brutalist", "make it feel soft/premium", or "what style should this be". brand: How to AI by Ruben Hassid protocol: howtoai-v1 source

• design-system

  Builds or extracts a reusable design system: token architecture (primitive, semantic, component) plus a documented component set. Use for "design system", "design tokens", or "component library". brand: How to AI by Ruben Hassid protocol: howtoai-v1 source: nextlevelbuilder/ui-ux-pro-max-skill (desi

• frontend-taste

  Aesthetic judgment for any web UI being built, replacing AI-default habits with deliberate design decisions. Use while building frontend interfaces, or when asked to make it look good, look less generic, or not look AI-generated. brand: How to AI by Ruben Hassid protocol: howtoai-v1 source: Leonxlnx

• image-to-code

  Converts a design image — screenshot, mockup, Figma export, or sketch — into faithful working code. Use when a user attaches a picture of a UI and says "build this design", "turn this screenshot into code", "code this mockup", or "clone this UI". brand: How to AI by Ruben Hassid protocol: howtoai-v1

• interface-design

  Makes the concrete UI calls while building an interface — layout pattern, palette, font pairing, chart type, spacing numbers. Use for "design this dashboard", "which layout", or "palette for my app". brand: How to AI by Ruben Hassid protocol: howtoai-v1 source: nextlevelbuilder/ui-ux-pro-max-skill (

• motion

  Adds purposeful motion to web UIs — micro-interactions, view transitions, entrance choreography, scroll effects, loading states. Use for "add animations", "hover effects", or "it feels static". brand: How to AI by Ruben Hassid protocol: howtoai-v1 source: original source-sha: none source-license: no

• redesign

  Modernizes an existing site, page, or app — from its code, URL, or screenshots — without breaking what already works. Use when a user says "redesign my site", "modernize this UI", "this looks dated", or wants a facelift for a live product. brand: How to AI by Ruben Hassid protocol: howtoai-v1 source

• slides

  Designs presentations and slide decks: narrative outline, slide layouts, data slides, and visual treatment. Use when asked to make a deck, design a pitch deck, build slides for a talk or keynote, or structure and polish any presentation. brand: How to AI by Ruben Hassid protocol: howtoai-v1 source:

• web-artifacts

  Engineers single-file web artifacts — interactive tools, calculators, quizzes, games, mini-apps — that survive sandboxes blocking network and storage. Use for "build an artifact" or a one-file app. brand: How to AI by Ruben Hassid protocol: howtoai-v1 source: anthropics/skills (web-artifacts-builder

Similar plugins