Clone Design

Highlights

• Create brand guidelines for your product

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

  Sample run: the example spec passes contrast in both themes

• Write a one-page brand guide

  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.

• Use your brand colors in CSS, Tailwind, and Figma

  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.

• 

  A calm, readable look for product screens

  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.

  Creator's example: Pricing page for a notes app

• Calm a busy web UI with a small design system and a test that keeps it

  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.

• Connect Claude Code to Figma

  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.