ui.sh Brand Kit skill: generate a visual brand direction board with site mockups, typography, and color from a single prompt, for Codex-powered coding agents.
Qué hace
ui.sh Brand Kit is a Claude Code skill that turns a product idea prompt into a visual brand direction board: two site mockups plus typography and color guidance, generated as a single image. It requires the Codex model (OpenAI gpt-image-2) and installs via the ui.sh npx installer.
Brand direction is the hardest thing to communicate to a coding agent. Generic AI tools default to the same neutral palette and safe fonts every time. Brand Kit gives your agent a concrete visual target before a single component is written.
Brand Kit is one skill in the ui.sh suite, built by Adam Wathan (Tailwind CSS) and Steve Schoger (Refactoring UI). The premise: codify real design intuition into agent-readable prompts so the output stops looking "obviously AI-designed." Brand Kit is the entry point for that pipeline, setting visual direction before any code is written.
You invoke the skill with a plain-English product idea: /brand-kit a high end pilates studio. The skill runs on Codex, which uses OpenAI's gpt-image-2 model to generate one image containing two site mockups plus compact typography and color guidance. That image becomes the reference your agent builds from. You can steer the result with aesthetic cues ("Apple-inspired"), mood cues ("dark aesthetic"), or iterative prompts ("try again with a different font pairing") to escape the same familiar font recommendations agents default to.
Per the ui.sh docs, the skill also accepts attached images as inspiration, so you can feed it a screenshot of an existing site or a competitor's aesthetic and use that as a jumping-off point. The output is explicitly a "direction board," not a finished design system, which is the right scope for an early-stage product idea.
Brand Kit produces one image, not a structured design token file. For teams that need machine-readable hex values or typography scales wired directly into their codebase, the output requires a manual extraction step. It is also gated behind a ui.sh token, and the platform is invite-only and described by its creator as "uncomfortably early."
If you are starting a new product and want your coding agent to build UI with a coherent visual identity from day one, Brand Kit is the fastest way to establish that direction. It is a creative brief generator first, a design system last.
Características
Notas de campo
Revisado el Jun 26, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Profundiza
Independent third-party review of ui.sh by Tailkits, covering its pitch, creators (Adam Wathan & Steve Schoger), and positioning as a design toolkit for coding agents.
Tailwind Weekly newsletter covers ui.sh's architectural shift to local-first, split skill lineup—concrete update analysis from a well-known Tailwind-focused publication.
ui.sh Brand Kit is an agent skill that converts a plain-English product idea into a visual brand direction board. The output is a single generated image containing two site mockups alongside compact typography and color guidance. It is part of the ui.sh skill suite, created by Adam Wathan and Steve Schoger, the people behind Tailwind CSS and Refactoring UI.
Install it by running `npx @uidotsh/install brand-kit --token=[your-token]` in your project directory. Once installed, invoke it with a slash command: `/brand-kit [your product idea]`. You can steer the output by including aesthetic references, mood cues like 'dark aesthetic', or follow-up prompts like 'try again with a different font pairing' to get more varied results.
The available sources do not disclose specific pricing. Access requires a ui.sh invite token, and the platform is described as invite-only. The creator has called the current state 'uncomfortably early,' suggesting it is an active commercial product in limited access, but exact pricing is not published in the available sources.
Brand Kit is best for early-stage product work where no visual identity exists yet and you want to give a coding agent a concrete aesthetic target before writing any UI components. It is especially useful for quickly exploring different brand directions by iterating prompts, and works well when you are about to build a marketing site or product UI from scratch.
Brand Kit generates a brand direction forward from a product idea prompt, while a screenshot-based extraction approach (as described in the Genesys newsletter) reverse-engineers visual identity from an existing live site. Brand Kit is the right tool when nothing exists yet; screenshot-based extraction is better when a brand is already live and you want to systematize what is already there. The two approaches are complementary at different stages of a product's life.
The skill outputs a single raster image, not a structured file of design tokens, so hex values and font names must be extracted manually if you want them in your codebase. The Codex model using OpenAI's gpt-image-2 is required; no other model is supported for this skill. Access is gated behind a ui.sh invite token, and agents tend to default to familiar fonts unless you explicitly prompt for alternatives.
Una habilidad de IA que proporciona a los agentes de codificación inteligencia de diseño, reglas de razonamiento y estilos de interfaz para generar UI/UX profesional en distintas plataformas y frameworks.
Best for Arrancar un sistema de diseño a partir de la descripción de un proyecto.Una habilidad de diseño para Claude Code, Cursor y Codex que se niega a parecer generada por IA: elige una macroestructura para el encargo, aplica uno de veinte temas y ejecuta decenas de filtros anti-repetición antes de emitir el resultado.
Best for Diseñar UI que no parezca generada por IALa colección pública de Agent Skills de ejemplo para Claude de Anthropic: carpetas autocontenidas de instrucciones, scripts y recursos que abarcan tareas creativas, técnicas y empresariales, incluidas las skills de documentos que impulsan las capacidades de archivos de Claude.
Best for Aprender a crear Agent SkillsOpen-source collection of 45+ AI agent skills for marketing, CRO, SEO, copywriting, analytics, and growth, built for Claude Code, Cursor, and any Agent Skills-compatible agent.
Best for Technical marketers and founders using Claude Code, Cursor, Windsurf, or OpenAI Codex who want marketing domain knowledge baked inOpen-source PM skills marketplace: 68 AI skills and 42 workflows across 9 Claude plugins for product managers doing discovery, strategy, execution, and launch.
Best for PMs using Claude Code or Claude Cowork who want framework-driven decisions baked into daily AI workflowsA catalog of repeatable AI agent workflows with built-in feedback loops, plus an installable skill for finding, adapting, and designing your own loops.
Best for Teams using Codex, Cursor, or Claude Code who want agents to iterate reliably instead of making one-shot guesses