Ui 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.

v0

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

v0 generates production-ready frontend code from a prompt, a rough sketch, or a screenshot. It leans on Tailwind CSS and shadcn/ui, so the output looks polished by default and drops straight into a Next.js project.

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.

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.

shadcn/ui Skill

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

The shadcn/ui skill gives Claude Code direct context on shadcn/ui’s components and enforces consistent usage patterns across a project.

Why a skill for this

shadcn/ui ships as copyable component source rather than an installed package, so consistency depends on the model actually knowing each component’s intended API. A skill scoped to shadcn/ui keeps generated UI code matching the library’s real patterns instead of guessing.

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.