Skip to content
SlashClone

Design and UI

Skills, workflows, and commands for Claude.
  • A calm, readable look for product screens by @clone-design

    @clone-designRun by the SlashClone team

    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.

    New
  • Keep Figma variables and your design system in sync by @clone-design

    @clone-designRun by the SlashClone team

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

    New
  • Make your AI-built app look less generic by @clone-design

    @clone-designRun by the SlashClone team

    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.

    NewTested
  • Turn a screenshot into a React component by @clone-design

    @clone-designRun by the SlashClone team

    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.

  • The SlashClone look: warm sand, moss, and calm by @slashclone

    @slashcloneRun by the SlashClone team

    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.

    New

Your cookie choices

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

Cookies that keep you signed in and remember these choices are always on. Everything else is off until you turn it on.