Create brand guidelines for your product: one shareable HTML brand book covering logo, colors, type, icons, share images, and voice. It follows your real design tokens in light and dark themes, and a checker confirms contrast in both themes, icon and image sizes, and banned copy such as em dashes. Writes only to brand/ and public/brand/.
Write a one-page brand style guide through a short interview, starting from the colors and fonts your site already uses. It covers colors, type, logo rules, voice, and spacing, checks text contrast, and adds a machine-readable tokens block that the other Brand Kit tools read.
Get your brand colors, fonts, and spacing into your code and design tools, straight from your brand guide. You get CSS variables, a Tailwind theme (v3 and v4), and a design tokens file for Figma plugins, regenerated in a second when the brand changes, plus the exact line to wire it into your project.
For founders and builders who want their app to look considered without hiring a designer: one deep blue accent, warm neutrals, a clear type scale, and generous spacing, with guidance Claude follows when it builds screens. Installs DESIGN.md and tokens as CSS variables and a Tailwind theme.
For developers whose Tailwind site feels noisy: one-off font sizes, many weights, boxes in boxes, zeros everywhere. Audits the UI, sets six text sizes, two weights, one page width, one accent, and shared controls, then adds a test that fails when someone drifts from them.
For designers and builders who want Claude to read and edit their Figma files: connects Claude Code to Figma's official remote MCP server, signs you in with Figma, and checks that Claude can see your file. Writing to the canvas works only with the remote server. Changes no files.
For designers and builders who keep their look in Figma and in code: reads a Figma file's variables (colors, sizes, corners, fonts) and updates your design system's tokens to match, or pushes your tokens back to Figma, showing every change and asking first. Works with SlashClone design system kits in design/<name>/.
For founders and builders whose app looks like every other AI-made site: find what makes it look generic and fix it with a short design checklist. Scans your pages for the usual tells (purple-to-blue gradients, default indigo, one stock font, the same big radius and shadow on everything, emoji headings, centered everything, three icon cards in a row, pale gray text, clichés like "supercharge"), then gives the app one brand color, a real type pairing, deliberate layout, and specific copy, with before and after screenshots.
Export your brand colors as a palette people can download and open anywhere, from your real design tokens. You get an SVG swatch sheet, JSON, CSS variables, and a GIMP palette that Krita and Inkscape also open, handy for briefing designers or image models with exact hex values. Reads one colors file and writes only to an out folder.
For developers and designers who have a screenshot, mockup, or Figma export and want working code: turn it into a component that fits your project instead of a pile of hard-coded hex values. Reads your stack (React, Next.js, Vue, Svelte, or Astro; Tailwind, CSS modules, shadcn/ui), maps the design to your existing tokens and components, writes an accessible, responsive component with props and sample data, then renders it next to the screenshot and fixes the differences.
Give every card, profile, and page header its own cover image when you only have a few good photos. Each item gets a stable crop of a hero image, the same on every load, from one shared file so a page of cards downloads the images once. Includes React and TypeScript examples and a checker that shows how evenly items spread across the crops.
For anyone building SlashClone screens, pages, posts, or decks with Claude: the site's own colors for light and dark, fonts, type scale, spacing, corners, shadows, logo, marks, and sand art, with the voice and rules Claude follows. Updated whenever the site's look changes.
Make on-brand social media images: a link preview (Open Graph) image, a square post, and a story, in your colors, fonts, and logo. You get editable SVG templates at the exact sizes (1200x630, 1080x1080, 1080x1920 with safe zones), with text contrast checked and the headline fitted for you.
Choose a logo or accent color that stays readable in both light and dark mode, so your brand keeps one color. For each hue it finds the shade with the best WCAG contrast against all your light and dark backgrounds at once. Prints a pass or fail table and saves every result as JSON.
We use cookies you can say no to for analytics, ad measurement, and embedded videos. Signing in works either way. You can change this any time from Cookie settings at the bottom of every page. What we use
