Design on Vibe Coding

Canvas Design

Mon, 01 Jan 0001 00:00:00 +0000

The Canvas Design skill packages visual design judgment: spacing systems, typographic hierarchy, color restraint, and layout composition — the kind of taste that’s easy to describe but hard to consistently apply prompt by prompt.

Brand Guidelines

Mon, 01 Jan 0001 00:00:00 +0000

The Brand Guidelines skill encodes a specific brand’s rules — color palette, typography, tone of voice, logo usage — so an agent’s output stays consistent with that identity across many separate requests.

Algorithmic Art

Mon, 01 Jan 0001 00:00:00 +0000

The Algorithmic Art skill packages a two-step process for computational art: first drafting a short “algorithmic philosophy” — a named aesthetic movement with its own manifesto — then expressing that philosophy as a p5.js sketch using noise fields, particles, and seeded randomness. It outputs a philosophy doc, an interactive HTML viewer, and the generative JS itself.

Frontend Design

Mon, 01 Jan 0001 00:00:00 +0000

The Frontend Design skill packages a design-lead mindset for building web UI: pin down the subject and its audience, build a compact token system — palette, type pairing, layout concept, one signature element — then critique that plan against known AI-generic defaults before writing any code.

Slack GIF Creator

Mon, 01 Jan 0001 00:00:00 +0000

Slack GIF Creator packages Slack’s specific GIF constraints — 128×128 for emoji, 480×480 for messages, 10–30fps, 48–128 colors, sub-3-second emoji duration — along with a frame-building workflow and validation tools, so requests like “make a GIF of X doing Y for Slack” produce a file that actually fits Slack’s limits.

Theme Factory

Mon, 01 Jan 0001 00:00:00 +0000

Theme Factory packages a set of curated color-palette-and-font-pairing themes — Ocean Depths, Sunset Boulevard, Modern Minimalist, and others — shown via a visual showcase, that can be applied to slide decks, documents, or HTML artifacts, or used as a starting point for generating a new theme on the fly.

Web Asset Generator

Mon, 01 Jan 0001 00:00:00 +0000

The Web Asset Generator skill produces web assets like favicons, app icons, and social media images in the sizes and formats each platform actually expects.

Why a skill for this

Every platform — favicons, Open Graph images, app store icons — has its own required dimensions and formats, which is tedious to track by hand. A skill that already knows those specs saves re-exporting assets that come out the wrong size.

anydesign

Mon, 01 Jan 0001 00:00:00 +0000

anydesign analyzes any image, URL, or Figma file and produces a structured design.md capturing the full design system and component inventory, portable to other AI builders.

Why a skill for this

Design systems usually live implicitly in a Figma file or an existing site rather than as a portable spec. Extracting that into a structured document means the design system can travel with the project instead of staying locked in one tool.

Frontend Slides

Mon, 01 Jan 0001 00:00:00 +0000

Frontend Slides creates animation-rich HTML presentations from scratch, or converts an existing PowerPoint deck into one.

Why a skill for this

HTML/CSS presentations can do things static slide decks can’t — real animation, interactivity, embedded live content — but building one from scratch is its own frontend project. This skill packages that so the format doesn’t have to be reinvented per deck.

Rampstack Brand Build Skills

Mon, 01 Jan 0001 00:00:00 +0000

This 59-skill library covers a website’s full lifecycle — brand, design, content, SEO, development, ops, and growth — including a dedicated SEO audit suite.

Why a skill for this

Building and running a marketing site touches many disciplines that don’t usually live in one toolkit. Bundling them together keeps brand, content, and technical SEO work consistent instead of drifting apart across separate tools.

Figma Design-to-Code Skill

Mon, 01 Jan 0001 00:00:00 +0000

This curated Codex skill bundle wires up Figma — Code Connect, Create Design System Rules, and Generate Design — so Codex can work directly from real design files.

Why a skill for this

Turning a Figma file into accurate code depends on knowing Figma’s specific APIs, like Code Connect and design tokens, rather than guessing from a screenshot. Packaging that as a skill keeps the translation accurate.