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.

Figma

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

Figma’s Dev Mode MCP server exposes a selected frame or component’s structure, styles, and metadata directly to a coding agent, from either the Figma desktop app or a hosted endpoint. It lets an agent generate frontend code grounded in the real design file instead of a screenshot or description of it.

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.

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.