# ui.sh Brand Kit By **ui-sh** ยท Habilidades 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. - Source: https://ui.sh/skills/brand-kit - Install: `npx @uidotsh/install brand-kit --token=[token]` - Tags: branding, ui, design, tailwind, codex, open-source, agent - Pricing: unknown - Upvotes: 0 ## Features - Generates a brand direction board from a plain-English product idea prompt - Produces two site mockups plus typography and color guidance as a single image - Accepts aesthetic references and attached images as inspiration - Supports iterative prompting to steer font, color, and mood - Runs on Codex via OpenAI gpt-image-2 model - Installed via npx into any supported coding agent project - Works with Claude Code, Cursor, Codex, OpenCode, and Amp (per ui.sh agent support) --- ## Why it matters 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. ## The big picture 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. ## How it works 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. ## Zoom in 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. ## Yes, but 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." ## The bottom line 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. ## FAQ ### What is ui.sh Brand Kit? 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. ### How do I install and use Brand Kit? 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. ### Is ui.sh Brand Kit free or open source? 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. ### What is Brand Kit best suited for? 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. ### How does Brand Kit compare to extracting a brand from existing screenshots? 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. ### What are Brand Kit's main limitations? 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. --- [View on Analog](https://analoghq.ai/es/ui-sh/skills/ui-sh-brand-kit)